/* Framed, quiet layout (after alta.finance): near-black page, thin vertical frame lines, light large type, numbered
   rows that open as you scroll, white pill buttons, a line-drawn 3D figure behind everything. Tokens per site on :root. */
* { box-sizing: border-box; margin: 0; padding: 0 }
html { background: var(--bg); color-scheme: dark; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent }
body { background: var(--bg); color: var(--text); font: 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; min-height: 100vh; display: flex; flex-direction: column }
main { flex: 1; position: relative; z-index: 1 } a { color: inherit; text-decoration: none } img { display: block; max-width: 100% } button, input { font: inherit; color: inherit } button { background: none; border: 0; cursor: pointer } em, i { font-style: normal }
#bg3d { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; opacity: .9 }
.frame { width: 100%; max-width: var(--wrap); margin: 0 auto; border-inline: 1px solid var(--line); position: relative }
.pad { padding-inline: clamp(20px, 3vw, 32px) }
.muted { color: var(--muted) } .mono { font-family: var(--mono) } .acc { color: var(--acc) } .up { color: var(--up) } .down { color: var(--down) }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 999px; font-weight: 500; font-size: 15px; white-space: nowrap; transition: opacity .2s, background .2s, border-color .2s }
.btn.white { background: #f4f3f0; color: #0f0f0f } .btn.white:hover { opacity: .86 }
.btn.line { border: 1px solid var(--line2); background: rgba(15, 15, 15, .4); backdrop-filter: blur(6px) } .btn.line:hover { border-color: rgba(255,255,255,.4) }
.btn.big { height: 54px; padding: 0 28px; font-size: 16px } .btn .ar { width: 14px; height: 14px }

.bar { position: sticky; top: 0; z-index: 20; background: rgba(15, 15, 15, .82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line) }
.bar .frame { height: 76px; display: flex; align-items: center; gap: 32px }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 500 22px var(--head); letter-spacing: -.03em } .brand img { width: 26px; height: 26px; object-fit: contain } .brand span { transform: translateY(-1px) }
.bar nav { display: flex; gap: 30px; margin-left: auto; font-size: 15px; color: var(--muted) } .bar nav a:hover, .bar nav a.on { color: var(--text) }

section { border-bottom: 1px solid var(--line) } section > .frame { padding-block: clamp(72px, 8vw, 120px) }
h1, h2, h3 { font-family: var(--head); font-weight: var(--hw); letter-spacing: var(--hls); text-wrap: balance }
h1 b, h2 b { font-weight: var(--hw); color: var(--acc) }
.hero > .frame { min-height: calc(100vh - 77px); display: flex; flex-direction: column; justify-content: flex-end; padding-block: 120px 64px }
.hero h1 { font-size: clamp(46px, 6.6vw, 98px); line-height: 1.02; max-width: 11em }
.hero .sub { margin-top: 22px; max-width: 34em; font-size: clamp(17px, 1.3vw, 19px); color: var(--muted) }
.ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap }
.ca { margin-top: 18px; display: inline-flex; gap: 12px; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(15,15,15,.6); font: 12px var(--mono); color: var(--muted); cursor: pointer; width: max-content; max-width: 100% } .ca b { color: var(--acc); font-weight: 500 } .ca span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

.nums > .frame { padding-block: 0; display: grid; grid-template-columns: repeat(var(--n, 3), 1fr) }
.nums .frame > div { padding: 34px clamp(20px, 3vw, 32px); border-left: 1px solid var(--line) } .nums .frame > div:first-child { border-left: 0 }
.nums b { display: block; font: 300 clamp(32px, 3.4vw, 48px)/1 var(--mono); letter-spacing: -.04em } .nums span { display: block; margin-top: 10px; color: var(--muted); font-size: 14px }

/* the split: a sticky statement on the left, numbered rows on the right that open one by one */
.split > .frame { padding: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) }
.split .lhs { padding: clamp(56px, 6vw, 90px) clamp(20px, 3vw, 32px); border-right: 1px solid var(--line) } .split .lhs > div { position: sticky; top: 120px }
.split h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.05 } .split .lhs p { margin-top: 16px; color: var(--muted); max-width: 26em }
.acc-list > div { border-bottom: 1px solid var(--line); padding: 26px clamp(20px, 3vw, 32px); cursor: pointer; transition: background .3s } .acc-list > div:last-child { border-bottom: 0 }
.acc-list .t { display: flex; justify-content: space-between; align-items: baseline; gap: 16px } .acc-list .t b { font: var(--hw) 24px var(--head); letter-spacing: -.02em; color: var(--muted); transition: color .3s } .acc-list .t span { font: 12px var(--mono); color: var(--muted) }
.acc-list .b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s ease } .acc-list .b > div { overflow: hidden } .acc-list .b p { color: var(--muted); max-width: 34em; padding-top: 14px; font-size: 15px } .acc-list .b .btn { margin-top: 18px; height: 36px; font-size: 13px }
.acc-list > div.on .t b { color: var(--text) } .acc-list > div.on .b { grid-template-rows: 1fr } .acc-list > div.on { background: rgba(255,255,255,.015) }
.acc-list .viz { margin-top: 18px }

.head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap } .head h2 { font-size: clamp(34px, 4vw, 56px); line-height: 1.04 } .lead { margin-top: 16px; color: var(--muted); font-size: 17px; max-width: 42em }
.cols > .frame { padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), 1fr) }
.cols .frame > div { padding: clamp(40px, 5vw, 64px) clamp(20px, 3vw, 32px); border-left: 1px solid var(--line) } .cols .frame > div:first-child { border-left: 0 }
.cols h3 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.05 } .cols p { margin-top: 12px; color: var(--muted); font-size: 15px; max-width: 24em } .cols .k { font: 13px var(--mono); color: var(--muted); margin-bottom: 18px; display: block }
.cols .big { font: 300 clamp(40px, 4.6vw, 64px)/1 var(--mono); letter-spacing: -.05em; color: var(--text) }

