> ## Documentation Index
> Fetch the complete documentation index at: https://hedera-0c6e0218-mintlify-4a9eb0b1.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Hedera Developer Docs

> Build on Hedera with developer guides, SDK references, EVM and Solidity tutorials, mirror node REST APIs, protobuf specs, and node operator docs.

export const QuickstartsShowcase = () => {
  const [tabIdx, setTabIdx] = useState(0);
  const ICON = {
    wallet: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12V7H5a2 2 0 0 1 0-4h14v4 M3 5v14a2 2 0 0 0 2 2h16v-5 M18 12a2 2 0 0 0-2 2v0a2 2 0 0 0 2 2h4v-4z" /></svg>,
    coin: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><path d="M12 6v12 M15.5 9.5H10a2.5 2.5 0 0 0 0 5h4a2.5 2.5 0 0 1 0 5H8.5" /></svg>,
    contract: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M16 13H8 M16 17H8" /></svg>,
    chat: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /></svg>,
    bot: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="10" rx="2" /><circle cx="12" cy="5" r="2" /><path d="M12 7v4 M8 16h.01 M16 16h.01" /></svg>,
    flask: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10 2v6L4 18a2 2 0 0 0 2 3h12a2 2 0 0 0 2-3l-6-10V2 M10 2h4" /></svg>,
    sparkle: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2l2.4 5.6L20 9l-4.2 3.6L17 18l-5-3-5 3 1.2-5.4L4 9l5.6-1.4z" /></svg>,
    cpu: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="4" y="4" width="16" height="16" rx="2" /><rect x="9" y="9" width="6" height="6" /><path d="M9 1v3 M15 1v3 M9 20v3 M15 20v3 M20 9h3 M20 14h3 M1 9h3 M1 14h3" /></svg>,
    wrench: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" /></svg>,
    play: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 3l14 9-14 9z" /></svg>,
    fox: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 3l3 6 3-3 3 3 3-3 3 3 3-6v9a8 8 0 0 1-9 8 8 8 0 0 1-9-8z" /></svg>,
    image: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2" /><circle cx="8.5" cy="8.5" r="1.5" /><path d="M21 15l-5-5L5 21" /></svg>,
    bldg: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M3 9h18 M9 21V9" /></svg>
  };
  const TABS = [{
    label: 'Quickstarts',
    items: [{
      icon: ICON.play,
      title: 'Getting started',
      desc: 'Set up an account, get testnet HBAR, and run your first transaction.',
      href: '/learn/getting-started/index'
    }, {
      icon: ICON.coin,
      title: 'Testnet faucet',
      desc: 'Fund your testnet account with free HBAR to start building.',
      href: '/learn/getting-started/testnet-faucet'
    }, {
      icon: ICON.wrench,
      title: 'Choose your path',
      desc: 'EVM vs native SDK: pick the right starting point for what you’re building.',
      href: '/learn/getting-started/choose-your-path'
    }, {
      icon: ICON.coin,
      title: 'Quickstart',
      desc: 'Install the JavaScript SDK and submit your first transaction.',
      href: '/native/quickstart/javascript'
    }, {
      icon: ICON.fox,
      title: 'MetaMask setup',
      desc: 'Connect MetaMask to the Hedera EVM JSON-RPC relay.',
      href: '/evm/quickstart/setup-metamask'
    }]
  }];
  const chip = active => ({
    padding: '6px 14px',
    borderRadius: '999px',
    fontSize: '13px',
    fontWeight: 400,
    lineHeight: 1.4,
    cursor: 'pointer',
    border: '1px solid var(--landing-border)',
    background: active ? 'var(--landing-pill-bg)' : 'transparent',
    color: active ? 'var(--landing-pill-fg)' : 'var(--landing-fg-secondary)',
    transition: 'background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease',
    whiteSpace: 'nowrap'
  });
  return <div>
      {}
      {TABS.length > 1 && <div role="tablist" aria-label="Quickstart categories" style={{
    display: 'flex',
    gap: '8px',
    flexWrap: 'wrap',
    margin: '0 0 24px'
  }}>
          {TABS.map((t, i) => <button key={t.label} role="tab" aria-selected={i === tabIdx} onClick={() => setTabIdx(i)} style={chip(i === tabIdx)}>
              {t.label}
            </button>)}
        </div>}

      {}
      <div style={{
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(380px, 1fr))',
    gap: '12px'
  }}>
        {TABS[tabIdx].items.map(it => <a key={it.title} href={it.href} style={{
    display: 'flex',
    alignItems: 'flex-start',
    gap: '14px',
    padding: '18px',
    borderRadius: '10px',
    border: '1px solid var(--landing-border)',
    textDecoration: 'none',
    backgroundColor: 'var(--landing-card-bg)',
    transition: 'border-color 0.15s ease'
  }}>
            <div style={{
    width: '36px',
    height: '36px',
    borderRadius: '8px',
    background: 'var(--landing-card-icon-bg)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexShrink: 0
  }}>
              {it.icon}
            </div>
            <div style={{
    flex: 1,
    minWidth: 0
  }}>
              <div style={{
    fontWeight: 500,
    fontSize: '0.875rem',
    color: 'var(--landing-fg-primary)',
    marginBottom: '4px'
  }}>
                {it.title}
              </div>
              <div style={{
    fontSize: '0.8125rem',
    color: 'var(--landing-fg-tertiary)',
    lineHeight: 1.45
  }}>
                {it.desc}
              </div>
            </div>
          </a>)}
      </div>
    </div>;
};

