:root {
    font-family:Arial,"Liberation Sans",ui-sans-serif,system-ui,sans-serif;
    color:#e9ece5;
    background:#101d1b;
    font-size:15px;
    line-height:1.55;
    --muted:#a5b7ae;
    --line:#31443d;
    --accent:#d9ed9e;
    --card:#182a24;
}
* {
    box-sizing:border-box;
}
body {
    margin:0;
}
header {
    padding:22px 5%;
    border-bottom:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
}
.brand {
    font-size:26px;
    font-weight:750;
    color:var(--accent);
    text-decoration:none;
    white-space:nowrap;
}
.brand span {
    font-size:10px;
    letter-spacing:.16em;
    color:var(--muted);
    margin-left:15px;
}
.header-right {
    display:flex;
    align-items:center;
    gap:22px;
}
main {
    max-width:1240px;
    padding:0 32px;
    margin:auto;
}
h1 {
    font-size:clamp(34px,4.5vw,56px);
    line-height:1.1;
    font-weight:550;
    letter-spacing:-.045em;
    margin:10px 0 20px;
}
h2,h3 {
    font-weight:550;
    letter-spacing:-.02em;
    margin:0 0 18px;
}
h2 {
    font-size:25px;
}
h3 {
    font-size:21px;
}
p {
    color:var(--muted);
}
.intro {
    display:grid;
    grid-template-columns:1.6fr 1fr;
    gap:70px;
    align-items:center;
    padding:48px 0 32px;
}
.intro aside {
    border-left:2px solid #a9bd7f;
    padding-left:24px;
    max-width:380px;
}
.intro aside strong {
    color:var(--accent);
}
.intro aside p {
    font-size:13px;
}
.eyebrow {
    font-size:11px;
    letter-spacing:.16em;
    font-weight:650;
    color:var(--accent);
}
.metrics {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border:1px solid var(--line);
    border-radius:12px;
    margin-bottom:32px;
    overflow:hidden;
}
.metrics article {
    padding:22px;
    border-right:1px solid var(--line);
}
.metrics article:last-child {
    border:0;
}
.metrics span,.metrics small {
    display:block;
    color:var(--muted);
    font-size:12px;
}
.metrics strong {
    display:block;
    font-size:27px;
    font-weight:500;
    margin:7px 0;
    white-space:nowrap;
    overflow-x:auto;
    font-variant-numeric:tabular-nums;
}
nav {
    display:flex;
    gap:8px;
    border-bottom:1px solid var(--line);
    margin-bottom:28px;
    padding-bottom:12px;
    overflow-x:auto;
}
button {
    background:#243d32;
    color:#ebf0e6;
    border:1px solid #486152;
    border-radius:7px;
    font:inherit;
    font-size:13px;
    padding:10px 16px;
    cursor:pointer;
    white-space:nowrap;
}
button:hover {
    background:#36513c;
}
button:disabled {
    opacity:.5;
    cursor:wait;
}
button.primary,nav button.active {
    background:var(--accent);
    border-color:var(--accent);
    color:#182719;
    font-weight:650;
}
nav button {
    border:0;
    background:transparent;
    color:var(--muted);
}
.panel {
    display:none;
}
.panel.active {
    display:block;
}
.grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}
.three {
    grid-template-columns:repeat(3,1fr);
}
.card {
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--card);
    padding:26px;
    margin-bottom:24px;
    min-width:0;
}
.card-title,.section-title {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}
.card-title h2 {
    margin:0;
}
.card-title {
    margin-bottom:24px;
}
.badge {
    font-size:10px;
    letter-spacing:.07em;
    padding:5px 9px;
    border:1px solid #596a49;
    border-radius:4px;
    color:var(--accent);
}
label {
    display:block;
    font-size:12px;
    color:var(--muted);
    margin:0 0 14px;
}
input,select {
    display:block;
    width:100%;
    margin-top:7px;
    border:1px solid #405449;
    border-radius:6px;
    padding:12px;
    background:#102019;
    color:#f0f1eb;
    font:inherit;
    font-size:15px;
    min-width:0;
}
input:focus,select:focus,button:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:2px;
}
form>button {
    margin:5px 0;
    width:100%;
}
form.inline>button {
    width:auto;
}
form.inline {
    display:flex;
    align-items:end;
    gap:14px;
    margin-top:22px;
}
form.inline label {
    flex:1;
    margin:0;
}
.large {
    font-size:44px;
    color:var(--accent);
    letter-spacing:-.04em;
    margin:18px 0 0;
}
.market {
    background:#203427;
}
.market>p {
    font-size:13px;
}
.market>.large {
    font-size:44px;
}
.muted {
    font-size:12px;
}
dl {
    margin:24px 0;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:11px;
    font-size:13px;
}
dt {
    color:var(--muted);
}
dd {
    margin:0;
    text-align:right;
    overflow-wrap:anywhere;
    color:#e4eccd;
}
hr {
    border:0;
    border-top:1px solid var(--line);
    margin:24px 0;
}
.oracle {
    border:1px solid #637448;
    padding:16px 22px;
    background:#293721;
    color:#ddebba;
    border-radius:8px;
    margin:0 0 24px;
    overflow-wrap:anywhere;
    font-size:13px;
}
.oracle.stale {
    border-color:#d29d6b;
    background:#493122;
    color:#ffcc93;
}
summary {
    cursor:pointer;
    font-size:16px;
}
.card>p {
    font-size:13px;
}
details[open]>summary {
    margin-bottom:22px;
}
code,pre {
    font-family:ui-monospace,monospace;
    font-size:12px;
}
pre {
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    color:var(--muted);
}
.table-wrap {
    overflow-x:auto;
}
table {
    width:100%;
    border-collapse:collapse;
    text-align:left;
    font-size:13px;
}
td,th {
    border-bottom:1px solid var(--line);
    padding:14px 12px;
    vertical-align:top;
}
th {
    color:var(--muted);
    font-weight:400;
}
td:first-child {
    max-width:380px;
    overflow-wrap:anywhere;
}
td small {
    display:block;
    color:var(--muted);
    font-family:monospace;
}
.good {
    color:var(--accent);
}
.bad {
    color:#ffba95;
}
#notice:empty {
    display:none;
}
#notice {
    padding:12px 18px;
    border:1px solid #516349;
    margin:0 0 24px;
    border-radius:7px;
    overflow-wrap:anywhere;
}
#address,#wallet-status {
    overflow-wrap:anywhere;
}
footer {
    display:flex;
    justify-content:space-between;
    gap:24px;
    font-size:10px;
    color:var(--muted);
    border-top:1px solid var(--line);
    margin-top:35px;
    padding:24px 0 40px;
}
#chain {
    max-width:180px;
    overflow-wrap:anywhere;
}
dialog {
    background:var(--card);
    color:#e9ece5;
    border:1px solid #688064;
    border-radius:12px;
    padding:30px;
    max-width:560px;
    width:calc(100% - 32px);
    max-height:90vh;
}
dialog::backdrop {
    background:#04100bcc;
}
dialog .inline {
    display:flex;
    gap:12px;
    margin-top:20px;
}
#sign {
    width:100%;
}
#sign-error {
    color:#ffba95;
}
@media(max-width:800px) {
    main {
        padding:0 18px;
    }
    .intro {
        gap:25px;
    }
    .metrics {
        grid-template-columns:1fr 1fr;
    }
    .metrics article:nth-child(2) {
        border-right:0;
    }
    .metrics article:nth-child(-n+2) {
        border-bottom:1px solid var(--line);
    }
    .grid.three {
        grid-template-columns:1fr;
    }
    .brand span {
        display:none;
    }
    .grid {
        gap:15px;
    }
    .card {
        padding:20px;
    }
    footer {
        flex-wrap:wrap;
    }
    .section-title {
        align-items:start;
    }
    .header-right {
        gap:12px;
        font-size:11px;
    }
}
@media(max-width:560px) {
    .intro {
        grid-template-columns:1fr;
        padding-top:30px;
        gap:10px;
    }
    .intro aside {
        max-width:none;
    }
    .grid {
        grid-template-columns:1fr;
    }
    .metrics strong {
        font-size:20px;
    }
    .metrics article {
        padding:16px;
    }
    .header-right {
        flex-direction:column;
        gap:4px;
        align-items:end;
    }
    .inline,form.inline {
        flex-direction:column;
        align-items:stretch;
    }
    nav {
        gap:1px;
    }
    nav button {
        padding:9px 12px;
    }
    footer {
        display:block;
    }
    footer span {
        display:block;
        margin:12px 0;
    }
    .section-title {
        display:block;
    }
}