/* Dznye Chain: the dznye.com design language, for chain, market, explorer, developers and status .dznye.com.
   Everything is glass: square panes with a thin dark edge and soft light inside, on a pastel sky with slow white rays.
   Interface words are small mono capitals, widely spaced; reading is serif. Primary actions are foil glass (colour
   held inside). One rainbow hairline. No scrollbars. The wallet app adds app.css on top of this. */
:root {
	--fg: #16121c; --dim: #8a8394; --ink2: #4b4456; --line: rgba(30, 20, 50, 0.14); --edge: rgba(28, 22, 40, 0.28);
	--rainbow: linear-gradient(90deg, #ff5fa8, #ffb321, #19c98b, #3f7bff, #9b4dff);
	--foil: linear-gradient(115deg, hsla(195, 90%, 84%, 0.9), hsla(255, 85%, 88%, 0.9) 35%, hsla(320, 90%, 88%, 0.9) 65%, hsla(40, 95%, 88%, 0.9));
	--sweep: linear-gradient(112deg, hsla(200, 95%, 80%, 0), hsla(200, 95%, 80%, 0.22) 30%, hsla(275, 90%, 84%, 0.22) 50%, hsla(330, 95%, 86%, 0.2) 70%, hsla(330, 95%, 86%, 0));
	--pink: #e8317f; --amber: #b87700; --mint: #0f9e6e; --blue: #2f63e6; --violet: #7a3cff;
	--good: var(--mint); --warn: var(--amber); --bad: var(--pink); --accent: var(--violet);
	--sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--mono: 'Geist Mono', 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
	--serif: 'Newsreader', Georgia, 'Times New Roman', serif;
	--ease: cubic-bezier(0.22, 0.8, 0.2, 1);
	color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-width: none; background: #f6f2ff; }
::-webkit-scrollbar { width: 0; height: 0; display: none; }
* { scrollbar-width: none; }
body {
	margin: 0; min-height: 100dvh; color: var(--fg); font: 400 12.5px/1.6 var(--mono); letter-spacing: 0.04em;
	-webkit-font-smoothing: antialiased; overflow-x: hidden; -webkit-tap-highlight-color: transparent;
	background: linear-gradient(172deg, #f6f2ff 0%, #fff3f8 48%, #eef6ff 100%) fixed;
}
/* the anime sky: slow white sun rays, and a scatter of four-point sparkles */
body::before {
	content: ''; position: fixed; z-index: -1; pointer-events: none; top: -128vmax; left: 50%; width: 220vmax; height: 220vmax; margin-left: -110vmax;
	background: repeating-conic-gradient(#fff0 0deg, #ffffff8c 2.8deg, #fff0 5.6deg 12deg); opacity: 0.5;
	-webkit-mask: radial-gradient(circle, #000 0 6%, #0000008c 20%, #0000 44%); mask: radial-gradient(circle, #000 0 6%, #0000008c 20%, #0000 44%);
	animation: spin 180s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
body::after {
	content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.55;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M70 60l2 9 9 2-9 2-2 9-2-9-9-2 9-2z'/%3E%3Cpath d='M300 140l1.5 7 7 1.5-7 1.5-1.5 7-1.5-7-7-1.5 7-1.5z'/%3E%3Cpath d='M450 300l2 9 9 2-9 2-2 9-2-9-9-2 9-2z'/%3E%3Cpath d='M160 380l1.5 7 7 1.5-7 1.5-1.5 7-1.5-7-7-1.5 7-1.5z'/%3E%3C/g%3E%3Cg fill='%23c9b8f5' fill-opacity='.55'%3E%3Cpath d='M390 70l1.2 5.5 5.5 1.2-5.5 1.2-1.2 5.5-1.2-5.5-5.5-1.2 5.5-1.2z'/%3E%3Cpath d='M40 250l1.2 5.5 5.5 1.2-5.5 1.2-1.2 5.5-1.2-5.5-5.5-1.2 5.5-1.2z'/%3E%3Cpath d='M260 470l1.2 5.5 5.5 1.2-5.5 1.2-1.2 5.5-1.2-5.5-5.5-1.2 5.5-1.2z'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 520px 520px;
}
::selection { background: #ffd3e6; color: var(--fg); }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }
a { color: var(--fg); text-decoration: underline; text-decoration-color: #16121c40; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color 0.2s; }
a:hover { text-decoration-color: var(--fg); }
code, .mono { font-family: var(--mono); font-size: 0.95em; letter-spacing: 0.02em; }
code { background: #ffffff8c; border: 1px solid var(--line); padding: 0.05em 0.35em; }
pre { position: relative; background: linear-gradient(165deg, #ffffffc4, #ffffff6b); border: 1px solid var(--edge); padding: 14px 16px; overflow-x: auto; font: 12px/1.65 var(--mono); letter-spacing: 0.01em; box-shadow: inset 0 1px 0 #fff, 0 18px 40px -30px #6e8cd2b3; }
pre code { background: none; border: 0; padding: 0; }
h1, h2, h3 { margin: 0 0 0.5em; text-wrap: balance; }
h1 { font: 400 clamp(2.2rem, 5.4vw, 3.6rem)/1.05 var(--serif); letter-spacing: -0.015em; }
h2 { font: 400 clamp(1.6rem, 3.4vw, 2.2rem)/1.1 var(--serif); letter-spacing: -0.01em; }
h3 { font: 500 11px/1.4 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; }
p { margin: 0 0 1em; }
b, strong { font-weight: 600; }
.wrap { max-width: 1080px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.dim { color: var(--dim); }
.small { font-size: 11px; margin-top: 14px; }
/* small labels, led by a turning sparkle */
.kick { display: flex; align-items: center; gap: 10px; font: 400 10px/1 var(--mono); letter-spacing: 0.26em; text-transform: uppercase; color: var(--dim); margin-bottom: 16px; }
.kick::before { content: ''; width: 8px; height: 8px; flex: none; background: var(--fg); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: spin 6s linear infinite; }

/* ---------- top bar: logo, centred tabs with a turning star under the one you are on, the live light ---------- */
header.top { position: sticky; top: 0; z-index: 40; background: linear-gradient(#faf7ffc7, #faf7ff80); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid #28194612; }
header.top .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 12px; height: 58px; max-width: none; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
.brand { justify-self: start; display: inline-flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; white-space: nowrap; font: 400 9.5px var(--mono); letter-spacing: 0.26em; }
.brand svg { height: 11px; width: auto; display: block; }
.brand svg path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: miter; stroke-linecap: square; }
.brand b { font-weight: 400; color: var(--dim); }
nav.links { display: flex; gap: 2px; overflow-x: auto; max-width: 62vw; }
nav.links a { position: relative; color: var(--dim); text-decoration: none; padding: 0 10px; height: 58px; display: flex; align-items: center; white-space: nowrap; font: 400 11px/1 var(--mono); letter-spacing: 0.15em; text-transform: uppercase; transition: color 0.25s; }
nav.links a:hover, nav.links a[aria-current] { color: var(--fg); }
nav.links a[aria-current]::after { content: ''; position: absolute; left: 50%; bottom: 8px; width: 8px; height: 8px; margin-left: -4px; background: var(--fg); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: spin 6s linear infinite; }
.live { justify-self: end; display: inline-flex; align-items: center; gap: 8px; font: 400 10px var(--mono); letter-spacing: 0.12em; color: var(--dim); white-space: nowrap; }
.live i { width: 7px; height: 7px; background: var(--dim); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.live.ok i { background: var(--mint); animation: breathe 2.4s var(--ease) infinite; }
.live.down i { background: var(--pink); }
@keyframes breathe { 50% { opacity: 0.45; transform: scale(0.8); } }
/* the rainbow hairline: how far down the page you are */
.prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--rainbow); transition: transform 0.2s linear; }
@media (max-width: 760px) {
	header.top .wrap { grid-template-columns: auto 1fr auto; }
	.brand b, .live span { display: none; }
	nav.links { max-width: none; justify-self: center; }
	nav.links a { padding: 0 8px; font-size: 10px; letter-spacing: 0.12em; }
}

/* ---------- sections ---------- */
section { padding: 60px 0; position: relative; }
section + section::before { content: ''; position: absolute; top: 0; left: 50%; width: min(1048px, calc(100% - 32px)); transform: translateX(-50%); height: 1px; background: linear-gradient(90deg, #fff0, var(--line), #fff0); }
.hero { padding: 84px 0 56px; }
.hero h1 { max-width: 18ch; }
.hero p.lead, .lead2 { font: 400 clamp(1.1rem, 2vw, 1.3rem)/1.6 var(--serif); letter-spacing: 0; color: var(--ink2); max-width: 640px; }
.lead2 { font-size: 1.15rem; }
.cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }

/* ---------- glass controls: square boxes with a thin dark edge; the foil slides through on hover ---------- */
.btn {
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 22px; color: var(--fg); text-decoration: none;
	border: 1px solid var(--edge); font: 400 11px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; border-radius: 0; white-space: nowrap;
	background: var(--sweep) -120% 0/250% 100% no-repeat, linear-gradient(165deg, #ffffffd1, #ffffff6b);
	box-shadow: inset 0 1px 0 #fffffff2, inset 0 0 12px #ffffff8c, 0 10px 28px -20px #6e8cd2b3;
	-webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2);
	transition: background-position 0.8s var(--ease), border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--ease);
}
.btn:hover:not(:disabled) { background-position: 120% 0, 0 0; border-color: #1c162880; transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, inset 0 0 14px #ffffffb3, 0 14px 32px -18px #6e8cd2d9; text-decoration: none; }
.btn:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.btn.primary {
	color: #1a1424; border-color: #1c16288c;
	background: linear-gradient(112deg, #fff0, #ffffffa6 45%, #fff0 60%) -150% 0/250% 100% no-repeat, var(--foil);
	box-shadow: inset 0 1px 0 #ffffffe6, inset 0 0 16px #ffffff73, 0 12px 30px -16px #a078e6a6;
}
.btn.primary:hover:not(:disabled) { background-position: 150% 0, 0 0; border-color: #1c1628bf; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- glass panes ---------- */
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card, .stat, .note, .scroll:has(> .table), .glass {
	position: relative; background: linear-gradient(160deg, #ffffff9e, #ffffff47); border: 1px solid #ffffff99;
	-webkit-backdrop-filter: blur(12px) saturate(1.25); backdrop-filter: blur(12px) saturate(1.25);
	box-shadow: inset 0 1px 0 #ffffffd9, inset 0 0 10px #ffffff4d, 0 24px 60px -34px #82aaff80;
}
.card { padding: 18px 20px; min-width: 0; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink2); }
.card p:last-child { margin-bottom: 0; }
.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: 28px; }
.stat { padding: 14px 16px; min-width: 0; }
.stat span { display: block; font: 400 9.5px var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); }
.stat b { display: block; font: 400 1.75rem/1.2 var(--serif); letter-spacing: -0.01em; margin-top: 6px; font-variant-numeric: tabular-nums; word-break: break-all; }

/* ---------- tables ---------- */
.scroll { overflow-x: auto; }
.scroll:has(> .table) { padding: 2px 6px; }
.table { width: 100%; border-collapse: collapse; font-size: 12px; }
.table th, .table td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table th { font: 400 9.5px var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.yes { color: var(--mint); }
.no { color: var(--dim); }
.fail { color: var(--pink); }

.note { padding: 12px 16px; border-left: 2px solid var(--amber); }
.note.bad { border-left-color: var(--pink); }
.note.good { border-left-color: var(--mint); }

/* ---------- forms: glass fields, square, thin edge ---------- */
label { display: block; font: 400 9.5px var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); margin: 14px 0 7px; }
input, select, textarea {
	width: 100%; height: 44px; padding: 0 13px; border-radius: 0; border: 1px solid var(--edge); color: var(--fg); font: 400 13px var(--mono); letter-spacing: 0.03em;
	background: linear-gradient(165deg, #ffffffe0, #ffffff99); box-shadow: inset 0 1px 0 #fff; transition: border-color 0.2s, box-shadow 0.2s; -webkit-appearance: none; appearance: none;
}
select { background-image: linear-gradient(45deg, #fff0 50%, var(--fg) 50%), linear-gradient(135deg, var(--fg) 50%, #fff0 50%), linear-gradient(165deg, #ffffffe0, #ffffff99); background-position: calc(100% - 17px) 20px, calc(100% - 12px) 20px, 0 0; background-size: 5px 5px, 5px 5px, 100% 100%; background-repeat: no-repeat; padding-right: 32px; }
textarea { height: auto; padding: 11px 13px; }
input[type='file'] { height: auto; padding: 10px; }
input::placeholder { color: #b3abbd; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--fg); box-shadow: inset 0 1px 0 #fff, 0 0 0 3px #9b4dff1f; }
input[type='checkbox'], input[type='radio'] { width: 16px; height: 16px; padding: 0; -webkit-appearance: auto; appearance: auto; accent-color: var(--fg); box-shadow: none; background: none; }
label:has(> input[type='radio']), label:has(> input[type='checkbox']) { font: 400 12.5px var(--mono); letter-spacing: 0.03em; text-transform: none; color: var(--fg); display: flex; gap: 10px; align-items: center; margin: 10px 0; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.row > * { flex: 1 1 180px; min-width: 0; }
.msg { min-height: 1.5em; margin-top: 10px; font-size: 12px; }
.msg.ok { color: var(--mint); } .msg.err { color: var(--pink); }

/* ---------- explorer ---------- */
.block { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.block .h { font: 400 13px var(--mono); }
.block .t { color: var(--dim); font: 11px var(--mono); }
.block ul { grid-column: 2; margin: 2px 0 0; padding-left: 18px; }
.hash { font: 11px/1.5 var(--mono); color: var(--dim); word-break: break-all; letter-spacing: 0.02em; }
.slides { counter-reset: slide; }
.slide { counter-increment: slide; }
.slide .kick::after { content: counter(slide, decimal-leading-zero); margin-left: auto; color: #b9b1c6; }

footer { padding: 30px 0 44px; color: var(--dim); font: 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; position: relative; }
footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--rainbow); opacity: 0.4; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
footer a { color: var(--dim); text-decoration: none; } footer a:hover { color: var(--fg); }

/* ---------- the guide: a reading view (serif, one column, quiet sky) ---------- */
.guide { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; padding-top: 44px; padding-bottom: 80px; }
.gnav { position: sticky; top: 78px; max-height: calc(100dvh - 96px); overflow-y: auto; align-self: start; }
.gnav summary { cursor: pointer; font: 400 10px var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); padding: 6px 0; list-style: none; }
.gnav summary::-webkit-details-marker { display: none; }
.gnav .gs { font: 400 9.5px var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); margin: 20px 0 6px; }
.gnav ul { list-style: none; margin: 0; padding: 0; }
.gnav li a { display: flex; align-items: center; gap: 8px; padding: 5px 8px; color: var(--dim); text-decoration: none; font-size: 11px; transition: color 0.2s; }
.gnav li a:hover { color: var(--fg); }
.gnav li a[aria-current] { color: var(--fg); }
.gnav li a[aria-current]::before { content: ''; width: 6px; height: 6px; flex: none; background: var(--fg); transform: rotate(45deg); margin-left: -2px; }
.prose { max-width: 680px; min-width: 0; }
.prose h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); margin-bottom: 16px; }
.prose h2 { margin-top: 2.1em; scroll-margin-top: 80px; font-size: clamp(1.5rem, 3vw, 1.95rem); }
.prose h3 { margin-top: 2em; scroll-margin-top: 80px; }
.prose p, .prose li { font: 400 18.5px/1.75 var(--serif); letter-spacing: 0; }
.prose li::marker { color: var(--dim); }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.1em; } .prose li { margin-bottom: 0.4em; }
.prose code { font-size: 0.8em; }
.prose img { max-width: 100%; }
.prose .table td, .prose .table th { font-size: 12px; }
.prose .scroll { margin: 1.3em 0; } .prose table { min-width: 480px; }
.prose pre { margin: 1.2em 0; }
.crumbs { font: 400 9.5px var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); margin-bottom: 18px; }
.crumbs a { color: var(--dim); text-decoration: none; } .crumbs a:hover { color: var(--fg); } .crumbs span { color: var(--fg); }
.lede { font-size: 1.2rem !important; color: var(--ink2); margin-bottom: 1.4em; }
.toc { position: relative; background: linear-gradient(160deg, #ffffff9e, #ffffff47); border: 1px solid #ffffff99; padding: 14px 18px; margin: 0 0 2em; box-shadow: inset 0 1px 0 #ffffffd9; }
.toc b { font: 400 9.5px var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); }
.toc ol { margin: 8px 0 0; padding-left: 1.3em; } .toc li { font: 400 12px/1.7 var(--mono) !important; letter-spacing: 0.02em !important; margin: 0; }
.toc a { text-decoration: none; color: var(--ink2); } .toc a:hover { color: var(--fg); }
.callout { position: relative; border-left: 2px solid var(--violet); background: linear-gradient(160deg, #ffffff9e, #ffffff47); padding: 14px 18px; margin: 1.4em 0; box-shadow: inset 0 1px 0 #ffffffd9; }
.callout.tip { border-left-color: var(--mint); } .callout.care { border-left-color: var(--amber); } .callout.bad { border-left-color: var(--pink); }
.callout p { font-size: 16.5px !important; margin: 0 0 0.5em; } .callout p:last-child { margin-bottom: 0; }
.callout > b:first-child { display: block; font: 400 9.5px var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.steps { list-style: none; padding: 0 !important; counter-reset: s; display: grid; gap: 10px; }
.steps li { counter-increment: s; position: relative; padding: 14px 18px 14px 60px; background: linear-gradient(160deg, #ffffff9e, #ffffff47); border: 1px solid #ffffff99; box-shadow: inset 0 1px 0 #ffffffd9; margin: 0 !important; }
.steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 18px; top: 18px; font: 400 10px var(--mono); letter-spacing: 0.2em; color: var(--dim); }
details.faq { border-bottom: 1px solid var(--line); padding: 2px 0; }
details.faq summary { cursor: pointer; padding: 14px 0; font: 400 1.15rem/1.35 var(--serif); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
details.faq summary::after { content: '+'; font: 300 20px/1 var(--mono); color: var(--dim); transition: transform 0.3s var(--ease); }
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq summary::-webkit-details-marker { display: none; }
details.faq p { margin: 0 0 14px; font: 400 17px/1.7 var(--serif); color: var(--ink2); }
.pn { display: flex; justify-content: space-between; gap: 14px; margin-top: 3.2em; padding-top: 1.4em; border-top: 1px solid var(--line); }
.pn a { flex: 1; max-width: 48%; padding: 14px 16px; text-decoration: none; color: var(--fg); background: linear-gradient(160deg, #ffffff9e, #ffffff47); border: 1px solid #ffffff99; transition: transform 0.3s var(--ease); font: 400 1.05rem/1.3 var(--serif); }
.pn a:hover { transform: translateY(-2px); } .pn a.r { text-align: right; margin-left: auto; }
.pn a span { display: block; font: 400 9.5px var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
.gsearch { max-width: 520px; margin-top: 22px; } .gsec { padding: 28px 0; } .gsec h2 { font-size: 1.5rem; }
.gsec::before { display: none; }
.gcard, .feat { display: block; color: var(--fg); text-decoration: none; transition: transform 0.35s var(--ease), border-color 0.25s; }
.gcard:hover, .feat:hover { transform: translateY(-3px); border-color: #fff; }
.gcard h3 { margin-bottom: 8px; } .gcard p, .feat p { color: var(--ink2); font-size: 12px; margin: 0; }
dl.gloss { margin: 1.4em 0; } dl.gloss dt { font: 400 1.2rem var(--serif); margin-top: 1.1em; scroll-margin-top: 80px; }
dl.gloss dd { margin: 4px 0 0; color: var(--ink2); font: 400 17px/1.65 var(--serif); padding-bottom: 0.9em; border-bottom: 1px solid var(--line); }
[hidden] { display: none !important; }
@media (max-width: 900px) {
	.guide { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 24px; }
	.gnav { position: static; max-height: none; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
}
@media (min-width: 901px) { .gnav-d summary { pointer-events: none; } }

/* ---------- the home page ---------- */
ol.three { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: t; }
ol.three li { counter-increment: t; position: relative; padding: 18px 20px 18px 20px; background: linear-gradient(160deg, #ffffff9e, #ffffff47); border: 1px solid #ffffff99; box-shadow: inset 0 1px 0 #ffffffd9, 0 24px 60px -34px #82aaff80; }
ol.three li::before { content: counter(t, decimal-leading-zero); display: block; font: 400 10px var(--mono); letter-spacing: 0.22em; color: var(--dim); margin-bottom: 10px; }
ol.three b { display: block; font: 400 1.2rem/1.3 var(--serif); margin-bottom: 4px; } ol.three span { color: var(--ink2); font-size: 12px; display: block; }
svg.ico { width: 26px; height: 26px; fill: none; stroke: var(--fg); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; display: block; }
.feats { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.feat h3 { margin-bottom: 8px; }
details.more { position: relative; background: linear-gradient(160deg, #ffffff9e, #ffffff47); border: 1px solid #ffffff99; padding: 2px 20px; box-shadow: inset 0 1px 0 #ffffffd9; }
details.more > summary { cursor: pointer; padding: 14px 0; font: 400 10px var(--mono); letter-spacing: 0.22em; text-transform: uppercase; list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: '+ '; color: var(--dim); }
details.more[open] > summary::before { content: '– '; }
details.more[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 8px; }
details.more h3 { margin-top: 1.6em; }

/* ---------- market, swaps, pay links, receipts ---------- */
.up { color: var(--mint); } .down { color: var(--pink); }
tr.pick { cursor: pointer; } tr.pick:hover td { background: #ffffff66; }
tr.pick a { text-decoration: none; }
.pv-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.chart-card { margin: 16px 0 22px; padding: 14px; }
svg.chart { display: block; width: 100%; height: 200px; }
.chart.empty { height: 120px; display: grid; place-items: center; color: var(--dim); font-size: 11px; letter-spacing: 0.08em; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
h3.gap { margin-top: 30px; }
.row.narrow { max-width: 620px; margin-top: 18px; }
.take { display: flex; gap: 6px; min-width: 190px; } .take input { height: 38px; min-width: 0; } .take .btn { height: 38px; padding: 0 14px; }
.narrow-wrap { max-width: 640px; }
.pay-card { padding: 26px 26px 20px; }
.big { font: 400 clamp(2.2rem, 5vw, 3.2rem)/1.1 var(--serif); letter-spacing: -0.01em; margin: 6px 0 14px; }
table.receipt th { width: 30%; }
.qr { background: #fff; padding: 10px; line-height: 0; border: 1px solid var(--edge); box-shadow: 0 24px 60px -34px #82aaff80; display: inline-block; }
.qr svg { width: 220px; height: 220px; max-width: 100%; }
@media print { header.top, footer, body::before, body::after, .cta { display: none !important; } body { background: #fff; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }