/* The Living Substrate — FROM-SCRATCH layout = the design/11 §4.0 four-region application shell
   (top banner · left icon rail · generative canvas · agent conversation rail). Colour theme + the
   64-byte hex motif preserved from design/27; only the layout is new. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0a0a0a; color: #c9d2e6;
  font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.sub {
  display: grid;
  height: 100vh;
  grid-template-columns: 64px 1fr 340px;   /* icon-rail · canvas · agent */
  grid-template-rows: 44px 1fr;            /* banner · body */
  grid-template-areas:
    "banner banner banner"
    "iconrail canvas agent";
}

/* ── (1) top trust/status banner ── */
.sub-banner { grid-area: banner; display: flex; align-items: center; gap: 16px;
  padding: 0 16px; border-bottom: 1px solid #1a1a1a; background: #0d0d0d; }
.sub-brand { letter-spacing: 3px; color: #DE3122; font-weight: 700; }
.sub-zk { color: #DE3122; font-size: 12px; cursor: pointer; opacity: 0.85; }
.sub-vitals { color: #8b97b4; font-size: 12px; }
.sub-vitals b { color: #EDEDED; }
.sub-spacer { flex: 1; }
.sub-undo { height: 24px; padding: 0 10px; background: #0c1626; border: 1px solid #25324a;
  border-radius: 6px; color: #9fb4d8; cursor: pointer; font: inherit; font-size: 12px; }
.sub-undo:disabled { opacity: 0.4; cursor: default; }
.sub-cmdk { padding: 2px 8px; border: 1px solid #202020; border-radius: 5px; color: #9a9a9a; font-size: 11px; }
.sub-mesh { color: #9a9a9a; font-size: 12px; }

/* ── (2) left icon rail = the SPACE anchor ── */
.sub-iconrail { grid-area: iconrail; display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 12px 0; border-right: 1px solid #1a1a1a; background: #0b0b0b; }
.sub-ico { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #181818; border-radius: 9px; color: #9a9a9a; font-size: 18px; cursor: pointer; }
.sub-ico:hover { border-color: #DE3122; color: #ECECEC; }
.sub-ico-on { border-color: #DE3122; color: #DE3122; background: #101010; }
.sub-iconrail-sp { flex: 1; }
.sub-presence { color: #10B981; font-size: 12px; }

/* ── (3) the generative canvas (the hero) ── */
.sub-canvas-wrap { grid-area: canvas; position: relative; overflow: hidden; background: #0a0a0a; }
.sub-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.sub-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #6a6a6a; pointer-events: none; letter-spacing: 1px; }
/* lenses float over the canvas (top-left) */
.sub-lenses { position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; background: rgba(8,11,20,0.72); border: 1px solid #1a1a1a; border-radius: 9px;
  backdrop-filter: blur(6px); }
.sub-lens-h { color: #707070; letter-spacing: 2px; font-size: 10px; margin-right: 2px; }
.sub-lens { padding: 4px 9px; border: 1px solid #202020; border-radius: 6px; color: #98a4c4;
  cursor: pointer; font: inherit; font-size: 11px; background: transparent; }
.sub-lens:hover { border-color: #DE3122; }
.sub-lens-on { border-color: #DE3122; color: #ECECEC; background: #101010; }

/* ── (4) the agent conversation rail — "the input IS the agent" ── */
.sub-agent { grid-area: agent; display: flex; flex-direction: column; min-height: 0;
  border-left: 1px solid #1a1a1a; background: #0d0d0d; }
.sub-agent-h { padding: 12px 14px 10px; color: #707070; letter-spacing: 2px; font-size: 11px;
  border-bottom: 1px solid #161616; }
.sub-agent-h span { color: #9a9a9a; letter-spacing: 0; margin-left: 6px; }
.sub-agent-log { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px; }
.sub-card { border: 1px solid #181818; border-radius: 9px; background: #0b0b0b; padding: 12px; margin-bottom: 10px; }
.sub-card-h { color: #ECECEC; font-weight: 600; margin-bottom: 8px; }
.sub-kv { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #161616; }
.sub-kv span { color: #9a9a9a; }
.sub-kv b { color: #EDEDED; font-weight: 600; }
.sub-note { margin-top: 12px; color: #6a6a6a; font-size: 12px; }
.sub-hexh { margin: 14px 0 6px; color: #707070; letter-spacing: 2px; font-size: 11px; }
.sub-hex { margin: 0; padding: 8px; background: #080808; border: 1px solid #181818; border-radius: 6px;
  color: #9a9a9a; font-size: 11px; white-space: pre; overflow: auto; }
.sub-ribbon { color: #9a9a9a; font-size: 12px; padding: 8px 2px; border-top: 1px solid #161616; }
.sub-input { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-top: 1px solid #1a1a1a; }
.sub-input input { flex: 1; height: 32px; padding: 0 12px; background: #080808; border: 1px solid #202020;
  border-radius: 8px; color: #EDEDED; font: inherit; }
.sub-input input::placeholder { color: #4f5a78; }
.sub-input button { width: 36px; height: 32px; background: #123047; border: 1px solid #DE3122;
  border-radius: 8px; color: #ECECEC; cursor: pointer; font: inherit; }

/* ── shared controls (tombstone / confirm) — reused across layouts ── */
.ls-del { margin-top: 12px; width: 100%; height: 28px; background: #2a1014; border: 1px solid #DE3122;
  border-radius: 6px; color: #ff6b5e; cursor: pointer; font: inherit; font-size: 12px; }
.ls-del:hover { background: #3a151b; }
.ls-confirm { display: flex; align-items: center; gap: 8px; padding: 10px 12px; flex-wrap: wrap;
  background: #1c0e12; border-top: 1px solid #5a1c28; color: #ffc2cb; font-size: 12px; }
.ls-intent { padding: 2px 8px; border-radius: 4px; font-weight: 700; font-size: 10px; letter-spacing: 0.5px; }
.ls-red { background: #DE3122; color: #fff; }
.ls-confirm-y { height: 24px; padding: 0 12px; background: #DE3122; border: 0; border-radius: 5px; color: #fff; cursor: pointer; }
.ls-confirm-n { height: 24px; padding: 0 12px; background: #202020; border: 1px solid #2b3650; border-radius: 5px; color: #b9c6e2; cursor: pointer; }

/* ── public surfaces (landing · playground · demos · login) — same shell, same theme ── */
.land { max-width: 980px; margin: 0 auto; padding: 56px 40px; overflow-y: auto; height: 100%; box-sizing: border-box; }
.land-h1 { font-size: 30px; line-height: 1.25; color: #ECECEC; font-weight: 650; margin: 0 0 16px; letter-spacing: -0.3px; }
.land-sub { font-size: 14px; color: #c4c4c4; max-width: 720px; margin: 0 0 32px; line-height: 1.6; }
.land-claims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.land-claim { display: block; padding: 18px; background: #0b0b0b; border: 1px solid #1a1a1a; border-radius: 10px;
  text-decoration: none; transition: border-color .15s, transform .15s; }
.land-claim:hover { border-color: #DE3122; transform: translateY(-2px); }
.land-claim-vs { font-size: 11px; color: #DE3122; letter-spacing: .5px; text-transform: uppercase; }
.land-claim-t { font-size: 16px; color: #ECECEC; margin: 6px 0; font-weight: 600; }
.land-claim-d { font-size: 12px; color: #adadad; line-height: 1.5; min-height: 52px; }
.land-claim-go { font-size: 12px; color: #10B981; margin-top: 10px; }

/* benchmark result metric block */
.demo-metric { background: #0b0b0b; border: 1px solid #1a1a1a; border-radius: 12px; padding: 24px; margin: 8px 0 24px; }
.demo-metric-big { font-size: 52px; font-weight: 700; color: #10B981; line-height: 1; letter-spacing: -1px; }
.demo-metric-big span { font-size: 16px; color: #adadad; font-weight: 500; margin-left: 10px; }
.demo-metric-row { display: flex; gap: 32px; margin: 20px 0 12px; flex-wrap: wrap; }
.demo-metric-row div { display: flex; flex-direction: column; }
.demo-metric-row div span { font-size: 22px; color: #ECECEC; font-weight: 600; }
.demo-metric-row div { font-size: 11px; color: #909090; text-transform: uppercase; letter-spacing: .4px; }
.demo-prov { font-size: 12px; color: #DE3122; border-top: 1px solid #131a28; padding-top: 12px; }
.demo-honest { font-size: 12px; color: #adadad; background: #0a0d16; border: 1px solid #1a1a1a; border-left: 2px solid #c79a2f;
  border-radius: 8px; padding: 14px 16px; line-height: 1.6; }

/* agent conversation messages */
.demo-msg { padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
.demo-msg-agent { background: #0b1320; color: #bcd4ef; border: 1px solid #15203200; }
.demo-msg-user { background: #1e1e1e; color: #ECECEC; margin-left: 28px; }

/* playground table */
.demo-table { display: flex; flex-direction: column; gap: 8px; }
.demo-row { display: grid; grid-template-columns: 96px 130px 1fr 150px 64px; align-items: center; gap: 12px;
  padding: 14px 16px; background: #0b0b0b; border: 1px solid #1a1a1a; border-radius: 9px; text-decoration: none; transition: border-color .15s; }
.demo-row:hover { border-color: #DE3122; }
.demo-row-soon { opacity: .5; }
.demo-row-dom { font-size: 10px; color: #DE3122; text-transform: uppercase; letter-spacing: .5px; }
.demo-row-name { font-size: 14px; color: #ECECEC; font-weight: 600; }
.demo-row-claim { font-size: 12px; color: #adadad; }
.demo-row-vs { font-size: 12px; color: #c4c4c4; }
.demo-row-go { font-size: 12px; color: #10B981; text-align: right; }

/* login */
.login-card { max-width: 360px; background: #0b0b0b; border: 1px solid #1a1a1a; border-radius: 12px; padding: 24px; }
.login-form { display: flex; flex-direction: column; gap: 10px; }
.login-form label { font-size: 11px; color: #909090; text-transform: uppercase; letter-spacing: .4px; }
.login-form input { height: 36px; background: #080808; border: 1px solid #202020; border-radius: 7px; color: #ECECEC; padding: 0 12px; font: inherit; }
.login-form button { height: 36px; background: #1e1e1e; border: 1px solid #DE3122; border-radius: 7px; color: #ECECEC; cursor: pointer; font: inherit; margin-top: 6px; }
.login-form button:hover { background: #1b2d49; }
.login-err { font-size: 12px; color: #ff6b5e; }
.login-disabled { font-size: 13px; color: #c4c4c4; line-height: 1.6; }

/* kill-shot: the disbelief comparison element (founder 2026-06-30, every page a panic trigger) */
.demo-killshot{display:flex;gap:22px;margin:20px 0;padding:16px 18px;border:1px solid #2a2a2a;border-radius:8px;background:#0e0e0e}
.demo-killshot-col{flex:1;min-width:0}
.demo-killshot-lab{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#707070;margin-bottom:6px}
.demo-killshot-them b{color:#DE3122;font-weight:700}
.demo-killshot-them s{color:#8a8a8a}
.demo-killshot-us{color:#ECECEC}
.demo-killshot-us b{color:#10B981;font-weight:700}
.demo-killshot-mag{margin-top:10px;font-weight:700;color:#DE3122;font-size:1.05rem}
.demo-killshot-repro{margin-top:6px;color:#6f6f6f;font-size:.82rem}