Spaces:
Running
Running
| *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} | |
| html,body{margin:0;height:100%;background:#120f0d;color:#f4ede4;font:16px -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;overflow:hidden;overscroll-behavior:none;user-select:none;-webkit-user-select:none} | |
| #bg{position:fixed;inset:0;overflow:hidden;z-index:0} | |
| #bg img{width:100%;height:100%;object-fit:cover;filter:blur(40px) brightness(.38) saturate(1.2);transform:scale(1.3)} | |
| .screen{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:calc(env(safe-area-inset-top) + 20px) 24px calc(env(safe-area-inset-bottom) + 28px);text-align:center} | |
| .screen[hidden]{display:none} | |
| h1{margin:6px 0 0;font-size:30px;font-weight:650;letter-spacing:-.01em} | |
| .msg{margin:0;font-size:15px;opacity:.8;max-width:300px;min-height:20px} | |
| .sub{margin:0;font-size:15px;opacity:.65} | |
| .ava{width:96px;height:96px;border-radius:50%;object-fit:cover;box-shadow:0 10px 40px rgba(0,0,0,.45)} | |
| .ava.big{width:170px;height:170px} | |
| .ring{position:relative;border-radius:50%;padding:6px;background:conic-gradient(from 0deg,#c99a5b,#f3d3a3,#c99a5b);} | |
| .ring.sleepy{animation:breathe 2.6s ease-in-out infinite} | |
| .ring .ava{display:block;border:4px solid #120f0d} | |
| @keyframes breathe{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.06);opacity:1}} | |
| #login{display:flex;gap:8px;margin-top:10px} | |
| #pass{width:190px;padding:13px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:inherit;font:16px system-ui;outline:0} | |
| #login button{padding:12px 20px;border-radius:999px;border:0;background:#c99a5b;color:#1b140c;font:600 16px system-ui} | |
| .round{width:76px;height:76px;border-radius:50%;border:0;display:grid;place-items:center;color:#fff;cursor:pointer;transition:transform .12s,background .2s} | |
| .round:active{transform:scale(.92)} | |
| .round svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} | |
| .round.go{background:#2fbf5b;margin-top:34px;box-shadow:0 10px 30px rgba(47,191,91,.35)} | |
| .round.go svg{fill:#fff;stroke:none} | |
| .round.stop{background:#e5483d}.round.stop svg{fill:#fff;stroke:none;transform:rotate(0deg)} | |
| .round.dim{background:rgba(255,255,255,.16);backdrop-filter:blur(10px)} | |
| .round.dim.on{background:#f4ede4;color:#120f0d} | |
| .chip{margin-top:18px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:inherit;font:500 14px system-ui} | |
| .chip i{width:8px;height:8px;border-radius:50%;background:#59a8ff} | |
| .chip.off i{background:#777}.chip.off{opacity:.7} | |
| #call{justify-content:space-between} | |
| .ctop{width:100%;display:flex;justify-content:space-between;font-size:15px;opacity:.75} | |
| .orb{position:relative;width:230px;height:230px;display:grid;place-items:center;margin-top:4vh;transition:transform .25s} | |
| .orb i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(243,211,163,.35);opacity:0} | |
| .orb .ava{position:relative;z-index:1} | |
| #call[data-s=speaking] .orb i{animation:pulse 1.8s ease-out infinite} | |
| #call[data-s=speaking] .orb i:nth-child(2){animation-delay:.6s} | |
| #call[data-s=speaking] .orb i:nth-child(3){animation-delay:1.2s} | |
| #call[data-s=listening] .orb i:nth-child(1){opacity:.6;inset:-6px;border-color:rgba(89,168,255,.55);animation:breathe 2.4s ease-in-out infinite} | |
| #call[data-s=thinking] .orb i:nth-child(1){opacity:1;inset:-8px;border-color:transparent;border-top-color:#f3d3a3;animation:spin 1s linear infinite} | |
| #call[data-s=connecting] .orb,#call[data-s=muted] .orb{opacity:.6} | |
| @keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}} | |
| @keyframes spin{to{transform:rotate(360deg)}} | |
| #cState{font-size:22px;font-weight:600;margin-top:10px} | |
| #cLine{min-height:66px;max-width:330px;font-size:16px;line-height:1.4;opacity:.75;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical} | |
| .cbtns{display:flex;gap:56px;align-items:center;margin-bottom:6px} | |
| #toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 120px);transform:translateX(-50%);z-index:5;background:rgba(0,0,0,.75);padding:10px 16px;border-radius:12px;font-size:14px;max-width:86vw} | |