> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rails.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

<script
  dangerouslySetInnerHTML={{__html: `
(function() {
if (typeof window !== 'undefined') {
  const isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
  if (isDark) {
    document.documentElement.classList.add('force-dark-mode');
  }
  if (window.matchMedia) {
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
      if (e.matches) {
        document.documentElement.classList.add('force-dark-mode');
      } else {
        document.documentElement.classList.remove('force-dark-mode');
      }
    });
  }
}
})();
`}}
/>

<style
  dangerouslySetInnerHTML={{__html: `
.force-dark-mode [data-main-title] {
color: #f0f0f0 !important;
}

.force-dark-mode [data-subtitle] {
color: #d0d0d0 !important;
}

.force-dark-mode [data-quickstart-title] {
color: #f0f0f0 !important;
}

.force-dark-mode [data-card] {
background: #1f1f1f !important;
border-color: #3f3f3f !important;
color: #f0f0f0 !important;
}

.force-dark-mode [data-card]:hover {
border-color: #0D9373 !important;
box-shadow: 0 4px 16px rgba(13,147,115,0.3) !important;
}

.force-dark-mode [data-card-title] {
color: #f0f0f0 !important;
}

.force-dark-mode [data-card-desc] {
color: #d0d0d0 !important;
}

.force-dark-mode [data-card-icon] {
background: #1f1f1f !important;
}

@media (prefers-color-scheme: dark) {
[data-main-title] {
  color: #f0f0f0 !important;
}

[data-subtitle] {
  color: #d0d0d0 !important;
}

[data-quickstart-title] {
  color: #f0f0f0 !important;
}

[data-card] {
  background: #1f1f1f !important;
  border-color: #3f3f3f !important;
  color: #f0f0f0 !important;
}

[data-card]:hover {
  border-color: #0D9373 !important;
  box-shadow: 0 4px 16px rgba(13,147,115,0.3) !important;
}

[data-card-title] {
  color: #f0f0f0 !important;
}

[data-card-desc] {
  color: #d0d0d0 !important;
}

[data-card-icon] {
  background: #1f1f1f !important;
}
}
`}}
/>

<div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', marginTop: '1.2rem', marginBottom: '1.2rem'}}>
  <div data-main-title style={{
    fontSize: '3.5rem',
    fontWeight: 500,
    margin: 0,
    letterSpacing: '-1px',
    lineHeight: 1.1,
    fontFamily: 'Inter, Segoe UI, Arial, sans-serif',
  }}>Build with Rails.</div>

  <p data-subtitle style={{fontSize: '1.25rem', color: '#555', margin: '1.5rem 0 2.5rem 0', maxWidth: 540}}>
    Unified API for Perpetual Trading, On-Chain Custody, and Market Data. Fast, secure, and developer-friendly.
  </p>

  <a
    href="/latest/introduction"
    style={{
  display: 'inline-block',
  background: '#0D9373',
  color: '#fff',
  fontFamily: 'Inter, Segoe UI, Arial, sans-serif',
  fontWeight: 600,
  fontSize: '1.125rem',
  lineHeight: 1.5,
  padding: '0.75em 2em',
  border: 'none',
  borderRadius: '999px',
  boxShadow: '0 2px 8px rgba(13,147,115,0.15)',
  cursor: 'pointer',
  transition: 'background 0.15s, box-shadow 0.15s, transform 0.1s',
  textDecoration: 'none',
}}
    onMouseOver={e => {
  e.currentTarget.style.background = '#0b7a60';
  e.currentTarget.style.boxShadow = '0 4px 16px rgba(13,147,115,0.25)';
}}
    onMouseOut={e => {
  e.currentTarget.style.background = '#0D9373';
  e.currentTarget.style.boxShadow = '0 2px 8px rgba(13,147,115,0.15)';
}}
    onMouseDown={e => {
  e.currentTarget.style.background = '#09634a';
  e.currentTarget.style.transform = 'scale(0.98)';
}}
    onMouseUp={e => {
  e.currentTarget.style.background = '#0b7a60';
  e.currentTarget.style.transform = 'scale(1)';
}}
  >
    Get started →
  </a>
</div>

