:root{--p0:#0A0A0A;--p1:#111113;--p2:#17171A;--p3:#1E1E22;--ln:#26262B;--ln2:#34343A;--tx:#FFFFFF;--sf:#C9C9CC;--mt:#8C8C91;--rd:#E5132F;--gd:#2FBF71;--am:#E8A33D}
.b{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--ln2);background:none;font-size:14px;font-weight:500;white-space:nowrap;color:var(--tx)}
.b:hover{border-color:#55555c;background:var(--p2)}
.b.pri{background:#fff;color:#0A0A0A;border-color:#fff}
.b.pri:hover{background:#E8E8EA}
.b.pri i{width:9px;height:9px;border-radius:50%;background:var(--rd)}
.fld{display:flex;flex-direction:column;gap:7px;min-width:0}
.fld>span{font:500 10.5px/1 var(--mono);letter-spacing:.16em;color:var(--mt);text-transform:uppercase}
.inp{width:100%;height:42px;border-radius:12px;border:1px solid var(--ln2);background:var(--p1);padding:0 14px;font-size:15px;outline:none;transition:border-color .2s}
textarea.inp{height:auto;min-height:96px;padding:12px 14px;line-height:1.5;resize:vertical}
.inp:focus{border-color:var(--rd)}
.lbl{font:500 10.5px/1 var(--mono);letter-spacing:.16em;color:var(--mt);text-transform:uppercase}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.agents{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
@media (max-width:900px){.agents{grid-template-columns:1fr}}
.agent{position:relative;text-align:left;color:var(--tx);background:var(--p1);border:1px solid var(--ln);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:12px;overflow:hidden;transition:border-color .25s,transform .25s}
.agent:hover{border-color:#4A4A50;transform:translateY(-2px)}
.agent.sel{border-color:var(--rd);box-shadow:0 0 0 1px var(--rd) inset}
.agent .art{height:132px;border-radius:12px;background:var(--p0);position:relative;overflow:hidden;border:1px solid var(--ln)}
.agent b{font-weight:500;font-size:18px;letter-spacing:-.02em}
.agent p{margin:0;color:var(--sf);font-size:14px;line-height:1.5}
.agent .lbl{color:var(--rd)}
/* little live illustrations inside agent cards */
.art .sl{position:absolute;top:18px;width:74px;height:94px;border-radius:8px;background:#1C1C20;border:1px solid #2E2E34;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.art .sl::after{content:"";position:absolute;left:10px;right:16px;top:14px;height:7px;border-radius:3px;background:#fff;box-shadow:0 13px 0 -1px #555,0 24px 0 -1px #444}
.art .sl.s1{left:calc(50% - 98px);transform:rotate(-8deg)}.art .sl.s2{left:calc(50% - 37px);z-index:2;background:var(--rd);border-color:var(--rd)}.art .sl.s3{left:calc(50% + 24px);transform:rotate(8deg)}
.agent:hover .sl.s1{transform:rotate(-12deg) translateX(-10px)}.agent:hover .sl.s3{transform:rotate(12deg) translateX(10px)}
.art .ph9{position:absolute;left:50%;top:12px;width:62px;height:108px;margin-left:-31px;border-radius:10px;border:1px solid #2E2E34;background:#141416;overflow:hidden}
.art .ph9 i{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:var(--rd);box-shadow:0 0 18px 4px rgba(229,19,47,.5);animation:orbit 3s cubic-bezier(.6,0,.4,1) infinite}
.art .ph9 em{position:absolute;left:8px;right:8px;bottom:14px;height:5px;border-radius:3px;background:#fff;opacity:.85;animation:typ 3s steps(6) infinite}
@keyframes orbit{0%,100%{transform:translate(-14px,-24px) scale(.8)}50%{transform:translate(14px,10px) scale(1.4)}}
@keyframes typ{0%{right:44px}60%,100%{right:8px}}
.art .tl{position:absolute;left:16px;right:16px;bottom:22px;height:26px;display:flex;gap:4px}
.art .tl i{flex:1;border-radius:4px;background:#2A2A2F}
.art .tl i.k{background:rgba(229,19,47,.55);border:1px solid var(--rd)}
.art .tl b{position:absolute;top:-62px;bottom:-6px;width:2px;background:#fff;left:20%;animation:scrub 3.4s linear infinite}
.art .wav{position:absolute;left:16px;right:16px;top:20px;height:52px;display:flex;align-items:center;gap:3px}
.art .wav i{flex:1;background:#3A3A40;border-radius:2px}
@keyframes scrub{to{left:95%}}
:where(.scrim) :is(button,input,textarea,select){font:inherit;color:inherit}
:where(.scrim) button{cursor:pointer}
.scrim{color:var(--tx);font-family:var(--sans);position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;justify-content:flex-end;animation:fd .25s ease}
.scrim.mid{justify-content:center;align-items:center;padding:16px}
@keyframes fd{from{opacity:0}}
.drawer{width:min(520px,100%);height:100%;background:var(--p1);border-left:1px solid var(--ln2);overflow:auto;padding:calc(26px + env(safe-area-inset-top,0px)) 26px 40px;display:flex;flex-direction:column;gap:18px;animation:sl .35s cubic-bezier(.2,.7,.2,1)}
@keyframes sl{from{transform:translateX(40px);opacity:.4}}
.modal{width:min(560px,100%);max-height:100%;overflow:auto;background:var(--p1);border:1px solid var(--ln2);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:16px;animation:pop .3s cubic-bezier(.2,.7,.2,1);box-shadow:0 40px 120px rgba(0,0,0,.6)}
@keyframes pop{from{transform:scale(.97);opacity:0}}
.modal h2,.drawer h2{margin:0;font-weight:400;font-size:28px;letter-spacing:-.04em}
.xbtn{position:absolute;right:20px;top:20px}
.toast{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:100;background:#fff;color:#0A0A0A;border-radius:999px;padding:12px 18px 12px 14px;font-size:14px;font-weight:500;display:flex;gap:10px;align-items:center;box-shadow:0 20px 50px rgba(0,0,0,.5);animation:tin .35s cubic-bezier(.2,.7,.2,1)}
.toast i{width:9px;height:9px;border-radius:50%;background:var(--rd)}
@keyframes tin{from{transform:translate(-50%,16px);opacity:0}}
.modal .x{position:absolute;right:14px;top:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--ln2);background:none;color:#fff;font-size:18px;line-height:1}
.modal{position:relative}
.honey{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
