/* Basics Pure - debounce + blur interval progressive */
:root{
  --bg:#fcf9f6; --card:#fff; --ink:#121212; --muted:#8a8783; --line:#eee9e3;
  --shadow:0 12px 40px rgba(18,18,18,0.06), 0 2px 8px rgba(18,18,18,0.04);
  --radius:28px; --border:#e8e2da;
  --reveal: 900ms;
  --hide: 600ms;
}
*{box-sizing:border-box} html,body{margin:0;min-height:100%}
body{font-family:ui-sans-serif, -apple-system, BlinkMacSystemFont, "Inter", Segoe UI, Roboto, sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
.bg-mesh{position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(600px 400px at 15% 20%, #fff1d6 0%, transparent 60%),radial-gradient(700px 500px at 85% 80%, #e8e6ff 0%, transparent 60%);opacity:.7}
.topbar{position:sticky;top:0;z-index:10;display:flex;flex-direction:column;background:rgba(252,249,246,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;max-width:820px;width:100%;margin:0 auto}
.brand{text-decoration:none;color:var(--ink);font-weight:800;letter-spacing:-0.02em;font-size:18px}
.model-status{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;background:#fff;border:1px solid var(--line);padding:6px 12px;border-radius:999px}
.status-dot{width:8px;height:8px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 4px #dcfce7}
.wrap{max-width:820px;margin:0 auto;padding:28px 20px 80px}
.intro{text-align:center;margin:36px 0 28px}
.intro h1{font-size:34px;font-weight:650;letter-spacing:-0.02em;margin:0 0 8px}
.sub{margin:0;color:var(--muted);font-size:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px 28px;position:relative}
[hidden]{display:none!important}
.sentence-stack{display:flex;flex-direction:column;gap:2px;font-size:22px;line-height:1.6;font-weight:500;letter-spacing:-0.01em}
.row{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 14px;padding:18px 0;min-height:72px;will-change:transform,opacity,filter}
.row-1{margin-left:0}.row-2{margin-left:20%}.row-3{margin-left:40%}
.row.revealed{animation:slideIn var(--reveal) cubic-bezier(.22,.9,.2,1) forwards}
.row.hiding{animation:slideOut var(--hide) cubic-bezier(.4,0,.6,1) forwards}
.row.pre-blur{opacity:0;filter:blur(14px);transform:translateY(16px)}
@keyframes slideIn{
  0%{opacity:0;transform:translateY(18px);filter:blur(14px)}
  40%{opacity:0.7;filter:blur(6px)}
  100%{opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes slideOut{
  from{opacity:1;transform:translateY(0);filter:blur(0)}
  to{opacity:0;transform:translateY(-12px);filter:blur(10px)}
}
.t{color:#3a3836;font-weight:450;white-space:nowrap}
.field{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:200px}
.wide-field{flex:1;min-width:320px;max-width:100%}
.field input{
  font-size:19px;font-weight:600;letter-spacing:-0.01em;padding:12px 18px;border-radius:999px;
  border:1.5px solid #121212;background:#fff;outline:none;width:100%;font-family:inherit;
  box-shadow:0 0 0 4px #fff7d6;
  transition:box-shadow.6s ease, transform.6s ease, filter var(--reveal) ease, opacity var(--reveal) ease;
}
.wide-field input{font-size:20px;padding:14px 20px}
.field input:focus{border-color:#111;box-shadow:0 0 0 5px #fef3c7;transform:translateY(-1px)}
.field input::placeholder{color:#b8b3ae;font-weight:500}
.field input.blurring{filter:blur(4px);opacity:.65;transform:scale(.98)}
.field-meta{font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-left:8px;font-weight:700;transition:opacity.6s}
.agent-action{margin-top:32px;border-top:1px solid var(--border);padding-top:20px}
.agent-cta{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;border:0;font-weight:650;font-size:15px;background:#111;color:#fff;cursor:pointer;transition:transform.15s,opacity.15s}
.agent-cta:hover{transform:translateY(-1px)}.agent-cta:disabled{opacity:.45;cursor:not-allowed;transform:none}
.agent-action-note{font-size:12px;opacity:.6;margin-top:10px;font-variant-numeric:tabular-nums}
@media(max-width:700px){.row-2{margin-left:20px}.row-3{margin-left:40px}.sentence-stack{font-size:19px}.wide-field{min-width:100%}.card{padding:22px 18px}.intro h1{font-size:28px} }