:root {
  --bg:#07111f; --panel:#10233a; --panel2:#0c1b2d; --text:#eef7ff; --muted:#9cb4c7;
  --accent:#52d6ff; --accent2:#7c5cff; --danger:#ff5c7a; --line:rgba(255,255,255,.14);
}
* { box-sizing:border-box; }
body {
  margin:0; min-height:100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 20% 10%, rgba(82,214,255,.18), transparent 35%),
    radial-gradient(circle at 90% 70%, rgba(124,92,255,.18), transparent 35%),
    var(--bg);
}
main { width:min(920px, 92vw); margin:0 auto; padding:44px 0 80px; }
header { text-align:center; margin-bottom:32px; }
.kicker { color:var(--accent); letter-spacing:.18em; text-transform:uppercase; font-size:.8rem; font-weight:800; }
h1 { font-size:clamp(2.5rem, 8vw, 5.6rem); line-height:.9; margin:.18em 0; letter-spacing:-.06em; }
.subtitle { color:var(--muted); font-size:clamp(1rem, 2.5vw, 1.25rem); max-width:700px; margin:0 auto; }
.panel {
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), var(--panel);
  border:1px solid var(--line); border-radius:22px; padding:24px; box-shadow:0 22px 80px rgba(0,0,0,.28);
}
.center { text-align:center; }
button {
  appearance:none; border:0; border-radius:999px; padding:14px 24px; font-weight:900; letter-spacing:.04em;
  text-transform:uppercase; background:linear-gradient(135deg, var(--accent), var(--accent2)); color:#03101d;
  cursor:pointer; font-size:1rem; box-shadow:0 12px 28px rgba(82,214,255,.22);
}
button:disabled { opacity:.55; cursor:not-allowed; }
button.secondary { background:transparent; color:var(--text); border:1px solid var(--line); box-shadow:none; }
textarea {
  width:100%; min-height:110px; resize:vertical; border-radius:16px; border:1px solid var(--line);
  background:var(--panel2); color:var(--text); padding:16px; font:inherit; outline:none;
}
textarea:focus { border-color:var(--accent); }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center; margin-top:18px; }
.hidden { display:none !important; }
.promptBox {
  border:1px dashed rgba(82,214,255,.45); background:rgba(82,214,255,.08);
  border-radius:16px; padding:18px; font-size:1.15rem; margin:18px 0;
}
canvas {
  width:100%; height:420px; background:#f7fbff; border-radius:16px; border:1px solid var(--line);
  touch-action:none; display:block;
}
#describeImage { width:100%; border-radius:12px; background:white; display:block; }
.muted { color:var(--muted); }
.small { font-size:.9rem; color:var(--muted); }
.gallery { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; margin-top:18px; }
.signalCard { background:var(--panel2); border:1px solid var(--line); border-radius:16px; padding:16px; cursor:pointer; }
.signalCard:hover { border-color:rgba(82,214,255,.65); }
.step { border-left:3px solid var(--accent); padding:12px 0 12px 16px; margin:12px 0; }
.step img { width:100%; border-radius:12px; background:white; display:block; }
.topnav { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:24px; }
.topnav button { padding:10px 16px; font-size:.85rem; }