.osp{ --osp-k:1; position:fixed; inset:0; z-index:var(--z-splash); overflow:hidden; font-family:var(--sans);
  animation:osp-safety .4s linear 8s forwards }
.osp.osp-js{ animation:none }
@keyframes osp-safety{ to{ opacity:0; visibility:hidden } }

html.no-splash .osp{ display:none }

.osp-fill{ position:absolute; inset:0; background:var(--bg);
  transition:opacity calc(.4s * var(--osp-k)) ease calc(.25s * var(--osp-k)) }
.osp-paper{ position:absolute; inset:0; overflow:hidden; pointer-events:none; opacity:.5 }
.osp-blob{ position:absolute; border-radius:50%; filter:blur(38px) }
.osp-blob.osp-b1{ width:300px; height:300px; left:-90px; top:40px; background:var(--splash-b1); animation:osp-dr1 26s ease-in-out infinite alternate }
.osp-blob.osp-b2{ width:280px; height:280px; right:-110px; top:300px; background:var(--splash-b2); animation:osp-dr2 26s ease-in-out infinite alternate }
.osp-blob.osp-b3{ width:260px; height:260px; left:-40px; bottom:-90px; background:var(--splash-b3); animation:osp-dr3 26s ease-in-out infinite alternate }
@keyframes osp-dr1{ to{ transform:translate(60px, 60px) scale(1.1) } }
@keyframes osp-dr2{ to{ transform:translate(-70px, -40px) scale(.92) } }
@keyframes osp-dr3{ to{ transform:translate(80px, -50px) scale(1.08) } }
.osp-glow{ position:absolute; left:calc(50% - 150px); top:calc(44% - 150px); width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, var(--accent) 0%, transparent 62%); filter:blur(18px); opacity:var(--splash-glow-op);
  animation:osp-breathe 4.5s ease-in-out infinite; transition:opacity calc(.6s * var(--osp-k)) }
@keyframes osp-breathe{ 50%{ transform:scale(1.08) } }
.osp-grain{ position:absolute; inset:0; pointer-events:none; background-image:var(--splash-grain); background-size:180px;
  opacity:var(--splash-grain-op) }

.osp-scene{ position:absolute; inset:0; width:100%; height:100%;
  transition:opacity calc(.3s * var(--osp-k)), filter calc(.4s * var(--osp-k)) }
.osp-s-acc{ fill:var(--accent) } .osp-s-on{ fill:var(--on-accent) }
.osp-s-stroke{ fill:var(--surface); stroke:color-mix(in srgb, var(--accent) 70%, var(--surface)); stroke-width:1.4 }

@supports not (color: color-mix(in srgb, red 50%, blue)){ .osp-s-stroke{ stroke:var(--accent); stroke-opacity:.7 } .osp-offbtn{ border-color:var(--accent) } }
.osp-s-onst{ fill:none; stroke:var(--on-accent); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round }
.osp-s-accst{ fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round }

.osp-s-mnt{ fill:var(--accent); stroke:var(--accent); stroke-width:3.2; stroke-linejoin:round }

.osp-gv-hi{ stop-color:white; stop-opacity:var(--splash-vol-hi) } .osp-gv-hi0{ stop-color:white; stop-opacity:0 }
.osp-gv-lo0{ stop-color:black; stop-opacity:0 } .osp-gv-lo{ stop-color:black; stop-opacity:var(--splash-vol-lo) }
.osp-gv-los{ stop-color:black; stop-opacity:var(--splash-vol-los) }
.osp-fs1{ flood-color:black; flood-opacity:var(--splash-sh-k) } .osp-fs2{ flood-color:var(--accent); flood-opacity:var(--splash-sh-acc) }
.osp-dot{ fill:var(--accent); animation:osp-typ calc(1.1s * var(--osp-k)) infinite }
.osp-dot.osp-d2{ animation-delay:calc(1.1s * var(--osp-k) / 6) } .osp-dot.osp-d3{ animation-delay:calc(1.1s * var(--osp-k) / 3) }
@keyframes osp-typ{ 0%,100%{ fill-opacity:.35 } 50%{ fill-opacity:1 } }