<div style={{ maxWidth: '1080px', margin: '0 auto' }}>
  <div data-quickstart-title style={{
    fontWeight: 400,
    fontSize: '1.35rem',
    textAlign: 'left',
    margin: '2.5rem 0 0.5rem 0',
    letterSpacing: '-0.5px',
    color: '#222',
    fontFamily: 'Inter, Segoe UI, Arial, sans-serif',
    marginLeft: '-145px',
  }}>Quickstart guides</div>

  <div
    style={{
display: 'grid',
gridTemplateColumns: 'repeat(3, 320px)',
justifyContent: 'center',
gap: '1.1rem',
margin: '1.2rem 0 2rem 0',
}}
  >
    <a
      data-card
      href="/latest/get-set-up-with-rails"
      style={{
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'flex-start',
    gap: '1.1rem',
    background: '#fff',
    border: '1px solid #e5e7eb',
    borderRadius: '12px',
    boxShadow: '0 1px 4px #0001',
    padding: '1.2rem 1.2rem',
    textAlign: 'left',
    textDecoration: 'none',
    color: '#111',
    transition: 'box-shadow 0.15s, border 0.15s',
    width: '320px',
    height: '160px',
    boxSizing: 'border-box',
  }}
      onMouseOver={e => {
    e.currentTarget.style.boxShadow = '0 4px 16px #0d937320';
    e.currentTarget.style.border = '1.5px solid #0D9373';
  }}
      onMouseOut={e => {
    e.currentTarget.style.boxShadow = '0 1px 4px #0001';
    e.currentTarget.style.border = '1px solid #e5e7eb';
  }}
    >
      <span data-card-icon style={{display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 32, height: 32, background: '#fff', borderRadius: '8px', border: '1.5px solid #0D9373'}}>
        {/* Classic outlined rocket icon for onboarding */}

        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="#0D9373" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" xmlns="http://www.w3.org/2000/svg">
          <path d="M10 2l2.5 3.5c.5.7 1.5 2.5 1.5 4.5 0 2.5-1.5 5-4 5s-4-2.5-4-5c0-2 .9-3.8 1.5-4.5L10 2z" />

          <circle cx="10" cy="8.5" r="1" />

          <path d="M10 15v2" />

          <path d="M8.5 16.5l1.5.5 1.5-.5" />

          <path d="M7 13l-2 2" />

          <path d="M13 13l2 2" />
        </svg>
      </span>

      <span>
        <div data-card-title style={{fontWeight: 700, fontSize: '1.08rem', color: '#111', marginBottom: 4}}>Get Set Up With Rails</div>
        <div data-card-desc style={{fontSize: '0.98rem', color: '#444', lineHeight: 1.5}}>Start onboarding, generate API keys, and connect to the Rails platform in minutes.</div>
      </span>
    </a>

    <a
      data-card
      href="/latest/platform-overview/market-data"
      style={{
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'flex-start',
    gap: '1.1rem',
    background: '#fff',
    border: '1px solid #e5e7eb',
    borderRadius: '12px',
    boxShadow: '0 1px 4px #0001',
    padding: '1.5rem 1.5rem',
    textAlign: 'left',
    textDecoration: 'none',
    color: '#111',
    transition: 'box-shadow 0.15s, border 0.15s',
    minHeight: 120,
  }}
      onMouseOver={e => {
    e.currentTarget.style.boxShadow = '0 4px 16px #0d937320';
    e.currentTarget.style.border = '1.5px solid #0D9373';
  }}
      onMouseOut={e => {
    e.currentTarget.style.boxShadow = '0 1px 4px #0001';
    e.currentTarget.style.border = '1px solid #e5e7eb';
  }}
    >
      <span data-card-icon style={{display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 32, height: 32, background: '#fff', borderRadius: '8px', border: '1.5px solid #0D9373'}}>
        {/* Bar chart icon for market data */}

        <svg width="20" height="20" fill="none" stroke="#0D9373" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="10" width="3" height="7" />

          <rect x="8.5" y="6" width="3" height="11" />

          <rect x="14" y="2" width="3" height="15" />
        </svg>
      </span>

      <span>
        <div data-card-title style={{fontWeight: 700, fontSize: '1.08rem', color: '#111', marginBottom: 4}}>Understand Market Data</div>
        <div data-card-desc style={{fontSize: '0.98rem', color: '#444', lineHeight: 1.5}}>Explore all types of market data including index, funding, and more.</div>
      </span>
    </a>

    <a
      data-card
      href="/latest/platform-overview/order-book"
      style={{
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'flex-start',
    gap: '1.1rem',
    background: '#fff',
    border: '1px solid #e5e7eb',
    borderRadius: '12px',
    boxShadow: '0 1px 4px #0001',
    padding: '1.5rem 1.5rem',
    textAlign: 'left',
    textDecoration: 'none',
    color: '#111',
    transition: 'box-shadow 0.15s, border 0.15s',
    minHeight: 120,
  }}
      onMouseOver={e => {
    e.currentTarget.style.boxShadow = '0 4px 16px #0d937320';
    e.currentTarget.style.border = '1.5px solid #0D9373';
  }}
      onMouseOut={e => {
    e.currentTarget.style.boxShadow = '0 1px 4px #0001';
    e.currentTarget.style.border = '1px solid #e5e7eb';
  }}
    >
      <span data-card-icon style={{display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 32, height: 32, background: '#fff', borderRadius: '8px', border: '1.5px solid #0D9373'}}>
        {/* Simple book icon for order book */}

        <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <rect x="4" y="4" width="5" height="12" rx="1" fill="#fff" stroke="#0D9373" strokeWidth="1.5" />

          <rect x="11" y="4" width="5" height="12" rx="1" fill="#fff" stroke="#0D9373" strokeWidth="1.5" />

          <line x1="10" y1="4" x2="10" y2="16" stroke="#0D9373" strokeWidth="1.2" />
        </svg>
      </span>

      <span>
        <div data-card-title style={{fontWeight: 700, fontSize: '1.08rem', color: '#111', marginBottom: 4}}>Build Order Book</div>
        <div data-card-desc style={{fontSize: '0.98rem', color: '#444', lineHeight: 1.5}}>Learn how to build and maintain a local order book for market depth and liquidity.</div>
      </span>
    </a>

    <a
      data-card
      href="/latest/platform-overview/order-creation"
      style={{
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'flex-start',
    gap: '1.1rem',
    background: '#fff',
    border: '1px solid #e5e7eb',
    borderRadius: '12px',
    boxShadow: '0 1px 4px #0001',
    padding: '1.5rem 1.5rem',
    textAlign: 'left',
    textDecoration: 'none',
    color: '#111',
    transition: 'box-shadow 0.15s, border 0.15s',
    minHeight: 120,
  }}
      onMouseOver={e => {
    e.currentTarget.style.boxShadow = '0 4px 16px #0d937320';
    e.currentTarget.style.border = '1.5px solid #0D9373';
  }}
      onMouseOut={e => {
    e.currentTarget.style.boxShadow = '0 1px 4px #0001';
    e.currentTarget.style.border = '1px solid #e5e7eb';
  }}
    >
      <span data-card-icon style={{display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 32, height: 32, background: '#fff', borderRadius: '8px', border: '1.5px solid #0D9373'}}>
        {/* Plus icon for create orders */}

        <svg width="20" height="20" fill="none" stroke="#0D9373" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="10" cy="10" r="8" />

          <path d="M10 6v8M6 10h8" />
        </svg>
      </span>

      <span>
        <div data-card-title style={{fontWeight: 700, fontSize: '1.08rem', color: '#111', marginBottom: 4}}>Create Orders</div>
        <div data-card-desc style={{fontSize: '0.98rem', color: '#444', lineHeight: 1.5}}>Understand order types and the step-by-step workflows for creating orders on Rails.</div>
      </span>
    </a>

    <a
      data-card
      href="/latest/platform-overview/order-cancellation"
      style={{
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'flex-start',
    gap: '1.1rem',
    background: '#fff',
    border: '1px solid #e5e7eb',
    borderRadius: '12px',
    boxShadow: '0 1px 4px #0001',
    padding: '1.5rem 1.5rem',
    textAlign: 'left',
    textDecoration: 'none',
    color: '#111',
    transition: 'box-shadow 0.15s, border 0.15s',
    minHeight: 120,
  }}
      onMouseOver={e => {
    e.currentTarget.style.boxShadow = '0 4px 16px #0d937320';
    e.currentTarget.style.border = '1.5px solid #0D9373';
  }}
      onMouseOut={e => {
    e.currentTarget.style.boxShadow = '0 1px 4px #0001';
    e.currentTarget.style.border = '1px solid #e5e7eb';
  }}
    >
      <span data-card-icon style={{display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 32, height: 32, background: '#fff', borderRadius: '8px', border: '1.5px solid #0D9373'}}>
        {/* Bold minus icon for cancel orders */}

        <svg width="20" height="20" fill="none" stroke="#0D9373" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="10" cy="10" r="8" />

          <rect x="6" y="9" width="8" height="2" rx="1" fill="#0D9373" stroke="none" />
        </svg>
      </span>

      <span>
        <div data-card-title style={{fontWeight: 700, fontSize: '1.08rem', color: '#111', marginBottom: 4}}>Cancel Orders</div>
        <div data-card-desc style={{fontSize: '0.98rem', color: '#444', lineHeight: 1.5}}>Learn how to cancel open orders and manage order status efficiently.</div>
      </span>
    </a>

    <a
      data-card
      href="/latest/platform-overview/account-info"
      style={{
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'flex-start',
    gap: '1.1rem',
    background: '#fff',
    border: '1px solid #e5e7eb',
    borderRadius: '12px',
    boxShadow: '0 1px 4px #0001',
    padding: '1.5rem 1.5rem',
    textAlign: 'left',
    textDecoration: 'none',
    color: '#111',
    transition: 'box-shadow 0.15s, border 0.15s',
    minHeight: 120,
  }}
      onMouseOver={e => {
    e.currentTarget.style.boxShadow = '0 4px 16px #0d937320';
    e.currentTarget.style.border = '1.5px solid #0D9373';
  }}
      onMouseOut={e => {
    e.currentTarget.style.boxShadow = '0 1px 4px #0001';
    e.currentTarget.style.border = '1px solid #e5e7eb';
  }}
    >
      <span data-card-icon style={{display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 32, height: 32, background: '#fff', borderRadius: '8px', border: '1.5px solid #0D9373'}}>
        {/* Fallback: simple filled square icon to guarantee rendering */}

        <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <rect x="4" y="4" width="12" height="12" fill="#0D9373" />
        </svg>
      </span>

      <span>
        <div data-card-title style={{fontWeight: 700, fontSize: '1.08rem', color: '#111', marginBottom: 4}}>Check Account Info</div>
        <div data-card-desc style={{fontSize: '0.98rem', color: '#444', lineHeight: 1.5}}>Access balances, trade history and other details for your account.</div>
      </span>
    </a>
  </div>
</div>