:root{--black:#1e1e1e;--gray:#646261;--line:#ebe6e6;--hover-gray:#ededed;--pink:rgb(255,173,173);--pink-hover:rgb(254,122,120);--purple:rgb(202,187,233);--green:rgb(179,222,193);
--font:"Albert Sans",sans-serif;--mono:"DM Mono",ui-monospace,monospace;--r:12px}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font:400 15px/24px var(--font);color:var(--black);background:linear-gradient(#fffafa,#fcfaff) fixed}
.caption{font:400 12px/16px var(--mono);text-transform:uppercase;letter-spacing:.04em}
.page{max-width:900px;margin:0 auto;padding:64px 16px 40px}

.profile{display:flex;gap:40px;align-items:flex-start;margin-bottom:40px}
.avatar{flex:none;width:192px;height:192px;border-radius:50%;background:url(/avatar.jpg) center/cover no-repeat;border:1px solid var(--line)}
h1{font:400 64px/70px var(--font);letter-spacing:-.64px;margin:0 0 16px}
.bio{margin:0 0 20px;max-width:700px}
.links{display:flex;gap:24px;flex-wrap:wrap}
.links a{color:var(--gray);text-decoration:none;border-bottom:1px solid var(--line)}
.links a:hover{color:var(--black);border-color:var(--black)}
.personas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:24px}
.persona{background:rgba(255,173,173,.25);border:1.5px solid transparent;border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.persona:nth-child(2){background:rgba(202,187,233,.25)}
.persona:nth-child(3){background:rgba(179,222,193,.25)}
.persona[data-selected=true]{border-color:var(--black)}
.persona h2{font:400 25px/31px var(--font);letter-spacing:-.4px;margin:0}
.persona p{margin:0 0 16px;color:var(--black);font-size:14px;line-height:21px;flex:1}
.ask{font:500 15px/24px var(--font);height:44px;padding:0 24px;border:1.5px solid var(--black);border-radius:100px;background:#fff;color:var(--black);cursor:pointer}
.ask:hover{background:var(--hover-gray)}

.card{background:#fff;border:1.5px solid #dcd7d6;border-radius:24px;box-shadow:0 2px 4px rgba(30,30,30,.05),0 10px 30px rgba(30,30,30,.10);overflow:hidden}
.log{list-style:none;margin:0;padding:32px 32px 8px;display:flex;flex-direction:column;gap:20px;min-height:260px;max-height:min(55vh,520px);overflow-y:auto}
.row{display:flex;flex-direction:column;gap:6px}
.row.user{align-items:flex-end}
.who-label{font:500 12px/16px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--pink-hover)}
.msg{max-width:85%;padding:12px 16px;border-radius:var(--r);white-space:pre-wrap;overflow-wrap:anywhere}
.row.assistant .msg{background:var(--hover-gray);align-self:flex-start}
.row.user .msg{background:linear-gradient(135deg,rgba(179,222,193,.4),rgba(255,173,173,.4),rgba(202,187,233,.4))}
.msg.error{color:#a33}
.msg a{color:var(--black);text-decoration:underline;text-underline-offset:3px}.msg a:hover{background:rgba(255,173,173,.5)}
.starters{display:flex;flex-wrap:wrap;gap:8px;padding:8px 32px 24px}
.starters[hidden]{display:none}
.starters button{font:400 14px/21px var(--font);background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:8px 14px;cursor:pointer;text-align:left}
.starters button:hover{border-color:var(--black)}

.composer{display:flex;gap:12px;align-items:center;padding:16px 24px 16px 32px;border-top:1px solid var(--line)}
textarea{flex:1;resize:none;font:italic 400 15px/24px var(--font);color:var(--black);padding:10px 0;border:0;outline:0;background:transparent;max-height:140px}
textarea:not(:placeholder-shown){font-style:normal}
textarea::placeholder{color:var(--gray)}
#send{flex:none;width:44px;height:44px;border:0;border-radius:var(--r);background:var(--pink);color:var(--black);cursor:pointer;display:grid;place-items:center}
#send:hover{background:var(--pink-hover)}#send:disabled{opacity:.5;cursor:default}
:focus-visible{outline:2px solid var(--black);outline-offset:2px}

.foot{display:flex;justify-content:space-between;align-items:center;margin-top:20px}
.foot .caption{color:var(--gray)}
.linklike{font:400 14px/21px var(--font);color:var(--gray);background:none;border:0;border-bottom:1px solid var(--line);padding:0;cursor:pointer}
.linklike:hover{color:var(--black);border-color:var(--black)}

.built{max-width:520px;width:calc(100% - 32px);border:1px solid var(--line);border-radius:var(--r);padding:32px;color:var(--black);font:400 15px/24px var(--font)}
.built::backdrop{background:rgba(30,30,30,.3)}
.built h2{font:400 28px/36px var(--font);letter-spacing:-.6px;margin:0 0 16px}
.built ul{padding-left:20px;margin:16px 0}
.close{font:500 15px var(--font);height:44px;padding:0 24px;border:1.5px solid var(--black);border-radius:100px;background:var(--pink);cursor:pointer}
.close:hover{background:var(--pink-hover)}

@media(max-width:809px){h1{font-size:40px;line-height:46px}.avatar{width:120px;height:120px}.profile{gap:24px}}
@media(max-width:599px){.personas{grid-template-columns:1fr}.page{padding-top:32px}.profile{flex-direction:column}h1{font-size:32px;line-height:37px}.log{padding:20px 16px 8px}.starters{padding:8px 16px 16px}.composer{padding:12px 12px 12px 16px}.msg{max-width:95%}}