:root{color-scheme:light;--ink:#1b2030;--muted:#697289;--paper:#f5f7fc;--line:rgba(50,60,90,.12);--glass:rgba(255,255,255,.63);--glass-strong:rgba(255,255,255,.84);--violet:#865cff;--cyan:#42caef;--pink:#ff70b0;--yellow:#ffd45b;--green:#4ed49a;--danger:#df4262;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;background:var(--paper);color:var(--ink);font-synthesis:none}
*{box-sizing:border-box}
body{min-height:100vh;margin:0;overflow-x:hidden;background:radial-gradient(ellipse 64% 45% at 9% -8%,rgba(125,211,252,.34),transparent 66%),radial-gradient(ellipse 50% 43% at 98% 8%,rgba(255,174,214,.3),transparent 68%),radial-gradient(ellipse 52% 48% at 55% 108%,rgba(173,190,255,.29),transparent 70%),var(--paper)}
body:before,body:after{content:"";pointer-events:none;position:fixed;width:48vw;height:48vw;border-radius:50%;filter:blur(80px);opacity:.2;z-index:-1;animation:ambient 16s ease-in-out infinite alternate}
body:before{background:#b8a7ff;left:-25vw;top:31vh}
body:after{background:#66e2d1;right:-28vw;top:18vh;animation-delay:-8s}
button,input{font:inherit}
button{border:0;cursor:pointer;color:var(--ink)}
button:disabled{cursor:not-allowed;opacity:.38}
button:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #573de1;outline-offset:4px}
input{width:100%;min-height:48px;padding:13px 15px;border:1px solid var(--line);border-radius:15px;outline:none;background:rgba(255,255,255,.72);color:var(--ink);box-shadow:inset 0 1px rgba(255,255,255,.8)}
input:focus{border-color:#8572e8;box-shadow:0 0 0 4px rgba(133,114,232,.13)}
input::placeholder{color:#9ba2b3}
p{margin:0;line-height:1.55;color:var(--muted)}
h1,h2{margin:0;letter-spacing:-.05em}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap}
.topbar{height:78px;width:min(100% - 40px,1020px);margin:auto;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:700;letter-spacing:-.04em}
.brand span{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:linear-gradient(135deg,#8b6bff,#eb7ab4);color:#fff;font-size:12px;box-shadow:0 6px 14px rgba(114,84,224,.22)}
.header-actions{display:flex;gap:12px;align-items:center}
.eyebrow{font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:#7a8195}
.quiet-button{min-height:34px;padding:7px 11px;border-radius:10px;background:rgba(255,255,255,.5);font-size:12px;transition:background .2s,transform .2s}
.quiet-button:hover:not(:disabled){background:#fff;transform:translateY(-1px)}
main{width:min(100% - 40px,790px);margin:auto}
.notice{max-width:550px;margin:10px auto 0;padding:12px 15px;border:1px solid rgba(205,100,72,.23);border-radius:14px;background:rgba(255,242,234,.79);color:#98422e;font-size:13px;box-shadow:0 10px 28px rgba(121,67,45,.08)}
.glass{border:1px solid rgba(255,255,255,.85);background:linear-gradient(135deg,var(--glass-strong),var(--glass));box-shadow:0 24px 70px rgba(40,49,80,.12),inset 0 1px rgba(255,255,255,.88);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2)}
.onboarding{min-height:calc(100vh - 135px);display:grid;grid-template-columns:1fr minmax(300px,360px);align-items:center;gap:clamp(42px,10vw,130px);padding:48px 24px}
.intro-copy h1{margin:16px 0 21px;font-size:clamp(52px,8vw,88px);line-height:.94;font-weight:680}
.intro-copy p{max-width:250px;font-size:16px}
.setup-card{padding:32px;border-radius:30px}
.setup-card h2{margin:17px 0 7px;font-size:31px}
.setup-card>p{margin-bottom:22px;font-size:14px}
.enter-button{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:52px;margin-top:13px;padding:0 18px;border-radius:16px;background:linear-gradient(135deg,#292b46,#5963ca);box-shadow:0 11px 24px rgba(57,63,146,.24);color:white;font-weight:700;transition:transform .2s,box-shadow .2s}
.enter-button:hover{transform:translateY(-1px);box-shadow:0 15px 30px rgba(57,63,146,.32)}
.microcopy{margin:16px 0 0!important;font-size:11px!important;color:#838b9e}
/* ---------- Icon system ---------- */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
svg use{pointer-events:none}
.icon-button svg,.chip svg,.tool-icon,.corner-tools summary svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-button{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;
border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.28);color:rgba(38,45,70,.62);
backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
box-shadow:0 6px 18px rgba(44,53,93,.08),inset 0 1px rgba(255,255,255,.7);
transition:background .3s ease,color .3s ease,scale .3s cubic-bezier(.2,.8,.2,1)}
.icon-button:hover:not(:disabled){background:rgba(255,255,255,.5);color:rgba(38,45,70,.9);scale:1.06}
.icon-button:active:not(:disabled){scale:.95}
.end-action{color:rgba(223,66,98,.75);background:rgba(255,235,240,.35)}
.end-action:hover:not(:disabled){color:var(--danger);background:rgba(255,225,232,.6)}
/* ---------- Stage ---------- */
.workspace{position:relative;padding:4px 0 40px}
.call-stage{position:relative;display:flex;flex-direction:column;align-items:center;padding:12px 0 6px}
.orb-wrap{position:relative;display:grid;place-items:center;width:min(78vw,340px);aspect-ratio:1;margin:8px auto 18px}
/* The orb is the main control. Independent transform properties keep the
ambient drift, the voice reaction and the press feedback from fighting. */
.call-orb{--voice-energy:0;--hue:0deg;--glow:rgba(143,98,255,.28);--swirl:22s;
position:relative;display:grid;place-items:center;width:82%;aspect-ratio:1;padding:0;border:0;border-radius:50%;
background:transparent;color:rgba(255,255,255,.92);cursor:pointer;-webkit-tap-highlight-color:transparent;
scale:calc(1 + var(--voice-energy) * .09);
transition:scale .5s cubic-bezier(.2,.8,.2,1),filter .8s ease;
animation:drift 9s ease-in-out infinite}
.call-orb:hover:not(:disabled){filter:brightness(1.04) saturate(1.1)}
.call-orb:active:not(:disabled){scale:calc(.96 + var(--voice-energy) * .09);transition-duration:.12s}
.call-orb:disabled{cursor:default;opacity:1}
.call-orb:focus-visible{outline:none}
.call-orb:focus-visible .orb-body{box-shadow:0 0 0 3px rgba(87,61,225,.55),0 0 0 8px rgba(87,61,225,.12)}
.orb-body{position:absolute;inset:0;overflow:hidden;isolation:isolate;border-radius:50%;
background:radial-gradient(circle at 50% 46%,rgba(255,255,255,.34),rgba(255,255,255,.06) 58%,rgba(255,255,255,.18));
border:1px solid rgba(255,255,255,.72);
box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 -14px 28px rgba(120,130,220,.10),inset 10px 0 30px rgba(255,255,255,.18),
0 22px 50px -18px rgba(60,70,140,.30),0 0 calc(26px + var(--voice-energy) * 70px) var(--glow);
backdrop-filter:blur(3px) saturate(1.5);-webkit-backdrop-filter:blur(3px) saturate(1.5);
transition:box-shadow .9s ease,filter .9s ease}
.orb-swirl{position:absolute;inset:-12%;animation:spin var(--swirl) linear infinite;filter:hue-rotate(var(--hue)) saturate(1.35) brightness(1.1);transition:filter 1.2s ease}
.orb-plume{position:absolute;width:62%;height:62%;border-radius:50%;filter:blur(28px);opacity:.36;will-change:translate;
animation:wander 11s ease-in-out infinite alternate}
.plume-violet{background:var(--violet);left:6%;top:10%}
.plume-blue{background:var(--cyan);right:4%;top:14%;animation-duration:13s;animation-delay:-3s}
.plume-green{background:var(--green);left:18%;bottom:4%;animation-duration:12s;animation-delay:-6s}
.plume-pink{background:var(--pink);right:8%;bottom:8%;animation-duration:14s;animation-delay:-9s}
.orb-glass{position:absolute;z-index:3;inset:0;border-radius:50%;pointer-events:none;
background:radial-gradient(ellipse 46% 30% at 36% 22%,rgba(255,255,255,.78),rgba(255,255,255,0) 70%),
radial-gradient(ellipse 30% 16% at 66% 84%,rgba(255,255,255,.32),rgba(255,255,255,0) 70%),
radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 62%,rgba(255,255,255,.28) 72%,rgba(255,255,255,0) 76%)}
.orb-icon{position:relative;z-index:4;width:24%;height:24%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
opacity:.72;filter:drop-shadow(0 2px 8px rgba(60,50,140,.35));transition:opacity .5s ease,scale .5s cubic-bezier(.2,.8,.2,1)}
.call-orb:hover:not(:disabled) .orb-icon{opacity:.95;scale:1.06}
.call-orb.icon-swap .orb-icon{opacity:0;scale:.8;transition-duration:.18s}
.orb-halo{position:absolute;inset:-4%;border-radius:50%;pointer-events:none;opacity:0;border:1px solid rgba(255,255,255,.7);
box-shadow:0 0 30px var(--glow)}
/* States */
.call-orb.state-quiet{--swirl:34s;--glow:rgba(150,160,210,.18)}
.call-orb.state-quiet .orb-swirl{filter:saturate(.6) brightness(1.1)}
.call-orb.state-ready{--swirl:26s}
.call-orb.state-waiting{--swirl:40s;--glow:rgba(150,160,210,.14)}
.call-orb.state-waiting .orb-swirl{filter:saturate(.4) brightness(1.12);opacity:.8}
.call-orb.state-waiting .orb-icon{opacity:.45}
.call-orb.state-preview{--swirl:9s;--hue:-20deg;--glow:rgba(84,200,240,.45)}
.call-orb.state-active{--swirl:12s;--hue:18deg;--glow:rgba(236,106,180,.40)}
.call-orb.state-warning{--swirl:30s;--hue:40deg;--glow:rgba(255,190,90,.35)}
.call-orb.state-invite .orb-halo,.call-orb.state-preview .orb-halo{animation:ripple 2.4s cubic-bezier(.2,.6,.3,1) infinite}
.call-orb.state-invite{--swirl:14s;--glow:rgba(120,210,160,.45)}
/* Status chips */
.status-row{display:flex;gap:10px;margin:0;padding:0;list-style:none}
.chip{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.22);color:rgba(38,45,70,.42);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:color .5s ease,background .5s ease}
.chip:after{content:"";position:absolute;right:3px;top:3px;width:7px;height:7px;border-radius:50%;background:rgba(140,148,170,.5);transition:background .5s ease,box-shadow .5s ease}
.chip.on{color:rgba(38,45,70,.7)}
.chip.on:after{background:#3cc58c;box-shadow:0 0 8px rgba(60,197,140,.7)}
.chip.live{color:rgba(38,45,70,.8)}
.chip.live:after{background:#ff70b0;box-shadow:0 0 8px rgba(255,112,176,.8)}
.chip.warn:after{background:#f5b640;box-shadow:0 0 8px rgba(245,182,64,.7)}
.chip-initial{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;font-weight:650;color:rgba(38,45,70,.62)}
#peer-chip.named svg{display:none}
#peer-chip:not(.named) .chip-initial{display:none}
.call-dock{display:flex;gap:10px;justify-content:center;min-height:44px;margin-top:16px}
/* Invitation and alias */
.tool-card{display:flex;align-items:center;gap:8px;max-width:460px;margin:18px auto 0;padding:8px 8px 8px 14px;border-radius:999px;
background:rgba(255,255,255,.34);border:1px solid rgba(255,255,255,.6);box-shadow:0 10px 30px rgba(40,49,80,.08),inset 0 1px rgba(255,255,255,.7)}
.tool-card form{display:flex;align-items:center;gap:8px;width:100%}
.tool-icon{flex:none;color:rgba(38,45,70,.45)}
.tool-card input{flex:1;min-width:0;min-height:40px;padding:8px 12px;border:0;border-radius:999px;background:rgba(255,255,255,.35);font-size:13px;color:rgba(27,32,48,.75)}
.tool-card .icon-button{flex:none;width:40px;height:40px}
.tool-card .icon-button.done{color:#2aa979}
/* Corner tools */
.corner-tools{display:flex;justify-content:center;gap:10px;margin-top:22px}
.corner-tools details{position:relative}
.corner-tools summary{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;cursor:pointer;list-style:none;color:rgba(38,45,70,.4);
background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45);transition:color .3s,background .3s}
.corner-tools summary:hover,.corner-tools details[open] summary{color:rgba(38,45,70,.75);background:rgba(255,255,255,.45)}
.corner-tools summary::-webkit-details-marker{display:none}
.corner-tools details>ol,.corner-tools details>div{position:absolute;z-index:10;bottom:46px;left:50%;translate:-50% 0;width:min(86vw,360px);margin:0;padding:12px 16px;
border-radius:18px;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);box-shadow:0 18px 50px rgba(40,49,80,.16);
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);text-align:left;list-style:none}
.activity li{padding:7px 0;border-top:1px solid var(--line);color:#778096;font-size:11px}
.activity li:first-child{border-top:0}
.activity time{display:inline-block;margin-right:8px;color:#8f97aa}
.limitations p{margin:6px 0;font-size:12px}
.limitations strong{color:#30374d}
@keyframes spin{to{rotate:360deg}}
@keyframes wander{0%{translate:0 0;scale:1}50%{translate:10% -8%;scale:1.12}100%{translate:-8% 10%;scale:.94}}
@keyframes drift{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes ripple{0%{opacity:.7;scale:.94}100%{opacity:0;scale:1.22}}
@keyframes ambient{to{transform:translate(12vw,8vh) scale(1.12)}}
@media(max-width:650px){
.topbar{width:min(100% - 32px,790px)}
main{width:min(100% - 32px,790px)}
.onboarding{grid-template-columns:1fr;gap:42px;padding:54px 2px}
.intro-copy h1{font-size:60px}
.setup-card{padding:25px}
.orb-wrap{width:min(84vw,320px)}
}
@media(prefers-reduced-motion:reduce){
*,*:before,*:after{animation:none!important;transition:none!important}
.call-orb{scale:1!important}
}
/* ---------- Start screen ---------- */
.onboarding{min-height:calc(100vh - 150px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:10px 0 40px;grid-template-columns:none}
.hero-wrap{width:min(72vw,320px);margin:0 auto 34px}
.hero-orb{cursor:default}
.hero-orb .orb-icon{opacity:.6}
.entry-card{width:min(100%,380px);margin:0 auto}
.entry-card input{font-size:16px;text-align:center}
.entry-card .enter-action{color:rgba(87,61,225,.7)}
.entry-card:focus-within{box-shadow:0 10px 30px rgba(40,49,80,.1),0 0 0 4px rgba(133,114,232,.12),inset 0 1px rgba(255,255,255,.7)}
.entry-card input:focus{box-shadow:none}
.entry-card input:focus-visible,.tool-card input:focus-visible{outline:none}
.tool-card:focus-within{box-shadow:0 10px 30px rgba(40,49,80,.1),0 0 0 4px rgba(133,114,232,.14),inset 0 1px rgba(255,255,255,.7)}
/* ---------- Brand ---------- */
.brand{display:flex;align-items:center}
.brand img{display:block;height:40px;width:auto;filter:drop-shadow(0 2px 6px rgba(58,51,128,.28)) drop-shadow(0 0 1px rgba(58,51,128,.35))}
/* ---------- Living background ----------
The page itself stays still; only soft colour fields drift beneath a
fine translucent grain. Transform-only animation keeps it cheap. */
html{background:#eef1fa}
body{background:transparent}
body:before{content:none}
body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;background-color:transparent;mix-blend-mode:soft-light;width:auto;height:auto;border-radius:0;filter:none;animation:none;top:0;left:0;right:0;
background-image:url("data:image/svg+xml;utf8,")}
.ambient{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 40%)}
.blob{position:absolute;width:70vmax;height:70vmax;border-radius:50%;opacity:.42;will-change:translate;animation:float-colour 48s ease-in-out infinite alternate}
.b1{left:-28vmax;top:-30vmax;background:radial-gradient(circle,rgba(157,134,255,.9),rgba(157,134,255,0) 62%)}
.b2{right:-30vmax;top:-18vmax;background:radial-gradient(circle,rgba(95,201,239,.85),rgba(95,201,239,0) 62%);animation-duration:56s;animation-delay:-12s}
.b3{left:-18vmax;bottom:-34vmax;background:radial-gradient(circle,rgba(78,212,154,.6),rgba(78,212,154,0) 62%);animation-duration:64s;animation-delay:-30s}
.b4{right:-24vmax;bottom:-30vmax;background:radial-gradient(circle,rgba(240,140,192,.8),rgba(240,140,192,0) 62%);animation-duration:52s;animation-delay:-20s}
@keyframes float-colour{
0%{translate:0 0;scale:1}
33%{translate:9vmax 6vmax;scale:1.08}
66%{translate:-4vmax 11vmax;scale:.94}
100%{translate:7vmax -5vmax;scale:1.05}}
/* ---------- Orb: always alive ----------
Not connected: pearly, softly breathing. Connected: the full colours of
the start-screen orb. */
.orb-body{animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{scale:1}50%{scale:1.025}}
.call-orb.state-quiet,.call-orb.state-waiting{--swirl:30s;--glow:rgba(170,176,215,.22)}
.call-orb.state-quiet .orb-swirl,.call-orb.state-waiting .orb-swirl{filter:saturate(.28) brightness(1.2);opacity:.9;transition:filter 1.6s ease,opacity 1.6s ease}
.call-orb.state-quiet .orb-plume,.call-orb.state-waiting .orb-plume{opacity:.5}
.call-orb.state-waiting .orb-icon{opacity:.5}
.call-orb.state-ready,.call-orb.state-invite,.call-orb.state-preview,.call-orb.state-active,.call-orb.state-warning{--glow:rgba(143,98,255,.32)}
.orb-swirl{transition:filter 1.6s ease,opacity 1.6s ease}
/* ---------- Logo inside the orb ----------
Nearly transparent strokes with a whisper of shadow: the colours moving
underneath show through and seem to paint it. */
.orb-logo{position:absolute;z-index:2;left:15%;width:70%;top:50%;aspect-ratio:534/200;translate:0 -58%;pointer-events:none;overflow:visible;
fill:none;stroke:rgba(255,255,255,.34);stroke-width:14;stroke-linecap:round;stroke-linejoin:round;
filter:drop-shadow(0 1.5px 1.5px rgba(40,30,110,.14)) drop-shadow(0 -.5px 0 rgba(255,255,255,.45))}
.orb-logo .logo-fold{stroke-width:8;stroke:rgba(255,255,255,.26)}
.call-orb.state-quiet .orb-logo,.call-orb.state-waiting .orb-logo{stroke:rgba(255,255,255,.42)}
/* the action icon moves to the lower part of the orb */
.call-orb .orb-icon{position:absolute;left:42%;bottom:13%;width:16%;height:16%}
.hero-orb:not(.hero-invite) .orb-icon{display:none}
/* share button */
.share-button.done{color:#2aa979;background:rgba(235,255,245,.55)}
/* ---------- Visible, living texture ---------- */
body:after{opacity:.9;mix-blend-mode:overlay}
body:after{opacity:.4;mix-blend-mode:normal;background-size:180px 180px;
background-image:url("data:image/svg+xml;utf8,")}
/* Mic indicator doubles as the switch; when off it simply looks off. */
.chip-button{padding:0;cursor:pointer}
.chip-button:hover:not(:disabled){background:rgba(255,255,255,.45);color:rgba(38,45,70,.8)}
.chip-button:focus-visible{outline:3px solid #573de1;outline-offset:3px}
.chip-button.off:after{display:none}
.call-dock #sign-out{order:9}
.topbar{height:30px}
/* ---------- One orb, one place ----------
The start screen and the call screen share the orb's size, colour and
position, so entering never makes it jump. */
.onboarding{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:0;padding:0 0 40px;gap:0}
.workspace{padding:0 0 40px}
.call-stage{padding:0 0 6px}
.orb-wrap,.hero-wrap{width:min(78vw,340px);margin:clamp(12px,5vh,56px) auto 18px}
@media(max-width:650px){.orb-wrap,.hero-wrap{width:min(84vw,320px)}}
.hero-orb.hero-invite .orb-halo{animation:ripple 2.4s cubic-bezier(.2,.6,.3,1) infinite}
/* Notices float above the page instead of pushing the orb down. */
.notice{position:fixed;z-index:50;left:50%;bottom:max(18px,env(safe-area-inset-bottom));translate:-50% 0;width:min(calc(100% - 32px),520px);margin:0;
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 14px 40px rgba(121,67,45,.16)}