/* ───────────────────────────────────────────────────────────
   gooser — consumer spin of goost.
   Build and locally run your own chatbots by fetching anyone's
   Instagram / X / links into a taste model, then chatting with it.
   Look: Cursor-cool — near-black ground, monochrome surfaces, a
   white CTA, and a cool blue-violet ambient glow. Austere, glassy.
   ─────────────────────────────────────────────────────────── */
:root{
  --bg:#08090a; --bg-2:#0c0d0f; --card:#101114; --card-2:#16171b;
  --line:rgba(255,255,255,0.08); --line-2:rgba(255,255,255,0.05); --line-strong:rgba(255,255,255,0.16);
  --fg:#f3f4f6; --sub:#a1a3ad; --faint:#6a6c76;
  /* --yolk* names retained as the accent slots; values are now Cursor-cool */
  --yolk:#e8e9ee; --yolk-soft:rgba(232,233,238,0.10); --yolk-ink:#0a0b0d;
  --glow:#5b6cff; --glow-soft:rgba(91,108,255,0.16);
  --ig:#e1306c; --x:#e8e8ea;
  --sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Fragment Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:12px; --r-s:8px; --r-pill:999px;
  --wrap:1080px;
}
*{box-sizing:border-box;margin:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background-image:radial-gradient(70% 55% at 50% -12%,var(--glow-soft),transparent 70%);background-repeat:no-repeat;}
a{color:inherit;text-decoration:none;}
.mono{font-family:var(--mono);}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}

/* nav */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(8,9,10,0.65);border-bottom:1px solid var(--line-2);}
.nav .row{display:flex;align-items:center;gap:14px;height:62px;}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-0.01em;font-size:17px;}
.brand .g{font-size:20px;}
.brand small{font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:0.1em;text-transform:uppercase;border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 7px;margin-left:4px;}
.nav .sp{flex:1;}
.nav a.lnk{color:var(--sub);font-size:14px;}
.nav a.lnk:hover{color:var(--fg);}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;border-radius:var(--r-pill);padding:10px 18px;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--fg);transition:.15s;}
.btn:hover{border-color:var(--line-strong);background:var(--card-2);}
.btn.primary{background:var(--yolk);color:var(--yolk-ink);border-color:transparent;}
.btn.primary:hover{opacity:.9;background:var(--yolk);}

/* hero */
.hero{padding:72px 0 36px;text-align:center;}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:#9aa0c4;margin-bottom:20px;}
.hero h1{font-size:clamp(36px,6.4vw,62px);line-height:1.04;letter-spacing:-0.035em;font-weight:600;}
.hero h1 .em{background:linear-gradient(180deg,#ffffff 0%,#9aa0ff 130%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p{color:var(--sub);font-size:clamp(16px,2.2vw,20px);max-width:620px;margin:20px auto 0;}

/* create box */
.create{max-width:680px;margin:36px auto 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;text-align:left;box-shadow:0 24px 60px rgba(0,0,0,0.4);}
.create .lab{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--faint);margin:2px 4px 12px;}
.create .field{display:flex;align-items:center;gap:10px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-s);padding:13px 15px;transition:.15s;}
.create .field:focus-within{border-color:var(--yolk);}
.create .field svg{width:18px;height:18px;color:var(--faint);flex:0 0 auto;}
.create input{flex:1;background:transparent;border:0;outline:0;color:var(--fg);font-family:var(--mono);font-size:14px;}
.create input::placeholder{color:var(--faint);}
.create .row2{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap;}
.src{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;color:var(--sub);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 13px;cursor:pointer;transition:.15s;}
.src:hover,.src.on{border-color:var(--line-strong);color:var(--fg);}
.src .dot{width:7px;height:7px;border-radius:50%;}
.src.ig .dot{background:var(--ig);} .src.x .dot{background:var(--x);} .src.link .dot{background:var(--yolk);}
.create .go{margin-left:auto;}
.create .note{font-size:12px;color:var(--faint);margin:14px 4px 2px;display:flex;align-items:center;gap:8px;}
.create .note b{color:var(--sub);font-weight:500;}