.osp-mark{ position:absolute; left:calc(50% - 40px); top:calc(44% - 40px); width:80px; height:80px; border-radius:17.5px;
  transform-origin:0 0; box-shadow:var(--splash-mark-sh);
  transition:transform calc(.7s * var(--osp-k)) cubic-bezier(.3,1.35,.45,1), box-shadow calc(.5s * var(--osp-k)) }
.osp-mark img{ display:block; width:100%; height:100%; -webkit-user-drag:none }
.osp-mark::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:var(--splash-gloss); box-shadow:var(--splash-mark-in); transition:opacity calc(.5s * var(--osp-k)) }

.osp-word{ position:absolute; left:0; right:0; top:calc(44% + 56px); display:flex; flex-direction:column; align-items:center; gap:2px;
  transform-origin:50% 0; transition:opacity calc(.25s * var(--osp-k)), transform calc(.7s * var(--osp-k)) cubic-bezier(.3,1.2,.45,1) }
.osp-word b{ font-size:31px; line-height:1.2; font-weight:var(--fw-bold); letter-spacing:-.4px; color:var(--text) }
.osp-word small{ font-size:12.5px; line-height:1.5; font-weight:var(--fw-semibold); letter-spacing:.24em; padding-left:.24em; color:var(--accent) }
.osp .osp-word b{ animation:osp-asm calc(.95s * var(--osp-k)) cubic-bezier(.2,.8,.2,1) calc(.15s * var(--osp-k)) both }
.osp .osp-word small{ animation:osp-fadeup calc(.6s * var(--osp-k)) ease calc(.7s * var(--osp-k)) both }
@keyframes osp-asm{ from{ letter-spacing:.45em; opacity:0; filter:blur(4px) } to{ letter-spacing:-.4px; opacity:1; filter:blur(0) } }
@keyframes osp-fadeup{ from{ opacity:0; transform:translateY(4px) } }
.osp-foot{ position:absolute; left:0; right:0; bottom:calc(env(safe-area-inset-bottom, 0px) + 32px); text-align:center; font-size:11.5px;
  color:var(--text-muted); transition:opacity calc(.25s * var(--osp-k)) }

.osp-view{ position:absolute; left:0; right:0; bottom:calc(env(safe-area-inset-bottom, 0px) + 10px); text-align:center; font-size:11px;
  color:var(--text-muted); opacity:.8 }

.osp-off{ position:absolute; left:0; right:0; top:calc(44% + 140px); width:calc(100% - 68px); max-width:320px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-5); opacity:0; transform:translateY(10px); visibility:hidden;
  transition:opacity calc(.35s * var(--osp-k)), transform calc(.45s * var(--osp-k)) cubic-bezier(.2,.9,.25,1.1), visibility 0s calc(.45s * var(--osp-k)) }
.osp.osp-nonet .osp-off, .osp-net.on{ opacity:1; transform:none; visibility:visible; transition-delay:0s }
.osp-offcard{ width:100%; display:flex; gap:var(--sp-6); align-items:center; padding:var(--sp-6) var(--sp-7); border-radius:16px; background:var(--surface);
  border:1px solid var(--border); box-shadow:var(--splash-card-sh) }
