/* The Agentic Researcher: guide page.
   Palette and type match the main site (Cozy Pixel Loft). */

:root{--neon:#ffb152;--neon2:#4fd6c2;--anim:running}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Nunito,system-ui,sans-serif;color:#ecd9cd;-webkit-font-smoothing:antialiased;background:radial-gradient(120% 80% at 82% -5%,#3c2552 0%,rgba(60,37,82,0) 52%),radial-gradient(90% 70% at 0% 4%,#3e2740 0%,rgba(62,39,64,0) 58%),linear-gradient(#241a2a,#1a1220 58%,#130c17);background-attachment:fixed;min-height:100vh}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:#160e18}
::-webkit-scrollbar-thumb{background:#3a2d40;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#4c3c54}
@keyframes ledpulse{0%,100%{opacity:.5;box-shadow:0 0 4px currentColor}50%{opacity:1;box-shadow:0 0 11px currentColor,0 0 18px currentColor}}
a{text-decoration:none;color:inherit}

/* nav */
nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(26,18,28,.82);border-bottom:2px solid #160e18}
.nav-inner{max-width:1080px;margin:0 auto;padding:11px 22px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nav-brand{display:flex;align-items:center;gap:8px;padding:4px 2px}
.nav-brand-mono{font-family:'Baloo 2';font-weight:800;font-size:17px;color:var(--neon);text-shadow:1px 1px 0 #160e18}
.nav-brand-name{font-family:'Baloo 2';font-weight:700;font-size:16px;color:#f3e7db}
.nav-tabs{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.nav-tab{display:flex;align-items:center;gap:6px;font-family:'Baloo 2';font-weight:600;font-size:13.5px;color:#d9c6bc;padding:7px 12px;border-radius:8px;transition:background .15s,color .15s}
.nav-tab:hover{background:rgba(255,179,92,.16);color:#fff}
.nav-tab-dot{width:6px;height:6px;border-radius:50%;background:var(--neon);box-shadow:0 0 7px var(--neon)}

.page-wrap{max-width:1080px;margin:0 auto;padding:0 22px 70px}
.back-link{display:inline-flex;align-items:center;gap:7px;font:600 13px Nunito;color:#bda3b4;margin-bottom:18px;transition:color .15s;padding-top:30px}
.back-link:hover{color:#ffce8a}

/* hero */
.hero{padding-bottom:6px}
.hero-eyebrow{font-family:'Baloo 2';font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--neon);margin-bottom:8px}
.hero-h1{font-family:'Baloo 2';font-weight:800;font-size:52px;line-height:1;color:#fff;text-shadow:2px 2px 0 #160e18}
.hero-fullname{font:600 13px Nunito;color:#a98fa0;margin-top:10px;max-width:620px;line-height:1.4}
.hero-tagline{font-size:17px;line-height:1.55;color:#ecd9cd;margin:16px 0 18px;max-width:640px}
.hero-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.status-pill{display:inline-flex;align-items:center;gap:8px;font-family:'Baloo 2';font-weight:700;font-size:13px;padding:8px 14px;border-radius:30px;border:2px solid #160e18;background:rgba(160,140,175,.16);color:#c9b3d6}
.status-led{width:8px;height:8px;border-radius:50%;background:#c9b3d6}
.btn-amber{font-family:'Baloo 2';font-weight:700;font-size:13px;padding:9px 18px;border:2px solid #160e18;background:var(--neon);color:#2a1820;box-shadow:4px 4px 0 #160e18;transition:transform .12s,box-shadow .12s;display:inline-block}
.btn-amber:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #160e18}
.btn-teal{font-family:'Baloo 2';font-weight:700;font-size:13px;padding:9px 18px;border:2px solid var(--neon2);background:rgba(79,214,194,.12);color:#9bead9;box-shadow:4px 4px 0 rgba(79,214,194,.22);transition:background .15s;display:inline-block}
.btn-teal:hover{background:rgba(79,214,194,.22)}

/* panels & sections */
.section{margin-top:38px}
.panel{border:2px solid #160e18;border-radius:14px;background:#2a1f30;box-shadow:6px 6px 0 rgba(0,0,0,.3);padding:26px 30px}
.panel-dark{background:#1f1828}
.eyebrow-amber{font-family:'Baloo 2';font-weight:700;font-size:14px;color:var(--neon);margin-bottom:8px}
.eyebrow-teal{font-family:'Baloo 2';font-weight:700;font-size:14px;color:var(--neon2);margin-bottom:8px}
.section-h2{font-family:'Baloo 2';font-weight:700;font-size:26px;color:#fff;margin:0 0 18px}
.p{font-size:15px;line-height:1.7;color:#dcc8d2;margin:0 0 12px;max-width:780px}
.p:last-child{margin-bottom:0}
.p a,.li a,.note a{color:#ffce8a;border-bottom:1px solid rgba(255,206,138,.4)}
.p a:hover,.li a:hover,.note a:hover{color:#fff;border-bottom-color:#fff}
.ul{margin:0 0 12px;padding-left:20px;max-width:780px}
.li{font-size:15px;line-height:1.7;color:#dcc8d2;margin-bottom:7px}

/* archive banner */
.archive-banner{display:flex;gap:14px;align-items:flex-start;margin-top:26px;border:2px solid #160e18;border-radius:12px;background:linear-gradient(135deg,#372a41,#2a2030);box-shadow:5px 5px 0 rgba(0,0,0,.3);padding:16px 20px}
.archive-icon{flex:0 0 auto;width:32px;height:32px;border:2px solid #160e18;border-radius:8px;background:#c9b3d6;color:#2a1820;display:flex;align-items:center;justify-content:center;font-family:'Baloo 2';font-weight:800;font-size:16px}
.archive-text{font-size:14.5px;line-height:1.6;color:#e0cfd8}
.archive-text strong{color:#fff}

/* screenshot */
.shot-frame{border:3px solid #160e18;border-radius:12px;overflow:hidden;box-shadow:7px 7px 0 rgba(0,0,0,.35);background:#0d0b12}
.shot-frame img{display:block;width:100%;height:auto}
.shot-caption{font:500 12px 'IBM Plex Mono';color:#9d86a6;margin-top:12px}

/* steps */
.steps{display:flex;flex-direction:column;gap:12px}
.step{display:flex;gap:16px;align-items:flex-start;border:2px solid #160e18;border-radius:12px;background:#2e2233;box-shadow:5px 5px 0 rgba(0,0,0,.28);padding:15px 18px}
.step-n{flex:0 0 auto;font-family:'Baloo 2';font-weight:800;font-size:15px;color:#2a1820;background:var(--neon);min-width:38px;height:38px;padding:0 8px;border:2px solid #160e18;border-radius:9px;display:flex;align-items:center;justify-content:center}
.step-title{font-family:'Baloo 2';font-weight:700;font-size:17px;color:#fff;margin-bottom:3px}
.step-text{font-size:14px;line-height:1.6;color:#d3bfca}

/* cards grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.card{border:2px solid #160e18;border-radius:12px;background:#2e2233;box-shadow:5px 5px 0 rgba(0,0,0,.28);padding:18px 18px 20px}
.card-icon{width:30px;height:30px;border:2px solid #160e18;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:'Baloo 2';font-weight:800;color:#2a1820;margin-bottom:12px;font-size:14px}
.card-title{font-family:'Baloo 2';font-weight:700;font-size:16px;color:#fff;margin-bottom:5px}
.card-text{font-size:13.5px;line-height:1.6;color:#d3bfca}
.card-text a{color:#ffce8a;border-bottom:1px solid rgba(255,206,138,.4)}
.card-text a:hover{color:#fff}

/* downloads */
.dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.dl{display:flex;gap:14px;align-items:flex-start;border:2px solid #160e18;border-radius:12px;background:#2e2233;box-shadow:5px 5px 0 rgba(0,0,0,.28);padding:15px 17px;transition:transform .12s,box-shadow .12s}
.dl:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(255,179,92,.34)}
.dl-ext{flex:0 0 auto;font:600 10px 'IBM Plex Mono';letter-spacing:.06em;text-transform:uppercase;color:#2a1820;background:var(--neon2);border:2px solid #160e18;border-radius:7px;padding:5px 7px;margin-top:2px}
.dl-name{display:block;font-family:'Baloo 2';font-weight:700;font-size:15.5px;color:#fff}
.dl-desc{display:block;font-size:13px;line-height:1.55;color:#c6b2c1;margin-top:3px}
.dl-size{display:block;font:500 11px 'IBM Plex Mono';color:#8d7790;margin-top:5px}

/* definition rows */
.rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px 26px}
.row{display:flex;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.row-label{flex:0 0 130px;font:600 12px 'IBM Plex Mono';color:var(--neon2)}
.row-value{font-size:13.5px;line-height:1.5;color:#dcc8d2}
.row-value a{color:#ffce8a;border-bottom:1px solid rgba(255,206,138,.4)}
.row-value a:hover{color:#fff}

/* code + notes */
code{font-family:'IBM Plex Mono',monospace;font-size:12.5px;background:rgba(255,255,255,.07);border-radius:5px;padding:2px 6px;color:#ffd6a3}
pre{background:#150f1c;border:2px solid #160e18;border-radius:10px;padding:16px 18px;overflow-x:auto;margin:0 0 16px;box-shadow:4px 4px 0 rgba(0,0,0,.28)}
pre code{background:none;padding:0;color:#d8c8e0;font-size:12.5px;line-height:1.65;white-space:pre}
.note{border-left:4px solid var(--neon);background:rgba(255,179,92,.08);border-radius:0 10px 10px 0;padding:14px 18px;margin:0 0 16px;font-size:14.5px;line-height:1.65;color:#e6d4cc;max-width:820px}
.note strong{color:#ffce8a}

/* tables */
.table-wrap{overflow-x:auto;margin:0 0 18px}
table{border-collapse:collapse;width:100%;min-width:480px;font-size:14px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.1);line-height:1.55;color:#dcc8d2;vertical-align:top}
th{font-family:'Baloo 2';font-weight:700;font-size:13px;color:#ffce8a;background:rgba(255,255,255,.04);border-bottom:2px solid rgba(255,179,92,.35)}
tbody tr:hover{background:rgba(255,255,255,.03)}

/* guide page */
.guide{max-width:820px;margin:0 auto;padding:0 22px 80px}
.guide h1{font-family:'Baloo 2';font-weight:800;font-size:42px;line-height:1.05;color:#fff;text-shadow:2px 2px 0 #160e18;margin:0 0 18px}
.guide h2{font-family:'Baloo 2';font-weight:700;font-size:27px;color:#fff;margin:42px 0 14px;padding-top:14px;border-top:2px solid rgba(255,255,255,.09)}
.guide h3{font-family:'Baloo 2';font-weight:700;font-size:19px;color:#ffce8a;margin:28px 0 10px}
.guide p{font-size:15.5px;line-height:1.72;color:#dcc8d2;margin:0 0 14px}
.guide ul,.guide ol{margin:0 0 16px;padding-left:22px}
.guide li{font-size:15.5px;line-height:1.7;color:#dcc8d2;margin-bottom:8px}
.guide li>em{color:#b6a0c4}
.guide strong{color:#f3e2d8}
.guide blockquote{border-left:4px solid var(--neon2);background:rgba(79,214,194,.08);border-radius:0 10px 10px 0;padding:14px 18px;margin:0 0 18px}
.guide blockquote p{margin:0;color:#d5e8e4}
.guide a{color:#ffce8a;border-bottom:1px solid rgba(255,206,138,.4)}
.guide a:hover{color:#fff}

/* footer */
.page-footer{margin-top:50px;text-align:center}
.btn-back{display:inline-block;font-family:'Baloo 2';font-weight:700;font-size:14px;padding:12px 24px;border:2px solid #160e18;background:#2e2233;color:#ffce8a;box-shadow:5px 5px 0 rgba(0,0,0,.3);transition:transform .12s,box-shadow .12s}
.btn-back:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 rgba(0,0,0,.3)}
.footer-copy{margin-top:26px;font:500 11px 'IBM Plex Mono';color:#8a6f80}

@media(max-width:600px){
  .hero-h1{font-size:36px}
  .guide h1{font-size:32px}
  .panel{padding:20px 18px}
  .row-label{flex-basis:100px}
}

/* shared components used inside the guide's own typography scope */
.guide .card-text{display:block;font-size:13.5px;line-height:1.6;color:#d3bfca;margin:0}
.guide a.dl{border-bottom:2px solid #160e18;color:inherit}
.guide .dl-grid,.guide .grid{margin:0 0 18px}

/* ---- agentic researcher additions ---- */
.toc{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px 18px;margin:0 0 26px;padding:16px 20px;border:2px solid #160e18;border-radius:12px;background:#2a1f30;box-shadow:5px 5px 0 rgba(0,0,0,.28)}
.guide .toc a{border:none;font-family:'Baloo 2';font-weight:600;font-size:14.5px;color:#e8d6cc}
.guide .toc a:hover{color:#ffce8a}
.toc-n{font:600 11px 'IBM Plex Mono';color:var(--neon2);margin-right:8px}

/* annotated screenshot: pins and boxes are placed in % of the image */
.ann{margin:6px 0 26px}
.ann-img{position:relative;border:3px solid #160e18;border-radius:12px;overflow:hidden;box-shadow:7px 7px 0 rgba(0,0,0,.35);background:#0d0b12}
.ann-img img{display:block;width:100%;height:auto}
.pin{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:var(--neon);color:#2a1820;border:2px solid #160e18;box-shadow:0 0 0 3px rgba(255,177,82,.35),2px 2px 0 #160e18;font:800 15px 'Baloo 2';display:flex;align-items:center;justify-content:center;line-height:1}
.box{position:absolute;border:3px solid var(--neon);border-radius:8px;box-shadow:0 0 0 2px rgba(22,14,24,.8),0 0 18px rgba(255,177,82,.45)}
.box.teal{border-color:var(--neon2);box-shadow:0 0 0 2px rgba(22,14,24,.8),0 0 18px rgba(79,214,194,.45)}
.ann-key{list-style:none;counter-reset:k;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.guide .ann-key li{counter-increment:k;position:relative;padding-left:38px;margin:0;font-size:14.5px;line-height:1.6}
.ann-key li::before{content:counter(k);position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;background:var(--neon);color:#2a1820;border:2px solid #160e18;font:800 13px 'Baloo 2';display:flex;align-items:center;justify-content:center}
.ann figcaption{font:500 12px 'IBM Plex Mono';color:#9d86a6;margin-top:10px}
.kbd,kbd{display:inline-block;font:600 12px 'IBM Plex Mono';color:#2a1820;background:#ecd9cd;border:2px solid #160e18;border-bottom-width:3px;border-radius:6px;padding:1px 7px;margin:0 1px;white-space:nowrap}
.loop{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 20px}
.loop-step{border:2px solid #160e18;border-radius:12px;background:#2e2233;box-shadow:4px 4px 0 rgba(0,0,0,.28);padding:13px 14px;text-align:center}
.loop-n{font:600 11px 'IBM Plex Mono';color:var(--neon2)}
.loop-t{font-family:'Baloo 2';font-weight:700;font-size:16px;color:#fff;margin-top:2px}
.loop-d{font-size:12.5px;line-height:1.5;color:#c6b2c1;margin-top:4px}
.warn{border-left-color:#ff8a7a;background:rgba(255,120,100,.09)}
.warn strong{color:#ffb4a8}
@media(max-width:600px){.pin{width:24px;height:24px;font-size:12px}}
/* screenshots break out of the text column so their text stays legible */
.ann.wide{width:min(1400px,calc(100vw - 32px));position:relative;left:50%;transform:translateX(-50%)}
.ann.wide .ann-key,.ann.wide figcaption{max-width:820px;margin-left:auto;margin-right:auto}
.ann-img a{display:block;border:none}
.ann-zoom{position:absolute;right:10px;bottom:10px;font:600 11px 'IBM Plex Mono';color:#2a1820;background:rgba(236,217,205,.92);border:2px solid #160e18;border-radius:6px;padding:3px 8px;pointer-events:none}