/* Promptory — aurora dark, glass, snappy */
:root{
  --bg:#07070d; --ink:#f2f1ec; --muted:#9b98ab; --faint:#6b6878;
  --glass:rgba(255,255,255,.035); --line:rgba(255,255,255,.09);
  --violet:#8b5cf6; --teal:#2dd4bf; --amber:#fbbf24; --pink:#f472b6;
  --grad:linear-gradient(100deg,var(--violet),var(--pink) 45%,var(--amber));
  --r:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 16px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:rgba(139,92,246,.4)}

.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.aurora::before,.aurora::after{content:"";position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(120px);opacity:.16;animation:drift 26s ease-in-out infinite alternate}
.aurora::before{background:var(--violet);top:-20vmax;left:-15vmax}
.aurora::after{background:var(--teal);bottom:-25vmax;right:-15vmax;animation-delay:-13s}
@keyframes drift{to{transform:translate(8vmax,6vmax) scale(1.15)}}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* header */
.site-head{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
 padding:14px clamp(16px,4vw,44px);background:rgba(7,7,13,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:border-color .3s}
.site-head.scrolled{border-bottom-color:var(--line)}
.brand{font:700 20px "Space Grotesk",sans-serif;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.brand .mark{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:22px}
.head-nav{display:flex;gap:8px;align-items:center}
.nav-btn{padding:8px 14px;border-radius:99px;border:1px solid var(--line);color:var(--muted);font-size:14px;font-weight:500;transition:.25s;white-space:nowrap}
.nav-btn:hover{color:var(--ink);border-color:rgba(255,255,255,.25);transform:translateY(-1px)}
.nav-btn.bmc{border-color:rgba(251,191,36,.35);color:var(--amber)}
.nav-btn.bmc:hover{background:rgba(251,191,36,.12)}
@media(max-width:560px){.head-nav .nav-btn:not(.bmc){display:none}}

/* hero */
.hero{max-width:900px;margin:0 auto;padding:clamp(70px,12vh,120px) 20px 40px;text-align:center}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:99px;border:1px solid var(--line);background:var(--glass);font-size:13px;color:var(--muted);margin-bottom:28px}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:pulse 1.8s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(45,212,191,.15)}}
.hero h1{font:700 clamp(3rem,9vw,6rem)/1.02 "Space Grotesk",sans-serif;letter-spacing:-.04em;margin-bottom:22px}
.grad{background:var(--grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 6s ease-in-out infinite alternate}
@keyframes sheen{to{background-position:100% 0}}
.hero-sub{color:var(--muted);font-size:clamp(15px,2vw,18px);margin-bottom:36px}
.search-trigger{display:inline-flex;align-items:center;gap:12px;padding:15px 24px;border-radius:16px;border:1px solid var(--line);background:var(--glass);color:var(--faint);font-size:15px;min-width:min(420px,84vw);transition:.25s}
.search-trigger:hover{border-color:rgba(139,92,246,.5);box-shadow:0 0 40px rgba(139,92,246,.15);color:var(--muted)}
.search-trigger kbd{margin-left:auto;padding:3px 8px;border-radius:6px;border:1px solid var(--line);font:500 12px Inter;color:var(--faint)}
.search-trigger.slim{min-width:0;margin:18px 0 34px}
.hero-stats{display:flex;gap:clamp(20px,5vw,54px);justify-content:center;margin-top:44px;color:var(--faint);font-size:13px}
.hero-stats strong{display:block;font:700 26px "Space Grotesk";color:var(--ink)}
.hero-stats strong{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* sections & grids */
main{max-width:1160px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.section{padding:44px 0 10px}
.sec-title{font:600 15px "Space Grotesk";letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:16px}
.card{position:relative;padding:22px;border-radius:var(--r);border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(8px);transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s;display:flex;flex-direction:column;gap:10px}
.card:hover{transform:translateY(-5px);border-color:rgba(139,92,246,.45);box-shadow:0 18px 50px -18px rgba(139,92,246,.35)}
.card-top{display:flex;justify-content:space-between;align-items:center}
.chip{font-size:12px;color:var(--muted);padding:4px 11px;border-radius:99px;border:1px solid var(--line)}
.card h3{font:600 19px/1.3 "Space Grotesk";letter-spacing:-.01em}
.card h3 a:hover{color:var(--teal)}
.hook{color:var(--muted);font-size:14px;flex:1}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tags span{font-size:11.5px;color:var(--faint);padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.045)}
.tags.big span{font-size:13px;padding:6px 14px}
.copy-mini{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);color:var(--faint);font-size:15px;transition:.2s;display:grid;place-items:center}
.copy-mini:hover{color:var(--ink);border-color:var(--teal);transform:scale(1.08)}
.copy-mini.copied,.copy-big.copied{color:var(--teal);border-color:var(--teal)}

/* category cards */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:14px;padding-bottom:30px}
.cat-card{padding:24px;border-radius:var(--r);border:1px solid var(--line);background:var(--glass);display:flex;flex-direction:column;gap:6px;transition:.3s}
.cat-card:hover{transform:translateY(-4px);border-color:rgba(45,212,191,.5);box-shadow:0 16px 44px -16px rgba(45,212,191,.3)}
.cat-icon{font-size:26px}
.cat-card strong{font:600 18px "Space Grotesk"}
.cat-tag{color:var(--muted);font-size:13px}
.cat-count{color:var(--faint);font-size:12.5px;margin-top:8px}

