:root { color-scheme:dark; --bg:#030a1a; --ink:#e6efff; --muted:#8fa3c8; --brand:#3d8bff; --accent:#7cc4ff; --ok:#3fd18a; --warn:#f2b84b; --bad:#ff5d6c; --card:rgba(10,24,56,.72); --line:rgba(120,170,255,.18); --glow:#2f86ff; --deep:#020814; --gold:#ffc56b; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--brand); }
html { -webkit-text-size-adjust:100%; background:var(--ink); }
body { min-height:100vh; min-height:100dvh; -webkit-tap-highlight-color:transparent; }
.topbar { display:flex; justify-content:space-between; align-items:center; background:var(--ink); color:#fff;
  padding:12px max(24px, env(safe-area-inset-right)) 12px max(24px, env(safe-area-inset-left));
  padding-top:max(12px, env(safe-area-inset-top)); position:sticky; top:0; z-index:20; }
.brand { display:flex; gap:10px; align-items:center; color:#fff; text-decoration:none; font-weight:700; font-size:20px; }
.topbar nav { display:flex; gap:12px; align-items:center; }
.topbar .muted { color:#b9c7da; }
main { max-width:1080px; margin:0 auto; padding:24px; min-height:70vh; }
.narrow { max-width:440px; margin:0 auto; }
.hero { text-align:center; padding:48px 0 32px; }
.hero h1 { font-size:clamp(28px,5vw,46px); margin:0 0 12px; }
.lead { font-size:18px; color:var(--muted); max-width:720px; margin:0 auto 24px; }
.grid3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:16px 0; }
.grid4 { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:12px; }
.card h3 { margin-top:0; }
.stat strong { display:block; font-size:28px; }
.stack { display:flex; flex-direction:column; gap:12px; }
.row { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.row > label { flex:1 1 200px; }
.space { justify-content:space-between; align-items:center; }
label { display:flex; flex-direction:column; gap:4px; font-weight:600; font-size:14px; }
label.check { flex-direction:row; font-weight:400; align-items:center; gap:8px; }
input, textarea, select { font:inherit; padding:10px; border:1px solid var(--line); border-radius:8px; background:#fff; }
button { font:inherit; padding:9px 16px; border-radius:8px; border:1px solid var(--line); background:#fff; cursor:pointer; }
button.primary { background:var(--brand); color:#fff; border-color:var(--brand); }
button.danger { background:var(--bad); color:#fff; border-color:var(--bad); }
button.link { background:none; border:none; color:inherit; }
button.big { font-size:18px; padding:14px 28px; }
button:disabled { opacity:.6; cursor:default; }
.chip { padding:4px 10px; border-radius:999px; font-size:14px; }
.tabs { display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:16px; }
.tab { border:none; border-bottom:3px solid transparent; border-radius:0; background:none; }
.tab.active { border-bottom-color:var(--brand); font-weight:700; }
.badge { background:var(--bad); color:#fff; border-radius:999px; padding:0 7px; font-size:12px; }
.toolbar { display:flex; justify-content:space-between; align-items:center; }
.pill { padding:2px 10px; border-radius:999px; font-size:13px; font-weight:700; }
.pill.allowed, .pill.approved { background:#dafbe1; color:var(--ok); }
.pill.pending { background:#fff8c5; color:var(--warn); }
.pill.denied, .pill.rejected { background:#ffebe9; color:var(--bad); }
.check.denied { border-left:4px solid var(--bad); }
.check.pending { border-left:4px solid var(--warn); }
.check.allowed, .check.approved { border-left:4px solid var(--ok); }
.plan.current { border:2px solid var(--brand); }
.notice { background:#ddf4ff; }
.card.danger { border-color:var(--bad); }
.error { color:var(--bad); }
.muted { color:var(--muted); }
.small { font-size:13px; }
pre { background:#0b1f3a; color:#e8f1ff; padding:12px; border-radius:8px; overflow:auto; font-size:13px; }
.footer { display:flex; gap:16px; justify-content:center; padding:24px; padding-bottom:max(24px, env(safe-area-inset-bottom)); color:var(--muted); font-size:14px; background:var(--bg); }
[hidden] { display:none !important; }
@media (max-width:600px) { main { padding:16px; } }
.doc { max-width:820px; }
.doc table { border-collapse:collapse; width:100%; margin:12px 0; background:#fff; }
.doc th, .doc td { border:1px solid var(--line); padding:8px; text-align:left; vertical-align:top; font-size:14px; }

/* ---------- PWA / mobile ---------- */
main { background:var(--bg); padding-left:max(24px, env(safe-area-inset-left)); padding-right:max(24px, env(safe-area-inset-right)); }
.offline { background:#9a6700; color:#fff; text-align:center; font-size:14px; padding:6px 12px; padding-top:max(6px, env(safe-area-inset-top)); }
.toast { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(84px + env(safe-area-inset-bottom)); background:var(--ink); color:#fff;
  padding:12px 18px; border-radius:12px; box-shadow:0 6px 24px rgba(11,31,58,.3); z-index:50; max-width:90vw; font-weight:600; animation:pop .18s ease-out; }
.toast.error-toast { background:var(--bad); }
@keyframes pop { from { opacity:0; transform:translate(-50%, 8px); } to { opacity:1; transform:translate(-50%, 0); } }
.decide { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.decide button { min-height:52px; font-size:17px; font-weight:700; border-radius:12px; touch-action:manipulation; }
details.note { margin-top:8px; }
details.note summary { cursor:pointer; color:var(--muted); font-size:14px; padding:6px 0; }
details.note input { width:100%; margin-top:6px; }
.check.leaving { opacity:0; transform:translateX(40px); transition:opacity .2s, transform .2s; }
.menu { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.menu-item { text-align:left; border:none; border-bottom:1px solid var(--line); border-radius:0; min-height:56px; padding:14px 16px; background:none; font-size:17px; }
.menu-item:last-child { border-bottom:none; }
.menu-item::after { content:"›"; float:right; color:var(--muted); }
.danger-text { color:var(--bad); }
.bottomnav { display:none; }
@media (max-width:720px) {
  html { font-size:17px; }
  input, textarea, select { font-size:16px; min-height:46px; } /* 16px stops iOS zooming into fields */
  button { min-height:44px; }
  .chip { min-height:36px; }
  .topbar nav .muted { display:none; }
  .topbar #logout { display:none; }
  .tabs { display:none; }
  #view-app { padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
  body:has(#view-app:not([hidden])) .footer { display:none; }
  .bottomnav { display:grid; grid-template-columns:repeat(5, 1fr); position:fixed; left:0; right:0; bottom:0; z-index:30;
    background:rgba(255,255,255,.96); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--line);
    padding:6px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .bnav { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; border:none; background:none; min-height:56px;
    font-size:12px; font-weight:600; color:var(--muted); padding:6px 0; touch-action:manipulation; }
  .bnav svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .bnav.active { color:var(--brand); }
  .bnav-badge { position:absolute; top:2px; left:calc(50% + 6px); min-width:20px; line-height:20px; text-align:center; }
  .hero { padding:24px 0 16px; }
  .grid4 { grid-template-columns:1fr 1fr; gap:10px; }
  .stat strong { font-size:24px; }
  .toolbar h2 { font-size:20px; }
  .row > label { flex-basis:100%; }
  pre { font-size:12px; }
}
@media (display-mode: standalone) {
  .footer { display:none; }
  body { overscroll-behavior-y:none; }
}

/* ---------- Traps ---------- */
.trap-hero { background:linear-gradient(135deg,#0b1f3a,#16365f); color:#fff; border:none; }
.trap-hero p, .trap-hero .muted { color:#c9d7ea; }
.trap-hero .stat { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.15); color:#fff; }
.trap-hero .stat .muted { color:#b9c7da; }
.trap-section { margin-top:24px; }
.row.tight { gap:8px; align-items:center; }
.timeline .alert { border-left:4px solid var(--bad); position:relative; }
.timeline .alert.read { border-left-color:var(--line); }
.timeline .alert.test { border-left-color:var(--brand); }
.alert-title { font-weight:700; font-size:16px; margin:0 0 6px; overflow-wrap:anywhere; }
.alert-meta { display:flex; flex-wrap:wrap; gap:6px 12px; font-size:13px; color:var(--muted); }
.actor { padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700; background:#ffebe9; color:var(--bad); }
.actor.preview, .actor.test { background:#ddf4ff; color:var(--brand); }
.actor.browser { background:#fff8c5; color:var(--warn); }
.dot { width:10px; height:10px; border-radius:50%; background:var(--bad); display:inline-block; margin-right:6px; }
.trap-card .row { align-items:center; }
.trap-kind { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--brand); }
.artifact { white-space:pre-wrap; word-break:break-all; max-height:280px; }
.how { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.how > div { background:var(--bg); border-radius:10px; padding:12px; }
.how h4 { margin:0 0 4px; }
.kv { display:grid; grid-template-columns:max-content 1fr; gap:6px 14px; font-size:14px; }
.kv dt { color:var(--muted); }
.kv dd { margin:0; overflow-wrap:anywhere; }
.evidence pre { white-space:pre-wrap; word-break:break-all; }
.ok-text { color:var(--ok); font-weight:700; }
.bad-text { color:var(--bad); font-weight:700; }
.rule .pattern { font-family:ui-monospace,Menlo,monospace; background:var(--bg); padding:2px 6px; border-radius:6px; overflow-wrap:anywhere; }
.back { padding-left:0; color:var(--brand); margin-bottom:8px; }
@media (max-width:720px) {
  .how { grid-template-columns:1fr; }
  .kv { grid-template-columns:1fr; gap:2px; }
  .kv dd { margin-bottom:8px; }
  .trap-hero .grid4 { grid-template-columns:1fr 1fr; }
  .toolbar { flex-wrap:wrap; gap:8px; }
}
#evidence-view pre { white-space:pre-wrap; word-break:break-all; }
#evidence-view p, #evidence-view dd { overflow-wrap:anywhere; word-break:break-word; }
@media (max-width:720px) {
  .trap-hero { padding:14px; }
  .trap-hero h2 { margin:0 0 4px; font-size:22px; }
  .trap-hero > p:first-of-type { font-size:15px; margin:0 0 10px; }
  .trap-hero .grid4 { grid-template-columns:repeat(4, 1fr); gap:6px; margin-bottom:6px; }
  .trap-hero .stat { padding:8px 6px; margin:0; text-align:center; }
  .trap-hero .stat .muted { font-size:11px; line-height:1.2; display:block; }
  .trap-hero .stat strong { font-size:22px; }
  .trap-hero .small { margin:4px 0 0; font-size:12px; }
  .trap-section { margin-top:18px; }
}

/* ---------- The Eye (chat companion) ---------- */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
body.in-companion .footer { display:none; }
.to-eye { margin:0 0 8px; font-size:14px; }
.to-eye a { text-decoration:none; font-weight:600; }
.avatar { width:100%; height:100%; overflow:visible; }
.eye-id { flex:1; min-width:0; }
.eye-title { font-size:19px; margin:0; line-height:1.2; }
.eye-mood { margin:0; font-size:13px; color:var(--muted); }
.chat-log:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; }
.msg { display:block; max-width:88%; flex:none; }
.msg.eye { align-self:flex-start; }
.msg.user { align-self:flex-end; }
.bubble { margin:0; padding:10px 14px; border-radius:18px; background:#fff; border:1px solid var(--line); white-space:pre-wrap; overflow-wrap:anywhere; max-width:100%; }
.msg.eye .bubble { border-bottom-left-radius:6px; box-shadow:0 1px 2px rgba(11,31,58,.06); }
.msg.user .bubble { background:var(--brand); color:#fff; border-color:var(--brand); border-bottom-right-radius:6px; }
.msg { animation:pop .22s ease-out; }
@keyframes pop { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.error-bubble { border-color:var(--bad); color:var(--bad); }
.card-kicker { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; }
article.bubble { white-space:normal; width:100%; }
.msg:has(article) { max-width:min(96%, 560px); width:100%; }
.msg > .bubble:not(article) { display:inline-block; }
.msg.user { text-align:right; }
.msg.user .bubble { text-align:left; }
.token-text, .card-evidence pre { white-space:pre-wrap; word-break:break-all; max-height:240px; margin:8px 0; }
.card-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.card-actions button { padding:8px 14px; }
.card-alert { border:2px solid var(--bad) !important; background:#fff5f5 !important; }
.card-alert.drill { border-color:var(--warn) !important; background:#fffbea !important; }
.alert-text { margin:0 0 6px; font-weight:700; white-space:pre-wrap; }
.kv-list { margin:0; display:grid; grid-template-columns:auto 1fr; gap:2px 12px; font-size:14px; }
.kv { display:contents; }
.kv dt { color:var(--muted); }
.kv dd { margin:0; overflow-wrap:anywhere; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }
.seal { font-weight:700; font-size:14px; margin-bottom:6px; }
.seal.ok { color:var(--ok); } .seal.bad { color:var(--bad); }
.card-rule .pattern { display:block; background:#0b1f3a; color:#e8f1ff; padding:8px 10px; border-radius:8px; margin:6px 0; overflow-wrap:anywhere; font-size:13px; }
.card-check.denied { border-left:4px solid var(--bad); } .card-check.pending { border-left:4px solid var(--warn); }
.card-check.allowed, .card-check.approved { border-left:4px solid var(--ok); }
.card-check p { margin:4px 0; }
.typing { display:flex; gap:4px; padding:0 20px 6px; }
.typing span { width:7px; height:7px; border-radius:50%; background:var(--muted); animation:blink 1s infinite; }
.typing span:nth-child(2) { animation-delay:.15s; } .typing span:nth-child(3) { animation-delay:.3s; }
@keyframes blink { 0%,80%,100% { opacity:.25; } 40% { opacity:1; } }
.chips { display:flex; gap:8px; overflow-x:auto; padding:2px 0 8px; scrollbar-width:none; }
.chips::-webkit-scrollbar { display:none; }
.qchip { flex:none; border-radius:999px; padding:7px 14px; font-size:14px; border:1px solid var(--brand); color:var(--brand); background:#f0f7ff; }
.qchip:hover, .qchip:focus-visible { background:var(--brand); color:#fff; }
.chat-form { display:flex; gap:8px; }
.chat-form input { flex:1; font-size:16px; border-radius:999px; padding:11px 16px; min-width:0; }
.send { border-radius:50%; width:46px; height:46px; padding:0; display:grid; place-items:center; flex:none; }
.send svg { width:22px; height:22px; fill:none; stroke:#fff; stroke-width:2; stroke-linejoin:round; }
button:focus-visible, a:focus-visible, input:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

/* ---------- The Eye: full-screen 3D stage ---------- */
body.in-companion { background:#070d1c; overflow:hidden; }
body.in-companion .topbar, body.in-companion .footer { display:none; }
body.in-companion main { padding:0; max-width:none; margin:0; min-height:0; }
.stage { position:fixed; inset:0; z-index:30; overflow:hidden; color:#f4f7ff; touch-action:manipulation;
  background:radial-gradient(120% 70% at 50% 18%, #3a3f6b 0%, #1a2348 38%, #0b1226 70%, #060a16 100%); }
.stage::before { content:""; position:absolute; inset:-10% -10% auto; height:70%; pointer-events:none;
  background:radial-gradient(40% 50% at 50% 30%, rgba(255,222,150,.28), rgba(255,222,150,0) 70%); }
.stage-scene { position:absolute; inset:0; display:grid; place-items:center; }
.eye-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.glass { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); color:#fff;
  -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); }
.stage-top { position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:flex-start;
  padding:max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left)); pointer-events:none; }
.stage-top > * { pointer-events:auto; }
.stage .eye-title { font-size:17px; margin:0; font-weight:700; letter-spacing:.01em; text-shadow:0 1px 8px rgba(0,0,0,.4); }
.stage .eye-mood { margin:0; font-size:13px; color:#cfd8f5; }
.icon-btn { width:42px; height:42px; border-radius:50%; padding:0; display:grid; place-items:center; }
.icon-btn svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
#stage-menu-btn svg { fill:currentColor; stroke:none; }
.stage-menu { position:absolute; top:calc(max(14px, env(safe-area-inset-top)) + 50px); right:max(16px, env(safe-area-inset-right));
  display:flex; flex-direction:column; min-width:200px; border-radius:16px; padding:6px; background:rgba(14,22,48,.78); }
.stage-menu a, .stage-menu button { color:#fff; text-decoration:none; text-align:left; background:none; border:none; padding:11px 14px; border-radius:10px; font-size:15px; }
.stage-menu a:hover, .stage-menu button:hover, .stage-menu a:focus-visible, .stage-menu button:focus-visible { background:rgba(255,255,255,.12); }
.stage-loading { position:absolute; inset:0; display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:center; font-size:14px; color:#dfe6ff; }
.loading-eye { width:44px; height:44px; border-radius:50%; background:radial-gradient(circle, #02060f 0 22%, #bfe6ff 26%, #2f86ff 52%, #0a2f8c 70%, transparent 72%); box-shadow:0 0 28px #2f86ff; animation:halo-spin 1.6s ease-in-out infinite; }
@keyframes halo-spin { 0%,100% { transform:scaleY(1); opacity:.75; } 50% { transform:scaleY(.15); opacity:1; } }
.subtitles { position:absolute; left:0; right:0; bottom:calc(196px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:0 20px; pointer-events:none; }
.sub-eye, .sub-user { margin:0; max-width:min(680px, 100%); text-align:center; border-radius:14px; padding:8px 14px; line-height:1.4; }
.sub-eye:empty { display:none; }
.sub-eye { font-size:18px; font-weight:600; background:rgba(5,10,26,.55); text-shadow:0 1px 2px rgba(0,0,0,.6);
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.sub-eye.fade { animation:sub-in .25s ease-out; }
@keyframes sub-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.sub-user { font-size:14px; color:#d6defa; background:rgba(5,10,26,.35); font-style:italic; }
.stage-bottom { position:absolute; left:0; right:0; bottom:0; padding:0 16px max(18px, env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; gap:10px; }
.stage .chips { flex-wrap:nowrap; width:100%; max-width:760px; padding:0 2px; }
.stage .chips > :first-child { margin-left:auto; } .stage .chips > :last-child { margin-right:auto; }
.stage .qchip { border-radius:999px; padding:7px 13px; font-size:14px; color:#fff; }
.stage .qchip:hover, .stage .qchip:focus-visible { background:rgba(255,255,255,.28); color:#fff; }
.controls { display:grid; grid-template-columns:52px 84px 52px; gap:22px; align-items:center; justify-items:center; }
.mic { width:78px; height:78px; border-radius:50%; border:none; padding:0; display:grid; place-items:center; color:#1b1300;
  background:radial-gradient(circle at 35% 30%, #fff3b8, #ffd84d 45%, #e0a800); box-shadow:0 6px 28px rgba(255,200,60,.45), 0 0 0 6px rgba(255,216,77,.16); }
.mic svg { width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.mic.listening { animation:mic-pulse 1.1s ease-in-out infinite; background:radial-gradient(circle at 35% 30%, #ffd1d1, #ff5a5a 50%, #c81e1e); color:#fff; }
@keyframes mic-pulse { 0%,100% { box-shadow:0 0 0 6px rgba(255,90,90,.25), 0 6px 28px rgba(255,90,90,.4); } 50% { box-shadow:0 0 0 18px rgba(255,90,90,.08), 0 6px 28px rgba(255,90,90,.5); } }
.mic-hint { margin:0; min-height:18px; font-size:13px; color:#cfd8f5; text-align:center; }
.chat-form.glass { width:min(620px, 100%); padding:6px; border-radius:999px; display:flex; gap:6px; }
.chat-form.glass input { background:transparent; border:none; color:#fff; flex:1; padding:10px 14px; font-size:16px; min-width:0; }
.chat-form.glass input::placeholder { color:#c3cbe6; }
.chat-form.glass .send { width:42px; height:42px; }
.sheet { position:absolute; left:0; right:0; bottom:0; margin:0 auto; width:min(640px, 100%); max-height:64vh; display:flex; flex-direction:column;
  border-radius:24px 24px 0 0; background:rgba(240,244,255,.86); color:var(--ink); border-color:rgba(255,255,255,.5);
  padding:0 16px max(16px, env(safe-area-inset-bottom)); transform:translateY(var(--drag, 0)); animation:sheet-up .28s cubic-bezier(.2,.8,.2,1); z-index:5;
  box-shadow:0 -12px 40px rgba(0,0,0,.35); }
.sheet.closing { animation:sheet-down .24s ease-in forwards; }
@keyframes sheet-up { from { transform:translateY(100%); } to { transform:translateY(var(--drag, 0)); } }
@keyframes sheet-down { to { transform:translateY(105%); } }
.sheet-grab { display:grid; place-items:center; padding:10px 0 4px; cursor:grab; touch-action:none; }
.sheet-grab span { width:40px; height:5px; border-radius:3px; background:rgba(11,31,58,.25); }
.sheet-head { display:flex; justify-content:space-between; align-items:center; }
.sheet-head h2 { font-size:17px; margin:0; }
.sheet-head .icon-btn { width:36px; height:36px; color:var(--ink); background:rgba(11,31,58,.06); border:none; }
.sheet-body { overflow-y:auto; padding:8px 0 4px; display:flex; flex-direction:column; gap:10px; overscroll-behavior:contain; }
.sheet-body article.bubble { background:#fff; }
.stage.sheet-open .subtitles { bottom:calc(var(--sheet-h, 64vh) + 10px); }
.stage.sheet-open .sub-user { display:none; }
#sheet-title:focus { outline:none; }
.sheet-note { margin:0; font-size:14px; white-space:pre-wrap; color:#22324d; }
.stage.sheet-open .stage-bottom { visibility:hidden; }
.stage.typing-open .subtitles { bottom:calc(250px + env(safe-area-inset-bottom)); }
.transcript-open { position:absolute; left:50%; transform:translateX(-50%); top:calc(max(14px, env(safe-area-inset-top)) + 56px); bottom:calc(260px + env(safe-area-inset-bottom));
  width:min(640px, calc(100% - 32px)); overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding:12px; border-radius:18px;
  background:rgba(5,10,26,.6); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); z-index:4; }
.transcript-open .bubble { background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.15); font-size:14px; }
.transcript-open .msg.user .bubble { background:rgba(31,111,235,.7); }
@media (min-width:721px) { .sub-eye { font-size:20px; } }
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet.closing, .sub-eye.fade, .mic.listening, .loading-eye { animation:none !important; }
}

/* ---------- Dark "all-seeing eye" theme (concept: deep navy, electric blue glow, glass cards) ---------- */
html { background:var(--deep); }
body { background:radial-gradient(120% 80% at 50% -10%, #0b2257 0%, #04112c 45%, var(--deep) 100%) fixed; color:var(--ink); }
a { color:var(--accent); }
.topbar { background:rgba(2,8,20,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.brand { gap:12px; }
.brand-text { display:flex; flex-direction:column; line-height:1.1; }
.wordmark { font-size:18px; letter-spacing:.14em; font-weight:700; }
.brand-tag { font-size:12px; font-weight:400; color:var(--muted); letter-spacing:.01em; }
.footer { background:transparent; }
input, textarea, select { background:rgba(4,14,36,.8); color:var(--ink); border-color:var(--line); }
button { background:rgba(20,44,96,.55); color:var(--ink); border-color:var(--line); }
button:hover { border-color:rgba(124,196,255,.45); }
button.primary { background:linear-gradient(180deg,#3d8bff,#1f5fd6); border-color:#3d8bff; color:#fff; box-shadow:0 0 18px rgba(61,139,255,.35); }
button.danger { background:#c8303f; border-color:#c8303f; }
button.link { background:none; }
.card, .menu { background:var(--card); border-color:var(--line); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.notice { background:rgba(61,139,255,.14); }
pre { background:#020814; border:1px solid var(--line); }
.pill.allowed, .pill.approved { background:rgba(63,209,138,.15); }
.pill.pending { background:rgba(242,184,75,.15); }
.pill.denied, .pill.rejected { background:rgba(255,93,108,.15); }
.actor { background:rgba(255,93,108,.15); } .actor.preview, .actor.test { background:rgba(61,139,255,.18); } .actor.browser { background:rgba(242,184,75,.15); }
.trap-hero { background:linear-gradient(135deg,#0a1f4d,#071534); border:1px solid var(--line); }
.how > div, .rule .pattern { background:rgba(4,14,36,.8); }
.bubble { background:rgba(10,24,56,.9); border-color:var(--line); color:var(--ink); }
.qchip { background:rgba(61,139,255,.12); border-color:rgba(124,196,255,.45); color:var(--accent); }
.card-alert { background:rgba(80,10,20,.55) !important; } .card-alert.drill { background:rgba(80,60,10,.45) !important; }
.doc table { background:var(--card); }
.toast { background:#0d2350; border:1px solid var(--line); }
.ok { color:var(--ok); }

/* classic dashboard: sidebar + Guardian overview */
body.in-classic main { max-width:none; padding:0; }
.classic { display:grid; grid-template-columns:220px 1fr; min-height:calc(100vh - 64px); }
.sidebar { border-right:1px solid var(--line); padding:18px 12px; display:flex; flex-direction:column; justify-content:space-between; gap:12px;
  position:sticky; top:64px; height:calc(100vh - 64px); background:rgba(2,8,20,.45); }
.side-nav { display:flex; flex-direction:column; gap:4px; }
.side-item { display:flex; align-items:center; gap:12px; text-align:left; border:none; background:none; border-radius:10px; padding:11px 14px; color:#c6d4f0; font-size:15px; }
.side-item svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.side-item .badge { margin-left:auto; }
.side-item:hover { background:rgba(61,139,255,.1); }
.side-item.active { background:linear-gradient(90deg, rgba(47,134,255,.42), rgba(47,134,255,.16)); color:#fff; box-shadow:inset 0 0 0 1px rgba(124,196,255,.25); }
.side-eye { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; text-decoration:none; color:var(--ink); border:1px solid var(--line); background:rgba(47,134,255,.1); font-weight:600; font-size:14px; }
.classic-main { padding:22px clamp(16px, 2.4vw, 32px) 32px; min-width:0; }
.glass-card { background:linear-gradient(180deg, rgba(14,32,72,.72), rgba(6,16,40,.72)); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset, 0 10px 30px rgba(0,0,0,.25); }
.guardian { display:grid; grid-template-columns:minmax(0, 2.2fr) minmax(260px, 1fr); gap:16px; }
.guardian-hero { position:relative; min-height:clamp(300px, 42vw, 470px); overflow:hidden; padding:0; }
.guardian-hero h2 { position:absolute; top:18px; left:22px; margin:0; z-index:2; font-size:clamp(22px, 2.4vw, 30px); font-weight:600; text-shadow:0 2px 14px rgba(0,0,0,.6); }
.hero-scene { position:absolute; inset:0; background:radial-gradient(60% 70% at 50% 30%, rgba(47,134,255,.35), transparent 70%), url(/static/logo.svg) center 38% / 46% no-repeat, linear-gradient(#04112c, #020814); }
.hero-scene canvas { position:absolute; inset:0; width:100% !important; height:100% !important; }
.hero-scene:has(canvas) { background:#020814; }
.hero-caption { position:absolute; left:0; right:0; bottom:18px; margin:0; text-align:center; z-index:2; font-family:Georgia, "Times New Roman", serif; font-size:clamp(16px, 1.6vw, 20px);
  color:#e6efff; letter-spacing:.02em; text-shadow:0 2px 12px rgba(0,0,0,.8); display:flex; align-items:center; justify-content:center; gap:14px; }
.hero-caption::before, .hero-caption::after { content:""; width:min(14vw, 120px); height:1px; background:linear-gradient(90deg, transparent, rgba(191,230,255,.7)); }
.hero-caption::after { transform:scaleX(-1); }
.guardian-side { display:flex; flex-direction:column; gap:16px; }
.g-card { display:flex; align-items:center; gap:14px; padding:18px; text-align:left; width:100%; color:var(--ink); }
button.g-card, .g-row { background:linear-gradient(180deg, rgba(14,32,72,.72), rgba(6,16,40,.72)); }
.g-operator { flex-direction:column; align-items:stretch; }
.g-row { display:flex; align-items:center; gap:14px; border:none; padding:0; background:none !important; text-align:left; color:var(--ink); }
.g-icon { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; flex:none; border:1px solid rgba(124,196,255,.35);
  background:radial-gradient(circle, rgba(47,134,255,.25), rgba(47,134,255,.04)); }
.g-icon svg { width:22px; height:22px; fill:none; stroke:#cfe6ff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.g-text { display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.g-text strong { font-size:16px; font-weight:600; } .g-text span { font-size:13px; color:var(--muted); }
.g-chev { font-size:24px; color:var(--muted); }
.ghost-btn { background:transparent; border:1px solid rgba(124,196,255,.35); border-radius:8px; color:#dbe8ff; padding:9px 14px; }
.guardian-row { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.g-panel { padding:16px 18px; min-height:210px; display:flex; flex-direction:column; }
.g-panel h2 { display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:16px; font-weight:600; }
.g-panel h2 svg { width:20px; height:20px; fill:none; stroke:#cfe6ff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.g-body { flex:1; display:flex; flex-direction:column; justify-content:center; }
.g-empty { text-align:center; display:flex; flex-direction:column; align-items:center; gap:2px; }
.g-empty p { margin:0; }
.g-orb { width:64px; height:64px; border-radius:50%; margin-bottom:10px; border:1px solid rgba(124,196,255,.35);
  background:radial-gradient(circle, rgba(47,134,255,.4), rgba(47,134,255,.05) 70%); box-shadow:0 0 30px rgba(47,134,255,.35); }
.g-bars { display:flex; flex-direction:column; gap:8px; }
.g-bar { display:grid; grid-template-columns:110px 1fr 36px; align-items:center; gap:10px; font-size:13px; }
.g-bar strong { text-align:right; }
.g-bar-track { height:6px; border-radius:3px; background:rgba(124,196,255,.12); overflow:hidden; }
.g-bar-fill { display:block; height:100%; border-radius:3px; background:var(--glow); box-shadow:0 0 8px var(--glow); }
.g-bar.denied .g-bar-fill, .g-bar.rejected .g-bar-fill { background:var(--bad); box-shadow:0 0 8px var(--bad); }
.g-bar.pending .g-bar-fill { background:var(--warn); box-shadow:none; }
.g-bar.allowed .g-bar-fill, .g-bar.approved .g-bar-fill { background:var(--ok); box-shadow:none; }
.g-ev p { margin:0 0 6px; } .g-big { font-size:28px; margin-right:4px; }
.connect { margin-top:16px; }
.controls-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; }
.c-item { display:flex; flex-direction:column; gap:4px; text-align:left; padding:16px; color:var(--ink); }
.ev-row { display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; text-align:left; }
.ev-row.unread { border-left:4px solid var(--bad); }
@media (max-width:1000px) {
  .guardian { grid-template-columns:1fr; }
  .guardian-row { grid-template-columns:1fr; }
  .guardian-side { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width:720px) {
  .classic { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .classic-main { padding:14px 14px 24px; }
  .guardian-hero { min-height:62vw; }
  .bottomnav { background:rgba(2,8,20,.92); border-top-color:var(--line); }
  .bnav { color:var(--muted); } .bnav.active { color:#fff; text-shadow:0 0 10px var(--glow); }
  .brand-tag { display:none; }
  .g-panel { min-height:0; }
}

/* the stage: the Eye full-screen */
body.in-companion { background:var(--deep); }
.stage { background:radial-gradient(120% 75% at 50% 20%, #0b2a6b 0%, #061a45 32%, #030c22 64%, #020814 100%); }
.stage::before { background:radial-gradient(38% 42% at 50% 28%, rgba(47,134,255,.3), rgba(47,134,255,0) 70%); }
.stage.is-3d { background:#020814; } .stage.is-3d::before { display:none; }
.stage-id { display:flex; gap:10px; align-items:center; }
.stage-logo { border-radius:9px; box-shadow:0 0 16px rgba(47,134,255,.45); }
.stage .eye-title { letter-spacing:.06em; }
.stage .eye-mood { color:#a9c6f5; }
.glass { background:rgba(12,30,72,.42); border-color:rgba(124,196,255,.28); }
.stage-menu { background:rgba(4,14,36,.86); }
.stage .qchip { background:rgba(12,30,72,.5); border-color:rgba(124,196,255,.35); }
.mic { color:#eaf4ff; background:radial-gradient(circle at 35% 30%, #bfe6ff, #3d8bff 45%, #123e9c); box-shadow:0 6px 28px rgba(47,134,255,.55), 0 0 0 6px rgba(47,134,255,.16); }
.sub-eye { background:rgba(2,8,20,.6); border:1px solid rgba(124,196,255,.14); }
.sheet { background:rgba(6,18,46,.9); color:var(--ink); border-color:var(--line); }
.sheet-grab span { background:rgba(191,230,255,.3); }
.sheet-head .icon-btn { color:var(--ink); background:rgba(255,255,255,.08); }
.sheet-body article.bubble { background:rgba(10,24,56,.95); }
.sheet-note { color:#c6d4f0; }
.eye-2d { width:min(70vw, 360px); aspect-ratio:1; margin-top:-22vh; }
.eye-svg { width:100%; height:100%; overflow:visible; }
.eye-2d .e2-lid { transition:transform .25s ease; transform-box:fill-box; }
.eye-2d .e2-lid-top { transform-origin:50% 0; transform:translateY(-34%); }
.eye-2d .e2-lid-bottom { transform-origin:50% 100%; transform:translateY(34%); }
.eye-2d .e2-aura { transition:opacity .4s; opacity:.8; }
.eye-2d.mood-alert .e2-iris { fill:#ff3b3b; } .eye-2d.mood-alert .e2-aura { fill:#ff3b3b; opacity:.5; }
.eye-2d.mood-alert .e2-lid-top { transform:translateY(-10%); } .eye-2d.mood-alert .e2-lid-bottom { transform:translateY(10%); }
.eye-2d.mood-celebrate .e2-iris { fill:#ffc56b; } .eye-2d.mood-celebrate .e2-aura { opacity:1; }
.eye-2d.mood-thinking .e2-lid-top { transform:translateY(-22%); } .eye-2d.mood-thinking .e2-lid-bottom { transform:translateY(22%); }
.eye-2d.talking .e2-aura { animation:e2-talk .5s ease-in-out infinite alternate; }
@keyframes e2-talk { from { opacity:.6; } to { opacity:1; } }
.eye-2d.cue-stat .e2-beam { animation:e2-beam .9s ease-out; }
@keyframes e2-beam { 0% { fill:#ffffff; width:6px; } 100% { fill:#9fd0ff; } }

/* the pitch moment */
.stage.pitching .stage-bottom .chips, .stage.pitching .controls { opacity:.25; transition:opacity .4s; }
.pitch-skip { position:absolute; right:max(16px, env(safe-area-inset-right)); top:calc(max(14px, env(safe-area-inset-top)) + 56px); border-radius:999px; padding:8px 16px; font-size:14px; z-index:6; }
.pitch-stat { position:absolute; left:50%; top:46%; transform:translate(-50%, 0); display:flex; flex-direction:column; align-items:center; gap:2px; pointer-events:none;
  padding:10px 18px; border-radius:14px; background:rgba(2,8,20,.55); border:1px solid rgba(255,197,107,.5); box-shadow:0 0 30px rgba(255,197,107,.25); opacity:0; }
.pitch-stat strong { font-size:clamp(28px, 7vw, 44px); line-height:1.05; color:#fff3dc; letter-spacing:.02em; text-shadow:0 0 18px rgba(255,197,107,.8); font-variant-numeric:tabular-nums; }
.pitch-stat span { font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#ffd89a; }
.pitch-stat.show { animation:stat-in 4.6s ease-out forwards; }
@keyframes stat-in { 0% { opacity:0; transform:translate(-50%, 14px) scale(.9); } 8% { opacity:1; transform:translate(-50%, 0) scale(1.04); } 14% { transform:translate(-50%, 0) scale(1); } 85% { opacity:1; } 100% { opacity:.0; } }
@media (min-width:721px) { .pitch-stat { top:auto; bottom:calc(270px + env(safe-area-inset-bottom)); left:auto; right:6vw; transform:none; } 
  @keyframes stat-in-d { 0% { opacity:0; transform:translateY(14px) scale(.9); } 8% { opacity:1; transform:none; } 85% { opacity:1; } 100% { opacity:0; } }
  .pitch-stat.show { animation-name:stat-in-d; } }
@media (prefers-reduced-motion: reduce) {
  .pitch-stat.show { animation:none; opacity:1; }
  .eye-2d .e2-lid, .eye-2d.talking .e2-aura, .eye-2d.cue-stat .e2-beam { animation:none !important; transition:none !important; }
}
.brain-credit { margin:-6px 0 0; font-size:11px; letter-spacing:.06em; color:rgba(191,214,255,.55); text-align:center; }

/* ---------- 0.9.0 cinematic stage: near-black, cold cyan, thin lines, terminal type ---------- */
:root { --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --thin:"Helvetica Neue","Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --cy:#5fc8ff; --cy-dim:rgba(95,200,255,.22); --mx:#4dffa6; }
body.in-companion, .stage, .stage.is-3d { background:#000; }
.stage::before, .stage.is-3d::before { display:none; }
.stage { font-family:var(--thin); color:#d8e6f2; }
.stage .glass { background:rgba(2,8,14,.38); border:1px solid var(--cy-dim); color:#d8e6f2;
  -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1); }
.stage .stage-logo { display:none; }
.stage .stage-id { gap:0; }
.stage .eye-title { font:500 12px/1.3 var(--mono); letter-spacing:.32em; text-transform:uppercase; color:#e9f5ff; text-shadow:none; }
.stage .eye-title::before { content:""; display:inline-block; width:6px; height:6px; margin-right:10px; vertical-align:1px; background:var(--cy); box-shadow:0 0 8px var(--cy); }
.stage .eye-mood { font:400 11px/1.6 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(95,200,255,.72); margin-left:16px; }
.stage.mood-alert .eye-mood { color:#ff5a5a; }
.stage .icon-btn { width:40px; height:40px; border-radius:2px; }
.stage .icon-btn svg { stroke-width:1.3; }
.stage-menu { border-radius:2px; background:rgba(1,5,9,.9); border:1px solid var(--cy-dim); }
.stage-menu a, .stage-menu button { font:400 12px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#cfe2f0; border-radius:0; }
.stage-menu a:hover, .stage-menu button:hover, .stage-menu a:focus-visible, .stage-menu button:focus-visible { background:rgba(95,200,255,.1); color:#fff; }
/* subtitles: thin type that lands like a terminal, with a block caret while typing */
.sub-eye { font:300 18px/1.45 var(--thin); letter-spacing:.01em; color:#eef6ff; background:none; border:none; padding:4px 12px;
  text-shadow:0 0 18px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.9); }
.sub-eye.typing::after { content:""; display:inline-block; width:.55em; height:1.05em; margin-left:3px; vertical-align:-.15em; background:var(--cy); box-shadow:0 0 8px var(--cy); animation:caret .8s steps(1) infinite; }
@keyframes caret { 50% { opacity:0; } }
.sub-user { font:400 12px/1.5 var(--mono); letter-spacing:.04em; color:rgba(207,226,240,.7); background:none; font-style:normal; }
@media (min-width:721px) { .sub-eye { font-size:21px; } }
/* thin-line glass chips, no emoji */
.stage .qchip { font:400 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; border-radius:2px; padding:10px 14px;
  color:#cfe2f0; background:rgba(2,8,14,.38); border:1px solid var(--cy-dim); }
.stage .qchip:hover, .stage .qchip:focus-visible { background:rgba(95,200,255,.12); border-color:rgba(95,200,255,.6); color:#fff; }
/* the mic: a hairline ring with a cold core */
.stage .mic { width:70px; height:70px; color:#e9f5ff; background:radial-gradient(circle, rgba(95,200,255,.16), rgba(2,8,14,.5) 62%);
  border:1px solid rgba(95,200,255,.55); box-shadow:0 0 0 6px rgba(95,200,255,.05), 0 0 24px rgba(95,200,255,.18) inset; }
.stage .mic svg { width:26px; height:26px; stroke-width:1.4; }
.stage .mic.listening { background:radial-gradient(circle, rgba(255,70,70,.22), rgba(14,2,2,.5) 62%); border-color:rgba(255,90,90,.8); color:#fff;
  animation:mic-ring 1.2s ease-in-out infinite; }
@keyframes mic-ring { 0%,100% { box-shadow:0 0 0 4px rgba(255,90,90,.12); } 50% { box-shadow:0 0 0 14px rgba(255,90,90,0); } }
.stage .mic-hint { font:400 11px/1.5 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:rgba(95,200,255,.7); }
.stage .chat-form.glass { border-radius:2px; }
.stage .chat-form.glass input { font-family:var(--mono); font-size:15px; }
.stage .chat-form.glass .send { border-radius:2px; background:rgba(95,200,255,.15); border:1px solid rgba(95,200,255,.5); }
.brain-credit { font:400 10px/1.4 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:rgba(95,200,255,.42); }
/* loading skeleton: the outline of the eye with a scan line while the scene compiles */
.stage-loading { font:400 11px/1.5 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:rgba(95,200,255,.7); background:#000; }
.loading-eye { position:relative; width:140px; height:56px; border-radius:0; background:none; box-shadow:none; overflow:hidden; animation:none;
  clip-path:ellipse(50% 50% at 50% 50%); border:1px solid rgba(95,200,255,.35); }
.loading-eye::before { content:""; position:absolute; left:50%; top:50%; width:34px; height:34px; margin:-17px; border-radius:50%; border:1px solid rgba(95,200,255,.45); }
.loading-eye i { position:absolute; left:0; right:0; height:1px; top:0; background:linear-gradient(90deg, transparent, var(--cy), transparent); animation:skel-scan 1.4s linear infinite; }
@keyframes skel-scan { from { transform:translateY(0); } to { transform:translateY(56px); } }
/* pitch: terminal readouts and the wordmark */
.stage .pitch-skip { font:400 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; border-radius:2px; padding:10px 14px; }
.stage .pitch-stat { align-items:flex-start; gap:4px; padding:12px 16px 12px 14px; border-left:1px solid var(--cy); background:linear-gradient(90deg, rgba(2,10,16,.72), rgba(2,10,16,0));
  font-family:var(--mono); text-align:left; }
.stage .pitch-stat .stat-line { font:400 11px/1.3 var(--mono); letter-spacing:.06em; color:var(--mx); text-transform:none; opacity:.85; }
.stage .pitch-stat strong { font:300 clamp(30px, 8vw, 48px)/1.05 var(--mono); color:#f2fbff; letter-spacing:.04em; text-shadow:0 0 14px rgba(95,200,255,.65); }
.stage .pitch-stat .stat-label { font:400 11px/1.3 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:rgba(95,200,255,.85); }
.stage .pitch-stat.show { animation:term-in 4.6s steps(1, end) forwards, term-fade 4.6s ease-out forwards; }
@keyframes term-in { 0% { clip-path:inset(0 100% 0 0); } 4% { clip-path:inset(0 66% 0 0); } 8% { clip-path:inset(0 33% 0 0); } 12% { clip-path:inset(0 0 0 0); } 100% { clip-path:inset(0 0 0 0); } }
@keyframes term-fade { 0%, 85% { opacity:1; } 100% { opacity:0; } }
.pitch-wordmark { position:absolute; inset:0; will-change:opacity, transform; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; pointer-events:none; z-index:7; opacity:0; }
.pitch-wordmark.show { animation:wm-in 2.6s cubic-bezier(.2,.7,.1,1) forwards; }
.pitch-wordmark .wm { font:200 clamp(30px, 9vw, 76px)/1 var(--thin); letter-spacing:.55em; margin-right:-.55em; color:#fff; text-shadow:0 0 24px rgba(160,225,255,.75); }
.pitch-wordmark .wm-sub { font:400 11px/1 var(--mono); letter-spacing:.5em; margin-right:-.5em; text-transform:uppercase; color:rgba(95,200,255,.85); }
@keyframes wm-in { 0% { opacity:0; transform:scale(1.12); } 40% { opacity:1; transform:scale(1.02); } 100% { opacity:1; transform:none; } } /* compositor-only: no layout or filter per frame */
.stage.pitching .stage-bottom .chips, .stage.pitching .controls { opacity:.18; }
/* dark glass sheet */
.stage .sheet { background:rgba(2,7,12,.9); color:#d8e6f2; border:1px solid var(--cy-dim); border-bottom:none; border-radius:4px 4px 0 0; }
.stage .sheet-grab span { background:rgba(95,200,255,.35); }
.stage .sheet-head h2 { font:500 12px/1.4 var(--mono); letter-spacing:.2em; text-transform:uppercase; }
.stage .sheet-head .icon-btn { color:#d8e6f2; background:rgba(95,200,255,.08); }
.stage .sheet-body article.bubble, .stage .sheet .bubble { background:rgba(10,22,32,.7); color:#e6f1fa; border-color:var(--cy-dim); border-radius:3px; }
.stage .sheet .card-alert { background:rgba(70,0,0,.35) !important; } .stage .sheet .card-alert.drill { background:rgba(60,45,0,.3) !important; }
.stage .sheet-note { color:#b8cad8; }
.stage .card-kicker { font-family:var(--mono); letter-spacing:.14em; color:rgba(95,200,255,.8); }
.stage .transcript-open { border-radius:3px; background:rgba(1,5,9,.75); border:1px solid var(--cy-dim); }
.stage .transcript-open .bubble { border-radius:3px; font-family:var(--mono); font-size:13px; }
/* 2D fallback eye (no WebGL / Save-Data) */
.eye-2d.mood-alert .e2-iris { fill:#ff3030; } .eye-2d.mood-alert .e2-aura { fill:#ff2020; opacity:.4; }
.eye-2d.mood-celebrate .e2-iris { fill:#e8f8ff; }
@keyframes e2-beam { 0% { fill:#ffffff; opacity:1; } 100% { fill:#5fc8ff; opacity:.6; } }
/* reduced motion (OS setting or the menu toggle) */
.reduce-motion .stage *, .reduce-motion .stage *::before, .reduce-motion .stage *::after { animation-duration:.001s !important; animation-iteration-count:1 !important; transition:none !important; }
.reduce-motion .pitch-wordmark.show { opacity:1; }
.reduce-motion .stage .pitch-stat.show { opacity:1; clip-path:none; }
@media (prefers-reduced-motion: reduce) { .loading-eye i { animation:none; } .sub-eye.typing::after { animation:none; } }
@media (max-width:720px) { .stage .pitch-stat { top:auto; left:18px; right:auto; transform:none; bottom:calc(282px + env(safe-area-inset-bottom)); } }
.pitch-wordmark { justify-content:flex-start; padding-top:58vh; }
@media (min-width:721px) { .pitch-wordmark { padding-top:62vh; } }
/* adaptive quality also reaches the DOM: on the two lowest rungs the glass stops blurring the live canvas */
.stage[data-quality="low"] .glass, .stage[data-quality="minimal"] .glass, .stage[data-quality="low"] .transcript-open, .stage[data-quality="minimal"] .transcript-open {
  -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(2,8,14,.72); }

/* ---------- 0.10: the Eye is the whole screen. Captions fade, panels open only on request ---------- */
.stage-scene { cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; outline:none; }
.stage-scene:focus-visible { box-shadow:inset 0 0 0 1px rgba(95,200,255,.35); }
.corner-dot { position:absolute; top:max(12px, env(safe-area-inset-top)); right:max(12px, env(safe-area-inset-right)); z-index:3;
  width:40px; height:40px; padding:0; border:none; background:none; display:grid; place-items:center; opacity:.28; transition:opacity .3s; }
.corner-dot span { width:5px; height:5px; border-radius:50%; background:#8fd0ff; box-shadow:0 0 6px #4aa8ff; }
.corner-dot:hover, .corner-dot:focus-visible { opacity:.9; }
.stage .subtitles { bottom:calc(64px + env(safe-area-inset-bottom)); }
.stage .sub-eye { font:300 17px/1.5 var(--thin); color:rgba(232,244,255,.92); text-shadow:0 0 18px rgba(0,0,0,.9), 0 1px 2px #000;
  transition:opacity 1.6s ease, filter 1.6s ease; }
.stage .sub-eye.gone { opacity:0; filter:blur(3px); }
.stage .sub-eye.quiet { font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:rgba(143,208,255,.55); font-family:var(--mono); }
.stage .sub-eye.quiet.typing::after { display:none; }
.stage .sub-user { opacity:.6; }
.stage-bottom { gap:6px; pointer-events:none; }
.stage-bottom > * { pointer-events:auto; }
.stage .mic-hint { font-size:10px; opacity:.55; min-height:14px; }
.stage .brain-credit { font:400 9px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:rgba(143,208,255,.28); margin:0; }
.stage .chat-form.glass { width:min(520px, 100%); background:rgba(1,6,12,.55); border-color:rgba(95,200,255,.22); animation:sub-in .2s ease-out; }
.stage.typing-open .subtitles { bottom:calc(120px + env(safe-area-inset-bottom)); }
.stage.listening .subtitles .sub-user { opacity:.9; }
.stage .sheet-chips { flex-wrap:wrap; padding:8px 0 0; }
.stage .sheet-chips:empty { display:none; }
.stage.panel-wide .sheet { width:min(820px, 100%); max-height:82vh; }
.stage .sheet .panel { padding:0; }
.stage .sheet .card, .stage .sheet .trap-hero { background:rgba(10,22,32,.7); color:#e6f1fa; border-color:var(--cy-dim); }
.stage .sheet input, .stage .sheet select, .stage .sheet textarea { background:rgba(2,10,18,.8); color:#e6f1fa; border-color:var(--cy-dim); }
.settings-list { display:flex; flex-direction:column; }
.settings-item { text-align:left; background:none; border:none; border-bottom:1px solid rgba(95,200,255,.1); color:#d8e6f2; padding:13px 4px;
  font:400 12px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }
.settings-item:hover, .settings-item:focus-visible { color:#fff; background:rgba(95,200,255,.06); }
.legal-head { margin:10px 0 0; font:500 12px/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#8fd0ff; }
.legal-text { font-size:13px; }
.card-agent .agent-key { display:block; word-break:break-all; padding:10px; font-size:13px; }
.card-pair { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.card-pair .pair-how { margin:0; }
.card-pair .pair-qr { width:min(176px, 46vw); height:auto; border-radius:12px; background:#fff; padding:4px; }
.card-pair .pair-url { display:block; max-width:100%; word-break:break-all; font-size:12px; padding:8px 10px; }
.card-pair .card-actions { justify-content:center; }
/* invite-only notice on the sign-up screen */
.invite-note { display:flex; gap:10px; align-items:baseline; margin:0 0 16px; padding:10px 12px; border-left:2px solid #4aa8ff;
  background:rgba(74,168,255,.08); font-size:14px; line-height:1.5; }
.invite-dot { flex:none; width:6px; height:6px; border-radius:50%; background:#8fd0ff; box-shadow:0 0 8px #4aa8ff; transform:translateY(-1px); }
.stage.sheet-open .subtitles { bottom:auto; top:calc(max(16px, env(safe-area-inset-top)) + 34px); }
.stage.sheet-open .sub-eye { font-size:15px; }
.stage .sheet { background:rgba(2,7,12,.96); }

/* 0.10.1: only the Eye. Faint, short captions that fade away completely; a typing line with no box at all. */
.stage .sub-eye { font:300 15px/1.5 var(--thin); color:rgba(222,238,255,.58); text-shadow:0 0 14px rgba(0,0,0,.95);
  max-width:min(520px, 88vw); transition:opacity 1.6s ease, filter 1.6s ease; }
.stage .sub-eye.gone { opacity:0; filter:blur(4px); }
.stage .sub-eye.muted { opacity:0 !important; }
.stage .sub-eye.quiet { font-size:11px; color:rgba(143,208,255,.38); }
.stage .sub-eye.typing::after { width:.4em; opacity:.5; box-shadow:none; }
.stage .sub-user { font-size:11px; color:rgba(207,226,240,.42); }
.stage .chat-form.glass { position:fixed; left:50%; top:calc(50% + min(26vh, 30vw)); transform:translateX(-50%); width:min(520px, 86vw);
  background:none !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; padding:0; }
.stage .chat-form.glass input { width:100%; background:none !important; border:none !important; outline:none !important; box-shadow:none !important;
  text-align:center; font:300 16px/1.4 var(--thin); color:rgba(222,238,255,.62); caret-color:rgba(143,208,255,.75); }
.stage .chat-form.glass input::placeholder { color:transparent; }
.stage .chat-form.glass .send { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }
.stage .brain-credit, .stage .corner-dot { display:none !important; }
.stage .sheet.glass { background:rgba(2,6,12,.95) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
.card-defense .proof { color:#7fe0b0; }

/* ---------- 0.17.0 company website (signed-out landing). Additive: the Eye's look is untouched. ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-weight:600; padding:9px 16px; border-radius:8px;
  border:1px solid var(--line); background:rgba(20,44,96,.55); color:var(--ink); text-decoration:none; min-height:44px; touch-action:manipulation; }
.btn:hover { border-color:rgba(124,196,255,.45); }
.btn.primary { background:linear-gradient(180deg,#3d8bff,#1f5fd6); border-color:#3d8bff; color:#fff; box-shadow:0 0 18px rgba(61,139,255,.35); }
.btn.ghost { background:transparent; color:var(--accent); }
.btn.big { font-size:18px; padding:14px 28px; min-height:52px; }
.btn:focus-visible, button.link.inline:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
button.link.inline { padding:0; min-height:0; color:var(--accent); text-decoration:underline; font-size:inherit; }
.site { padding-bottom:16px; }
.site-hero { padding:56px 0 40px; }
.site-eye { display:block; margin:0 auto 18px; width:112px; height:112px; filter:drop-shadow(0 0 28px rgba(47,134,255,.6)); }
.eyebrow { display:inline-flex; align-items:center; gap:8px; margin:0 0 14px; padding:5px 12px; border:1px solid var(--line); border-radius:999px;
  background:rgba(61,139,255,.1); color:var(--accent); font-size:13px; letter-spacing:.04em; }
.eyebrow .invite-dot { width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 10px var(--ok); flex:none; }
.cta-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:8px 0 14px; }
.site-section { padding:44px 0 8px; scroll-margin-top:84px; }
.site-section h2 { font-size:clamp(24px,3.6vw,34px); line-height:1.2; margin:0 0 12px; max-width:760px; }
.kicker { margin:0 0 6px; color:var(--accent); font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.section-lead { color:var(--muted); font-size:17px; max-width:720px; margin:0 0 18px; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin:16px 0; }
.feature h3 { color:#fff; }
.feature p, .outcomes p, #trust .card p { margin:0; color:#c9d7ea; }
.ticks { list-style:none; padding:0; margin:0 0 20px; display:grid; gap:10px; }
.ticks li { position:relative; padding-left:30px; }
.ticks li::before { content:""; position:absolute; left:4px; top:.45em; width:12px; height:7px; border-left:2px solid var(--ok); border-bottom:2px solid var(--ok); transform:rotate(-45deg); }
.price { position:relative; text-align:center; padding:24px 16px; }
.price.featured { border-color:rgba(124,196,255,.55); box-shadow:0 0 24px rgba(61,139,255,.25); }
.price h3 { margin:6px 0 4px; }
.price .amount { font-size:38px; font-weight:700; margin:0; color:#fff; }
.price .amount span { font-size:16px; font-weight:600; color:var(--muted); }
.soon { display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:700; background:rgba(242,184,75,.15); color:var(--warn); }
.cta-card { text-align:center; margin-top:44px; padding:32px 20px; background:linear-gradient(135deg,#0a1f4d,#071534); }
.cta-card p { color:#c9d7ea; max-width:560px; margin:0 auto 18px; }
.cta-card p.small { margin-top:14px; }
.disclaimer { text-align:center; max-width:720px; margin:24px auto 0; }
.footer { flex-wrap:wrap; align-items:center; }
.footer-company { flex-basis:100%; text-align:center; font-size:13px; line-height:1.5; }
.footer-company p { margin:0 0 4px; }
@media (max-width:720px) {
  .site-hero { padding:28px 0 24px; }
  .site-eye { width:88px; height:88px; margin-bottom:12px; }
  .cta-row .btn { flex:1 1 100%; }
  .site-section { padding-top:32px; }
  .topbar .btn.primary { padding:8px 12px; font-size:15px; }
  .brand-tag { display:none; }
}

/* 0.17.1: the sign-up, sign-in and verify titles are h2 (the landing owns the one h1) but keep their h1 size. */
.view-title { font-size:2em; margin:.67em 0; }