/* steps */
.section{padding:64px 0;}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--faint);text-align:center;margin-bottom:10px;}
.section h2{text-align:center;font-size:clamp(24px,4vw,34px);letter-spacing:-0.02em;font-weight:600;margin-bottom:44px;}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:760px){.steps{grid-template-columns:1fr;}}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;}
.step .n{font-family:var(--mono);font-size:12px;color:#9aa0ff;letter-spacing:0.08em;}
.step .ic{width:40px;height:40px;border-radius:var(--r-s);background:var(--glow-soft);border:1px solid rgba(91,108,255,0.22);display:flex;align-items:center;justify-content:center;margin:16px 0 16px;}
.step .ic svg{width:21px;height:21px;color:#9aa0ff;}
.step h3{font-size:18px;letter-spacing:-0.01em;margin-bottom:8px;}
.step p{color:var(--sub);font-size:14.5px;}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.bot{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;cursor:pointer;transition:.15s;display:block;}
.bot:hover{border-color:var(--line-strong);background:var(--card-2);transform:translateY(-2px);}
.bot .top{display:flex;align-items:center;gap:12px;}
.bot .pfp{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;border:1px solid var(--line);}
.bot .nm{font-weight:600;letter-spacing:-0.01em;}
.bot .hd{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:2px;}
.bot .ds{color:var(--sub);font-size:13.5px;margin-top:14px;line-height:1.5;}
.bot .srcs{display:flex;gap:6px;margin-top:14px;}
.bot .srcs span{font-family:var(--mono);font-size:10px;letter-spacing:0.04em;color:var(--faint);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 9px;}

/* chat preview */
.chatp{max-width:560px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.chatp .ch{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line-2);}
.chatp .ch .pfp{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;border:1px solid var(--line);}
.chatp .ch .nm{font-weight:600;font-size:14px;}
.chatp .ch .st{font-family:var(--mono);font-size:10px;color:#9aa0ff;letter-spacing:0.06em;display:flex;align-items:center;gap:5px;}
.chatp .ch .st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--glow);box-shadow:0 0 8px var(--glow);}
.chatp .body{padding:20px 16px;display:flex;flex-direction:column;gap:12px;}
.bub{font-size:14px;line-height:1.5;padding:11px 14px;border-radius:var(--r-s);max-width:80%;}
.bub.them{background:var(--bg-2);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:3px;color:var(--sub);}
.bub.me{background:var(--yolk);color:var(--yolk-ink);align-self:flex-end;border-bottom-right-radius:3px;font-weight:500;}
.chatp .comp{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line-2);align-items:center;}
.chatp .comp input{flex:1;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:10px 15px;color:var(--fg);outline:0;font-family:var(--sans);font-size:13px;}
.chatp .comp .snd{width:36px;height:36px;border-radius:50%;background:var(--yolk);color:var(--yolk-ink);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.chatp .comp .snd svg{width:16px;height:16px;}

/* local strip */
.local{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px 30px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.local .ic{width:52px;height:52px;border-radius:var(--r-s);background:var(--glow-soft);border:1px solid rgba(91,108,255,0.22);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.local .ic svg{width:26px;height:26px;color:#9aa0ff;}
.local h3{font-size:19px;letter-spacing:-0.01em;}
.local p{color:var(--sub);font-size:14.5px;margin-top:4px;max-width:60ch;}

/* footer */
.foot{border-top:1px solid var(--line-2);padding:40px 0;margin-top:30px;}
.foot .row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:var(--faint);font-size:13px;}
.foot .row a{color:var(--sub);}
.foot .row a:hover{color:var(--fg);}
.foot .sp{flex:1;}
.foot .mono{font-size:11px;letter-spacing:0.04em;}

/* ── chat shell (canon — used by chat.html; mirrors the .chatp preview) ── */
.shell{display:grid;grid-template-columns:300px 1fr;height:100vh;}
@media(max-width:760px){.shell{grid-template-columns:1fr;} .roster{display:none;}}
.roster{border-right:1px solid var(--line);display:flex;flex-direction:column;overflow-y:auto;background:var(--bg-2);}
.roster .top{padding:16px 16px 12px;display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line-2);}
.roster .top .brand{font-size:16px;}
.roster .new{margin:14px 14px 6px;}
.roster .new .btn{width:100%;justify-content:center;}
.roster .lbl{font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint);padding:14px 18px 8px;}
.ri{display:flex;align-items:center;gap:11px;padding:10px 16px;margin:0 8px;border-radius:var(--r-s);cursor:pointer;transition:.12s;}
.ri:hover{background:var(--card);}
.ri.on{background:var(--card-2);}
.ri .pfp{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;border:1px solid var(--line);flex:0 0 auto;}
.ri .nm{font-weight:500;font-size:14px;line-height:1.2;}
.ri .hd{font-family:var(--mono);font-size:10px;color:var(--faint);margin-top:2px;}

.conv{display:flex;flex-direction:column;height:100vh;}
.conv .hd{display:flex;align-items:center;gap:12px;padding:16px 28px;border-bottom:1px solid var(--line);flex:0 0 auto;}
.conv .hd .pfp{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;border:1px solid var(--line);}
.conv .hd .nm{font-weight:600;letter-spacing:-0.01em;}
.conv .hd .hd2{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:2px;}
.conv .hd .st{margin-left:auto;font-family:var(--mono);font-size:10px;color:#9aa0ff;letter-spacing:0.06em;display:flex;align-items:center;gap:6px;}
.conv .hd .st::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--glow);box-shadow:0 0 8px var(--glow);}
.conv .thread{flex:1;overflow-y:auto;padding:28px;display:flex;flex-direction:column;gap:14px;}
.conv .bub{font-size:14.5px;line-height:1.55;padding:12px 16px;border-radius:var(--r-s);max-width:600px;}
.conv .bub.them{background:var(--bg-2);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:3px;color:var(--sub);}
.conv .bub.me{background:var(--yolk);color:var(--yolk-ink);align-self:flex-end;border-bottom-right-radius:3px;font-weight:500;}
.conv .comp{flex:0 0 auto;padding:16px 28px 22px;border-top:1px solid var(--line);}
.conv .comp .box{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 8px 8px 18px;transition:.15s;}
.conv .comp .box:focus-within{border-color:var(--yolk);}
.conv .comp input{flex:1;background:transparent;border:0;outline:0;color:var(--fg);font-family:var(--sans);font-size:14px;}
.conv .comp .snd{width:38px;height:38px;border-radius:50%;background:var(--yolk);color:var(--yolk-ink);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.conv .comp .snd svg{width:17px;height:17px;}
.conv .comp .hint{font-family:var(--mono);font-size:10px;color:var(--faint);margin-top:9px;letter-spacing:0.04em;}