/* The way to the invitation, and the invitation itself (coming soon, no signup data collected). */

/* The painted computer shows the save dialog every musician knows; its default button opens the invitation.
   Inner screen of the painted monitor, in image pixels: 645,283 to 847,382 (image 1400 x 649). */
.studio-scene{container-type:inline-size}
.screen-save{position:absolute;z-index:2;left:46.07%;top:43.6%;width:14.43%;height:15.25%;padding:0;border:0;border-radius:.3cqw;background:transparent;font:inherit;color:#26324a;cursor:pointer}
.screen-glow{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(110% 130% at 50% 50%,#7fa7d955,#23365400 72%);mix-blend-mode:screen;pointer-events:none}
.save-window{position:absolute;left:7%;right:7%;top:11%;bottom:5%;display:flex;flex-direction:column;justify-content:center;gap:.2cqw;padding:.38cqw .55cqw;border-radius:.32cqw;background:linear-gradient(#f7f3ea,#e9e2d2);box-shadow:0 0 1.4cqw #d7e8ff59,0 .15cqw .45cqw #0007;text-align:left;opacity:.97;transition:transform .25s ease}
/* While the computer is in view, the window hops twice like an app in the Dock asking for attention, then rests:
   it leaves quickly, falls back with its weight, and never rises past the edge of the painted screen. */
.screen-save.is-calling .save-window{animation:save-attention 4.2s .6s infinite}
@keyframes save-attention{
 0%,24%,100%{transform:none;box-shadow:0 0 1.4cqw #d7e8ff59,0 .15cqw .45cqw #0007;animation-timing-function:cubic-bezier(.2,.6,.35,1)}
 6%,18%{transform:translateY(-.6cqw) scale(1.025);box-shadow:0 0 1.8cqw #d7e8ff8c,0 .6cqw 1cqw #0005;animation-timing-function:cubic-bezier(.6,0,.85,.4)}
 12%{transform:none;box-shadow:0 0 1.4cqw #d7e8ff59,0 .15cqw .45cqw #0007;animation-timing-function:cubic-bezier(.2,.6,.35,1)}
}
.save-text{display:block;font:500 max(.6cqw,8.5px)/1.32 var(--mono);color:#2b3242;letter-spacing:-.02em;white-space:nowrap}
.save-text em{font-style:normal;color:var(--pink)}
.save-actions{position:relative;display:flex;flex-direction:column;gap:.18cqw;margin-top:.2cqw}
.save-join{display:block;padding:.16cqw .3cqw;border-radius:.22cqw;background:var(--blue);color:#fff;font:600 max(.68cqw,10px)/1.3 var(--sans);text-align:center;box-shadow:0 0 0 .14cqw #3553c740;transition:background .2s,box-shadow .2s}
.save-replace{display:block;padding:.08cqw .3cqw;border:1px solid #bdb6a6;border-radius:.22cqw;color:#6a6f7b;font:500 max(.54cqw,8px)/1.3 var(--sans);text-align:center}
/* A little pointer hesitates between "Replace" and the way out. */
.save-cursor{position:absolute;right:6%;top:62%;width:.62cqw;height:.9cqw;background:#fff;clip-path:polygon(0 0,100% 64%,58% 66%,78% 100%,62% 100%,42% 70%,0 92%);filter:drop-shadow(0 0 .06cqw #000) drop-shadow(0 .05cqw .1cqw #0008);animation:save-doubt 5s ease-in-out infinite}
@keyframes save-doubt{0%,35%{top:62%}50%,85%{top:18%}100%{top:62%}}
.screen-save:hover .save-window,.screen-save:focus-visible .save-window,.screen-save.is-opening .save-window{animation:none;transform:translateY(-.12cqw)}
.screen-save:hover .save-join,.screen-save:focus-visible .save-join{background:#2945b0;box-shadow:0 0 0 .22cqw #3553c766,0 0 1cqw #9fb6ff99}
.screen-save:hover .save-cursor,.screen-save:focus-visible .save-cursor{animation:none;top:18%}
.screen-save:focus-visible{outline:3px solid var(--blue);outline-offset:6px}
.screen-save.is-opening .save-join{background:#1f3592}
.screen-save.is-opening .screen-glow{animation:save-flash .4s ease-out}
@keyframes save-flash{0%{background:#fff0}30%{background:#ffffffaa}100%{background:#fff0}}

.no-js .screen-save{display:none}

@media(max-width:760px),(orientation:landscape) and (max-height:500px){
 /* On phones the room keeps the painting's own scale, so the window fits inside the computer's screen. */
 .save-window{left:7%;right:7%;top:11%;bottom:5%;width:auto;padding:5px 8px;gap:2px;border-radius:5px;transform:none}
 .screen-save:hover .save-window,.screen-save:focus-visible .save-window{transform:none}
 .save-text{font-size:9.6px;line-height:1.3}
 .save-actions{gap:3px;margin-top:2px}
 .save-join{padding:2px 6px;border-radius:4px;font-size:11px}
 .save-replace{padding:0 6px;border-radius:4px;font-size:9px}
 .save-cursor{width:9px;height:13px}
}
@media(prefers-reduced-motion:reduce){.save-cursor{animation:none;top:18%}.screen-save.is-opening .screen-glow{animation:none}}

/* The invitation itself: coming soon, no signup data collected. */
.invitation{width:min(92vw,720px);max-width:none;max-height:90vh;padding:0;border:0;background:transparent;overflow:auto;color:#20334d;filter:drop-shadow(0 22px 35px #0a192855)}
.invitation::backdrop{background:#142742b8;backdrop-filter:blur(5px)}
.invitation-paper{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 190px}
.invitation-main{min-width:0;padding:clamp(28px,5vw,50px);background:radial-gradient(circle 12px at 100% 0,transparent 98%,#f4eddb 100%) top/100% 50.1% no-repeat,radial-gradient(circle 12px at 100% 100%,transparent 98%,#f4eddb 100%) bottom/100% 50.1% no-repeat}
.invitation-close{position:absolute;z-index:1;right:10px;top:9px;width:44px;height:44px;border:0;background:transparent;color:#233c64;font-size:32px;cursor:pointer}
.invitation-close:focus-visible{outline:2px solid #3553c7}
.invitation-overline{margin:0;font:500 10px/1.5 var(--mono);letter-spacing:.13em;color:#3553c7}
.invitation-overline span{padding:0 4px;color:#b52a62}
.invitation h2{margin:39px 0 18px;font:500 clamp(39px,5vw,58px)/.98 var(--label);letter-spacing:-.025em}
.invitation-main>p:not(.invitation-overline){max-width:31ch;margin:0;color:#43516a;font:15px/1.6 var(--sans)}
.invitation-branch{display:block;width:min(85%,270px);height:auto;margin-top:44px;color:#3553c7}
.invitation-branch circle{fill:#f4eddb;stroke:currentColor;stroke-width:1.5}
.invitation-stub{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;padding:68px 26px 35px;background:radial-gradient(circle 12px at 0 0,transparent 98%,#ebe2cb 100%) top/100% 50.1% no-repeat,radial-gradient(circle 12px at 0 100%,transparent 98%,#ebe2cb 100%) bottom/100% 50.1% no-repeat}
.invitation-stub:before{content:"";position:absolute;left:0;top:18px;bottom:18px;border-left:1px dashed #a79d89}
.invitation-stub-label{font:500 9px/1.5 var(--mono);letter-spacing:.1em;color:#586175}
.invitation-stub strong{max-width:110px;color:#3553c7;font:500 33px/.96 var(--label);letter-spacing:-.015em}
.invitation-stub-brand{margin-top:10px;font:700 18px/1 var(--sans);letter-spacing:-.06em;color:#20334d}
.invitation-stub-brand span{color:#b52a62}
.invitation-bars{width:76px;height:23px;margin-top:9px;background:repeating-linear-gradient(90deg,#596174 0 2px,transparent 2px 4px,#596174 4px 5px,transparent 5px 8px);opacity:.55}
@media(max-width:560px){
 .invitation{width:min(91vw,430px)}
 .invitation-paper{grid-template-columns:1fr}
 .invitation-main{padding:34px 30px 26px;background:radial-gradient(circle 12px at 0 100%,transparent 98%,#f4eddb 100%) left/50% 100% no-repeat,radial-gradient(circle 12px at 100% 100%,transparent 98%,#f4eddb 100%) right/50% 100% no-repeat}
 .invitation-overline{padding-right:44px;font-size:9px}
 .invitation h2{margin:30px 0 14px;font-size:42px}
 .invitation-main>p:not(.invitation-overline){font-size:14px}
 .invitation-branch{margin-top:25px}
 .invitation-stub{display:grid;grid-template-columns:1fr auto;gap:6px 18px;padding:24px 30px 26px;background:radial-gradient(circle 12px at 0 0,transparent 98%,#ebe2cb 100%) left/50% 100% no-repeat,radial-gradient(circle 12px at 100% 0,transparent 98%,#ebe2cb 100%) right/50% 100% no-repeat}
 .invitation-stub:before{left:18px;right:18px;top:0;bottom:auto;border-left:0;border-top:1px dashed #a79d89}
 .invitation-stub-label{grid-column:1}
 .invitation-stub strong{grid-column:1;max-width:none;font-size:26px}
 .invitation-stub-brand{grid-column:2;grid-row:1/3;align-self:center;margin:0}
 .invitation-bars{display:none}
}
.invitation-noscript{padding:1rem;text-align:center;background:#f4eddb;color:#20334d}