:root{ --bg:#0b0912; --bg-alt:#100d1b; --card:#141020; --card-alt:#171223; --border:rgba(255,255,255,0.09); --border-soft:rgba(255,255,255,0.07); --text:#f0eef7; --dim:#a09bb4; --faint:#867fa0; --accent:#7442d2; --accent-hover:#8c4add; --teal:#3ddbb8; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:'Space Grotesk',Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
*{ box-sizing:border-box; }
a{ color:var(--text); text-decoration:none; }
a:hover{ color:#e58bff; }
.wrap{ max-width:1120px; margin:0 auto; padding:0 clamp(20px,6vw,32px); }
.wrap-narrow{ max-width:760px; margin:0 auto; padding:0 clamp(20px,6vw,32px); }
header.site{ position:sticky; top:0; z-index:50; background:rgba(8,10,22,0.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--border-soft); }
.header-inner{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:14px 0; }
.logo{ display:flex; align-items:center; gap:10px; }
.logo-mark{ width:30px; height:30px; display:block; }
.logo-word{ font-family:'Noto Serif',serif; font-size:18px; font-weight:700; letter-spacing:-0.01em; white-space:nowrap; color:#f5f3fb; }
.logo-word-ai{ color:#e58bff; }
nav.site-nav{ margin-left:auto; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.nav-link{ font-size:12.5px; color:var(--dim); font-family:'JetBrains Mono',monospace; white-space:nowrap; }
.nav-link:hover{ color:var(--text); }
.nav-current{ color:var(--text); font-weight:600; border-bottom:2px solid var(--accent); padding-bottom:3px; cursor:default; }
.btn{ display:inline-block; background:var(--accent); color:#fff; padding:10px 18px; border-radius:8px; font-size:12.5px; font-weight:600; box-shadow:0 6px 20px rgba(140,74,221,0.32); }
.btn:hover{ background:var(--accent-hover); color:#fff; }
.btn-lg{ padding:19px 38px; border-radius:10px; font-size:15.4px; box-shadow:0 10px 34px rgba(140,74,221,0.4); }
.btn-outline{ display:inline-block; background:transparent; color:var(--text); border:1px solid rgba(255,255,255,0.28); padding:14px 26px; border-radius:10px; font-size:13.5px; font-weight:600; }
.btn-outline:hover{ border-color:var(--teal); color:var(--teal); }
.btn-teal{ display:inline-block; background:var(--teal); color:#06231c; padding:19px 38px; border-radius:10px; font-size:15.4px; font-weight:700; box-shadow:0 10px 30px rgba(61,219,184,0.28); }
.btn-teal:hover{ background:#33c6a5; color:#06231c; }
section{ border-bottom:1px solid var(--border-soft); }
section.alt{ background:var(--bg-alt); }
.eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:0.2em; text-transform:uppercase; color:#e58bff; }
.card{ border:1px solid var(--border); border-radius:14px; background:var(--card); padding:24px; }
.grid{ display:grid; gap:18px; }
.cols-2{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.cols-3{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.cols-4{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
pre.example{ background:#0e0b17; border:1px solid var(--border); border-radius:10px; padding:16px 18px; font-family:'JetBrains Mono',monospace; font-size:12.3px; line-height:1.6; color:#d7d2e8; overflow-x:auto; white-space:pre-wrap; margin:0; }
details.faq{ border:1px solid var(--border); border-radius:12px; background:var(--card-alt); overflow:hidden; }
details.faq summary{ cursor:pointer; padding:20px 22px; font-size:15px; font-weight:500; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; }
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary::after{ content:'+'; font-family:'JetBrains Mono',monospace; color:#d76bff; }
details.faq[open] summary::after{ content:'\2013'; }
details.faq p{ margin:0; padding:0 22px 20px; font-size:14px; line-height:1.6; color:var(--dim); }
footer.site{ border-top:1px solid var(--border-soft); }
article h2{ font-size:clamp(21px,4vw,27px); letter-spacing:-0.02em; font-weight:700; margin:0 0 16px; }
article p{ font-size:14.5px; line-height:1.7; color:var(--dim); margin:0 0 16px; }
article ul{ font-size:14.5px; line-height:1.7; color:var(--dim); padding-left:22px; margin:0 0 16px; }
article li{ margin-bottom:8px; }
article li strong{ color:var(--text); }
.skill-link{ font-size:13.5px; font-weight:600; color:var(--text); }
.skill-link:hover{ color:var(--teal); }
.deliverable-map{ display:grid; gap:8px; font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--dim); }
.deliverable-map span.arrow{ color:var(--teal); margin:0 8px; }
table.tools{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.tools th, table.tools td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--border-soft); vertical-align:top; }
table.tools th{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--faint); font-weight:500; }
table.tools td{ color:var(--dim); }
table.tools td:first-child, table.tools th:first-child{ color:var(--text); font-weight:600; }
.table-wrap{ overflow-x:auto; }