:root{
  --ink:#101311;
  --surface:#171b18;
  --surface-2:#1f241f;
  --hair:rgba(255,255,255,0.09);
  --hair-soft:rgba(255,255,255,0.05);
  --hi:#ECE9E0;
  --lo:#8c948c;
  --lo-2:#5f6760;
  --d1:#E0492F;
  --d2:#E8A317;
  --d3:#2FA4A6;
  --d4:#86B23E;
  --sans:"Space Grotesk",ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--sans);
  background:
    radial-gradient(1200px 700px at 50% -10%, #15201c 0%, transparent 60%),
    radial-gradient(900px 600px at 85% 110%, #1a1410 0%, transparent 55%),
    var(--ink);
  color:var(--hi);
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
  overflow-x:hidden;
}

/* ---- top brand bar ---- */
.top{
  position:fixed;top:0;left:0;right:0;z-index:10;
  display:flex;align-items:center;gap:10px;
  padding:16px 22px;
}
.wordmark{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.34em;color:var(--hi)}
.wordmark .tm{font-size:8px;vertical-align:super;color:var(--lo);letter-spacing:0}
.top .tag{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--lo-2);text-transform:uppercase;margin-left:auto}

/* ---- centered stage ---- */
.stage{
  min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:90px 20px 40px;gap:26px;
}
.hero{text-align:center;max-width:760px;display:flex;flex-direction:column;gap:10px;align-items:center}
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--lo-2);
}
.hero h1{
  font-size:clamp(30px,6vw,58px);font-weight:700;letter-spacing:-.02em;line-height:1.02;margin:0;
}
.hero h1 .accent{color:var(--d2)}
.hero p{font-size:15px;color:var(--lo);margin:4px 0 0;line-height:1.5;max-width:520px}

