@font-face{font-family:Neuss;src:url('fonts/NTNeuss-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Neuss;src:url('fonts/NTNeuss-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Diatype;src:url('fonts/ABCDiatypeRoundedTrial-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:Diatype;src:url('fonts/ABCDiatypeRoundedTrial-Light.otf') format('opentype');font-weight:300;font-display:swap}
*{box-sizing:border-box}body{margin:0;background:#f5f5f5;color:#1e1e1c;font-family:Neuss,Arial,sans-serif;font-weight:500;display:flex;justify-content:center;min-height:100svh}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid #888;outline-offset:4px}.screen{position:relative;width:393px;max-width:100%;min-height:852px;background:white;flex-shrink:0;container-type:inline-size;margin:24px 0}.topbar{position:absolute;top:60px;left:16px;right:16px;height:44px;display:flex;align-items:center;justify-content:space-between}.topbar h1{position:absolute;left:50%;transform:translateX(-50%);margin:0;font-size:14px;line-height:16px;letter-spacing:-.1px;font-weight:500}.back{display:grid;place-items:center;width:44px;height:44px;margin-left:1px;border:0;border-radius:256px;background:linear-gradient(#ffffffcc,#f5f5f5cc);box-shadow:1px 0 0 -.5px #0000001f,-1px 0 0 -.5px #0000001f,0 0 0 .5px #0000000a,0 2px 4px -.5px #00000005,inset 0 1.5px .5px -.5px #ffffff3d,inset 0 -1.5px .5px -.5px #ffffff3d}.back img{width:7.75px;height:14px;display:block}.invite{border:1px solid #efefef;border-radius:16px;background:white;width:63px;height:32px;font-size:12px;line-height:16px;letter-spacing:.2px}.friends-title{position:absolute;top:136px;left:16px;margin:0;font:300 18px/12px Diatype,Arial,sans-serif;letter-spacing:.1px}.friends-title,.suggestions h2{color:#a9a9a9}friends-spinner{position:absolute;top:215px;left:0;width:100%}.suggestions{position:absolute;top:434px;left:16px;right:16px}.suggestions h2{margin:0 0 32px;font:300 18px/12px Diatype,Arial,sans-serif;letter-spacing:.1px}.people{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}.person{display:flex;align-items:center;gap:16px;height:40px}.portrait{display:block;width:40px;height:40px;border-radius:50%;object-fit:cover;background:#efefef}.person-name{font-size:14px;line-height:14px;letter-spacing:-.2px}.add{margin-left:auto;border:0;border-radius:16px;width:64px;height:32px;background:#1e1e1e;color:white;font-size:12px;line-height:16px;letter-spacing:.2px;font-weight:700}.add:disabled{background:#f4f4f4;color:#1e1e1e;cursor:default}.add:active:not(:disabled){transform:scale(.96)}dialog{border:1px solid #efefef;border-radius:22px;padding:24px;width:min(340px,calc(100% - 32px));color:#1e1e1c;font-size:14px}dialog::backdrop{background:#0003;backdrop-filter:blur(3px)}dialog h2{font-size:18px;margin-top:0}dialog p{font-family:Diatype;line-height:1.5;color:#777}dialog input{width:100%;font:14px Neuss;border:1px solid #ddd;border-radius:10px;padding:12px}dialog .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}dialog button{padding:9px 16px;border:1px solid #ddd;border-radius:16px;background:white}dialog .primary{background:#1e1e1e;color:white;border-color:#1e1e1e}.sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}@media(max-width:440px){body{background:white}.screen{margin:0;min-height:max(852px,100svh)}}@media(prefers-reduced-motion:reduce){.add:active:not(:disabled){transform:none}}
.screen{align-self:flex-start}

/* A single native scroller; the orbit and header remain stable overlays. */
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{min-height:0;height:100dvh}
.screen{--header-top:clamp(20px,7.04dvh,60px);--hero-top:clamp(150px,25.23dvh,215px);height:100dvh;min-height:0;margin:0;overflow:hidden}
.topbar{top:max(var(--header-top),env(safe-area-inset-top));z-index:4;pointer-events:none}
.topbar button{pointer-events:auto;backdrop-filter:blur(8px)}
.topbar h1{opacity:var(--title-opacity,1)}
.friends-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;touch-action:pan-y;scrollbar-width:none;overflow-anchor:none}
.friends-scroll::-webkit-scrollbar{display:none}
.hero-space{height:clamp(340px,50.94dvh,434px)}
.friends-title{top:calc(var(--header-top) + 76px)}
.suggestions{position:relative;top:auto;left:auto;right:auto;margin:0 16px;min-height:calc(100dvh + 17px);padding-bottom:max(24px,env(safe-area-inset-bottom))}
friends-spinner{position:absolute;top:0;left:0;width:100%;z-index:3;transform-origin:50% 0;will-change:transform;transform:translate3d(0,var(--hero-top),0)}
.compact-pill{position:absolute;top:0;will-change:transform;left:50%;width:119.714px;height:60px;margin-left:-59.857px;border:1px solid #efefef;border-radius:30px;background:#ffffffb8;backdrop-filter:blur(8px);z-index:2;opacity:0;pointer-events:none}
@media(max-height:460px){.screen{--header-top:16px;--hero-top:106px}.hero-space{height:300px}.friends-title{display:none}}
.undo-notice{position:fixed;z-index:10;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:24px;padding:10px 16px;border-radius:20px;background:#252525;color:white;box-shadow:0 4px 20px #0002;font-size:13px;white-space:nowrap}.undo-notice[hidden]{display:none}.undo-notice button{border:0;background:none;color:white;text-decoration:underline;padding:6px;font-size:13px}