export const PlaygroundShowcase = () => {
  const [tabIdx, setTabIdx] = useState(0);
  const [itemIdx, setItemIdx] = useState(0);
  const ICON = {
    bot: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="10" rx="2" /><circle cx="12" cy="5" r="2" /><path d="M12 7v4 M8 16h.01 M16 16h.01" /></svg>,
    coin: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><path d="M12 6v12 M15.5 9.5H10a2.5 2.5 0 0 0 0 5h4a2.5 2.5 0 0 1 0 5H8.5" /></svg>,
    chat: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /></svg>,
    contract: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M16 13H8 M16 17H8" /></svg>,
    sparkle: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2l2.4 5.6L20 9l-4.2 3.6L17 18l-5-3-5 3 1.2-5.4L4 9l5.6-1.4z" /></svg>,
    flask: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10 2v6L4 18a2 2 0 0 0 2 3h12a2 2 0 0 0 2-3l-6-10V2 M10 2h4" /></svg>,
    cpu: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="4" y="4" width="16" height="16" rx="2" /><rect x="9" y="9" width="6" height="6" /><path d="M9 1v3 M15 1v3 M9 20v3 M15 20v3 M20 9h3 M20 14h3 M1 9h3 M1 14h3" /></svg>,
    image: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2" /><circle cx="8.5" cy="8.5" r="1.5" /><path d="M21 15l-5-5L5 21" /></svg>,
    bldg: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M3 9h18 M9 21V9" /></svg>,
    wrench: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" /></svg>,
    code: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 18l6-6-6-6 M8 6l-6 6 6 6" /></svg>,
    play: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 3l14 9-14 9z" /></svg>,
    globe: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><path d="M2 12h20 M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 M12 2a15.3 15.3 0 0 0-4 10 15.3 15.3 0 0 0 4 10" /></svg>,
    cube: <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" /></svg>
  };
  const TABS = [{
    label: 'Try it live',
    items: [{
      icon: 'play',
      title: 'Developer Playground',
      desc: 'Run real Hedera transactions in your browser, no setup.',
      href: 'https://portal.hedera.com/playground',
      preview: {
        kind: 'embed',
        url: 'https://portal.hedera.com/playground',
        label: 'portal.hedera.com/playground'
      }
    }, {
      icon: 'contract',
      title: 'Contract Builder',
      desc: 'Scaffold and deploy Solidity contracts from the browser.',
      href: 'https://portal.hedera.com/contract-builder',
      preview: {
        kind: 'embed',
        url: 'https://portal.hedera.com/contract-builder?minimal=1',
        label: 'portal.hedera.com/contract-builder'
      }
    }, {
      icon: 'flask',
      title: 'Agent Lab',
      desc: 'Visual playground to build, test, and demo AI agents on Hedera.',
      href: 'https://portal.hedera.com/agent-lab',
      preview: {
        kind: 'embed',
        url: 'https://portal.hedera.com/agent-lab',
        label: 'portal.hedera.com/agent-lab'
      }
    }]
  }];
  const tab = TABS[tabIdx];
  const item = tab.items[itemIdx];
  const chip = active => ({
    padding: '6px 14px',
    borderRadius: '999px',
    fontSize: '13px',
    fontWeight: 400,
    lineHeight: 1.4,
    cursor: 'pointer',
    border: '1px solid var(--landing-border)',
    background: active ? 'var(--landing-pill-bg)' : 'transparent',
    color: active ? 'var(--landing-pill-fg)' : 'var(--landing-fg-secondary)',
    transition: 'background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease',
    whiteSpace: 'nowrap'
  });
  const ChatBubble = ({msg}) => {
    const isUser = msg.from === 'user';
    const statusColor = msg.status === 'success' ? '#16a34a' : msg.status === 'pending' ? '#d97706' : null;
    return <div style={{
      display: 'flex',
      justifyContent: isUser ? 'flex-end' : 'flex-start',
      marginBottom: '10px'
    }}>
        <div style={{
      maxWidth: '85%',
      padding: '10px 14px',
      borderRadius: '14px',
      background: isUser ? 'rgba(130,89,239,0.18)' : 'rgba(17,21,29,0.55)',
      color: '#fff',
      fontSize: '0.8125rem',
      lineHeight: 1.45,
      border: '1px solid rgba(255,255,255,0.06)'
    }}>
          {msg.status && <div style={{
      display: 'inline-flex',
      alignItems: 'center',
      gap: '6px',
      fontSize: '0.6875rem',
      color: statusColor,
      fontWeight: 500,
      marginBottom: '4px'
    }}>
              {msg.status === 'success' && <svg aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={statusColor} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" stroke={statusColor} strokeWidth="2" fill="none" /><path d="M8 12l3 3 5-6" /></svg>}
              {msg.status === 'pending' && <svg aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={statusColor} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>}
              <span style={{
      textTransform: 'uppercase',
      letterSpacing: '0.04em'
    }}>{msg.status}</span>
            </div>}
          <div>{msg.text}</div>
          {msg.action && <div style={{
      marginTop: '8px',
      padding: '6px 12px',
      borderRadius: '8px',
      background: 'rgba(255,255,255,0.08)',
      fontSize: '0.6875rem',
      display: 'inline-block'
    }}>
              {msg.action.label} · <span style={{
      fontFamily: 'monospace'
    }}>{msg.action.tx}</span>
            </div>}
        </div>
      </div>;
  };
  const PreviewPane = ({preview}) => {
    if (!preview) return null;
    const isEmbed = preview.kind === 'embed';
    const shell = {
      borderRadius: '12px',
      border: '1px solid var(--landing-border)',
      overflow: 'hidden',
      background: 'linear-gradient(180deg, #0c1226 0%, #11151D 100%)',
      height: isEmbed ? preview.height || '575px' : '420px',
      display: 'grid',
      gridTemplateRows: 'auto 1fr'
    };
    if (preview.kind === 'chat') {
      return <div style={shell}>
          <div style={{
        padding: '14px 18px',
        borderBottom: '1px solid rgba(255,255,255,0.06)',
        display: 'flex',
        alignItems: 'center',
        gap: '8px'
      }}>
            <div style={{
        width: '8px',
        height: '8px',
        borderRadius: '50%',
        background: '#16a34a'
      }} />
            <div style={{
        fontSize: '0.75rem',
        color: 'rgba(255,255,255,0.55)',
        fontFamily: 'monospace'
      }}>hedera-agent · testnet</div>
          </div>
          <div style={{
        flex: 1,
        padding: '18px',
        overflowY: 'auto'
      }}>
            {preview.messages.map((m, i) => <ChatBubble key={i} msg={m} />)}
          </div>
        </div>;
    }
    if (preview.kind === 'code') {
      return <div style={shell}>
          <div style={{
        padding: '10px 14px',
        borderBottom: '1px solid rgba(255,255,255,0.06)',
        display: 'flex',
        alignItems: 'center',
        gap: '8px'
      }}>
            <div style={{
        display: 'flex',
        gap: '6px'
      }}>
              <span style={{
        width: '10px',
        height: '10px',
        borderRadius: '50%',
        background: '#ff5f57'
      }} />
              <span style={{
        width: '10px',
        height: '10px',
        borderRadius: '50%',
        background: '#febc2e'
      }} />
              <span style={{
        width: '10px',
        height: '10px',
        borderRadius: '50%',
        background: '#28c840'
      }} />
            </div>
            <div style={{
        fontSize: '0.6875rem',
        color: 'rgba(255,255,255,0.5)',
        fontFamily: 'monospace',
        marginLeft: '8px',
        textTransform: 'uppercase',
        letterSpacing: '0.06em'
      }}>{preview.lang}</div>
          </div>
          <pre style={{
        flex: 1,
        margin: 0,
        padding: '18px',
        overflow: 'auto',
        fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
        fontSize: '0.75rem',
        lineHeight: 1.55,
        color: 'rgba(255,255,255,0.88)',
        whiteSpace: 'pre',
        background: 'transparent'
      }}><code>{preview.code}</code></pre>
        </div>;
    }
    if (preview.kind === 'result') {
      return <div style={shell}>
          <div style={{
        padding: '14px 18px',
        borderBottom: '1px solid rgba(255,255,255,0.06)',
        display: 'flex',
        alignItems: 'center',
        gap: '10px'
      }}>
            {preview.status === 'success' && <div style={{
        width: '24px',
        height: '24px',
        borderRadius: '50%',
        background: 'rgba(22,163,74,0.18)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
      }}>
                <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#16a34a" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 7" /></svg>
              </div>}
            <div style={{
        fontSize: '0.875rem',
        fontWeight: 500,
        color: '#fff'
      }}>{preview.title}</div>
          </div>
          <div style={{
        flex: 1,
        padding: '18px',
        overflow: 'auto'
      }}>
            <div style={{
        display: 'grid',
        gridTemplateColumns: '120px 1fr',
        gap: '8px 16px'
      }}>
              {preview.rows.flatMap(([k, v], i) => [<div key={'k' + i} style={{
        fontSize: '0.75rem',
        color: 'rgba(255,255,255,0.5)',
        textTransform: 'uppercase',
        letterSpacing: '0.04em'
      }}>{k}</div>, <div key={'v' + i} style={{
        fontSize: '0.8125rem',
        color: 'rgba(255,255,255,0.92)',
        fontFamily: (/^[0-9.\-]/).test(String(v)) || String(v).startsWith('0x') || String(v).startsWith('{') ? 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace' : 'inherit',
        wordBreak: 'break-all'
      }}>{v}</div>])}
            </div>
          </div>
        </div>;
    }
    if (preview.kind === 'embed') {
      return <div style={shell}>
          <div style={{
        padding: '10px 14px',
        borderBottom: '1px solid rgba(255,255,255,0.06)',
        display: 'flex',
        alignItems: 'center',
        gap: '8px'
      }}>
            <div style={{
        display: 'flex',
        gap: '6px'
      }}>
              <span style={{
        width: '10px',
        height: '10px',
        borderRadius: '50%',
        background: '#ff5f57'
      }} />
              <span style={{
        width: '10px',
        height: '10px',
        borderRadius: '50%',
        background: '#febc2e'
      }} />
              <span style={{
        width: '10px',
        height: '10px',
        borderRadius: '50%',
        background: '#28c840'
      }} />
            </div>
            <div style={{
        fontSize: '0.6875rem',
        color: 'rgba(255,255,255,0.5)',
        fontFamily: 'monospace',
        marginLeft: '8px'
      }}>{preview.label || preview.url}</div>
          </div>
          <iframe src={preview.url} title={preview.label || 'Embedded preview'} style={{
        flex: 1,
        width: '100%',
        border: 0,
        background: '#fff',
        display: 'block'
      }} loading="lazy" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox" />
        </div>;
    }
    return null;
  };
  return <div>
      {}
      {TABS.length > 1 && <div role="tablist" aria-label="Showcase categories" style={{
    display: 'flex',
    gap: '8px',
    flexWrap: 'wrap',
    margin: '0 0 16px'
  }}>
          {TABS.map((t, i) => <button key={t.label} role="tab" aria-selected={i === tabIdx} onClick={() => {
    setTabIdx(i);
    setItemIdx(0);
  }} style={chip(i === tabIdx)}>
              {t.label}
            </button>)}
        </div>}

      {}
      <div className="playground-grid">
        {}
        <div style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '8px'
  }}>
          {tab.items.map((it, i) => {
    const active = i === itemIdx;
    return <button key={it.title} onClick={() => setItemIdx(i)} style={{
      display: 'flex',
      alignItems: 'flex-start',
      gap: '14px',
      padding: '16px',
      borderRadius: '10px',
      border: '1px solid ' + (active ? '#8259EF' : 'var(--landing-border)'),
      background: active ? 'var(--landing-card-bg)' : 'transparent',
      textAlign: 'left',
      cursor: 'pointer',
      width: '100%',
      transition: 'background-color 0.15s ease, border-color 0.15s ease',
      font: 'inherit',
      color: 'inherit'
    }}>
                <div style={{
      width: '36px',
      height: '36px',
      borderRadius: '8px',
      background: 'var(--landing-card-icon-bg)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      flexShrink: 0
    }}>
                  {ICON[it.icon]}
                </div>
                <div style={{
      flex: 1,
      minWidth: 0
    }}>
                  <div style={{
      fontWeight: 500,
      fontSize: '0.875rem',
      color: 'var(--landing-fg-primary)',
      marginBottom: '4px'
    }}>{it.title}</div>
                  <div style={{
      fontSize: '0.8125rem',
      color: 'var(--landing-fg-tertiary)',
      lineHeight: 1.45
    }}>{it.desc}</div>
                </div>
                <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--landing-fg-tertiary)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{
      flexShrink: 0,
      marginTop: '10px'
    }}><path d="M9 18l6-6-6-6" /></svg>
              </button>;
  })}

          <a href={item.href} style={{
    alignSelf: 'flex-start',
    marginTop: '8px',
    padding: '8px 16px',
    borderRadius: '999px',
    backgroundColor: '#8259EF',
    color: '#fff',
    fontSize: '0.8125rem',
    fontWeight: 500,
    textDecoration: 'none'
  }}>
            Open {item.title} →
          </a>
        </div>

        {}
        <PreviewPane preview={item.preview} />
      </div>
    </div>;
};

