:root {
  --bg:#070906; --ink:#e9efe9; --dim:#7d9287; --line:#1b2620;
  --acc:#7cffb2; --acc2:#22d3ee; --acc3:#a78bfa; --hot:#ff5c7a;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.wrap { max-width:680px; margin:0 auto; padding:0 18px; }
.topbar { position:sticky; top:0; z-index:50; background:rgba(7,9,6,.82);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.topbar .wrap { display:flex; justify-content:space-between; align-items:center; height:46px; font-size:10px; letter-spacing:1.5px; }
.brand { display:flex; align-items:center; gap:7px; font-weight:600; }
.dot { width:7px; height:7px; border-radius:50%; background:var(--acc); box-shadow:0 0 12px var(--acc); }
.navlinks { display:flex; gap:14px; }
.sitefoot { border-top:1px solid var(--line); margin-top:60px; padding:24px 0; color:var(--dim); font-size:10px; letter-spacing:1px; }
/* home ledger + status pills */
.hero-home { padding:48px 0 24px; background:radial-gradient(120% 80% at 50% -10%,#16261e,#070906 62%); }
.hero-home .wrap { padding-inline:18px; }
.hero-home h1 { font-size:clamp(30px,7vw,44px); letter-spacing:-1px; margin:8px 0; max-width:20ch; }
.stats { display:flex; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-top:20px; max-width:420px; }
.stats > div { flex:1; background:#0d110f; padding:10px; }
.stats strong { display:block; font-size:20px; color:var(--acc); }
.stats span { font-size:9px; color:var(--dim); letter-spacing:1px; }
.ledger { margin:28px auto; display:block; }
.row { display:grid; grid-template-columns:28px 1fr auto auto; gap:10px; align-items:center;
  padding:14px 4px; border-bottom:1px solid var(--line); }
.row .idx { color:var(--acc); font-size:12px; }
.row .row-title { font-size:16px; }
.row .cat { color:var(--dim); font-size:10px; letter-spacing:1px; }
.pill { font-size:9px; letter-spacing:1px; border-radius:99px; padding:3px 9px; white-space:nowrap; }
.pill-raw { background:#1e2430; color:#93a4c4; }
.pill-exploring { background:#17352a; color:var(--acc); }
.pill-building { background:#241a35; color:#c4b5fd; }
.pill-shipped { background:#0e2f38; color:var(--acc2); }
.pill-buried { background:#3a1620; color:var(--hot); }
.prose { padding:40px 18px; max-width:680px; }
.people { list-style:none; padding:0; display:flex; gap:10px; flex-wrap:wrap; }
.people li { border:1px solid var(--line); border-radius:99px; padding:6px 12px; font-size:13px; }
/* generated product pages */
.idea { max-width:780px; margin:0 auto; padding:0 18px 48px; }
.idea-hero { padding:44px 0 26px; background:radial-gradient(120% 80% at 50% -10%,#16261e,#070906 60%); }
.idea-hero .k { color:var(--acc); font-size:10px; letter-spacing:2px; }
.idea-hero h1 { font-size:clamp(34px,9vw,56px); line-height:1; letter-spacing:-1.6px; margin:10px 0 12px; }
.idea-hero .lede { color:#b9c8bf; font-size:16px; line-height:1.5; max-width:58ch; }
.idea-cta { display:flex; align-items:center; gap:14px; margin-top:22px; flex-wrap:wrap; }
.idea-cta span { color:var(--dim); font-size:10px; letter-spacing:1px; }
.cta { display:inline-block; background:var(--acc); color:#04201a; font-weight:800; font-size:14px;
  letter-spacing:.5px; padding:15px 26px; border-radius:12px; box-shadow:0 0 30px rgba(124,255,178,.3); }
.idea-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:26px 0; }
.idea-gallery img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:14px; border:1px solid var(--line); }
.idea-section { padding:24px 0; border-top:1px solid var(--line); }
.idea-section h2 { font-size:24px; letter-spacing:-.6px; margin:0 0 12px; }
.idea-section p, .idea-section li { color:#c9d4cf; line-height:1.65; }
.idea-section ol { padding-left:20px; }
.idea-features { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:22px 0; }
.idea-features .feat { border:1px solid var(--line); border-radius:12px; padding:14px; background:#0d110f; }
.idea-features .feat b { display:block; margin-bottom:4px; }
.idea-features .feat span { color:#a9b8b0; font-size:12px; }
.idea-quotes { display:grid; gap:12px; margin:22px 0; }
.idea-quotes blockquote { border:1px solid var(--line); border-radius:12px; padding:14px; margin:0; background:#0d110f; color:#c9d4cf; }
.idea-quotes blockquote p:first-child { color:#ffcf4d; letter-spacing:2px; }
.idea-quotes cite { display:block; margin-top:8px; color:var(--dim); font-size:11px; letter-spacing:1px; font-style:normal; }
.idea-pricing { text-align:center; padding:32px 0; }
.idea-pricing h2 { font-size:36px; }
.idea-pricing .mono { color:var(--dim); font-size:13px; }
.idea-signoff { margin-top:26px; padding-top:14px; border-top:1px solid var(--line); color:var(--dim); font-size:11px; letter-spacing:1px; }
/* intake chat — full-viewport app shell */
body.app { height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
body.app > main { flex:1; min-height:0; display:flex; }
.chatapp { flex:1; min-height:0; display:flex; flex-direction:column; width:100%; max-width:760px; margin:0 auto; }
.chat { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; gap:12px; padding:18px 14px 8px; }
.msg { max-width:86%; display:flex; align-items:flex-end; gap:8px; }
.msg .avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; flex:0 0 auto; border:1px solid var(--line); background:#0d110f; }
.msg .body { min-width:0; }
.msg.me { flex-direction:row-reverse; }
.msg p { margin:0; padding:11px 14px; border-radius:16px; line-height:1.5; font-size:15px; white-space:pre-wrap; overflow-wrap:anywhere; }
.msg.bot { align-self:flex-start; }
.msg.bot p { background:#0f1512; border:1px solid var(--line); border-bottom-left-radius:4px; color:#dfe9e3; }
.msg.me { align-self:flex-end; }
.msg.me p { background:var(--acc); color:#04201a; border-bottom-right-radius:4px; }
.msg.thinking p { color:var(--dim); }
.msg.error p { border-color:var(--hot); color:var(--hot); }
.open-page { display:inline-block; margin:8px 0 0 2px; padding:8px 14px; border-radius:99px; background:var(--acc); color:#04201a; font-size:12px; font-weight:700; letter-spacing:.3px; }
/* design picker: small inline thumbnails, tap = select, ⤢ = preview */
.designs { display:flex; gap:8px; margin-top:8px; }
.design-card { position:relative; width:96px; flex:0 0 auto; }
.design { width:100%; background:#0d110f; border:1px solid var(--line); border-radius:10px; padding:4px; cursor:pointer; color:var(--ink); display:flex; flex-direction:column; gap:4px; text-align:left; font:inherit; }
.design:hover:not(:disabled) { border-color:var(--acc); }
.design:disabled { cursor:default; opacity:.45; }
.design.chosen:disabled { opacity:1; border-color:var(--acc); box-shadow:0 0 0 1px var(--acc); }
.design img { width:100%; border-radius:6px; aspect-ratio:3/4; object-fit:cover; display:block; background:#0a0d0b; }
.design span { font-size:9px; color:var(--dim); letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.design.chosen span { color:var(--acc); }
.design.chosen span::before { content:'✓ '; }
.zoom { position:absolute; top:8px; right:8px; width:24px; height:24px; border:0; border-radius:6px; background:rgba(7,9,6,.72); color:var(--ink); font-size:13px; cursor:pointer; display:grid; place-items:center; }
.zoom:hover { background:var(--acc); color:#04201a; }
.composer { flex:0 0 auto; padding:8px 14px calc(10px + env(safe-area-inset-bottom)); background:var(--bg); border-top:1px solid var(--line); }
.composer-inner { display:flex; align-items:flex-end; gap:8px; background:#0d110f; border:1px solid var(--line); border-radius:16px; padding:6px 6px 6px 14px; }
.composer-inner:focus-within { border-color:#2c3f35; }
.composer textarea { flex:1; min-width:0; background:transparent; border:0; color:var(--ink); font:inherit; font-size:16px; resize:none; outline:none; padding:9px 0; max-height:140px; }
.send { background:var(--acc); color:#04201a; border:0; border-radius:12px; width:40px; height:40px; font-size:18px; font-weight:800; cursor:pointer; flex:0 0 auto; }
.send:disabled { opacity:.5; cursor:default; }
/* design lightbox */
body.lb-open { overflow:hidden; }
.lightbox { position:fixed; inset:0; z-index:100; background:rgba(7,9,6,.94); display:grid; grid-template-columns:44px 1fr 44px; grid-template-rows:1fr auto; align-items:center; padding:calc(12px + env(safe-area-inset-top)) 6px calc(12px + env(safe-area-inset-bottom)); }
.lightbox[hidden] { display:none; }
.lightbox img { grid-column:2; grid-row:1; justify-self:center; max-width:100%; max-height:calc(100dvh - 130px); border-radius:12px; border:1px solid var(--line); object-fit:contain; }
.lb-nav { grid-row:1; width:44px; height:64px; border:0; background:transparent; color:var(--ink); font-size:34px; cursor:pointer; }
.lb-prev { grid-column:1; } .lb-next { grid-column:3; }
.lb-nav:hover { color:var(--acc); }
.lb-close { position:absolute; top:calc(8px + env(safe-area-inset-top)); right:10px; width:40px; height:40px; border:0; border-radius:50%; background:#0d110f; color:var(--ink); font-size:24px; cursor:pointer; }
.lb-foot { grid-column:1 / -1; grid-row:2; display:flex; flex-direction:column; align-items:center; gap:10px; padding-top:12px; }
.lb-foot .mono { color:var(--dim); font-size:11px; letter-spacing:1px; text-align:center; }
.lb-use { border:0; cursor:pointer; font:inherit; font-weight:800; }
@media (max-width:600px) {
  .msg { max-width:92%; }
  .design-card { width:92px; }
  .designs { gap:6px; }
}