/* talkiie.yyt.app — the only stylesheet. System fonts, no external resources (CSP: style-src 'self'). */
:root {
  --bg: #f6f6f4; --surface: #ffffff; --text: #1d1d1f; --text-2: #5c5c63; --text-3: #8a8a90;
  --border: rgba(0, 0, 0, 0.1); --accent: #2f6fed; --accent-text: #ffffff; --ok: #2e8b57; --err: #c0392b;
  --radius: 12px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang TC", "Noto Sans TC", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161618; --surface: #1f1f22; --text: #f2f2f4; --text-2: #b0b0b8; --text-3: #85858d;
    --border: rgba(255, 255, 255, 0.12); --accent: #6b9bff; --accent-text: #0b1020; --ok: #4cc38a; --err: #ff7b72;
  }
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text); font-family: var(--font);
  font-size: 16px; line-height: 1.75; -webkit-font-smoothing: antialiased;
}
main { max-width: 640px; margin: 0 auto; padding: 72px 24px 48px; }
@media (max-width: 600px) { main { padding-top: 40px; } }
a { color: var(--accent); }
h1 { font-size: 34px; line-height: 1.25; margin: 0 0 8px; letter-spacing: -0.01em; }
h2 { font-size: 22px; margin: 0 0 8px; }
p { margin: 0 0 16px; text-wrap: pretty; }
.lede { font-size: 19px; color: var(--text-2); margin-bottom: 28px; }
.muted { color: var(--text-3); font-size: 14px; }
.back { display: inline-block; margin-bottom: 28px; font-size: 14px; text-decoration: none; }
footer { max-width: 640px; margin: 0 auto; padding: 0 24px 48px; color: var(--text-3); font-size: 13.5px; }

form { display: grid; gap: 18px; margin-top: 24px; }
label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
label .opt { font-weight: 400; color: var(--text-3); }
textarea, input[type="email"] {
  width: 100%; font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px;
}
textarea { min-height: 180px; resize: vertical; }
textarea:focus, input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.count { text-align: right; font-size: 13px; color: var(--text-3); margin-top: 4px; }
.count.over { color: var(--err); }
/* Honeypot: off-screen for people, still in the form for bots. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
button {
  font: inherit; font-weight: 600; border: 0; border-radius: 999px; padding: 10px 22px;
  background: var(--accent); color: var(--accent-text); cursor: pointer;
}
button:disabled { opacity: 0.55; cursor: default; }
button.linkish { background: none; color: var(--accent); padding: 0; font-weight: 500; }
.status { font-size: 14.5px; color: var(--text-2); }
.status.err { color: var(--err); }
.meta { font-size: 14px; color: var(--text-2); }
.done { margin-top: 24px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.done h2 { color: var(--ok); }
.done .warn { color: var(--err); }