<div className="not-prose landing-container">
  {/* ── HERO ──────────────────────────────────────────────── */}

  <div className="landing-section" style={{ padding: '48px 0 56px' }}>
    <h1
      style={{
fontSize: 'clamp(2rem, 4vw, 2.75rem)',
fontWeight: 500,
lineHeight: 1.2,
margin: '0 0 14px',
letterSpacing: '-0.025em',
color: 'var(--landing-fg-primary)'
}}
    >
      Hedera Developer Docs
    </h1>

    <p
      style={{
fontSize: '1.0625rem',
color: 'var(--landing-fg-secondary)',
margin: '0 0 28px',
maxWidth: '540px',
lineHeight: 1.55
}}
    >
      Explore our SDKs, APIs, tutorials, and guides for building on the Hedera network.
    </p>

    <a
      href="/learn"
      style={{
display: 'inline-flex',
alignItems: 'center',
gap: '6px',
padding: '9px 18px',
borderRadius: '999px',
backgroundColor: '#8259EF',
color: '#fff',
fontSize: '0.875rem',
fontWeight: 500,
textDecoration: 'none'
}}
    >
      Get started →
    </a>
  </div>

  {/* ── EXPLORE THE DOCS ─────────────────────────────────────────────────── */}

  <div className="landing-section">
    <h2 id="explore-the-docs" className="landing-section-heading">
      <a href="#explore-the-docs">Explore the docs</a>
    </h2>

    <p className="landing-section-description">
      The Hedera documentation is organized into seven sections. Pick the one that fits what you're building.
    </p>

    <div className="landing-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))' }}>
      <a href="/learn" className="landing-card">
        <div className="landing-card-icon">
          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M22 10v6M2 10l10-5 10 5-10 5z" />

            <path d="M6 12v5c3 3 9 3 12 0v-5" />
          </svg>
        </div>

        <div>
          <div className="landing-card-title">Learn</div>
          <div className="landing-card-desc">Fundamentals: accounts, keys, transactions, tokens, hashgraph, and networks.</div>
        </div>
      </a>

      <a href="/evm" className="landing-card">
        <div className="landing-card-icon">
          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M12 2L4 13l8 4 8-4-8-11z M4 15l8 7 8-7-8 4-8-4z" />
          </svg>
        </div>

        <div>
          <div className="landing-card-title">EVM Developers</div>
          <div className="landing-card-desc">Deploy Solidity contracts with MetaMask, Hardhat, Foundry, and JSON-RPC relay.</div>
        </div>
      </a>

      <a href="/native" className="landing-card">
        <div className="landing-card-icon">
          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M16 18l6-6-6-6 M8 6l-6 6 6 6" />
          </svg>
        </div>

        <div>
          <div className="landing-card-title">Native SDKs</div>
          <div className="landing-card-desc">JavaScript, Java, and Go SDKs for direct access to Hedera services.</div>
        </div>
      </a>

      <a href="/solutions" className="landing-card">
        <div className="landing-card-icon">
          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M9 18h6M10 22h4M12 2a7 7 0 0 1 4 12.7c-.6.5-1 1.2-1 2v.3H9v-.3c0-.8-.4-1.5-1-2A7 7 0 0 1 12 2z" />
          </svg>
        </div>

        <div>
          <div className="landing-card-title">Solutions</div>
          <div className="landing-card-desc">Tokenization, AI agents, governance, sustainability, and developer tools.</div>
        </div>
      </a>

      <a href="/operators/mirror-node/index" className="landing-card">
        <div className="landing-card-icon">
          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <rect x="2" y="3" width="20" height="6" rx="1" />

            <rect x="2" y="15" width="20" height="6" rx="1" />

            <line x1="6" y1="6" x2="6.01" y2="6" />

            <line x1="6" y1="18" x2="6.01" y2="18" />
          </svg>
        </div>

        <div>
          <div className="landing-card-title">Operators</div>
          <div className="landing-card-desc">Run your own mirror node, JSON-RPC relay, or consensus node.</div>
        </div>
      </a>

      <a href="/reference" className="landing-card">
        <div className="landing-card-icon">
          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />

            <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
          </svg>
        </div>

        <div>
          <div className="landing-card-title">Reference</div>
          <div className="landing-card-desc">REST API, Protobuf, HCS gRPC, Status, and Contract Verification APIs.</div>
        </div>
      </a>

      <a href="/support" className="landing-card">
        <div className="landing-card-icon">
          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M3 14v-2a9 9 0 0 1 18 0v2 M3 14a2 2 0 0 1 2-2h2v6H5a2 2 0 0 1-2-2z M21 14a2 2 0 0 0-2-2h-2v6h2a2 2 0 0 0 2-2z M17 18v2a2 2 0 0 1-2 2h-3" />
          </svg>
        </div>

        <div>
          <div className="landing-card-title">Support</div>
          <div className="landing-card-desc">FAQs, contributing, style guide, glossary, and community resources.</div>
        </div>
      </a>

      <a href="/support/faq/getting-started" className="landing-card">
        <div className="landing-card-icon">
          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="10" />

            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3 M12 17h.01" />
          </svg>
        </div>

        <div>
          <div className="landing-card-title">FAQs</div>
          <div className="landing-card-desc">Common questions on accounts, HBAR, governance, getting started, and the community.</div>
        </div>
      </a>
    </div>
  </div>

  {/* ── POPULAR QUICKSTARTS ──────────────────────────────────────────────── */}

  <div className="landing-section">
    <div className="landing-section-heading-row" style={{ marginBottom: '24px' }}>
      <h2 id="popular-quickstarts" className="landing-section-heading">
        <a href="#popular-quickstarts">Popular quickstarts</a>
      </h2>

      <a href="/learn/getting-started/index" className="landing-see-all">See all →</a>
    </div>

    <QuickstartsShowcase />
  </div>

  {/* ── BUILD ON HEDERA ──────────────────────────────────────────────────── */}

  <div className="landing-section">
    <div className="landing-section-heading-row">
      <h2 id="build-on-hedera" className="landing-section-heading">
        <a href="#build-on-hedera">Build on Hedera</a>
      </h2>

      <a href="/learn#core-concepts" className="landing-see-all">See all →</a>
    </div>

    <p className="landing-section-description">
      Pick the Hedera service that powers your app: accounts, smart contracts, native tokens, or consensus, then try it in your browser with no setup.
    </p>

    <div className="landing-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', marginBottom: '36px' }}>
      <a href="/learn/core-concepts/accounts/index" className="landing-card-stacked">
        <div className="landing-card-icon">
          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />

            <circle cx="12" cy="7" r="4" />
          </svg>
        </div>

        <div className="landing-card-title">Account Service</div>
        <div className="landing-card-desc">Create and manage Hedera accounts, keys, staking, and auto-account creation from a public key.</div>

        <div className="landing-tag-group">
          <span className="landing-tag">Accounts</span>
          <span className="landing-tag">HBAR</span>
        </div>
      </a>

      <a href="/learn/core-concepts/services/smart-contracts" className="landing-card-stacked">
        <div className="landing-card-icon">
          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M16 13H8 M16 17H8 M10 9H8" />
          </svg>
        </div>

        <div className="landing-card-title">Smart Contracts</div>
        <div className="landing-card-desc">EVM-compatible Solidity contracts with access to native Hedera services via system contracts.</div>

        <div className="landing-tag-group">
          <span className="landing-tag">Solidity</span>
          <span className="landing-tag">EVM</span>
        </div>
      </a>

      <a href="/learn/core-concepts/tokens/index" className="landing-card-stacked">
        <div className="landing-card-icon">
          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="10" />

            <path d="M12 6v12" />

            <path d="M15.5 9.5H10a2.5 2.5 0 0 0 0 5h4a2.5 2.5 0 0 1 0 5H8.5" />
          </svg>
        </div>

        <div className="landing-card-title">Token Service</div>
        <div className="landing-card-desc">Configure, mint, and manage native fungible and non-fungible tokens with built-in compliance.</div>

        <div className="landing-tag-group">
          <span className="landing-tag">HTS</span>
          <span className="landing-tag">ERC-20</span>
          <span className="landing-tag">ERC-721</span>
        </div>
      </a>

      <a href="/native/consensus/create-topic" className="landing-card-stacked">
        <div className="landing-card-icon">
          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="18" cy="5" r="3" />

            <circle cx="6" cy="12" r="3" />

            <circle cx="18" cy="19" r="3" />

            <path d="M8.59 13.51l6.83 3.98 M15.41 6.51l-6.82 3.98" />
          </svg>
        </div>

        <div className="landing-card-title">Consensus Service</div>
        <div className="landing-card-desc">Scalable, real-time audit logs with consensus timestamps. 10k+ TPS at \$0.0001 per message.</div>

        <div className="landing-tag-group">
          <span className="landing-tag">HCS</span>
          <span className="landing-tag">Messaging</span>
        </div>
      </a>
    </div>

    <h3
      id="try-it-live"
      style={{
fontSize: '1rem',
fontWeight: 500,
margin: '0 0 6px',
letterSpacing: '-0.01em',
color: 'var(--landing-fg-primary)'
}}
    >
      <a href="#try-it-live" style={{ color: 'inherit', textDecoration: 'none' }}>Try it live</a>
    </h3>

    <p
      style={{
fontSize: '0.875rem',
color: 'var(--landing-fg-tertiary)',
margin: '0 0 20px',
maxWidth: '620px',
lineHeight: 1.55
}}
    >
      Run code in the Playground, scaffold a contract, demo an agent, or preview a token mint, no setup.
    </p>

    <PlaygroundShowcase />
  </div>

  {/* ── DEVELOPER TOOLS ──────────────────────────────────────────────────── */}

  <div className="landing-section">
    <div className="landing-section-heading-row" style={{ marginBottom: '24px' }}>
      <h2 id="developer-tools" className="landing-section-heading">
        <a href="#developer-tools">Developer tools & resources</a>
      </h2>

      <a href="/solutions/tools/playground" className="landing-see-all">See all →</a>
    </div>

    <div className="landing-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))' }}>
      <a href="/learn/networks/community-mirror-nodes" className="landing-card">
        <div className="landing-card-icon">
          <svg aria-hidden="true" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M5 4 L5 20 M19 4 L19 20 M5 12 L19 12" />
          </svg>
        </div>

        <div>
          <div className="landing-card-title">Network Explorers</div>
          <div className="landing-card-desc">Visualize accounts, tokens, transactions, and contracts on Hedera.</div>
        </div>
      </a>

      <a href="https://solo.hiero.org/docs/" target="_blank" rel="noopener noreferrer" className="landing-card">
        <div className="landing-card-icon">
          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 68 67" fill="#fff">
            <path d="M4.2504954,65.9949012 C1.84804148,65.8818413 0,63.8124256 0,61.4071801 L0,4.46656551 C0,1.99990471 1.99962555,0 4.46656551,0 L63.109779,0 C65.5764398,0 67.5763446,1.99990471 67.5763446,4.46656551 L67.5763446,59.9569421 C67.5763446,62.4238821 65.5764398,64.4235076 63.109779,64.4235076 L33.9456187,64.4235076 C31.4789579,64.4235076 29.4790532,62.4238821 29.4790532,59.9569421 L29.4790532,23.3523211 C29.4790532,20.9473548 31.3273738,18.8779391 33.7298278,18.7646 C36.294753,18.6440028 38.4121842,20.6877356 38.4121842,23.2261406 L38.4121842,52.4070506 C38.4121842,54.1099287 39.7926321,55.4903766 41.4955102,55.4903766 L55.5598875,55.4903766 C57.2627656,55.4903766 58.6432135,54.1099287 58.6432135,52.4070506 L58.6432135,12.016457 C58.6432135,10.3135789 57.2627656,8.93313102 55.5598875,8.93313102 L12.016457,8.93313102 C10.3135789,8.93313102 8.93313102,10.3135789 8.93313102,12.016457 L8.93313102,61.5333606 C8.93313102,64.0717656 6.81542065,66.1157776 4.2504954,65.9949012" />
          </svg>
        </div>

        <div>
          <div className="landing-card-title">Solo</div>
          <div className="landing-card-desc">Deploy and operate a Hiero/Hedera network locally with Kubernetes, perfect for development and testing.</div>
        </div>
      </a>

      <a href="/native/tutorials/advanced/mcp-server-setup" className="landing-card">
        <div className="landing-card-icon">
          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <rect x="4" y="4" width="16" height="16" rx="2" />

            <rect x="9" y="9" width="6" height="6" />

            <path d="M9 1v3 M15 1v3 M9 20v3 M15 20v3 M20 9h3 M20 14h3 M1 9h3 M1 14h3" />
          </svg>
        </div>

        <div>
          <div className="landing-card-title">MCP Server</div>
          <div className="landing-card-desc">Connect AI assistants like Claude and Cursor to Hedera with the Model Context Protocol server.</div>
        </div>
      </a>

      <a href="/hedera/core-concepts/smart-contracts/json-rpc-relay" className="landing-card">
        <div className="landing-card-icon">
          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M4 17l6-6-6-6 M12 19h8" />
          </svg>
        </div>

        <div>
          <div className="landing-card-title">JSON-RPC Relay</div>
          <div className="landing-card-desc">EVM-compatible JSON-RPC endpoint: connect MetaMask, Hardhat, Foundry, and ethers.js to Hedera.</div>
        </div>
      </a>

      <a href="/hedera/sdks-and-apis/sdks#ecosystem-wallet-support" className="landing-card">
        <div className="landing-card-icon">
          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M21 12V7H5a2 2 0 0 1 0-4h14v4 M3 5v14a2 2 0 0 0 2 2h16v-5 M18 12a2 2 0 0 0-2 2v0a2 2 0 0 0 2 2h4v-4z" />
          </svg>
        </div>

        <div>
          <div className="landing-card-title">Wallet Integration</div>
          <div className="landing-card-desc">Connect Hedera-native and EVM wallets: HashPack, Blade, Kabila, MetaMask, and more.</div>
        </div>
      </a>

      <a href="/hedera/open-source-solutions/oracle-networks" className="landing-card">
        <div className="landing-card-icon">
          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="10" />

            <path d="M2 12h20 M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 M12 2a15.3 15.3 0 0 0-4 10 15.3 15.3 0 0 0 4 10" />
          </svg>
        </div>

        <div>
          <div className="landing-card-title">Oracle Networks</div>
          <div className="landing-card-desc">Pull external data into Hedera smart contracts: Chainlink, Pyth, Supra, and other oracle providers.</div>
        </div>
      </a>
    </div>
  </div>

  {/* ── FOOTER ───────────────────────────────────────────────────────────── */}

  <div className="landing-footer">
    <h2 id="contributing" className="landing-footer-heading">
      <a href="#contributing">Contributing</a>
    </h2>

    <p
      style={{
fontSize: '0.875rem',
color: 'var(--landing-fg-tertiary)',
margin: '0 0 20px',
lineHeight: 1.55,
maxWidth: '540px'
}}
    >
      Whether you're fixing bugs, enhancing features, or improving documentation, your contributions are important. Read our{' '}
      <a href="https://github.com/hashgraph/.github/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer" style={{ color: '#8259EF', textDecoration: 'none' }}>contributing guide</a>{' '}
      to get involved.
    </p>

    <div className="landing-pill-group">
      <a href="https://github.com/hashgraph/.github/blob/main/CODE_OF_CONDUCT.md" target="_blank" rel="noopener noreferrer" className="landing-pill">Code of Conduct</a>
      <a href="https://www.apache.org/licenses/LICENSE-2.0" target="_blank" rel="noopener noreferrer" className="landing-pill">Apache License 2.0</a>
      <a href="https://hedera.com/roadmap" target="_blank" rel="noopener noreferrer" className="landing-pill">Hedera Roadmap</a>
    </div>
  </div>
</div>
