*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--accent);
}

button {
  font-family: inherit;
  cursor: pointer;
}

input,
textarea {
  font-family: inherit;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 400;
}

img, svg {
  max-width: 100%;
  display: block;
}

/* focus ring */
:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

/* container */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--sp-7);
}

@media (max-width: 720px) {
  .container {
    padding: 0 var(--sp-5);
  }
}

/* Light-mode card materiality.
   On dark theme panels sit at a visibly different shade from the
   background, so they read as "cards" automatically. On light
   theme the panel color is intentionally near-white to keep the
   overall impression clean, but that leaves cards flat. A very
   subtle drop shadow re-introduces card materiality without
   crossing into "playful" territory.

   Applied globally to the standard panel classes. Astro
   scoped-CSS uses [data-astro-cid-XXX] wrappers, so we target the
   base class name via [class*="..."] to bypass scoping. */

[data-theme="light"] [class~="panel"],
[data-theme="light"] [class~="model-card"],
[data-theme="light"] [class~="wa-quick"],
[data-theme="light"] [class~="conc-box"],
[data-theme="light"] [class~="motm-card"],
[data-theme="light"] [class~="chain-row"],
[data-theme="light"] [class~="method-callout"],
[data-theme="light"] [class~="metric-table"],
[data-theme="light"] [class~="app-card"],
[data-theme="light"] [class~="method-badge"] {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.02);
}

[data-theme="light"] [class~="model-card"]:hover,
[data-theme="light"] [class~="motm-card"]:hover,
[data-theme="light"] [class~="method-badge"]:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}

/*
  External-link arrow: SVG icon that iOS Safari cannot replace with emoji.
  Usage: <a href="...">text <span class="ext-arrow" aria-hidden="true"></span></a>
  The arrow inherits currentColor and sits inline with text baseline.
*/
.ext-arrow {
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-left: 4px;
  vertical-align: -0.05em;
  background-color: currentColor;
  opacity: 0.7;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M4 3 L9 3 L9 8 M9 3 L3 9' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M4 3 L9 3 L9 8 M9 3 L3 9' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  flex-shrink: 0;
}