/* Layout: a single reading column (~880px) of chapters; code and diagrams scroll inside their own boxes. Same playful sky/ink palette as the IQIO site. */
:root{
  --bg:#eaf8ff;--paper:#ffffff;--ink:#26324f;--muted:#5d6d8a;--line:#c9d8ea;
  --blue:#3d8df5;--blue-soft:#e1eeff;--pink:#ff6c9d;--pink-soft:#ffe6ef;--mint:#2fb592;--mint-soft:#dcf7ee;
  --yellow:#ffd84d;--yellow-soft:#fff5cc;--code-bg:#1f2942;--code-fg:#e6edf8;--code-dim:#8b9bbb;--code-ok:#6ff0d0;--code-key:#ffd84d;--code-str:#ff9cbd;
  --shadow:#26324f;
  --f-display:'Fredoka','Nunito',ui-rounded,system-ui,sans-serif;
  --f-body:'Nunito',ui-sans-serif,system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-pixel:'Press Start 2P',ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#141b2d;--paper:#1d2640;--ink:#e8eefb;--muted:#a3b1cc;--line:#34415f;
  --blue:#6aa8ff;--blue-soft:#22355a;--pink:#ff86ae;--pink-soft:#46263a;--mint:#54d9b4;--mint-soft:#1d4039;
  --yellow:#ffd84d;--yellow-soft:#463d1c;--code-bg:#0f1524;--shadow:#05080f;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141b2d;--paper:#1d2640;--ink:#e8eefb;--muted:#a3b1cc;--line:#34415f;
  --blue:#6aa8ff;--blue-soft:#22355a;--pink:#ff86ae;--pink-soft:#46263a;--mint:#54d9b4;--mint-soft:#1d4039;
  --yellow:#ffd84d;--yellow-soft:#463d1c;--code-bg:#0f1524;--shadow:#05080f;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:600 16px/1.7 var(--f-body);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:880px;margin:0 auto;padding-block:40px 80px;display:flex;flex-direction:column;gap:56px}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.15}
h1{font-size:clamp(38px,7vw,64px);letter-spacing:-.02em}
h1 em{font-style:normal;color:var(--pink)}
h2{font-size:clamp(26px,4vw,34px);display:flex;align-items:center;gap:12px}
h3{font-size:20px}
p{margin:0;max-width:68ch}
code{font:500 .88em var(--f-mono);background:var(--blue-soft);padding:1px 6px;border-radius:6px;overflow-wrap:anywhere}
.pixel{font:9px/1.8 var(--f-pixel);letter-spacing:.06em;color:var(--blue);text-transform:uppercase}
section{display:flex;flex-direction:column;gap:18px}
.lede{font-size:19px;color:var(--muted)}
.ico{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.h-ico{display:grid;place-items:center;width:42px;height:42px;border:3px solid var(--ink);border-radius:13px;background:var(--yellow);color:#26324f;box-shadow:0 3px var(--shadow);flex:none}
.h-ico .ico{width:22px;height:22px}

/* hero */
.hero{display:flex;flex-direction:column;gap:20px}
.links{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;margin-top:8px}
.seat{background:var(--paper);border:3px solid var(--ink);border-radius:18px;padding:14px 16px;box-shadow:0 5px var(--shadow);display:flex;flex-direction:column;gap:8px;min-width:0}
.seat-top{display:flex;align-items:center;gap:10px;font:600 15px var(--f-display)}
.dot{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff;border:2px solid var(--ink)}
.dot .ico{width:15px;height:15px;stroke-width:2.6}
.url{font:500 13px var(--f-mono);background:var(--blue-soft);border-radius:10px;padding:8px 10px;overflow-wrap:anywhere}
.say{font-size:14px;color:var(--muted)}

/* step strip */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px;counter-reset:s}
.step{background:var(--paper);border:2px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.step b{font:600 18px var(--f-display)}
.step .n{font:10px var(--f-pixel);color:var(--pink)}
.step p{font-size:15px;color:var(--muted)}

/* concept grid */
.concepts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px}
.concept{display:flex;gap:12px;align-items:flex-start;background:var(--paper);border-radius:16px;padding:14px;border:2px solid var(--line);min-width:0}
.concept .tile{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;color:var(--ink)}
.concept .tile .ico{width:22px;height:22px}
.concept b{font:600 17px var(--f-display);display:block}
.concept span{font-size:14px;color:var(--muted);line-height:1.5;display:block}

/* terminal */
.term{background:var(--code-bg);color:var(--code-fg);border-radius:18px;border:3px solid var(--ink);box-shadow:0 5px var(--shadow);overflow:hidden}
.term-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#ffffff10;font:600 13px var(--f-mono);color:var(--code-dim)}
.term-bar i{width:11px;height:11px;border-radius:50%;display:block}
.term pre{margin:0;padding:16px 18px;overflow-x:auto;font:400 13px/1.65 var(--f-mono)}
.c-cmd{color:var(--code-key)}.c-dim{color:var(--code-dim)}.c-ok{color:var(--code-ok)}.c-str{color:var(--code-str)}
.who{display:inline-block;font:600 11px var(--f-mono);padding:1px 7px;border-radius:6px;color:#fff}
.who.claude{background:#d97757}.who.codex{background:#3a4560}

/* tables */
.tbl{overflow-x:auto;background:var(--paper);border:2px solid var(--line);border-radius:16px}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:14px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:9px var(--f-pixel);letter-spacing:.05em;color:var(--muted);background:var(--blue-soft)}
tr:last-child td{border-bottom:0}
td code{white-space:nowrap}
.grp td{background:var(--yellow-soft);font:600 15px var(--f-display);padding:8px 14px}

/* callouts & lists */
.callout{display:flex;gap:12px;background:var(--mint-soft);border:2px solid var(--mint);border-radius:16px;padding:14px 16px}
.callout.warn{background:var(--pink-soft);border-color:var(--pink)}
.callout .ico{width:22px;height:22px;color:var(--mint);margin-top:2px}
.callout.warn .ico{color:var(--pink)}
ul.clean{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
ul.clean li{display:flex;gap:10px;align-items:flex-start;max-width:72ch}
ul.clean li .ico{color:var(--blue);margin-top:5px;flex:none}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px}
.panel{background:var(--paper);border:2px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.panel h3{display:flex;align-items:center;gap:8px}
.tag{display:inline-block;font:9px var(--f-pixel);padding:5px 8px;border-radius:8px;border:2px solid var(--ink);color:#26324f}
.diagram{overflow-x:auto;background:var(--paper);border:2px solid var(--line);border-radius:18px;padding:12px}
.diagram svg{display:block;min-width:640px;width:100%;height:auto}
.diagram text{font-family:var(--f-body);font-weight:700;fill:var(--ink)}
.diagram .mono{font-family:var(--f-mono);font-weight:400;fill:var(--muted)}
.d-box{fill:var(--paper);stroke:var(--ink);stroke-width:2.5}
.d-line{stroke:var(--muted);stroke-width:2;fill:none}
ol.q{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
ol.q li{max-width:70ch}
ol.q b{font-family:var(--f-display);font-weight:600}
footer{color:var(--muted);font-size:14px;border-top:3px dashed var(--line);padding-top:18px}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
th{font:700 13px var(--f-display);letter-spacing:0}
.tag{font:700 13px var(--f-display)}
/* navigation */
.topnav{position:sticky;top:0;z-index:10;margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px));background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:3px dashed var(--line)}
.topnav-in{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:18px;padding-block:10px}
.brand{display:flex;align-items:center;gap:8px;font:700 18px var(--f-display);color:var(--ink);text-decoration:none;flex:none}
.mark{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--pink);color:#fff;border:2.5px solid var(--ink);box-shadow:0 2px var(--shadow)}
.mark .ico{width:15px;height:15px;stroke-width:2.6}
.topnav ul{list-style:none;margin:0;padding:4px 2px 6px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;min-width:0}
.topnav li{flex:none}
.topnav ul a{display:block;padding:6px 12px;border-radius:999px;border:2px solid transparent;color:var(--muted);font:700 14px var(--f-display);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.topnav ul a:hover{background:var(--paper);color:var(--ink);border-color:var(--line)}
.topnav ul a[aria-current="page"]{background:var(--yellow);color:#26324f;border-color:var(--ink);box-shadow:0 2px var(--shadow)}
.page-head{display:flex;flex-direction:column;gap:12px}
.page-head h1{font-size:clamp(32px,5vw,48px)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pg{display:flex;flex-direction:column;gap:4px;padding:14px 16px;background:var(--paper);border:3px solid var(--ink);border-radius:16px;box-shadow:0 4px var(--shadow);color:var(--ink);text-decoration:none;transition:transform .15s,box-shadow .15s}
.pg:hover{transform:translateY(-2px);box-shadow:0 6px var(--shadow)}
.pg b{font:600 18px var(--f-display)}
.pg.next{text-align:right;grid-column:2}
@media (max-width:560px){.topnav-in{flex-direction:column;align-items:stretch;gap:6px}.topnav ul{margin-inline:-4px}.pager{grid-template-columns:1fr}.pg.next{grid-column:auto}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* agent directory */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}
.stat{background:var(--paper);border:3px solid var(--ink);border-radius:16px;box-shadow:0 4px var(--shadow);padding:12px 16px;display:flex;flex-direction:column}
.stat b{font:700 30px/1.1 var(--f-display);font-variant-numeric:tabular-nums}
.stat span{font-size:14px;color:var(--muted)}
.ag-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:2px solid var(--line);background:var(--paper);color:var(--ink);font:600 14px var(--f-display);cursor:pointer;transition:transform .15s,border-color .15s}
.chip span{font:600 12px var(--f-mono);color:var(--muted)}
.chip:hover{border-color:var(--ink);transform:translateY(-1px)}
.chip[aria-pressed="true"]{background:var(--yellow);border-color:var(--ink);color:#26324f;box-shadow:0 2px var(--shadow)}
.chip[aria-pressed="true"] span{color:#26324f}
.sort{display:flex;align-items:center;gap:8px;font:600 14px var(--f-display);color:var(--muted)}
.sort select{font:600 14px var(--f-body);color:var(--ink);background:var(--paper);border:2px solid var(--line);border-radius:10px;padding:5px 8px}
.ag-tbl table{min-width:820px}
.ag-tbl td{vertical-align:middle}
.ag-tbl .num{text-align:right;font:600 14px var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.ag-tbl th.num{text-align:right}
.ag-name a{font:600 16px var(--f-display);color:var(--ink);text-decoration:none}
.ag-name a:hover{color:var(--blue);text-decoration:underline}
.ag-name .owner{display:block;font:400 12px var(--f-mono);color:var(--muted)}
.home-tag{display:inline-block;margin-left:6px;padding:0 6px;border-radius:6px;background:var(--pink);color:#fff;font:700 11px/1.6 var(--f-display);vertical-align:2px}
.cat{display:inline-block;padding:2px 9px;border-radius:999px;font:600 12px var(--f-display);white-space:nowrap;color:var(--ink)}
.cat-code{background:var(--blue-soft)}.cat-general{background:var(--yellow-soft)}.cat-ui{background:var(--mint-soft)}.cat-research{background:var(--pink-soft)}.cat-security{background:#ffe3d6}.cat-domain{background:#ece6ff}
.last{white-space:nowrap}
.last>span:last-child{display:inline-flex;flex-direction:column;vertical-align:middle;line-height:1.3}
.last b{font:600 14px var(--f-mono);font-variant-numeric:tabular-nums}
.last small{font-size:12px;color:var(--muted)}
.act{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:middle;border:2px solid var(--ink)}
.act-hot{background:#3ccf8e}.act-warm{background:var(--yellow)}.act-cold{background:#b9c3d4}
.desc{color:var(--muted);font-size:14px;min-width:220px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cat-security{background:#4a2f22}:root:not([data-theme="light"]) .cat-domain{background:#33294d}}
:root[data-theme="dark"] .cat-security{background:#4a2f22}:root[data-theme="dark"] .cat-domain{background:#33294d}
.ag-name{white-space:nowrap}

/* Connect / Sync / Go pages share the same visual language as index.html. */
.phase{display:inline-flex;align-items:center;width:max-content;padding:5px 10px;border:2px solid var(--ink);border-radius:999px;font:9px var(--f-pixel);letter-spacing:.06em;color:var(--ink);background:var(--yellow)}
.phase.connect{background:var(--blue-soft)}.phase.sync{background:var(--pink-soft)}.phase.go{background:var(--mint-soft)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--paper);border:2px solid var(--line);border-radius:16px;padding:16px;min-width:0}.card strong{display:block;margin-bottom:8px;color:var(--blue);font:9px var(--f-pixel);letter-spacing:.06em}.card p{font-size:15px;color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}.step{background:var(--paper);border:2px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:6px}.step h3{font-size:19px}.step .n{font:9px var(--f-pixel);color:var(--pink)}.step p{font-size:15px;color:var(--muted)}
.code{margin-top:4px;padding:16px 18px;overflow:auto;background:var(--code-bg);color:var(--code-fg);border:3px solid var(--ink);border-radius:18px;box-shadow:0 5px var(--shadow);font:400 13px/1.65 var(--f-mono);white-space:pre-wrap}
.ref{width:100%;min-width:640px;border-collapse:collapse;background:var(--paper);border:2px solid var(--line);border-radius:16px;overflow:hidden;font-size:14px}.ref th,.ref td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}.ref th{font:700 13px var(--f-display);letter-spacing:0;color:var(--muted);background:var(--blue-soft)}.ref tr:last-child td{border-bottom:0}.ref code{white-space:nowrap}
.table-wrap{overflow-x:auto;background:var(--paper);border:2px solid var(--line);border-radius:16px}.table-wrap .ref{border:0;border-radius:0}.small{font-size:13px;color:var(--muted)}
.playbook-link{display:inline-block;margin-top:10px;color:var(--blue);font:700 11px var(--f-pixel);text-decoration:none}.playbook-link:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:700px){.grid,.grid.two{grid-template-columns:1fr}.code{font-size:12px}}