/* Notifications in Pip's notch (public/notify.js). Hardware black like the notch, in every theme (.nfy is a night island).
   Only transform and opacity animate: the shape is drawn at its full size and scaled from the resting notch, with a spring. */
.nfy{--hw:#0b0a08;--spring:cubic-bezier(.34,1.45,.64,1);position:absolute;top:0;left:50%;translate:-50% 0;width:var(--w,300px);height:var(--h,38px);z-index:46;pointer-events:none;color:#faf6ec;contain:layout style}
.nfy.nfyfixed{position:fixed;z-index:120}
@supports (transition-timing-function:linear(0,1)){
  .nfy{--spring:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1)}
}
.nfy .nfybg{position:absolute;inset:0;background:var(--hw);border-radius:0 0 22px 22px;transform-origin:50% 0;transform:scale(var(--sx,.5),var(--sy,1));opacity:0;
  transition:transform .42s cubic-bezier(.4,0,.2,1),opacity .14s linear .3s;will-change:transform}
.nfy .nfybg::before,.nfy .nfybg::after{content:"";position:absolute;top:0;width:8px;height:8px}
.nfy .nfybg::before{inset-inline-start:-8px;background:radial-gradient(circle at 0 100%,transparent 7.5px,var(--hw) 8px)}
.nfy .nfybg::after{inset-inline-end:-8px;background:radial-gradient(circle at 100% 100%,transparent 7.5px,var(--hw) 8px)}
[dir=rtl] .nfy .nfybg::before{background:radial-gradient(circle at 100% 100%,transparent 7.5px,var(--hw) 8px)}
[dir=rtl] .nfy .nfybg::after{background:radial-gradient(circle at 0 100%,transparent 7.5px,var(--hw) 8px)}
.nfy.on{pointer-events:auto}
.nfy.on .nfybg{transform:scale(1,1);opacity:1;transition:transform .62s var(--spring),opacity 0s;box-shadow:5px 5px 0 var(--ink,#1d1b17)}
.nfy[data-k=glance].on .nfybg{box-shadow:none}
.nfy .nfyin{position:relative;opacity:0;transform:translateY(-6px);transition:opacity .12s linear,transform .2s ease}
.nfy.on .nfyin{opacity:1;transform:none;transition:opacity .22s ease .14s,transform .4s var(--spring) .1s}
/* glance: Pip leads, the words, the value trails */
.nfy .nfyg{display:flex;align-items:center;gap:10px;height:var(--h);padding:0 16px}
.nfy .nfyface{width:19px;height:16px;fill:#faf6ec;flex:none}
.nfy .nfyt{flex:1;min-width:0;font:13px/1.2 var(--sans);color:#d9d2c0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nfy .nfyv{display:inline-flex;align-items:center;gap:5px;font:500 18px/1 var(--serif);color:#faf6ec;white-space:nowrap}
.nfy .nfycoin{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe9a3,#e9b93f 60%,#a67a14);box-shadow:inset 0 0 0 1px #6b4f0e;flex:none}
.nfy .nfyval{display:inline-block}
.nfy .nfyroll{animation:nfyroll .38s var(--spring)}
@keyframes nfyroll{from{transform:translateY(60%);opacity:0}}
/* banner and action: Pip, then the words, then the buttons */
.nfy .nfyc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:start;padding:36px 18px 16px}
.nfy .nfyc>.nfyface{width:32px;height:26px;margin-top:1px}
.nfy .nfytx{min-width:0;font:13px/1.45 var(--sans);color:#d9d2c0}
.nfy .nfytx b{display:block;font:500 18px/1.2 var(--serif);color:#faf6ec}
.nfy .nfytx>span{display:block;margin-top:2px}
.nfy .nfytx .nfyv{margin-top:6px}
.nfy .nfyacts{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:10px}
.nfy .nfygo,.nfy .nfylo{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:8px;font:14px var(--sans);cursor:pointer;white-space:nowrap}
.nfy .nfygo{position:relative;background:#faf6ec;color:var(--hw);overflow:hidden}
.nfy .nfygo::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--stripes)}
.nfy .nfygo:hover{background:#fff}
.nfy .nfylo{border:1px solid rgba(250,246,236,.35);color:#faf6ec}
.nfy .nfylo:hover{background:rgba(250,246,236,.1)}
.nfy .nfygo:focus-visible,.nfy .nfylo:focus-visible{outline:2px solid var(--y,#f3c63f);outline-offset:2px}
/* the time left, along the bottom; it stops while the pointer or focus is on the note */
.nfy .nfytime{position:absolute;inset-inline:24px;bottom:6px;height:2px;border-radius:1px;background:rgba(250,246,236,.16);overflow:hidden;opacity:0;transition:opacity .2s}
.nfy .nfytime i{display:block;height:100%;background:rgba(250,246,236,.6);transform-origin:left center}
[dir=rtl] .nfy .nfytime i{transform-origin:right center}
.nfy.on.timed:not([data-k=glance]) .nfytime{opacity:1}
/* outbid: a little shake; party: Pip pops out under it, and confetti */
.nfy.wob{animation:nfywob .5s ease}
@keyframes nfywob{20%{rotate:-2deg}40%{rotate:2deg}60%{rotate:-1deg}80%{rotate:1deg}}
.nfy .nfypeek{position:absolute;left:50%;top:100%;width:28px;height:32px;margin-left:-14px;overflow:hidden;pointer-events:none}
.nfy .nfypip{display:block;width:28px;height:32px;transform:translateY(-100%);transition:transform .5s var(--spring) .35s}
.nfy.on .nfypip{transform:translateY(-12%)}
.nfy .nfyconf{position:absolute;top:24px;left:50%;width:6px;height:9px;border-radius:1px;pointer-events:none;animation:nfyconf 1.3s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes nfyconf{to{transform:translate(var(--dx),var(--dy)) rotate(var(--rt));opacity:0}}
/* phones: the smaller notch */
@media (max-width:760px){
  .nfy .nfyg{gap:7px;padding:0 11px}.nfy .nfyface{width:15px;height:12px}.nfy .nfyt{font-size:11.5px}.nfy .nfyv{font-size:15px}.nfy .nfycoin{width:12px;height:12px}
  .nfy .nfyc{padding:30px 14px 14px;gap:3px 10px}.nfy .nfyc>.nfyface{width:22px;height:18px}.nfy .nfytx b{font-size:16px}.nfy .nfytx{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .nfy .nfybg,.nfy.on .nfybg{transition:opacity .15s linear;transform:none}
  .nfy .nfyin,.nfy.on .nfyin{transition:opacity .15s linear;transform:none}
  .nfy.wob,.nfy .nfyroll{animation:none}.nfy .nfypip{transition:none}.nfy .nfyconf{display:none}
}
@media print{.nfy{display:none}}