:root {
  --bg: #0d1117;
  --panel: #161b22;
  --border: #30363d;
  --text: #e6edf3;
  --muted: #8b949e;
  --accent: #f778ba;
  --radius: 10px;
  /* Coding-tool type pairing: Space Grotesk for UI, JetBrains Mono for code. */
  --font-sans: "Space Grotesk", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.5;
}

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

.muted {
  color: var(--muted);
}

.container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.header h1 {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-links {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.header-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
}

.header-links a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.header-links svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.header h1 .logo {
  height: 28px;
  width: auto;
}

.header p {
  margin: 0 0 24px;
  color: var(--muted);
}

.layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  align-items: start;
}

/* Grid items default to min-width: auto, which is their max-content size —
   an intrinsically wide descendant (e.g. the 640px preview <img>) would
   otherwise stretch the shared column track past the viewport on mobile,
   where both panels collapse into one column. Letting items shrink below
   their content size hands overflow handling back to the descendants that
   already do it (img max-width: 100%, pre overflow-x: auto). */
.layout > * {
  min-width: 0;
}

@media (max-width: 760px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.field {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* allow the field (a flex item in .row) to shrink below its input's
     intrinsic width instead of overflowing the fixed-width panel. */
  min-width: 0;
}

.field label {
  font-size: 13px;
  color: var(--muted);
}

.field input,
.field select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 14px;
  width: 100%;
  min-width: 0;
}

.row {
  display: flex;
  gap: 12px;
  /* Three controls don't fit side by side in the 320px panel, so let the row
     wrap: the last one takes the next line and grows to the full width. */
  flex-wrap: wrap;
}

.row > * {
  /* A real basis (not 0) keeps every control legible — a control that would be
     squeezed below it wraps to the next line instead. */
  flex: 1 1 110px;
  min-width: 0;
}

.error {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(248, 81, 73, 0.12);
  border: 1px solid rgba(248, 81, 73, 0.4);
  color: #ff7b72;
  font-size: 13px;
}

.preview-head,
.snippet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.preview-head h3,
.snippet-head h3 {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

.preview {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  background:
    linear-gradient(45deg, #1c2128 25%, transparent 25%),
    linear-gradient(-45deg, #1c2128 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1c2128 75%),
    linear-gradient(-45deg, transparent 75%, #1c2128 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 200px;
}

.preview img {
  max-width: 100%;
  height: auto;
}

/* Fetching overlay shown while the preview card is (re)loading. */
.spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 17, 23, 0.55);
  border-radius: var(--radius);
}

.spinner[hidden] {
  display: none;
}

/* Screen-reader-only text (e.g. the spinner's "Loading preview…" status). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.spinner::after {
  content: "";
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(139, 148, 158, 0.35);
  border-top-color: var(--accent);
  animation: cm-spin 0.8s linear infinite;
}

@keyframes cm-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner::after {
    animation-duration: 1.6s;
  }
}

.preview-actions {
  display: flex;
  gap: 8px;
}

/* Quieter buttons for the preview controls (vs. the accent Copy buttons). */
button.copy.ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}

button.copy.ghost:hover {
  color: var(--text);
  border-color: var(--muted);
  opacity: 1;
}

.snippet {
  margin-top: 18px;
}

.snippet pre {
  margin: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  overflow-x: auto;
  font-size: 12px;
  font-family: var(--font-mono);
  white-space: pre-wrap;
  word-break: break-all;
}

.snippet-disabled pre {
  opacity: 0.5;
}

.snippet-note {
  margin: 16px 0 -2px;
  font-size: 12px;
  color: var(--muted);
}

.snippet-note code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}

button.copy {
  background: var(--accent);
  color: #0d1117;
  border: none;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

button.copy:hover {
  opacity: 0.9;
}

button.copy:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.note {
  margin-top: 24px;
  font-size: 12px;
  color: var(--muted);
}