1/** @jsxImportSource @emotion/react */
 2import { css } from '@emotion/react';
 3
 4const pageStyle = css`padding: 2rem; font-family: system-ui, sans-serif;`;
 5const titleStyle = css`font-size: 2rem;`;
 6const hookStyle = css`color: #555;`;
 7const gridStyle = css`display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin-top: 1rem;`;
 8const cardStyle = css`padding: 1rem; border: 1px solid #ddd; border-radius: 0.5rem;`;
 9
10export default function App() {
11  return (
12    <main css={pageStyle} className="page">
13      <h1 css={titleStyle} className="hero-title">Vite 8 + Emotion Fixture</h1>
14      <p css={hookStyle} className="hero-hook">Runtime CSS-in-JS via the Emotion css prop.</p>
15      <section css={gridStyle} id="features" className="feature-grid">
16        <article css={cardStyle} className="feature-card">One</article>
17        <article css={cardStyle} className="feature-card">Two</article>
18      </section>
19    </main>
20  );
21}