
:root[data-theme=light]{color-scheme:light;
--lime:#3F5500;--olive:#E6EDCC;--tile:#14190A;
--bg:#F5F7EC;--bg-deep:#EEF1E2;--surface:#FFFFFF;--surface-hi:#FAFBF5;--surface-deep:#F0F3E6;--raised:#FFFFFF;--inset:#F0F3E6;--selected:#EBF2D3;--olive-deep:#E6EDCC;
--line:#D6D8CC;--line-soft:#E3E5DA;--line-strong:#BFC3B1;--line-hover:#9EA48C;
--ink:#14190A;--ink-soft:#2C3220;--muted:#535749;--dim:#5C6151;--danger:#B4281C;--info:#2F6A82;
--accent:#3F5500;--accent-fill:#C5F700;--accent-hover:#334500;--accent-edge:#8FAE1F;--accent-quiet:#3F55001F;--on-accent:#0C1500;--focus:#3F5500;
--hover-wash:#14190A08;--scrim:#F5F7EC99;--grain-opacity:.18;
--glow-top:radial-gradient(1100px 520px at 18% -8%,#C5F7002E,transparent 62%);--glow-side:radial-gradient(700px 600px at 100% 30%,#E6EDCC80,transparent 70%);
--card-fill:linear-gradient(180deg,#FFFFFF 0%,#FAFBF5 46%);--card-sheen:linear-gradient(180deg,#FFFFFF,transparent);
--shadow-tile:0 0 0 1px #14190A14,0 4px 12px #14190A14;
--shadow-card:0 1px 2px #14190A14,0 10px 28px #14190A0F;
--shadow-raised:0 2px 4px #14190A1A,0 16px 40px #14190A1A;
--lip-neutral:inset 0 -2px 0 #14190A14;--lip-accent:inset 0 -3px 0 #2A3900,0 6px 18px #3F550026}
:root{--info:#8CC7DD}
[data-theme=light] .network-dot,[data-theme=light] .live-label.ready:before{background:#C5F700;box-shadow:0 0 0 1px #3F5500}
[data-theme=light] .usd-disc{background:#E6EDCC;color:#3F5500}
.logo-on-light{display:none!important}
[data-theme=light] .logo-on-light{display:block!important}
[data-theme=light] image.logo-on-light{display:inline!important}
[data-theme=light] .logo-on-dark{display:none!important}
.theme-anim,.theme-anim *{transition:background-color 260ms var(--ease-out),border-color 260ms var(--ease-out),color 260ms var(--ease-out)!important}


.theme-toggle{width:44px;height:44px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);cursor:pointer;padding:0}
.theme-toggle:hover{border-color:var(--line-hover)}
.theme-toggle svg{width:20px;height:20px;overflow:visible}
.theme-toggle .cut{transform:translate(6px,-6px);transition:transform 260ms var(--ease-out)}
.theme-toggle .core{transform-origin:12px 12px;transition:transform 260ms var(--ease-out)}
.theme-toggle .rays{transform-origin:12px 12px;opacity:0;transform:rotate(-45deg) scale(.6);transition:transform 260ms var(--ease-out),opacity 260ms var(--ease-out)}
.theme-toggle[aria-pressed=true] .cut{transform:translate(14px,-14px)}
.theme-toggle[aria-pressed=true] .core{transform:scale(.55)}
.theme-toggle[aria-pressed=true] .rays{opacity:1;transform:none}
.app-header .theme-toggle{width:40px;height:40px}
:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-offset)}


.site-header nav a:first-child{display:revert}
@media (max-width:720px){.site-header nav a[href="#/borrow/compare"],.site-header nav a[href="#/borrow/swap"]{display:none}}
@media (max-width:430px){.site-header{gap:10px}.site-header nav{gap:12px}.site-header nav a{font-size:14px}.site-header .button.small{padding:9px 11px}}


.protocols-section{padding:20px 0 64px}
.protocols-section h2{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0 0 22px}
.protocol-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.protocol-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px;background:var(--card-fill);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.protocol-card.featured{grid-column:span 2}
.protocol-card h3{margin:0;font-size:18px;font-weight:700}
.protocol-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.6;flex:1}
.protocol-link{color:var(--ink);font-size:14px;text-decoration-color:var(--accent)}
.protocol-tag{margin-top:auto;font-size:14px;color:var(--muted);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 9px}
.g6-mono,.g6-coin{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:var(--r-tile);background:var(--olive);color:var(--lime);border:1px solid var(--accent-edge);font:800 16px/1 var(--display)}
.g6-coin{width:32px;height:32px;border-radius:50%;font-size:12px;letter-spacing:-.02em}
.g6-coin[data-len="1"]{font-size:16px}
.source-line{margin:18px 0 0;font-size:14px;color:var(--muted)}
.source-line a{color:var(--ink)}
@media (max-width:640px){.protocol-card.featured{grid-column:auto}.protocol-grid{grid-template-columns:1fr}}


.guide-flow{margin:0 0 28px}
.flow{display:block;width:100%;height:auto}
.flow-tall{display:none;max-width:360px;margin:auto}
@media (max-width:700px){.flow-wide{display:none}.flow-tall{display:block}}
.guide-steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;max-width:1100px}
.guide-steps li{counter-increment:s;padding:20px;background:var(--card-fill);border:1px solid var(--line);border-radius:var(--r-card)}
.guide-steps li:before{content:counter(s);display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:var(--r-xs);background:var(--olive);color:var(--lime);font:800 14px/1 var(--display);margin-bottom:12px}
.guide-steps h2{font-size:16px;margin:0 0 6px;font-weight:700}
.guide-steps p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}