/* inner pages */
.page{padding-top:44px;max-width:960px}
.crumb{font-size:13.5px;color:var(--faint);margin-bottom:26px}
.crumb a:hover{color:var(--teal)}
.page-h1{font:700 clamp(2rem,5vw,3.2rem)/1.1 "Space Grotesk";letter-spacing:-.03em;margin-bottom:12px}
.page-sub{color:var(--muted);font-size:clamp(15px,2vw,17.5px);max-width:640px;margin-bottom:6px}
.more-cats{display:flex;gap:8px;flex-wrap:wrap;padding:44px 0 20px}
.pill{padding:8px 16px;border-radius:99px;border:1px solid var(--line);color:var(--muted);font-size:13.5px;transition:.2s}
.pill:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}

/* terminal prompt block */
.terminal{margin:30px 0 18px;border-radius:var(--r);border:1px solid var(--line);background:rgba(10,10,18,.75);overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.term-bar{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.dots{display:flex;gap:6px}
.dots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.14)}
.dots i:first-child{background:rgba(244,114,182,.5)}
.dots i:nth-child(2){background:rgba(251,191,36,.5)}
.dots i:nth-child(3){background:rgba(45,212,191,.5)}
.term-name{font-size:12.5px;color:var(--faint)}
.copy-big{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:12px;border:1px solid rgba(45,212,191,.4);color:var(--teal);font-size:13.5px;font-weight:600;transition:.2s}
.copy-big:hover{background:rgba(45,212,191,.12);transform:translateY(-1px)}
.term-body{padding:26px 24px 30px;font:400 15.5px/1.75 Inter;white-space:pre-wrap;color:#d9d7e3}
.tip-strip{margin:20px 0 40px;padding:14px 18px;border-radius:14px;border:1px dashed rgba(251,191,36,.35);color:var(--muted);font-size:14px;background:rgba(251,191,36,.05)}

/* footer */
.site-foot{margin-top:70px;border-top:1px solid var(--line);background:rgba(7,7,13,.6);backdrop-filter:blur(10px)}
.foot-net{max-width:1160px;margin:0 auto;padding:44px clamp(16px,4vw,40px) 26px}
.foot-label{font:600 12px "Space Grotesk";letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.net-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:12px;margin-top:16px}
.net-links a{padding:18px 20px;border-radius:16px;border:1px solid var(--line);background:var(--glass);display:flex;flex-direction:column;gap:4px;transition:.25s}
.net-links a:hover{transform:translateY(-3px);border-color:rgba(139,92,246,.5)}
.net-links strong{font:600 16px "Space Grotesk"}
.net-links span{color:var(--muted);font-size:13px}
.foot-base{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;max-width:1160px;margin:0 auto;padding:18px clamp(16px,4vw,40px) 34px;color:var(--faint);font-size:13.5px}
.bmc-strip{color:var(--amber);border:1px solid rgba(251,191,36,.35);padding:8px 16px;border-radius:99px;transition:.2s}
.bmc-strip:hover{background:rgba(251,191,36,.12)}

/* palette */
.palette{position:fixed;inset:0;z-index:100;background:rgba(4,4,8,.7);backdrop-filter:blur(10px);display:flex;justify-content:center;padding:12vh 16px 0}
.palette-box{width:min(620px,100%);height:fit-content;max-height:70vh;display:flex;flex-direction:column;border-radius:22px;border:1px solid rgba(139,92,246,.35);background:rgba(14,14,22,.96);box-shadow:0 40px 120px -20px rgba(0,0,0,.8);overflow:hidden;animation:pop .18s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{transform:scale(.96) translateY(8px);opacity:0}}
#palette-input{padding:18px 22px;font-size:16px;background:none;border:none;outline:none;color:var(--ink);border-bottom:1px solid var(--line)}
.palette-results{overflow-y:auto;padding:8px}
.pal-item{display:block;width:100%;text-align:left;padding:12px 14px;border-radius:14px;transition:.12s}
.pal-item .t{font:600 15px "Space Grotesk"}
.pal-item .h{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-item .c{font-size:11px;color:var(--faint)}
.pal-item.active{background:rgba(139,92,246,.16)}
.palette-hint{padding:10px 18px;border-top:1px solid var(--line);font-size:11.5px;color:var(--faint)}
.pal-empty{padding:26px;text-align:center;color:var(--faint);font-size:14px}

/* toast */
#toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);z-index:200;padding:12px 22px;border-radius:99px;background:rgba(20,20,30,.95);border:1px solid rgba(45,212,191,.5);color:var(--teal);font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:.3s cubic-bezier(.2,.9,.3,1.2)}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* reveal */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.aurora::before,.aurora::after,.grad,.pulse{animation:none}}
.palette[hidden]{display:none}
