:root{
  color-scheme:dark;
  --bg:#0d0d0e;
  --surface:#151516;
  --surface-2:#1b1a19;
  --line:rgba(244,239,231,.13);
  --text:#f1eee8;
  --muted:#a7a29a;
  --accent:#ef7753;
  --accent-ink:#1b0e09;
  --radius:18px;
  --max:1240px;
  --font-display:"Bodoni Moda","Noto Serif SC","Songti SC","STSong",serif;
  --font-ui:"Manrope","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  font-family:var(--font-ui);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-size:16px;line-height:1.55}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.skip-link{position:fixed;left:16px;top:12px;z-index:10;padding:10px 14px;border-radius:10px;background:var(--text);color:var(--bg);transform:translateY(-160%)}
.skip-link:focus{transform:none}
.dev-nav{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 max(24px,calc((100vw - var(--max))/2));border-bottom:1px solid var(--line);background:rgba(13,13,14,.86);backdrop-filter:blur(18px)}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:720;letter-spacing:-.02em}
.brand-mark{position:relative;width:24px;height:24px;border:1px solid rgba(241,238,232,.48);border-radius:50%;display:grid;place-items:center}
.brand-mark::before,.brand-mark::after,.brand-mark span{content:"";display:block;position:absolute;border:1px solid var(--accent);border-radius:50%}
.brand-mark::before{width:5px;height:5px}.brand-mark::after{width:12px;height:12px;opacity:.64}.brand-mark span{width:19px;height:19px;opacity:.28}
.dev-nav nav{display:flex;align-items:center;gap:26px;font-size:13px;color:var(--muted)}
.dev-nav nav a:hover{color:var(--text)}
.nav-cta{padding:9px 14px;border:1px solid var(--line);border-radius:999px;color:var(--text)!important}
main{overflow:hidden}
.dev-hero{max-width:var(--max);min-height:calc(100dvh - 72px);margin:0 auto;padding:clamp(64px,8vw,116px) 24px 76px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);align-items:center;gap:clamp(40px,8vw,110px)}
.eyebrow{margin:0 0 20px;color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
h1,h2,h3,p{margin-top:0}
h1{max-width:760px;margin-bottom:24px;font-family:var(--font-display);font-size:clamp(48px,6.3vw,88px);font-optical-sizing:auto;font-synthesis:none;line-height:.98;letter-spacing:-.035em;font-weight:500}
.hero-lede{max-width:620px;margin-bottom:32px;color:var(--muted);font-size:clamp(17px,1.7vw,21px)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.button{display:inline-flex;min-height:46px;align-items:center;justify-content:center;padding:0 19px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:680;white-space:nowrap;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.button:active{transform:scale(.98)}
.button.primary{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.button.secondary:hover{border-color:rgba(241,238,232,.42)}
.protocol-object{position:relative;width:min(42vw,510px);aspect-ratio:1;margin:auto;display:grid;place-items:center;isolation:isolate}
.protocol-object::before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(239,119,83,.12),transparent 64%);filter:blur(6px)}
.protocol-core{width:130px;height:130px;border-radius:46% 54% 62% 38%;display:grid;place-items:center;border:1px solid rgba(239,119,83,.58);background:linear-gradient(145deg,rgba(239,119,83,.22),rgba(255,255,255,.025));box-shadow:inset 0 1px 0 rgba(255,255,255,.15);transform:rotate(-10deg)}
.protocol-core span{transform:rotate(10deg);font-size:13px;font-weight:700}
.protocol-orbit{position:absolute;inset:0;border:1px solid var(--line);border-radius:50%;animation:orbit 24s linear infinite}
.protocol-orbit::before{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--accent);top:11%;left:22%;box-shadow:0 0 24px rgba(239,119,83,.45)}
.protocol-orbit span{position:absolute;top:6%;left:27%;padding:5px 9px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--muted);font-size:11px}
.orbit-two{inset:13%;animation-direction:reverse;animation-duration:19s;transform:rotate(66deg)}
.orbit-three{inset:27%;animation-duration:14s;transform:rotate(133deg)}
@keyframes orbit{to{transform:rotate(360deg)}}
.principle-strip{display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--max);margin:0 auto;padding:0 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.principle-strip p{margin:0;padding:19px 12px;color:var(--muted);font-size:12px;text-align:center;border-right:1px solid var(--line)}
.principle-strip p:last-child{border-right:0}
.quickstart,.trust,.contract{max-width:var(--max);margin:0 auto;padding:clamp(92px,11vw,154px) 24px}
.section-heading{max-width:760px;margin-bottom:58px}
.section-heading.compact{margin-bottom:42px}
h2{margin-bottom:18px;font-family:var(--font-display);font-size:clamp(36px,4.6vw,64px);font-optical-sizing:auto;font-synthesis:none;line-height:1.02;letter-spacing:-.025em;font-weight:500}
.section-heading p,.code-copy p,.final-cta p{max-width:650px;color:var(--muted);font-size:17px}
.step-stack{border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:160px minmax(280px,1fr) minmax(250px,.8fr);gap:28px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line)}
.step-name{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}
.step-name code{width:48px;color:var(--accent);font-size:11px}
.step h3{margin:0 0 5px;font-size:18px}.step p{margin:0;color:var(--muted);font-size:14px}
.path{justify-self:end;color:#d8d3ca;font-size:12px;overflow-wrap:anywhere;text-align:right}
.code-section{padding:clamp(76px,9vw,126px) max(24px,calc((100vw - var(--max))/2));display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(40px,8vw,100px);align-items:center;background:var(--surface-2)}
.code-section-loop{grid-template-columns:minmax(260px,.58fr) minmax(0,1.42fr);align-items:start}
.code-copy code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;color:#d8d3ca}
.code-section h2{font-size:clamp(34px,4vw,54px)}
.text-link{display:inline-block;margin-top:12px;color:var(--accent);font-weight:650;font-size:14px}
pre{margin:0;padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:#101010;overflow:auto;color:#d8d3ca;box-shadow:inset 0 1px rgba(255,255,255,.04)}
pre code{font:13px/1.75 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.trust-list{border-top:1px solid var(--line)}
.trust-list div{display:grid;grid-template-columns:minmax(220px,.65fr) 1.35fr;gap:48px;padding:26px 0;border-bottom:1px solid var(--line)}
.trust-list dt{font-size:18px;font-weight:700}.trust-list dd{margin:0;color:var(--muted);max-width:620px}
.contract{padding-top:32px}
.contract h2{max-width:600px}
.contract-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:1px;margin-top:44px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.contract-grid div{min-height:170px;padding:30px;background:var(--surface);display:flex;flex-direction:column;justify-content:space-between;gap:26px}
.contract-grid strong{font-size:20px}.contract-grid span{max-width:410px;color:var(--muted);font-size:14px}
.final-cta{max-width:var(--max);margin:40px auto 0;padding:clamp(78px,10vw,138px) 24px;text-align:center}
.final-cta h2,.final-cta p{margin-left:auto;margin-right:auto}.final-cta .hero-actions{justify-content:center}
footer{max-width:var(--max);margin:0 auto;padding:28px 24px 44px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr auto;gap:26px;align-items:center;color:var(--muted);font-size:12px}
footer p{margin:0;text-align:center}.footer-brand{color:var(--text)}
footer div{display:flex;gap:18px}footer a{min-height:44px;display:inline-flex;align-items:center}footer a:hover{color:var(--text)}
@media(max-width:860px){
  .dev-nav nav a:not(.nav-cta){display:none}
  .dev-hero{grid-template-columns:1fr;min-height:auto;padding-top:72px}.protocol-object{width:min(82vw,480px)}
  .principle-strip{grid-template-columns:1fr 1fr}.principle-strip p:nth-child(2){border-right:0}.principle-strip p:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .step{grid-template-columns:1fr}.path{justify-self:start;text-align:left}
  .code-section{grid-template-columns:1fr}
  footer{grid-template-columns:1fr;text-align:left}footer p{text-align:left}
}
@media(max-width:560px){
  .dev-nav{height:64px;padding:0 18px}.dev-hero{padding:58px 18px 58px}.quickstart,.trust,.contract{padding-left:18px;padding-right:18px}
  h1{font-size:clamp(2.6rem,13vw,2.875rem)}.protocol-object{width:86vw}.protocol-core{width:102px;height:102px}
  .principle-strip{margin:0 18px;padding:0}.step{gap:16px}.trust-list div{grid-template-columns:1fr;gap:8px}
  .contract-grid{grid-template-columns:1fr}.contract-grid div{min-height:145px}.code-section{padding-left:18px;padding-right:18px}
  pre{padding:18px;font-size:11px}.final-cta{padding-left:18px;padding-right:18px}footer{margin:0 18px;padding-left:0;padding-right:0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.protocol-orbit{animation:none}.button{transition:none}}