/* 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)){
  /* the same spring as the notch (public/notch.css): quick, a small overshoot, settled in about 0.45 s */
  .nfy{--spring:linear(0,.012,.048 3.4%,.199 7.3%,.42 11.4%,.873 19.9%,1.03 24.1%,1.085 27.4%,1.099 30.3%,1.087 33.3%,1.029 40.3%,.995 47.4%,.984 52.3%,.993 64.3%,1.001 78%,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 .3s cubic-bezier(.4,0,.6,1),opacity .12s linear .26s}
.nfy.anim .nfybg{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 .45s 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}
/* sheet: what used to be a window over the page, in the notch: a pixel heading, the words, a short list, buttons and a close box */
.nfy .nfyk{display:block;font:9px/1.4 var(--pixel);letter-spacing:.1em;text-transform:uppercase;color:#e9cf6d;margin-bottom:2px}
.nfy .nfyrows{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.nfy .nfyrows li{display:flex;justify-content:space-between;gap:12px;font:12.5px/1.4 var(--sans);color:#d9d2c0;border-top:1px solid rgba(250,246,236,.12);padding-top:4px}
.nfy .nfyrows b{font:500 15px/1.2 var(--serif);color:#faf6ec;white-space:nowrap}
.nfy .nfyfoot{display:block;margin-top:8px;font:11.5px/1.45 var(--sans);color:#a8a190}
.nfy .nfyx{all:unset;position:absolute;top:calc(var(--nh-pad,36px) - 30px);inset-inline-end:10px;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;font:20px/1 var(--sans);color:#bdb6a4;cursor:pointer;z-index:1}
.nfy .nfyx:hover{color:#faf6ec;background:rgba(250,246,236,.1)}.nfy .nfyx:focus-visible{outline:2px solid var(--y,#f3c63f)}
.nfy[data-k=sheet] .nfyc{padding-top:40px;padding-inline-end:44px}
.nfy[data-k=sheet] .nfyacts{margin-inline-end:-26px}
/* a face as a button (How is MacPip?), and one text field (an email) */
.nfy .nfyacts.nfyfaces{justify-content:center;gap:10px}
.nfy .nfyfb{all:unset;box-sizing:border-box;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;border:1px solid rgba(250,246,236,.25);cursor:pointer;transition:transform .2s var(--spring)}
.nfy .nfyfb .nfyface{width:24px;height:20px}
.nfy .nfyfb:hover{transform:translateY(-2px);background:rgba(250,246,236,.1)}.nfy .nfyfb:focus-visible{outline:2px solid var(--y,#f3c63f);outline-offset:2px}
.nfy .nfyfield{display:block;margin-top:10px}
.nfy .nfyfield input{box-sizing:border-box;width:100%;height:40px;border-radius:8px;border:1px solid rgba(250,246,236,.35);background:rgba(250,246,236,.08);color:#faf6ec;font:15px var(--sans);padding:0 12px}
.nfy .nfyfield input::placeholder{color:#a8a190}.nfy .nfyfield input:focus{outline:2px solid var(--y,#f3c63f);outline-offset:1px}
.nfy .nfynote{display:block;font:12px/1.4 var(--sans);color:#f3c63f;margin-top:4px}.nfy .nfynote:empty{display:none}
/* a glance never takes a tap: the page under it stays usable */
.nfy.on[data-k=glance]{pointer-events:none}
/* the pill: a note that waits for an answer, tucked into the notch; a tap opens it again */
.nfy .nfypill{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;height:var(--h);padding:0 14px;cursor:pointer;color:#faf6ec}
.nfy .nfypill:focus-visible{outline:2px solid var(--y,#f3c63f);outline-offset:-3px;border-radius:0 0 12px 12px}
.nfy .nfydot{width:8px;height:8px;border-radius:50%;background:#f3c63f;flex:none;animation:nfydot 1.6s ease-in-out infinite}
@keyframes nfydot{50%{opacity:.35}}
.nfy .nfyn{min-width:18px;height:18px;border-radius:9px;background:#f3c63f;color:#1d1b17;font:10px/18px var(--pixel);text-align:center;flex:none}
.nfy[data-k=pill].on .nfybg{box-shadow:none}
/* 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[data-k=sheet] .nfyc{padding-top:34px}
  .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}.nfy .nfyfb{transition:none}.nfy .nfydot{animation:none}
}
@media print{.nfy{display:none}}