.avatar{--size:132px;--tilt-x:0deg;--tilt-y:0deg;--shine-x:50%;--shine-y:50%;position:relative;width:var(--size);height:var(--size);margin:0 auto;display:grid;place-items:center}.avatar-frame{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;isolation:isolate;border:1px solid var(--border-strong);box-shadow:0 18px 40px -18px rgba(0,0,0,.8);background:radial-gradient(circle at 50% 22%,rgba(34,211,238,.22),transparent 62%),radial-gradient(circle at 78% 92%,rgba(167,139,250,.2),transparent 58%),var(--surface-2);transform:perspective(700px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease;will-change:transform;animation:avatar-breathe 6s ease-in-out infinite}.avatar-frame img{width:100%;height:100%;object-fit:cover;display:block}.avatar-rim{position:absolute;inset:-2px;border-radius:50%;pointer-events:none;opacity:var(--rim-opacity,.32);background:conic-gradient(from calc(var(--rim-angle, 0deg) - 30deg),transparent 0deg,var(--accent) 16deg,#ffffff 30deg,var(--accent-2) 44deg,transparent 62deg,transparent 1turn);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));filter:blur(.8px);transition:opacity .3s ease}.avatar:hover .avatar-frame{transform:perspective(700px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-3px) scale(1.03);box-shadow:0 24px 50px -18px rgba(34,211,238,.35)}@keyframes avatar-breathe{0%,to{scale:1}50%{scale:1.018}}.avatar-ring{position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--accent);opacity:0;pointer-events:none}.avatar-speaking .avatar-ring-1{animation:avatar-pulse 1.8s ease-out infinite}.avatar-speaking .avatar-ring-2{animation:avatar-pulse 1.8s ease-out .9s infinite}@keyframes avatar-pulse{0%{transform:scale(1);opacity:.55}to{transform:scale(1.42);opacity:0}}.avatar-spinner{position:absolute;inset:-10px;border-radius:50%;opacity:0;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 62%,var(--accent) 80%,var(--accent-2) 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2.5px));transition:opacity .2s ease}.avatar-thinking .avatar-spinner{opacity:1;animation:avatar-spin 1.1s linear infinite}@keyframes avatar-spin{to{transform:rotate(1turn)}}.avatar-status{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:4px 11px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-family:var(--mono);font-size:10.5px;color:var(--text-faint)}.avatar-status-dot{width:6px;height:6px;border-radius:50%;background:var(--ok,#34d399);flex-shrink:0}.avatar-speaking .avatar-status-dot,.avatar-thinking .avatar-status-dot{background:var(--accent);animation:avatar-blink 1s ease-in-out infinite}@keyframes avatar-blink{50%{opacity:.25}}.avatar[data-reduced=true] .avatar-frame{animation:none;transform:none}.avatar[data-reduced=true] .avatar-ring,.avatar[data-reduced=true] .avatar-spinner,.avatar[data-reduced=true] .avatar-status-dot{animation:none}.avatar[data-reduced=true] .avatar-rim{--rim-angle:315deg;opacity:.4;transition:none}.avatar[data-reduced=true].avatar-speaking .avatar-ring-1{opacity:.4}@media (prefers-reduced-motion:reduce){.avatar-frame{animation:none}.avatar-ring,.avatar-spinner,.avatar-status-dot{animation:none!important}}@media (max-width:560px){.avatar{--size:104px}}.page{min-height:100vh;padding:40px 24px 80px}.page-inner{max-width:720px;margin:0 auto}.back{display:inline-block;font-family:var(--mono);font-size:12.5px;color:var(--text-faint);text-decoration:none;margin-bottom:30px}.back:hover{color:var(--accent)}.hero{text-align:center}.hero h1{font-size:clamp(30px,5.5vw,42px);line-height:1.1;letter-spacing:-.02em;margin:30px 0 0}.grad{background:var(--accent-line);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-sub{color:var(--text-muted);font-size:15px;line-height:1.6;margin:12px auto 0;max-width:54ch}.composer-dock{margin:26px 0 0}.composer-dock.is-docked{position:-webkit-sticky;position:sticky;top:0;z-index:5;padding:12px 0;background:linear-gradient(to bottom,var(--bg) 78%,transparent)}.composer{display:flex;align-items:flex-end;gap:8px;margin:0 auto;padding:8px 8px 8px 16px;background:var(--surface);border:1.5px solid var(--border-strong);border-radius:16px;box-shadow:0 16px 40px -20px rgba(0,0,0,.9);transition:border-color .2s ease,box-shadow .2s ease}.composer:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft),0 16px 40px -20px rgba(0,0,0,.9)}.composer textarea{flex:1 1;min-width:0;border:0;outline:none;resize:none;background:transparent;color:var(--text);font-family:inherit;font-size:16px;line-height:1.5;padding:10px 0;max-height:140px}.composer textarea::placeholder{color:var(--text-faint)}.composer button{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;border:0;border-radius:11px;padding:11px 18px;background:var(--accent-line);color:var(--on-accent);font-size:14.5px;font-weight:600;cursor:pointer;transition:opacity .2s ease,transform .15s ease}.composer button svg{width:15px;height:15px}.composer button:hover:not(:disabled){transform:translateY(-1px)}.composer button:disabled{opacity:.4;cursor:not-allowed}.hero-suggestions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}.hero-suggestions button{background:transparent;border:1px solid var(--border);color:var(--text-muted);border-radius:999px;padding:8px 14px;font-size:13px;cursor:pointer;transition:color .15s,border-color .15s,transform .15s}.hero-suggestions button:hover{color:var(--text);border-color:var(--accent);transform:translateY(-1px)}.hero-error{margin:16px auto 0;max-width:52ch;font-size:13.5px;color:#fca5a5;background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);border-radius:10px;padding:10px 14px}.thread{display:flex;flex-direction:column;gap:14px;margin-top:20px;text-align:left}.thread .bubble-user{scroll-margin-top:92px}.how{margin-top:72px;padding-top:32px;border-top:1px solid var(--border)}.how h2{font-size:19px;margin:0 0 16px}.how ol{margin:0;padding-left:20px;color:var(--text-muted);font-size:14.5px;line-height:1.7}.how li{margin-bottom:10px}.how strong{color:var(--text)}.repo{font-family:var(--mono);font-size:12.5px;color:var(--text-faint);margin-top:22px}@media (max-width:560px){.page{padding:24px 16px 56px}.back{margin-bottom:20px}.hero h1{margin-top:26px}.composer{padding-left:14px}.composer button{padding:11px 14px}.composer button span{display:none}}