.f-frame{fill:var(--surface);stroke:var(--line)}
.f-box{fill:var(--surface-hi);stroke:var(--line-strong);stroke-width:1.5}
.f-lit{fill:none;stroke:var(--accent);stroke-width:2.5}
.f-name{fill:var(--ink);font:600 16px var(--sans)}
.f-letter{fill:var(--ink);font:800 20px var(--display)}
.f-dotw{fill:var(--accent)}
.f-track{fill:var(--line-strong)}
.f-run{fill:var(--accent)}
.f-branch{fill:none;stroke:var(--line-strong);stroke-width:2}
.f-branch-lit{fill:none;stroke:var(--accent);stroke-width:2.5}
.f-dot{fill:var(--accent)}
.f-bar{fill:var(--line)}
.f-fill{fill:var(--accent)}
.f-on,.f-ring,.f-branch-lit,.f-card .f-lit,.f-run{opacity:1}
.f-run1{transform-box:fill-box;transform-origin:left center}
.f-run1v{transform-box:fill-box;transform-origin:center top}
.f-fill-wrap .f-fill{transform-box:fill-box;transform-origin:left center}
@media (prefers-reduced-motion:no-preference){
 .flow *{animation-duration:2.8s;animation-iteration-count:infinite;animation-timing-function:linear}
 .f-on{animation-name:f-wallet}
 .f-run1,.f-run1v{animation-name:f-run}
 .f-run1v{animation-name:f-runv}
 .f-ring{animation-name:f-ring}
 .f-branch-lit{animation-name:f-branch}
 .f-branch-lit.f-best{animation-name:f-best}
 .f-travel .f-dot{animation-name:f-travel}
 .f-travel-v .f-dot{animation-name:f-travelv}
 .f-card .f-lit{animation-name:f-dim}
 .f-card-best .f-lit{animation-name:f-pick}
 .f-fill{animation-name:f-fill}
}
@keyframes f-wallet{0%{opacity:0}12%,86%{opacity:1}99%,100%{opacity:0}}
@keyframes f-run{0%,8%{transform:scaleX(0)}28%,86%{transform:scaleX(1);opacity:1}99%,100%{transform:scaleX(1);opacity:0}}
@keyframes f-runv{0%,8%{transform:scaleY(0)}28%,86%{transform:scaleY(1);opacity:1}99%,100%{transform:scaleY(1);opacity:0}}
@keyframes f-ring{0%,26%{opacity:0}31%{opacity:1}36%,86%{opacity:1}99%,100%{opacity:0}}
@keyframes f-branch{0%,34%{opacity:0}44%{opacity:.9}54%,100%{opacity:0}}
@keyframes f-best{0%,34%{opacity:0}54%,86%{opacity:1}99%,100%{opacity:0}}
@keyframes f-travel{0%,40%{transform:translateX(0);opacity:0}42%{opacity:1}60%{transform:translateX(254px);opacity:1}64%,100%{transform:translateX(254px);opacity:0}}
@keyframes f-travelv{0%,40%{transform:translateY(0);opacity:0}42%{opacity:1}60%{transform:translateY(102px);opacity:1}64%,100%{transform:translateY(102px);opacity:0}}
@keyframes f-dim{0%,52%{opacity:0}100%{opacity:0}}
@keyframes f-pick{0%,52%{opacity:0}66%,86%{opacity:1}99%,100%{opacity:0}}
@keyframes f-fill{0%,62%{transform:scaleX(0)}84%,86%{transform:scaleX(1);opacity:1}99%,100%{transform:scaleX(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.f-card:not(.f-card-best) .f-lit,.f-branch-lit:not(.f-best),.f-dot{opacity:0}}
.f-card:not(.f-card-best) .f-lit,.f-branch-lit:not(.f-best){opacity:0}


.compare-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 24px;margin:0 0 18px}
.g6-field{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}
.g6-field select{min-height:44px;min-width:220px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);padding:0 12px;font:500 16px var(--sans)}
.g6-range-row{display:flex;align-items:center;gap:12px}
.g6-range input{width:220px;accent-color:var(--accent);min-height:44px}
.g6-range output{min-width:44px;color:var(--ink);font:600 16px var(--mono)}
.g6-switch{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;color:var(--ink);cursor:pointer}
.g6-switch input{width:20px;height:20px;accent-color:var(--accent);margin:0}
.g6-table-wrap{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);overflow:hidden}
.g6-table{width:100%;border-collapse:collapse;font-size:14px}
.g6-table th{text-align:left;font-size:14px;font-weight:600;color:var(--muted);padding:12px 16px;border-bottom:1px solid var(--line)}
.g6-table td{padding:12px 16px;border-bottom:1px solid var(--line-soft);color:var(--ink)}
.g6-table tr:last-child td{border-bottom:0}
.g6-table .num{font-family:var(--mono);font-size:14px;white-space:nowrap}
.g6-table tr.unlisted td{background:var(--inset)}
.g6-market{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-height:44px}
.g6-market:hover strong{text-decoration:underline}
.g6-market span{display:flex;flex-direction:column;line-height:1.3}
.g6-market small{color:var(--muted);font-size:14px}
.g6-market .g6-tag{font-size:14px}
.g6-empty{text-align:center;color:var(--muted);padding:28px!important}
.g6-risk,.g6-region,.swap-note{font-size:14px;color:var(--muted);margin:14px 0 0;max-width:70ch}
.swap-panel{max-width:460px;display:flex;flex-direction:column;gap:14px;padding:22px;background:var(--card-fill);border:1px solid var(--line);border-radius:var(--r-card)}
.swap-panel .g6-field select{width:100%}
.swap-panel p{margin:0}
@media (max-width:760px){
 .g6-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .g6-table,.g6-table tbody,.g6-table tr,.g6-table td{display:block;width:auto}
 .g6-table tr{border-bottom:1px solid var(--line);padding:6px 0}
 .g6-table td{display:flex;justify-content:space-between;gap:12px;border:0;padding:6px 16px}
 .g6-table td[data-label]:not([data-label=Market]):before{content:attr(data-label);color:var(--muted);font:500 14px var(--sans)}
 .g6-field select,.g6-range input{min-width:0;width:100%}
 .compare-controls>*{flex:1 1 100%}
}
[data-g6view] #markets-view{display:none!important}
[data-g6view=compare] #compare-view,[data-g6view=swap] #swap-view{display:block!important}
#compare-rows .g6-empty{height:420px}
