/* Agent choice uses the existing ink and paper. Only the hero cycles previews. */
.agent-picker{display:inline-flex;align-items:center;position:relative;gap:7px;max-width:100%;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:5px 10px;color:var(--ink);vertical-align:middle;}
.agent-picker [data-agent-mark]{display:flex;flex-shrink:0;pointer-events:none}
.agent-picker svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.agent-picker svg.agent-logo{display:block;width:28px;height:28px;fill:none;stroke:none;overflow:visible;flex:none}
.agent-picker svg.agent-logo--cursor{color:var(--ink)}
:root[data-theme=dark] .agent-logo--hermes image{filter:invert(1)}
.agent-picker [data-agent-mark],.agent-carousel-mark{color:var(--agent-color,var(--ink))}
:root[data-theme=dark] .agent-picker [data-agent-mark],:root[data-theme=dark] .agent-carousel-mark{color:color-mix(in srgb,var(--agent-color) 55%,var(--ink));--agent-spark:#b2a0dc;--agent-spark-light:#97b8e4}
.agent-picker select{appearance:none;min-height:32px;max-width:100%;padding:0 20px 0 0;background:transparent;border:0;color:var(--ink);font:600 24px/1.2 var(--display);cursor:pointer;outline-offset:4px}
.agent-picker option{font:16px var(--font);background:var(--paper);color:var(--ink)}
.agent-picker-chevron{position:absolute;right:12px;pointer-events:none;font:20px var(--font)}
.agent-picker:focus-within{outline:2px solid var(--ink);outline-offset:3px}
.agent-picker select:focus-visible{outline:none}
.agent-picker.agent-carousel{padding:0;gap:0;border-radius:12px;text-align:left;isolation:isolate}
.agent-carousel:focus-within{outline:none}
.agent-carousel-trigger{display:flex;align-items:center;gap:8px;min-height:44px;width:194px;padding:4px 11px;border-radius:11px 0 0 11px;transition:background 140ms ease}
.agent-carousel-trigger>*{pointer-events:none}
.agent-carousel-window{display:block;height:34px;flex:1;min-width:0;overflow:hidden;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.agent-carousel-track{display:block}
.agent-carousel-row{display:flex;align-items:center;gap:9px;height:34px;white-space:nowrap;font:600 25px/34px var(--display)}
.agent-carousel-mark{display:inline-flex;flex-shrink:0;color:var(--agent-color)}
.agent-carousel-chevron{display:flex;flex-shrink:0;transform:rotate(90deg);transition:transform 160ms ease}
.agent-carousel-chevron svg{width:12px;height:12px}
.agent-carousel-trigger[aria-expanded=true] .agent-carousel-chevron{transform:rotate(-90deg)}
.agent-carousel-rotation{display:grid;place-items:center;min-width:34px;min-height:44px;padding:0 9px;border-left:1px solid var(--line);border-radius:0 11px 11px 0;color:var(--muted)}
.agent-carousel-rotation svg{width:14px;height:14px}
.agent-carousel-trigger:active,.agent-carousel-rotation:active{transform:scale(.98)}
.agent-carousel-trigger:focus-visible,.agent-carousel-rotation:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.agent-carousel-menu{display:block;position:absolute;top:calc(100% + 9px);left:0;z-index:60;width:260px;max-width:calc(100vw - 16px);max-height:min(470px,calc(100dvh - 120px));overflow:auto;padding:8px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 32px #0002;transform-origin:24px top}
.agent-carousel:has(.agent-carousel-trigger[aria-expanded=true]){z-index:60}
.agent-carousel-caption{display:block;padding:7px 9px 9px;font:13px/1.3 var(--font);color:var(--muted);letter-spacing:0;text-transform:none}
.agent-carousel-options{display:grid;gap:2px}
.agent-carousel-options [role=option]{display:grid;grid-template-columns:28px 1fr 16px;align-items:center;gap:11px;width:100%;min-height:42px;padding:7px 10px;text-align:left;border-radius:8px;font:600 23px/1.2 var(--display)}
.agent-carousel-options .agent-carousel-mark svg.agent-logo{width:26px;height:26px}
.agent-carousel-check{width:15px!important;height:15px!important;opacity:0}
.agent-carousel-options [aria-selected=true]{background:var(--surface)}
.agent-carousel-options [aria-selected=true] .agent-carousel-check{opacity:1}
.agent-carousel-options [role=option]:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;background:var(--surface-hover)}
.agent-carousel-footer{padding-top:10px;padding-bottom:4px;margin-top:6px;border-top:1px solid var(--line)}
@media(hover:hover) and (pointer:fine){.agent-carousel-trigger:hover,.agent-carousel-rotation:hover,.agent-carousel-options [role=option]:hover{background:var(--surface-hover)}}
@media(prefers-reduced-motion:reduce){.agent-carousel-chevron,.agent-carousel-trigger{transition:none}.agent-carousel-trigger:active,.agent-carousel-rotation:active{transform:none}}
.hero .codex-eyebrow{flex-wrap:wrap;gap:8px 12px}
.agent-setup{margin:20px 0 12px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.agent-setup-heading{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:14px;color:var(--muted)}
.agent-setup p,.agent-package-note{font-size:14px;line-height:1.45;color:var(--muted);margin:10px 0 0}
.agent-package-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.guide-agent{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px}
.guide-agent+ p{max-width:660px}
.companion-settings .agent-picker{display:flex;margin-top:5px;max-width:100%;padding:3px 7px}
.companion-settings .agent-picker select{border:0;padding:0 20px 0 0;background:transparent;font:18px var(--font)}
.companion-settings .agent-picker svg.agent-logo{width:22px;height:22px}
.companion-popout{display:flex;align-items:center;gap:6px;font:14px var(--font);min-height:36px;margin-top:5px;text-decoration:underline;text-underline-offset:3px}
.companion-popout svg{width:15px;height:15px}
body[data-page=companion]{min-height:100dvh;overflow:hidden}
.companion-window-header{display:flex;align-items:center;justify-content:space-between;padding:18px;gap:10px}
.companion-window-header .brand{font-size:24px}
.companion-window-main{padding:0 20px;text-align:center;max-width:480px;margin:auto}
.companion-window-main h1{font-size:30px;margin:10px 0 6px;line-height:1.05}
.companion-window-main p{font-size:14px;line-height:1.4;margin:9px 0;color:var(--muted)}
.companion-window-footer{position:fixed;left:16px;bottom:14px;max-width:calc(100% - 84px);font-size:13px;color:var(--muted)}
.companion-window-footer a{text-decoration:underline;text-underline-offset:3px}
.agent-native-guide{font-size:14px;line-height:1.45;margin-top:12px}.agent-native-guide pre{padding:12px;background:var(--surface);overflow:auto}.agent-native-guide a{text-decoration:underline}
.notification-guide{padding:40px 0;border-top:1px solid var(--line);max-width:760px}.notification-guide h2{font:600 40px/1.1 var(--display);margin:8px 0}.notification-guide p,.notification-guide li{line-height:1.5}.notification-guide details{margin-top:18px}.notification-guide summary{cursor:pointer}.notification-guide a:not(.button){text-decoration:underline}.notification-guide code{overflow-wrap:anywhere;font-size:12px}.notification-guide li{margin:12px 0}
body[data-page=companion] .agent-picker{border:0;background:none;padding:0 6px}
body[data-page=companion] .agent-picker select{font-size:20px}
body[data-page=companion] .companion-window-header{padding:8px 12px}
body[data-page=companion] .companion-window-footer{left:12px;right:62px;bottom:12px;max-width:none}
body[data-page=companion] .pet-launcher{right:12px;bottom:12px}
.companion-detail-link{font-size:12px;color:var(--muted)}
.notification-status{display:flex;align-items:center;gap:6px;min-height:30px;font:14px var(--font);color:var(--muted)}
.notification-status svg{width:14px;height:14px}
[data-unread-count]{background:var(--ink);color:var(--paper);border-radius:50%;min-width:18px;padding:1px 4px;text-align:center}
#notification-drawer{position:absolute;bottom:62px;left:0;width:min(260px,calc(100vw - 28px));max-height:220px;overflow:auto;padding:12px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px #0002;z-index:120}
#notification-drawer header{display:flex;justify-content:space-between;gap:12px}#notification-drawer button{font:12px var(--font);text-decoration:underline}
#notification-drawer p,#notification-drawer li{font-size:13px;line-height:1.4}#notification-drawer ol{list-style:none;padding:0}#notification-drawer li{padding:4px 0}#notification-drawer [data-unread=true]{font-weight:bold}
@media(max-width:460px){.agent-picker select{font-size:22px}.agent-setup{padding:12px}.companion-window-header{padding:12px}.companion-window-main{padding-inline:14px}}