.osp-offico{ width:26px; flex:none; text-align:center; font-size:20px; color:var(--status-wait) }
.osp-offtx{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.osp-offtx b{ font-size:14px; color:var(--text) }
.osp-offtx span{ font-size:12.5px; color:var(--text-muted); font-variant-numeric:tabular-nums }
.osp-offbtn{ font:inherit; font-size:13px; font-weight:var(--fw-semibold); color:var(--accent); background:none; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius:14px; padding:var(--sp-3) var(--sp-7) }
.osp.osp-nonet .osp-scene{ opacity:.35; filter:saturate(.3) }
.osp.osp-trying .osp-offico, .osp-net.osp-trying .osp-offico{ animation:osp-pulse 1s ease-in-out infinite }
@keyframes osp-pulse{ 50%{ opacity:.25 } }

.osp-net{ position:fixed; left:var(--sp-8); right:var(--sp-8); bottom:calc(env(safe-area-inset-bottom, 0px) + 24px); max-width:340px; margin:0 auto;
  z-index:var(--z-toast); display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); opacity:0; transform:translateY(16px); visibility:hidden;
  transition:opacity .3s, transform .4s cubic-bezier(.2,.9,.25,1.1), visibility 0s .4s }
.osp-net .osp-offbtn{ background:var(--surface) }

.osp.osp-out .osp-scene, .osp.osp-out .osp-glow, .osp.osp-out .osp-foot, .osp.osp-out .osp-view{ opacity:0 }
.osp.osp-out .osp-off{ opacity:0; visibility:hidden }

.osp.osp-chats{ pointer-events:none }
.osp > .osp-grain{ transition:opacity calc(.4s * var(--osp-k)) ease calc(.25s * var(--osp-k)) }
.osp.osp-chats .osp-fill, .osp.osp-chats .osp-word, .osp.osp-chats > .osp-grain{ opacity:0 }
.osp.osp-chats .osp-mark{ box-shadow:none }
.osp.osp-chats .osp-mark::after{ opacity:0 }

.osp.osp-fade{ opacity:0; transition:opacity calc(.4s * var(--osp-k)); pointer-events:none }

body.osp-hold .m-brand{ visibility:hidden }

body.osp-rise .m-roster > li{ animation:osp-rise calc(.5s * var(--osp-k, 1)) cubic-bezier(.2,.9,.25,1.1) both }
body.osp-rise .m-roster > li:nth-child(2){ animation-delay:.06s }
body.osp-rise .m-roster > li:nth-child(3){ animation-delay:.12s }
body.osp-rise .m-roster > li:nth-child(4){ animation-delay:.18s }
body.osp-rise .m-roster > li:nth-child(n+5){ animation-delay:.24s }
@keyframes osp-rise{ from{ opacity:0; transform:translateY(14px) } }

.osp.osp-wait{ cursor:pointer }
.osp-tap{ position:absolute; left:0; right:0; bottom:calc(env(safe-area-inset-bottom, 0px) + 64px); text-align:center; font-size:var(--fs-md);
  font-weight:var(--fw-semibold); color:var(--accent); opacity:0; transition:opacity calc(.4s * var(--osp-k)) }
.osp.osp-wait .osp-tap{ opacity:1; animation:osp-pulse 2.4s ease-in-out .6s infinite }
.osp.osp-out .osp-tap{ opacity:0; animation:none }
@media (prefers-reduced-motion: reduce){ .osp.osp-wait .osp-tap{ animation:none } }

.osp-slot{ position:absolute; left:calc(50% - 28px); top:var(--splash-top); width:56px; height:56px; visibility:hidden; pointer-events:none }

.osp-page .osp-pagebg, .osp-page .osp-top{ display:none }
@media (max-width:599px), (display-mode:standalone) and (max-width:899px){
  .osp-page .osp-pagebg{ display:block; position:fixed; inset:0; z-index:-1; pointer-events:none }
  .osp-page .osp-top{ display:block; position:absolute; left:0; right:0; top:0; height:0; pointer-events:none }
  .osp-top .osp-mark{ left:calc(50% - 28px); top:var(--splash-top); width:56px; height:56px; border-radius:12.25px; transition:none }
  .osp-top .osp-word{ top:calc(var(--splash-top) + 56px); transform:scale(.86); transition:none }
}
@media (prefers-reduced-motion:reduce){
  .osp-blob, .osp-glow, .osp-dot, .osp .osp-word b, .osp .osp-word small, body.osp-rise .m-roster > li{ animation:none !important }
  .osp-scene{ display:none }
}