:root {
  color-scheme: dark;
  font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0b1020;
  color: #f4f7ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  background: radial-gradient(circle at 20% 0%, #233b75 0%, transparent 42%), #0b1020;
}

button, textarea { font: inherit; }

.app {
  width: min(100%, 680px);
  margin: 0 auto;
  padding: max(2rem, env(safe-area-inset-top)) 1.25rem max(2rem, env(safe-area-inset-bottom));
}

header { margin-bottom: 2rem; }
.eyebrow { color: #9eb8ff; font-size: .8rem; font-weight: 700; letter-spacing: .12em; margin: 0 0 .5rem; text-transform: uppercase; }
h1 { font-size: clamp(2.25rem, 9vw, 3.75rem); letter-spacing: -.05em; line-height: 1; margin: 0; }
h2, label { font-size: 1rem; margin: 0 0 .75rem; }
.intro, .hint { color: #c2cbe3; line-height: 1.5; }
.intro { max-width: 39rem; }

.examples { display: grid; gap: .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 2rem; }
button {
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  min-height: 48px;
  padding: .7rem .9rem;
  touch-action: manipulation;
}
.example { background: #182342; color: #e3ebff; font-size: .9rem; text-align: left; }
.example:active { background: #263968; transform: scale(.98); }

form { display: grid; }
textarea {
  background: #111a31;
  border: 1px solid #33446f;
  border-radius: 16px;
  color: inherit;
  font-size: 1.05rem;
  line-height: 1.45;
  padding: 1rem;
  resize: vertical;
  width: 100%;
}
textarea:focus-visible, button:focus-visible { outline: 3px solid #8daaff; outline-offset: 3px; }
.hint { font-size: .88rem; margin: .55rem 0 1.1rem; }
.actions { display: flex; gap: .7rem; }
.primary { background: #90abff; color: #0b1020; flex: 1; font-weight: 800; }
.secondary { background: #273554; color: #f4f7ff; font-weight: 700; }
button:disabled { cursor: not-allowed; opacity: .45; }
.status { color: #b8c9f5; margin: 1.5rem 0 0; min-height: 1.5em; }
.unsupported { background: #482b31; border-radius: 12px; color: #ffd9dd; line-height: 1.4; margin-top: 1rem; padding: 1rem; }

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