:root { --ink:#22170f; --muted:#735d4d; --paper:#fff6e9; --cream:#f3dfc2; --orange:#d86424; --orange-dark:#9e3915; --charcoal:#281d17; --line:rgba(47,29,17,.18); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; } a { color:inherit; }
.site-header { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px clamp(22px,5vw,80px); border-bottom:1px solid var(--line); } .brand { display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:900; letter-spacing:.04em; } .brand img { width:35px; height:35px; object-fit:cover; border-radius:3px; } .brand small { color:var(--orange); font-size:.72rem; padding:3px 7px; border:1px solid currentColor; } nav { display:flex; gap:22px; } nav a,.header-link { color:var(--muted); font-size:.9rem; font-weight:750; text-decoration:none; } .header-link { color:var(--ink); }
main { max-width:1320px; margin:0 auto; padding:0 clamp(22px,5vw,80px); } .docs-hero { padding:clamp(74px,11vw,150px) 0 clamp(58px,8vw,110px); border-bottom:1px solid var(--line); } .eyebrow { margin:0 0 14px; color:var(--orange-dark); font-size:.74rem; font-weight:900; letter-spacing:.12em; } h1,h2,h3,p { margin-top:0; } h1 { max-width:900px; margin-bottom:22px; font-size:clamp(3.1rem,7vw,6.4rem); line-height:.94; } h2 { margin-bottom:16px; font-size:clamp(2rem,4vw,3.6rem); line-height:1; } h3 { font-size:1.3rem; } .docs-hero>p:not(.eyebrow),.section-intro>p:not(.eyebrow) { max-width:720px; color:var(--muted); font-size:1.08rem; line-height:1.65; } .hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; } .button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 18px; border:1px solid var(--ink); font-weight:850; text-decoration:none; } .button.primary { border-color:var(--orange); background:var(--orange); color:#fffdf8; }
.docs-section { padding:clamp(54px,8vw,104px) 0; border-bottom:1px solid var(--line); } .facts-section { display:grid; grid-template-columns:.85fr 1.15fr; gap:68px; } .facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; margin:0; border-top:1px solid var(--line); } .facts div { min-height:112px; padding:20px 0; border-bottom:1px solid var(--line); } .facts dt { color:var(--muted); font-size:.8rem; font-weight:750; } .facts dd { margin:9px 0 0; font-size:1.17rem; font-weight:850; overflow-wrap:anywhere; } .facts span { display:block; margin-top:5px; color:var(--muted); font-size:.78rem; font-weight:650; } .facts code { color:var(--orange-dark); font-size:.92rem; }
.split-section { display:grid; grid-template-columns:.88fr 1.12fr; gap:68px; } .steps { display:grid; gap:1px; margin:0; padding:0; list-style:none; background:var(--line); border:1px solid var(--line); counter-reset:step; } .steps li { min-height:92px; display:grid; grid-template-columns:44px 1fr; gap:13px; align-content:center; padding:16px 20px; background:var(--paper); } .steps li::before { content:counter(step,decimal-leading-zero); counter-increment:step; color:var(--orange-dark); font-size:.76rem; font-weight:900; } .steps b,.steps span,.steps code { grid-column:2; } .steps span { color:var(--muted); line-height:1.45; } .steps code { margin-top:3px; color:var(--orange-dark); overflow-wrap:anywhere; }
.status-section { background:var(--charcoal); color:#fff7e9; margin-inline:calc(clamp(22px,5vw,80px) * -1); padding-inline:clamp(22px,5vw,80px); } .status-section .eyebrow { color:#f4a761; } .status-section .section-intro>p:not(.eyebrow) { color:#d7c4b1; } .release-note { max-width:820px; margin-top:35px; padding:20px 22px; border-left:4px solid var(--orange); background:#35271f; } .release-note p { margin:7px 0 0; color:#e4d1bb; line-height:1.55; } .requirements { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:40px; border-top:1px solid rgba(255,255,255,.26); } .requirements div { min-height:100px; padding:20px 18px 0 0; border-right:1px solid rgba(255,255,255,.26); } .requirements div+div { padding-left:18px; } .requirements div:last-child { border:0; } .requirements span { display:block; color:#d7c4b1; font-size:.78rem; font-weight:700; } .requirements b { display:block; margin-top:9px; font-size:1.02rem; }
.node-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); } .node-grid article { min-height:240px; display:flex; flex-direction:column; padding:25px; background:var(--paper); } .node-grid span { color:var(--orange-dark); font-size:.76rem; font-weight:900; } .node-grid h3 { margin:auto 0 9px; } .node-grid p { color:var(--muted); line-height:1.55; } .node-grid b { font-size:.82rem; }
.bridge-grid .bridge-action { grid-column:1 / -1; min-height:210px; background:var(--cream); } .bridge-grid .button { margin-top:auto; width:100%; }
.release-note .button { margin-top:18px; } #nodes .node-grid .button { width:100%; margin-top:auto; }
.developer-section { display:grid; grid-template-columns:.85fr 1.15fr; gap:68px; } .developer-section p:not(.eyebrow) { color:var(--muted); line-height:1.6; } .code-panel { border:1px solid var(--line); background:#211813; color:#ffe7c7; } .code-panel>code { display:block; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.14); color:#ffb36e; font-size:.86rem; overflow-wrap:anywhere; } pre { margin:0; padding:20px; font:13px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; overflow:auto; } .safety-section { max-width:900px; } .safety-section>p:not(.eyebrow) { color:var(--muted); font-size:1.08rem; line-height:1.65; }
footer { display:flex; flex-wrap:wrap; gap:18px; padding:23px clamp(22px,5vw,80px); background:var(--orange-dark); color:#fff5e9; font-size:.82rem; font-weight:700; } footer span { margin-right:auto; } footer a { text-decoration:none; }
.code-panel p { margin:0; padding:16px 20px 20px; color:#ffe7c7 !important; line-height:1.55; }
#explorer .release-note { max-width:none; background:var(--cream); border:1px solid var(--line); border-left:4px solid var(--orange); color:var(--ink); }
#explorer .release-note p { color:var(--muted); }
.behavior-section .steps > div { min-height:92px; padding:20px; background:var(--paper); border-bottom:1px solid var(--line); }
.behavior-section .steps > div:last-child { border-bottom:0; }
.behavior-section .steps b { display:block; margin-bottom:7px; }
.behavior-section .steps span { display:block; }
@media (max-width:820px) { nav { display:none; } .facts-section,.split-section,.developer-section { grid-template-columns:1fr; gap:34px; } .facts { grid-template-columns:1fr; } .requirements,.node-grid { grid-template-columns:1fr; } .requirements div,.requirements div+div { padding:18px 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.26); } .requirements div:last-child { border-bottom:0; } .node-grid article { min-height:190px; } }
#blocks .requirements, #transactions .requirements { grid-template-columns:repeat(4,minmax(0,1fr)); border-top-color:var(--line); }
#blocks .requirements, #transactions .requirements, #explorer .release-note { grid-column:1 / -1; width:100%; }
#blocks .requirements div, #transactions .requirements div { border-right-color:var(--line); }
#blocks .requirements div:last-child, #transactions .requirements div:last-child { border-right:0; }
#blocks .requirements span, #transactions .requirements span { color:var(--muted); }
#blocks .requirements small, #transactions .requirements small { display:block; margin-top:6px; color:var(--muted); line-height:1.35; }
@media (max-width:820px) { #blocks .requirements, #transactions .requirements, #explorer .release-note { grid-column:1; } #blocks .requirements, #transactions .requirements { grid-template-columns:1fr; } #blocks .requirements div, #transactions .requirements div { border-right:0; border-bottom:1px solid var(--line); } #blocks .requirements div:last-child, #transactions .requirements div:last-child { border-bottom:0; } }