/* legacy: flex gap stand-ins, active under html.nogap */
.nogap.nogap #signin .si-hint>*+*{margin-top:1px}
.nogap.nogap #signin .who>*+*{margin-left:10px}
.nogap.nogap #signin .who>:empty:first-child:last-child{margin-right:10px}
.nogap.nogap.nogap #signin .si-panes{margin-right:auto;margin-left:auto}
.nogap.nogap.nogap #signin .si-sub{margin-right:auto;margin-left:auto}
#signin{position:fixed;inset:0;z-index:50;overflow:hidden;color:var(--ink);-webkit-tap-highlight-color:transparent}
@supports not (inset:0){#signin{top:0;right:0;bottom:0;left:0}}
#signin.fade-in{animation:siIn .35s linear}
@keyframes siIn{from{opacity:0}}
#signin[data-stage="intro"]{touch-action:none;cursor:grab}
#signin.dragging{cursor:grabbing}
#signin.leaving,#signin.leaving *{pointer-events:none!important}
#signin.si-broken{background:var(--bg)}
#signin.si-broken .si-canvas{visibility:hidden}
#signin .si-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
@supports not (inset:0){#signin .si-canvas{top:0;right:0;bottom:0;left:0}}
#signin .si-safe{position:absolute;left:0;width:0;top:var(--sat);bottom:var(--sab);pointer-events:none}
#signin .si-logo,#signin .si-hint,#signin .si-canvas{-webkit-user-select:none;user-select:none}
#signin .si-logo{position:absolute;left:50%;top:0;width:var(--logo-w,180px);margin-left:calc(var(--logo-w,180px) / -2);display:flex;flex-direction:column;align-items:center;transform-origin:50% 50%;pointer-events:none;will-change:transform,opacity,filter}
#signin .si-logo svg{width:46%;height:auto;display:block}
#signin .si-logo .wm{margin-top:18px;padding-left:.46em;font:700 clamp(24px,7.4vw,31px)/1 var(--display);letter-spacing:.46em;color:var(--ink)}
@supports not (width:clamp(1px,2px,3px)){@media (max-width:324.3px){#signin .si-logo .wm{font:700 24px/1 var(--display)}}
@media (min-width:324.3px) and (max-width:418.9px){#signin .si-logo .wm{font:700 7.4vw/1 var(--display)}}
@media (min-width:418.9px){#signin .si-logo .wm{font:700 31px/1 var(--display)}}}
#signin .si-logo .tag{margin-top:12px;padding-left:.3em;font:500 9.5px/1 var(--mono);letter-spacing:.3em;color:var(--ink-3);white-space:nowrap}
#signin .si-hint{position:absolute;left:50%;bottom:calc(var(--sab) + 14px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1px;min-width:220px;min-height:66px;padding:6px 18px 10px;background:none;border:0;border-radius:var(--r-md);cursor:pointer;color:var(--ink-2);font:600 15px/1.3 var(--body)}
#signin .si-hint svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;animation:siNudge 2.6s var(--ease) infinite}
@keyframes siNudge{0%,55%,100%{transform:none}25%{transform:translate3d(0,-6px,0)}}
#signin .si-form{position:absolute;left:0;right:0;top:var(--form-top,50%);padding:0 24px;pointer-events:none;transform:translate3d(0,calc(var(--kb,0px) * -1),0);transition:transform .42s var(--ease)}
#signin .si-panes{display:grid;max-width:400px;margin:0 auto}
#signin .si-pane{grid-area:1/1;display:flex;flex-direction:column;min-width:0;visibility:hidden;pointer-events:none}
#signin .si-pane.in,#signin .si-pane.out{visibility:visible}
#signin .si-pane.in{pointer-events:auto}
@supports not (display:grid){#signin .si-panes{position:relative}
#signin .si-pane{position:absolute;left:0;right:0;top:0}
#signin .si-pane.in{position:relative}}
#signin .w{display:inline-block;white-space:pre}
#signin .w,#signin .rv{opacity:0;filter:blur(10px);transform:translate3d(0,9px,0)}
#signin .si-pane.in .w,#signin .si-pane.in .rv,#signin .si-foot.in{opacity:1;filter:none;transform:none;transition-property:opacity,filter,transform;transition-duration:.5s,.6s,.8s;transition-delay:var(--d,0ms);transition-timing-function:ease,ease,var(--spring)}
#signin .si-pane.out .w,#signin .si-pane.out .rv,#signin .si-foot.out{opacity:0;filter:blur(8px);transform:translate3d(0,-6px,0);transition:opacity .2s linear,filter .22s linear,transform .26s var(--ease)}
#signin h1{font-size:clamp(27px,7.6vw,32px);line-height:1.1;letter-spacing:-.022em;margin:0 0 6px;text-align:center;text-wrap:balance}
@supports not (width:clamp(1px,2px,3px)){@media (max-width:355.3px){#signin h1{font-size:27px}}
@media (min-width:355.3px) and (max-width:421.1px){#signin h1{font-size:7.6vw}}
@media (min-width:421.1px){#signin h1{font-size:32px}}}
#signin .si-sub{color:var(--ink-2);font-weight:500;font-size:15px;line-height:1.45;margin:0 auto 18px;text-align:center;max-width:320px;text-wrap:pretty}
#signin .si-sub b{color:var(--ink);font-weight:700;overflow-wrap:anywhere}
#signin .si-sub b.w{display:inline;white-space:normal}
#signin .f{position:relative}
#signin .f input{height:58px;padding:0 20px;font-size:17px;border-radius:var(--r-lg)}
#signin .f.pw input{padding-right:56px}
#signin .eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;background:none;border:none;padding:0;color:var(--ink-3);cursor:pointer;border-radius:50%}
@supports not (display:grid){#signin .eye{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}}
#signin .eye svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#signin .err,#signin .ok{border-radius:var(--r-md);padding:11px 14px;font-weight:600;font-size:14px;line-height:1.4;margin-top:10px;text-align:center}
#signin .err{background:var(--red-tint);color:var(--red)}
#signin .ok{background:var(--green-tint);color:var(--green)}
#signin .go{margin-top:14px}
#signin .go+.go{margin-top:8px}
#signin .go .btn{border-radius:999px}
#signin .fg{display:flex;justify-content:flex-end;margin:2px -10px -8px 0}
#signin .forgot{min-height:44px;padding:0 10px;background:none;border:0;border-radius:var(--r-sm);cursor:pointer;color:var(--accent-ink);font:700 14px/1 var(--body)}
#signin .who{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;margin:0 0 12px;padding:6px 16px 6px 6px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);cursor:pointer;text-align:left}
#signin .who .tok{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent-ink);font:800 16px/1 var(--display)}
@supports not (display:grid){#signin .who .tok{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}}
#signin .who .em{flex:1;min-width:0;font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#signin .who .ch{flex:none;color:var(--accent-ink);font-weight:700;font-size:14px}
#signin .si-foot{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 10px);padding:0 24px;text-align:center;color:var(--ink-2);font-size:13px;line-height:1.5;opacity:0;pointer-events:none}
#signin .si-foot.in{pointer-events:auto}
#signin.kbd .si-foot.in{opacity:0;pointer-events:none;transition:opacity .15s linear}
#signin .si-foot a{white-space:nowrap;display:inline-block;padding:13px 6px;margin:-13px -6px}
#signin .spin{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:ptrSpin .8s linear infinite}
#signin .shake{animation:shake .44s var(--ease)}
@keyframes shake{20%{transform:translate3d(-8px,0,0)}40%{transform:translate3d(7px,0,0)}60%{transform:translate3d(-4px,0,0)}80%{transform:translate3d(2px,0,0)}}
#signin .si-wait{position:absolute;left:0;right:0;top:var(--wait-y,40%);text-align:center;color:var(--ink-2);font-weight:600;font-size:15px;opacity:0;transition:opacity .3s linear;pointer-events:none}
#signin .si-wait.on{opacity:1;transition:opacity .5s linear}
#app.arrive .topbar{animation:arrTop .6s var(--ease) .04s both}
#app.arrive main>*{animation-name:arrUp;animation-duration:.7s;animation-delay:.3s;animation-fill-mode:both;animation-timing-function:var(--spring)}
#app.arrive main>*:nth-child(1){animation-delay:.1s}
#app.arrive main>*:nth-child(2){animation-delay:.15s}
#app.arrive main>*:nth-child(3){animation-delay:.2s}
#app.arrive main>*:nth-child(4){animation-delay:.25s}
#app.arrive .tabs{animation:arrTabs .62s var(--ease) .12s both}
@keyframes arrTop{from{transform:translate3d(0,-100%,0);opacity:0}}
@keyframes arrUp{from{transform:translate3d(0,24px,0);opacity:0}}
@keyframes arrTabs{from{transform:translate3d(0,140%,0)}}