:root { color-scheme: dark; font-family: 'SFMono-Regular',Consolas,'Liberation Mono','Courier New',monospace; color: #d0d8e4; background: #030303; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
body.agent-page { margin: 0; background: #030303; font-size: 13px; line-height: 1.85; }
a { color: #a9bfea; text-decoration-color: #6d85b366; text-underline-offset: 4px; overflow-wrap: anywhere; }
a:hover { color: #e8efff; text-decoration-color: currentColor; }
a:focus-visible,button:focus-visible { outline: 2px solid var(--seraphine-brand); outline-offset: 5px; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
::selection { color: #fff; background: #304c88; }
.agent-skip { position: fixed; top: 12px; left: 16px; z-index: 5; padding: 8px 14px; background: #142443; transform: translateY(-160%); }
.agent-skip:focus { transform: none; }
.agent-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 25px clamp(22px,5vw,76px); }
.agent-brand { font: 700 27px/1 Arial,Helvetica,sans-serif; letter-spacing: -.055em; color: #e9e9e7; text-decoration: none; }
.agent-brand > span { color: var(--seraphine-brand); }
.agent-mode { display: flex; align-items: center; gap: 19px; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.agent-mode > a,.agent-mode > span { display: inline-flex; align-items: center; min-height: 40px; }
.agent-mode > a { color: #a4aebb; text-decoration: none; }
.agent-mode > span { gap: 7px; color: #bbcef4; }
.agent-mode > span::before { content: ''; width: 5px; height: 5px; background: var(--seraphine-brand); border-radius: 50%; }
.agent-document { width: min(100% - 48px,820px); margin: 44px auto 90px; }
.agent-intro { margin-bottom: 66px; }
.agent-path { margin: 0 0 24px; font-size: 11px; color: #a0adbf; }
h1 { margin: 0; color: #edf1f8; font-size: clamp(25px,4vw,37px); line-height: 1.25; letter-spacing: -.045em; font-weight: 400; }
.agent-role { margin: 13px 0 21px; color: #b0bdce; }
.agent-seraphine { margin: 0; color: #a4b9e6; font-size: 12px; }
.agent-seraphine > span { margin-right: 13px; color: var(--seraphine-brand); }
.agent-formats { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; font-size: 11px; }
.agent-formats button { border: 1px solid #839bdc45; border-radius: 4px; background: #10151f; padding: 7px 11px; color: #c5d5f3; }
.agent-formats button:hover { border-color: #839bdc; background: #172137; }
.agent-copy-status { margin: 8px 0 0; min-height: 1.85em; font-size: 11px; color: #b5c9ed; }
.agent-document section { margin: 0 0 58px; scroll-margin-top: 24px; }
h2 { margin: 0 0 20px; color: #e2eaf6; font-size: 15px; line-height: 1.5; font-weight: 500; }
h2::before { content: '# '; color: var(--seraphine-brand); }
h3 { margin: 22px 0 7px; color: #d6e2f5; font-size: 13px; font-weight: 500; }
p { margin: 0 0 16px; }
dl { display: grid; grid-template-columns: 125px minmax(0,1fr); gap: 4px 21px; margin: 0; }
dt { color: #a2afc1; }
dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
ul { margin: 0; padding-left: 20px; }
li { padding-left: 4px; margin: 0 0 14px; }
li::marker { color: var(--seraphine-brand); }
.agent-project { padding: 0 0 24px; margin-bottom: 27px; border-bottom: 1px solid #839bdc20; }
.agent-project:last-child { border: 0; margin-bottom: 0; }
.agent-project h3 { font-size: 15px; margin-top: 0; }
.agent-project dl { font-size: 11px; }
.agent-source { margin: 10px 0 0; font-size: 11px; }
.agent-examples p { margin: 6px 0 20px; }
.agent-note { color: #a2afc1; font-size: 11px; }
.agent-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; width: min(100% - 48px,820px); margin: 0 auto; padding: 24px 0 36px; border-top: 1px solid #839bdc2b; font-size: 11px; color: #a2afc1; }
@media (max-width: 600px) {
  body.agent-page { font-size: 12px; }
  .agent-header { padding: 18px 22px; }
  .agent-document { margin-top: 35px; }
  .agent-intro { margin-bottom: 45px; }
  .agent-document section { margin-bottom: 42px; }
  dl { grid-template-columns: 94px minmax(0,1fr); gap: 6px 12px; }
  .agent-seraphine > span { display: block; margin-bottom: 5px; }
}
@media print {
  body.agent-page { background: #fff; color: #111; }
  .agent-header,.agent-formats,.agent-copy-status,.agent-skip,.agent-footer { display: none; }
  .agent-document { width: auto; margin: 0; }
  h1,h2,h3,p,dt,dd,a,.agent-role,.agent-seraphine,.agent-path { color: #111; }
}