/* ---- prompt input ---- */
.promptwrap{width:min(720px,92vw);display:flex;flex-direction:column;gap:14px}
.field{
  position:relative;display:flex;align-items:center;gap:12px;
  background:color-mix(in srgb,var(--surface) 80%,transparent);
  border:1px solid var(--hair);border-radius:14px;
  padding:16px 18px;transition:border-color .18s, box-shadow .18s;
  backdrop-filter:blur(10px);
}
.field:focus-within{border-color:var(--d3);box-shadow:0 0 0 4px color-mix(in srgb,var(--d3) 16%,transparent)}
.field .arrowhint{font-family:var(--mono);color:var(--d3);font-size:16px;flex:none;opacity:.9}
.field input{
  flex:1;background:transparent;border:0;outline:0;color:var(--hi);
  font-family:var(--sans);font-size:17px;letter-spacing:-.005em;caret-color:var(--d2);
}
.field input::placeholder{color:transparent}   /* we render an animated placeholder instead */
/* animated typewriter placeholder */
.ghost{
  position:absolute;left:50px;right:64px;pointer-events:none;
  font-size:17px;color:var(--lo-2);white-space:nowrap;overflow:hidden;
  font-family:var(--sans);
}
.ghost .caret{
  display:inline-block;width:9px;height:20px;margin-left:1px;vertical-align:-4px;
  background:var(--d2);animation:blink 1.05s steps(1) infinite;
}
.ghost.hidden{display:none}
@keyframes blink{50%{opacity:0}}
.go{
  flex:none;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.04em;
  background:var(--d2);color:#1a1408;border:0;border-radius:9px;padding:9px 14px;cursor:pointer;
  transition:transform .12s, filter .12s;
}
.go:hover{filter:brightness(1.08)}
.go:active{transform:translateY(1px)}
.go[disabled]{opacity:.4;cursor:not-allowed}
.examples{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.ex{
  font-family:var(--mono);font-size:11px;color:var(--lo);cursor:pointer;
  border:1px solid var(--hair);background:transparent;border-radius:999px;
  padding:6px 12px;transition:.15s;
}
.ex:hover{color:var(--hi);border-color:var(--d3)}

/* ---- conversation ---- */
.convo{width:min(720px,92vw);display:none;flex-direction:column;gap:14px;padding:8px 0 24px}
.convo.active{display:flex}
.msg{display:flex;gap:11px;align-items:flex-start;animation:rise .35s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg .who{
  flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;font-weight:700;
}
.msg.ai .who{background:color-mix(in srgb,var(--d3) 22%,var(--surface));color:var(--d3);border:1px solid color-mix(in srgb,var(--d3) 40%,transparent)}
.msg.you .who{background:var(--surface-2);color:var(--lo);border:1px solid var(--hair)}
.msg .body{flex:1;min-width:0;padding-top:4px}
.msg .body .text{font-size:15px;line-height:1.5}
.msg.you .body .text{color:var(--hi)}
.msg.ai .body .text{color:var(--hi)}
.msg .sub{font-size:12.5px;color:var(--lo);margin-top:3px;line-height:1.45}

.optrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.opt{
  font-family:var(--mono);font-size:12.5px;color:var(--lo);cursor:pointer;
  border:1px solid var(--hair);background:color-mix(in srgb,var(--surface) 70%,transparent);
  border-radius:10px;padding:9px 13px;transition:.14s;display:inline-flex;align-items:center;gap:8px;
}
.opt:hover{color:var(--hi);border-color:var(--d3)}
.opt[aria-pressed="true"]{color:var(--hi);border-color:var(--d3);background:color-mix(in srgb,var(--d3) 16%,transparent)}
.opt .ic{font-size:14px}
.opt.confirm{background:var(--d2);color:#1a1408;border-color:var(--d2);font-weight:700}
.opt.confirm:hover{filter:brightness(1.08)}

/* inline free-text reply box inside convo */
.replywrap{display:flex;gap:10px;margin-top:6px}
.replywrap input{
  flex:1;background:color-mix(in srgb,var(--surface) 80%,transparent);
  border:1px solid var(--hair);border-radius:11px;padding:12px 14px;color:var(--hi);
  font-family:var(--sans);font-size:15px;outline:0;caret-color:var(--d2);
}
.replywrap input:focus{border-color:var(--d3)}
.replywrap button{
  font-family:var(--mono);font-size:13px;font-weight:700;background:var(--d3);color:#08110f;
  border:0;border-radius:10px;padding:0 16px;cursor:pointer;
}

/* ---- typing dots ---- */
.dots{display:inline-flex;gap:4px;align-items:center;height:20px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--lo);animation:bob 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
@keyframes bob{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ---- summary card ---- */
.summary{
  border:1px solid var(--hair);border-radius:14px;background:color-mix(in srgb,var(--surface) 80%,transparent);
  padding:18px;margin-top:6px;backdrop-filter:blur(8px);animation:rise .35s ease both;
}
.summary h3{margin:0 0 12px;font-size:13px;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--lo)}
.summary .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.summary .cell .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--lo-2)}
.summary .cell .v{font-size:15px;font-weight:600;margin-top:3px}
.summary .build{
  margin-top:16px;width:100%;font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.03em;
  background:var(--d2);color:#1a1408;border:0;border-radius:11px;padding:14px;cursor:pointer;
  transition:filter .12s, transform .12s;
}
.summary .build:hover{filter:brightness(1.08)}
.summary .build:active{transform:translateY(1px)}

.footnote{font-family:var(--mono);font-size:10.5px;color:var(--lo-2);text-align:center;letter-spacing:.04em}

/* ---- loading overlay ---- */
#vxLoader{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  background:color-mix(in srgb,var(--ink) 78%,transparent);backdrop-filter:blur(10px);
  animation:fade .25s ease both;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.vxl-card{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:30px}
.vxl-spin{
  width:42px;height:42px;border-radius:50%;
  border:3px solid var(--hair);border-top-color:var(--d2);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.vxl-msg{font-size:17px;font-weight:600;letter-spacing:-.01em;min-height:22px}
.vxl-sub{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--lo-2)}

@media (max-width:560px){
  .hero p{font-size:14px}
  .field input,.ghost{font-size:15px}
}