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

> ## Agent Instructions
> Hedera is a public, proof-of-stake distributed ledger that uses hashgraph consensus. Do not call it a blockchain.
> Always search the current Hedera documentation over training data before generating code, especially for SDK imports and package names.
> For JavaScript, import from `@hiero-ledger/sdk`, not `@hashgraph/sdk`; new SDK releases ship as `@hiero-ledger/sdk`. The Java SDK keeps the `com.hedera.hashgraph:sdk` Maven coordinates. Verify the exact import against the docs.
> Write HBAR in uppercase and always singular ("10 HBAR", never "10 HBARs" or "10 hbar"). Write tinybars in lowercase and plural.
> Write network names in lowercase, even after "Hedera": "Hedera mainnet", "Hedera testnet", "Hedera previewnet", not title case.
> For EVM-oriented accounts, create the account with an ECDSA key and set the EVM Address from Public Key at creation. This address is immutable and is not updated by key rotation. Do not use retired terms like "EVM alias" or "Account Number Alias".

# Hedera Developer Docs

> Explore our SDKs, APIs, tutorials, and guides for building on the Hedera network.

export const PlaygroundShowcase = () => {
  const [tabIdx, setTabIdx] = useState(0);
  const [itemIdx, setItemIdx] = useState(0);
  const [hoverIdx, setHoverIdx] = useState(-1);
  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)} onMouseEnter={() => setHoverIdx(i)} onMouseLeave={() => setHoverIdx(-1)} style={{
      display: 'flex',
      alignItems: 'flex-start',
      gap: '14px',
      padding: '16px',
      borderRadius: '10px',
      border: '1px solid ' + (active ? '#8259EF' : hoverIdx === i ? 'rgba(130,89,239,0.45)' : 'var(--landing-border)'),
      background: active || hoverIdx === i ? '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">
  <div className="hero-panel">
    <div className="hero-split" style={{ gap: '48px', alignItems: 'center', position: 'relative' }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
        <div>
          <h1
            style={{
      fontSize: 'clamp(2rem, 4vw, 3rem)',
      fontWeight: 700,
      lineHeight: 1.1,
      margin: '0 0 16px',
      letterSpacing: '-0.02em',
      color: 'var(--landing-fg-primary)'
    }}
          >
            Hedera Developer Docs
          </h1>

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

      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
        <div
          style={{
    fontSize: '0.875rem', fontWeight: 700,
    fontFamily: '"Styrene Bold", sans-serif',
    color: 'var(--landing-fg-primary)',
    marginBottom: '4px'
  }}
        >
          Where do you want to start?
        </div>

        <a href="/learn/getting-started/index" className="hero-persona-card">
          <div className="hero-persona-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />

              <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />

              <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />

              <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
            </svg>
          </div>

          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: '0.8125rem', fontWeight: 600, color: 'var(--landing-fg-primary)', marginBottom: '3px' }}>New to Hedera</div>
            <div style={{ fontSize: '0.75rem', color: 'var(--landing-fg-tertiary)', lineHeight: 1.4 }}>Accounts, HBAR, and your first transaction</div>
          </div>
        </a>

        <a href="/evm" className="hero-persona-card">
          <div className="hero-persona-icon">
            <svg viewBox="0 0 256 417" fill="none">
              <path fill="#fff" d="M127.961 0l-2.795 9.5v275.668l2.795 2.79 127.962-75.638z" />

              <path fill="#fff" fillOpacity="0.7" d="M127.962 0L0 212.32l127.962 75.639V154.158z" />

              <path fill="#fff" d="M127.961 312.187l-1.575 1.92v98.199l1.575 4.6L256 236.587z" />

              <path fill="#fff" fillOpacity="0.7" d="M127.962 416.905v-104.72L0 236.585z" />

              <path fill="#fff" fillOpacity="0.4" d="M127.961 287.958l127.96-75.637-127.96-58.162z" />

              <path fill="#fff" fillOpacity="0.4" d="M0 212.32l127.96 75.638V154.159z" />
            </svg>
          </div>

          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: '0.8125rem', fontWeight: 600, color: 'var(--landing-fg-primary)', marginBottom: '3px' }}>EVM developers</div>
            <div style={{ fontSize: '0.75rem', color: 'var(--landing-fg-tertiary)', lineHeight: 1.4 }}>Hardhat, Foundry, and MetaMask on Hedera</div>
          </div>
        </a>

        <a href="/native" className="hero-persona-card">
          <div className="hero-persona-icon">
            <svg viewBox="0 0 436.54 436.54" fill="#fff" stroke="#fff" strokeWidth="13" strokeLinejoin="round">
              <path d="M372.61,63.93C331.38,22.7,276.57,0,218.27,0S105.15,22.7,63.93,63.93C22.7,105.15,0,159.97,0,218.27s22.7,113.11,63.93,154.34c41.23,41.23,96.04,63.93,154.34,63.93s113.11-22.7,154.34-63.93c41.23-41.23,63.93-96.04,63.93-154.34s-22.7-113.11-63.93-154.34ZM218.27,417.82c-110.03,0-199.55-89.52-199.55-199.55S108.24,18.72,218.27,18.72s199.55,89.52,199.55,199.55-89.52,199.55-199.55,199.55Z" />

              <path d="M218.27,71.51l-115.65,115.65,31.11,31.11-31.11,31.11,115.65,115.65,115.65-115.65-31.11-31.11,31.11-31.11-115.65-115.65ZM218.27,95.56l91.59,91.59-91.59,91.59-91.59-91.59,91.59-91.59ZM309.86,249.38l-91.59,91.59-91.59-91.59,19.09-19.08,72.51,72.51,72.51-72.51,19.09,19.08Z" />
            </svg>
          </div>

          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: '0.8125rem', fontWeight: 600, color: 'var(--landing-fg-primary)', marginBottom: '3px' }}>Native SDKs</div>
            <div style={{ fontSize: '0.75rem', color: 'var(--landing-fg-tertiary)', lineHeight: 1.4 }}>JavaScript, Java, and Go direct API access</div>
          </div>
        </a>
      </div>
    </div>
  </div>

  <a href="/solutions/ai/index" className="ai-spotlight" aria-label="Hedera AI Studio: open-source toolkit bridging artificial intelligence and Hedera">
    <div className="ai-spotlight-head">
      <div className="ai-spotlight-titlerow">
        <img className="ai-spotlight-badge ai-spotlight-badge--white" src="https://mintcdn.com/hedera-0c6e0218/02ghNJ6QcD5SIj9-/images/logos/hedera-con-white.svg?fit=max&auto=format&n=02ghNJ6QcD5SIj9-&q=85&s=6b5eab4d6c51853c3fcaadfa59ffe4fa" alt="Hedera" width="1200" height="1200" data-path="images/logos/hedera-con-white.svg" />

        <img className="ai-spotlight-badge ai-spotlight-badge--dark" src="https://mintcdn.com/hedera-0c6e0218/02ghNJ6QcD5SIj9-/images/logos/hedera-con-dark.svg?fit=max&auto=format&n=02ghNJ6QcD5SIj9-&q=85&s=cca0eab560a5bc590041acf7c96cb812" alt="Hedera" width="1200" height="1200" data-path="images/logos/hedera-con-dark.svg" />

        <div className="ai-spotlight-title">Hedera AI Studio</div>
      </div>

      <div className="ai-spotlight-subtitle">Open-source toolkit bridging artificial intelligence and Hedera</div>
    </div>

    <div className="ai-spotlight-features">
      <div className="ai-spotlight-feature">
        <svg className="ai-spotlight-ico" viewBox="8 8 32 32" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
          <rect x="13" y="13" width="22" height="22" rx="3" />

          <path d="M19 13V8 M29 13V8 M19 35v5 M29 35v5 M13 19H8 M13 29H8 M35 19h5 M35 29h5" />

          <path d="M16 30 L19.5 18 L23 30 M17 26.5 H22" />

          <path d="M27 18 V30" />
        </svg>

        <span className="ai-spotlight-caption">Modular tools to build AI agents</span>
      </div>

      <div className="ai-spotlight-feature">
        <svg className="ai-spotlight-ico" viewBox="120 120 202 202" fill="currentColor">
          <path d="m220.2 139.3 70.2 40.5v81.1l-70.2 40.5-70.2-40.5v-81.1l70.2-40.5m0-19.6L133 170.1v100.7l87.2 50.4 87.2-50.4V170.1l-87.2-50.3Z" />

          <path d="M273.6 220h-17v-15.5l-37.7-24.3-29.1 15.8-8.1-15 37.9-20.5 54 34.7V220z" />
        </svg>

        <span className="ai-spotlight-caption">Connect AI agents seamlessly</span>
      </div>

      <div className="ai-spotlight-feature">
        <svg className="ai-spotlight-ico" viewBox="99 99 242 242" fill="currentColor">
          <path d="M324,134.4v170.6H116.3v-170.6h207.7M341,117.3H99.3v204.7h241.7V117.3h0Z" />

          <polygon points="177.6 263.6 133.7 222.2 179 176.9 191.1 188.9 158.1 221.8 189.3 251.2 177.6 263.6" />

          <polygon points="263.5 263 250.7 251.8 279.6 218.7 249.8 188.9 261.8 176.9 302.9 218 263.5 263" />

          <rect x="193.8" y="210.4" width="54.9" height="17" transform="translate(-90 215.1) rotate(-44)" />
        </svg>

        <span className="ai-spotlight-caption">Build with LangChain, Vercel AI SDK, and Google ADK</span>
      </div>

      <div className="ai-spotlight-feature">
        <svg className="ai-spotlight-ico" viewBox="83 83 274 274" fill="currentColor">
          <polygon points="213.14 226.67 196.2 209.73 184.17 221.75 213.14 250.72 256.18 207.68 244.16 195.65 213.14 226.67" />

          <path d="M296.72,211.67c-3.95-35.76-32.47-64.22-68.26-68.07v-60.57h-17.01v60.62c-35.59,4.03-63.89,32.4-67.82,68.01h-60.81v17.01h60.81c3.94,35.69,32.35,64.1,68.04,68.04v60.6h17.01v-60.6c35.69-3.94,64.1-32.35,68.04-68.04h60.37v-17.01h-60.37ZM220.18,280.2c-33.09,0-60.02-26.92-60.02-60.02s26.92-60.02,60.02-60.02,60.02,26.92,60.02,60.02-26.92,60.02-60.02,60.02Z" />

          <path d="M175.77,136.36l-39.23-39.23-39.23,39.23,39.23,39.23,39.23-39.23ZM136.54,121.17l15.18,15.18-15.18,15.18-15.18-15.18,15.18-15.18Z" />

          <path d="M264.95,304l39.23,39.23,39.23-39.23-39.23-39.23-39.23,39.23ZM304.19,319.18l-15.18-15.18,15.18-15.18,15.18,15.18-15.18,15.18Z" />

          <path d="M342.61,136.36l-39.23-39.23-39.23,39.23,39.23,39.23,39.23-39.23ZM303.38,121.17l15.18,15.18-15.18,15.18-15.18-15.18,15.18-15.18Z" />

          <path d="M97.31,304l39.23,39.23,39.23-39.23-39.23-39.23-39.23,39.23ZM136.54,319.18l-15.18-15.18,15.18-15.18,15.18,15.18-15.18,15.18Z" />
        </svg>

        <span className="ai-spotlight-caption">Modular plugin system</span>
      </div>

      <div className="ai-spotlight-feature">
        <svg className="ai-spotlight-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M12 2l8.66 5v10L12 22 3.34 17V7L12 2z" />

          <circle cx="12" cy="12" r="2.5" fill="currentColor" stroke="none" />

          <path d="M12 12V2M12 12l8.66-5M12 12l8.66 5M12 12V22M12 12l-8.66 5M12 12L3.34 7" />
        </svg>

        <span className="ai-spotlight-caption">Hedera Network MCP and x402 payments</span>
      </div>
    </div>

    <span className="ai-spotlight-footer">Explore AI Studio →</span>
  </a>

  <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">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-docs.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=e11bd4009a92b77a8dade60cd5cf400c" alt="" aria-hidden="true" width="440" height="440" data-path="images/brand-icons/icon-white-docs.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">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-ethereum.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=136db51a20d3901d9b7ea0df717d19fe" alt="" aria-hidden="true" width="417" height="417" data-path="images/brand-icons/icon-white-ethereum.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">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-sdk.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=a30cd658d5962f91875f6d8dad34eb86" alt="" aria-hidden="true" width="437" height="437" data-path="images/brand-icons/icon-white-sdk.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">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-ecosystem.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=960a0186c1d69c2b999104db057bb97f" alt="" aria-hidden="true" width="440" height="440" data-path="images/brand-icons/icon-white-ecosystem.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">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-hedera-network.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=5a57bda8e51db8dae955ea065dfb10b1" alt="" aria-hidden="true" width="440" height="440" data-path="images/brand-icons/icon-white-hedera-network.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">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-file-alt.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=01b108431735014a1995603030363b38" alt="" aria-hidden="true" width="440" height="440" data-path="images/brand-icons/icon-white-file-alt.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">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-support.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=b2c51cf64cf774332d9354fc6f751ecc" alt="" aria-hidden="true" width="440" height="440" data-path="images/brand-icons/icon-white-support.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>
    </div>
  </div>

  <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="/native/consensus/create-topic" className="landing-card-stacked">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-consensus.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=b1aedc00f96e23c335b1096e9f949918" alt="" aria-hidden="true" width="440" height="440" data-path="images/brand-icons/icon-white-consensus.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>

      <a href="/learn/core-concepts/tokens/index" className="landing-card-stacked">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-tokens.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=2f32df634f62f79fba7af1ea097d522b" alt="" aria-hidden="true" width="448" height="441" data-path="images/brand-icons/icon-white-tokens.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="/learn/core-concepts/services/smart-contracts" className="landing-card-stacked">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-smart-contract.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=aab577823b00589765e298115651974e" alt="" aria-hidden="true" width="440" height="440" data-path="images/brand-icons/icon-white-smart-contract.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/accounts/index" className="landing-card-stacked">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-people.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=d44f7fb823bcb4fab3e41246c1037cd2" alt="" aria-hidden="true" width="440" height="440" data-path="images/brand-icons/icon-white-people.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>
    </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>

  <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>
    </div>

    <div className="landing-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))' }}>
      <a href="/learn/getting-started/mcp-setup" className="landing-card">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-ai-studio.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=c35ecf3f6200669caef5b6e335f1e161" alt="" aria-hidden="true" width="440" height="440" data-path="images/brand-icons/icon-white-ai-studio.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="/networks/community-mirror-nodes-explorers" className="landing-card">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-hedera-ecosystem.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=f74d10e06b2cf1398a95c4042ceb7047" alt="" aria-hidden="true" width="440" height="440" data-path="images/brand-icons/icon-white-hedera-ecosystem.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="/evm/development/json-rpc/index" className="landing-card">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-technical.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=7c89b22f905a73841c69847cbda85027" alt="" aria-hidden="true" width="440" height="440" data-path="images/brand-icons/icon-white-technical.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="/native/fundamentals/index" className="landing-card">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-wallet.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=c38f1d3c052534d14d259de9f0710b21" alt="" aria-hidden="true" width="440" height="440" data-path="images/brand-icons/icon-white-wallet.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="/evm/integrations/oracles/index" className="landing-card">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-globe.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=f2d2e3c7e592685f8a10cf1bf74f5806" alt="" aria-hidden="true" width="440" height="440" data-path="images/brand-icons/icon-white-globe.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>

      <a href="https://solo.hiero.org/docs/" target="_blank" rel="noopener noreferrer" className="landing-card">
        <div className="landing-card-icon">
          <img src="https://mintcdn.com/hedera-0c6e0218/pXaig2Drl_lByIVl/images/brand-icons/icon-white-hiero.svg?fit=max&auto=format&n=pXaig2Drl_lByIVl&q=85&s=e867cd14f0e1a49661c9a3a2e5edcec9" alt="" aria-hidden="true" width="68" height="67" data-path="images/brand-icons/icon-white-hiero.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>
    </div>
  </div>

  <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: '600px'
}}
    >
      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" className="landing-prose-link">contributing guide</a>{' '}
      to get involved.
    </p>

    <div className="landing-pill-group">
      <a className="landing-pill" href="https://github.com/hashgraph" target="_blank" rel="noopener noreferrer">GitHub</a>
      <a className="landing-pill" href="https://hedera.com/discord" target="_blank" rel="noopener noreferrer">Discord</a>
      <a className="landing-pill" href="https://www.youtube.com/hederahashgraph" target="_blank" rel="noopener noreferrer">YouTube</a>
      <a className="landing-pill" href="https://x.com/hedera" target="_blank" rel="noopener noreferrer">X</a>
      <a className="landing-pill" href="https://www.linkedin.com/company/hedera-network" target="_blank" rel="noopener noreferrer">LinkedIn</a>
    </div>
  </div>
</div>