table.t { width: 100%; border-collapse: collapse; margin-top: 36px }
table.t th { text-align: left; font: 500 12px var(--font); color: var(--muted); padding: 0 0 14px; border-bottom: 1px solid var(--line) }
table.t td { padding: 18px 0; border-bottom: 1px solid var(--line); font: 15px var(--mono); white-space: nowrap } table.t td.n { font-family: var(--font); white-space: normal }
table.t th:not(:first-child), table.t td:not(:first-child) { text-align: right; padding-left: 16px }
.coin { display: inline-flex; align-items: center; gap: 10px; font: 500 15px var(--font) } .coin img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none }
.empty { padding: 56px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line2); border-radius: 18px } .empty b { display: block; color: var(--text); font: var(--hw) 26px var(--head); margin-bottom: 6px } .empty .btn { margin-top: 18px }

.faq { margin-top: 36px; border-top: 1px solid var(--line) } .faq details { border-bottom: 1px solid var(--line) }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: 18px } .faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; color: var(--muted); font: 300 24px/1 var(--mono); transition: transform .25s } .faq details[open] summary::after { transform: rotate(45deg) } .faq p { color: var(--muted); padding-bottom: 22px; max-width: 50em }

.cta > .frame { display: flex; justify-content: space-between; align-items: start; gap: 30px; flex-wrap: wrap; padding-block: clamp(90px, 10vw, 150px) } .cta h2 { font-size: clamp(38px, 4.6vw, 64px); line-height: 1.04; max-width: 13em }

.foot { background: #000; position: relative; z-index: 1 } .foot .frame { padding: 72px clamp(20px, 3vw, 32px) 80px; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; border-color: rgba(255,255,255,.08) }
.foot p { color: rgba(255,255,255,.5); font-size: 13px; margin-top: 12px } .foot .cols2 { display: flex; gap: 64px; font-size: 14px } .foot .cols2 div { display: grid; gap: 10px; align-content: start } .foot .cols2 b { font-weight: 600 } .foot .cols2 a { color: rgba(255,255,255,.62) } .foot .cols2 a:hover { color: #fff }

/* docs and the token page: a sticky contents list and the text */
.page-top > .frame { padding-block: 110px 56px } .page-top h1 { font-size: clamp(44px, 6vw, 84px); line-height: 1 } .page-top p { margin-top: 18px; color: var(--muted); font-size: 18px; max-width: 40em }
.doc > .frame { padding: 0; display: grid; grid-template-columns: 260px minmax(0, 1fr) }
.toc { border-right: 1px solid var(--line); padding: 40px clamp(20px, 2vw, 28px) } .toc > div { position: sticky; top: 110px; display: grid; gap: 10px } .toc a { color: var(--muted); font-size: 14px } .toc a:hover, .toc a.on { color: var(--text) }
.dbody { padding: 0 } .dbody section { border-bottom: 1px solid var(--line); padding: 48px clamp(20px, 3vw, 40px); scroll-margin-top: 90px } .dbody section:last-child { border-bottom: 0 }
.dbody h2 { font-size: 30px; line-height: 1.1 } .dbody p, .dbody li { color: var(--muted); max-width: 46em; margin-top: 12px } .dbody ul { padding-left: 20px } .dbody b { color: var(--text); font-weight: 600 }
.dbody code { font: 13px var(--mono); background: rgba(255,255,255,.06); padding: 2px 7px; border-radius: 6px; color: var(--text) }
.dbody table { width: 100%; border-collapse: collapse; margin-top: 14px } .dbody td { padding: 13px 0; border-top: 1px solid var(--line); vertical-align: top } .dbody td:first-child { color: var(--muted); width: 38%; padding-right: 16px } .dbody td a { font: 13px var(--mono); color: var(--acc); word-break: break-all }
.flow3 { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 20px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden }
.flow3 > div { padding: 24px; border-left: 1px solid var(--line) } .flow3 > div:first-child { border-left: 0 } .flow3 span { font: 12px var(--mono); color: var(--muted) } .flow3 b { display: block; margin-top: 8px; font: var(--hw) 22px var(--head) } .flow3 p { font-size: 14px; margin-top: 8px }
.burnbox { margin-top: 20px; padding: 28px; border: 1px solid var(--line2); border-radius: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px } .burnbox b { display: block; font: 300 36px var(--mono); letter-spacing: -.04em; color: var(--text) } .burnbox span { color: var(--muted); font-size: 13px }

@media (max-width: 960px) {
  .bar nav { display: none } .bar .frame { justify-content: space-between }
  .split > .frame, .doc > .frame { grid-template-columns: 1fr } .split .lhs, .toc { border-right: 0; border-bottom: 1px solid var(--line) } .split .lhs > div, .toc > div { position: static } .toc > div { display: flex; flex-wrap: wrap; gap: 14px }
  .cols > .frame, .nums > .frame { grid-template-columns: 1fr } .cols .frame > div, .nums .frame > div { border-left: 0; border-top: 1px solid var(--line) } .cols .frame > div:first-child, .nums .frame > div:first-child { border-top: 0 }
  .flow3, .burnbox { grid-template-columns: 1fr } .flow3 > div { border-left: 0; border-top: 1px solid var(--line) } .flow3 > div:first-child { border-top: 0 } .tblw { overflow-x: auto } table.t .hs { display: none }
}
@media (max-width: 600px) { .ctas .btn { flex: 1 } .foot .cols2 { gap: 36px; flex-wrap: wrap } .bar .btn { display: none } .frame { border-inline: 0 } }