/* A quiet pastel wheel, with one brief invitation per minute. */
#atelier:has(#artist-corner){overflow:clip}
#artist-corner{--artist-accent:#536a60;--artist-tint:#dceadd;position:relative;z-index:67;flex:0 0 56px;align-self:center}
#artist-toggle{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:56px;height:56px;padding:3px;border:1px solid #e0e6df;border-radius:17px;background:#fffffff5;color:#68776c;box-shadow:0 5px 18px #405c4310;touch-action:manipulation;transition:transform .2s,box-shadow .2s}
#artist-toggle:hover{transform:translateY(-2px);box-shadow:0 8px 22px #405c431b}
#artist-toggle:focus-visible{outline:2px solid #829f90;outline-offset:4px}
#artist-toggle>span{font-size:10px;letter-spacing:.035em;line-height:13px}
#artist-mini-wheel{width:36px;height:36px;overflow:visible;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
#artist-mini-wheel .sector{stroke:#fff;stroke-width:6;stroke-linejoin:round}
#artist-toggle:hover #artist-mini-wheel,#artist-corner.is-open #artist-mini-wheel{transform:rotate(60deg)}
#artist-panel{position:absolute;z-index:4;bottom:calc(100% + 15px);right:0;left:auto;width:352px;max-width:calc(100vw - 32px);max-height:min(540px,calc(var(--workspace-height,100dvh) - 120px));display:flex;flex-direction:column;overflow:hidden;border:1px solid #fff;border-radius:25px;background:#fffffff7;box-shadow:0 20px 70px #23483927;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);color:#3c5046;isolation:isolate}
#artist-panel header{display:flex;align-items:center;gap:9px;padding:20px 18px 13px;flex:none;background:linear-gradient(135deg,color-mix(in srgb,var(--artist-tint) 28%,white),#fff)}
#artist-panel header>div{flex:1;min-width:0}
.artist-eyebrow{display:block;font-size:10px;font-weight:650;letter-spacing:.13em;color:#77877c;margin-bottom:6px}
#artist-title{font-size:20px;line-height:1.2;letter-spacing:-.03em;font-weight:600;outline:none}
#artist-panel header button{border:0;border-radius:50%;width:34px;height:34px;flex:none;padding:0;font-size:25px;background:#f0f3ed;color:#687e6f}
#artist-back{font-size:30px!important;margin-left:-5px}
#artist-menu{overflow:auto;overscroll-behavior:contain;padding:3px 18px 17px}
.artist-wheel-shell{position:relative;width:234px;margin:0 auto 13px}
#artist-wheel{display:block;width:100%;overflow:visible}
#artist-corner.is-open #artist-menu:not([hidden]) #artist-wheel{animation:tool-wheel-revolve .9s cubic-bezier(.15,.7,.2,1) both}
.artist-segment{cursor:pointer;transform-box:fill-box;transform-origin:center;transition:transform .22s,filter .22s;outline:none}
.artist-segment .sector{stroke:white;stroke-width:4;stroke-linejoin:round}
.artist-wheel-icon{fill:none;stroke:#52655c;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.artist-segment.is-lifted,.artist-segment:focus-visible{transform:translateY(-4px) scale(1.04);filter:drop-shadow(0 5px 4px #23452d22)}
.artist-segment:focus-visible .sector{stroke:#658273;stroke-width:3}
#artist-tooltip{position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);background:#fff;color:#526b5b;border:1px solid #e0e8de;border-radius:10px;padding:5px 10px;white-space:nowrap;font-size:12px;pointer-events:none;box-shadow:0 4px 14px #294f3018}
#artist-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
#artist-labels button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:55px;padding:8px 3px;border:1px solid color-mix(in srgb,var(--artist-color) 55%,white);border-radius:13px;background:color-mix(in srgb,var(--artist-color) 20%,white);color:#516256;font-size:13px;line-height:1.2;font-weight:500;transition:transform .2s,background .2s}
#artist-labels i{width:20px;height:4px;border-radius:3px;background:var(--artist-color)}
#artist-labels button.is-linked{transform:translateY(-2px);background:color-mix(in srgb,var(--artist-color) 45%,white)}
#artist-labels button.is-pulsing{animation:wheel-word-tap .24s ease-out}
.artist-menu-note{font-size:12px!important;color:#748578;margin:14px 0 0!important;text-align:center;line-height:1.5}
#artist-content{overflow:auto;overscroll-behavior:contain;padding:4px 20px 22px;font-size:15px;line-height:1.65}
#artist-content p{margin:0 0 15px}
#artist-content h3{margin:20px 0 9px;font-size:17px;color:var(--artist-accent)}
.artist-bio-portrait{display:block;width:min(224px,80%);height:auto;aspect-ratio:1;object-fit:contain;margin:0 auto 10px}
.artist-lead{font-weight:600;color:var(--artist-accent);line-height:1.5}
.artist-lead span{font-weight:400;font-size:14px;color:#6b8174}
.artist-links,.artist-platforms{display:grid;gap:8px;margin:18px 0 12px}
.artist-platforms{grid-template-columns:1fr 1fr}
.artist-link{display:flex;flex-direction:column;justify-content:center;text-decoration:none;border:1px solid color-mix(in srgb,var(--artist-tint) 60%,#f3f4ef);border-radius:14px;background:color-mix(in srgb,var(--artist-tint) 20%,white);padding:12px 14px;min-height:48px;line-height:1.35;transition:background .18s,transform .18s}
.artist-link:hover{background:color-mix(in srgb,var(--artist-tint) 38%,white);transform:translateY(-1px)}
.artist-link strong{font-size:15px;font-weight:600;color:var(--artist-accent)}
.artist-link span{font-size:13px;color:#698174;margin-top:4px}
.artist-small{font-size:12px!important;color:#728579;line-height:1.5}
.artist-empty{text-align:center;padding:14px 0}.artist-empty>span{font-size:40px;color:#b7b992}.artist-empty h3{margin:7px 0 12px!important}
.artist-source-links{display:grid;gap:8px;margin-top:22px}
.support-intro{padding:14px 0 3px}.support-kicker{display:block;font-size:9px;letter-spacing:.1em;color:#8a727c;margin-bottom:13px}.support-intro .artist-lead{font-size:21px;line-height:1.35;letter-spacing:-.035em;color:#69525f}.support-note{padding:15px;border-radius:17px;background:#faf1f4;margin:18px 0}.support-note strong{font-size:14px;font-weight:600;color:#795b68}.support-note p{font-size:13px;margin:8px 0 0!important}.support-permalink{font-size:12px;color:#826272;text-underline-offset:3px}
@media(max-height:550px){#artist-panel{max-height:calc(var(--workspace-height,100dvh) - 110px)}#artist-panel header{padding:14px 16px 10px}.artist-wheel-shell{width:165px;margin-bottom:8px}#artist-labels button{min-height:44px}.artist-menu-note{display:none}}
.controls-open #artist-corner{display:none}
.support-payment-links{display:grid;gap:9px;margin:20px 0 10px}.support-payment-links .artist-link{min-height:65px;background:#f1dce4;border-color:#e8c5d4}.support-payment-links .artist-link:hover{background:#ecd0dc}.support-payment-links .artist-link strong{color:#694a5b;font-size:16px}.support-payment-links .artist-link span{color:#806574}.support-payment-links .artist-link:nth-child(2){background:#e4edf5;border-color:#d3e1ef}.support-payment-links .artist-link:nth-child(2):hover{background:#d9e7f2}.support-payment-links .artist-link:nth-child(2) strong{color:#4b627c}.support-payment-links .artist-link:nth-child(2) span{color:#687c91}

.support-story{margin:16px 0}.support-story summary{cursor:pointer;font-size:13px;font-weight:600;color:#6b796e}.support-story p{font-size:13px;margin:12px 0!important}
/* Shared alignment, separate surfaces: Quentin belongs beside the transport. */
#artist-transport-group{position:absolute;z-index:67;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;width:max-content;max-width:calc(100% - 20px)}
#instrument-view #artist-transport-group #music-floating{position:relative;inset:auto;transform:none;max-width:calc(100% - 65px);flex:0 1 auto;margin:0}
#artist-panel{max-height:min(540px,calc(var(--workspace-height,100dvh) - 116px))}
.artist-callout{position:absolute;z-index:5;right:0;bottom:calc(100% + 17px);width:max-content;max-width:min(235px,calc(100vw - 32px));padding:12px 15px;border:1px solid #e1e8e4;border-radius:17px 17px 4px 17px;background:#fffffff7;color:#486055;box-shadow:0 8px 28px #4b6d591b;font-size:14px;font-weight:500;line-height:1.45;pointer-events:none;animation:quentin-message 5s ease both}
.artist-callout:after{content:'';position:absolute;right:21px;bottom:-5px;width:9px;height:9px;transform:rotate(45deg);background:#fff;border-right:1px solid #e1e8e4;border-bottom:1px solid #e1e8e4}
#artist-toggle{isolation:isolate;transform-origin:center;backface-visibility:visible}
#artist-toggle:before,#artist-toggle:after{content:'';position:absolute;pointer-events:none;opacity:0;inset:-2px;border-radius:19px}
#artist-toggle:before{padding:2px;background:conic-gradient(from var(--quentin-orbit,0deg),transparent 0deg,#79dfc4 55deg,#b5a5ef 110deg,#efa8c9 170deg,transparent 245deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
#artist-toggle:after{z-index:3;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 15%,#ffffffb8 43%,#c7b8f760 49%,#a8e6de60 54%,transparent 80%);background-size:300% 100%;background-position:150% 0}
@property --quentin-orbit{syntax:'<angle>';initial-value:0deg;inherits:false}
#artist-corner[data-effect=neon] #artist-toggle:before{animation:quentin-neon 4.7s cubic-bezier(.2,.6,.3,1) both}
#artist-corner[data-effect=neon] #artist-toggle{animation:quentin-aura 4.7s ease both}
#artist-corner[data-effect=spin] #artist-toggle{animation:quentin-spin 4.5s cubic-bezier(.08,.7,.12,1) both}
#artist-corner[data-effect=spin] #artist-toggle:before{animation:quentin-neon 4.5s ease both}
#artist-corner[data-effect=bloom] #artist-toggle{animation:quentin-bloom 4.5s cubic-bezier(.2,.7,.3,1) both}
#artist-corner[data-effect=bloom] #artist-toggle:before{animation:quentin-halo 4.5s ease both}
#artist-corner[data-effect=flip] #artist-toggle{animation:quentin-flip 4.4s cubic-bezier(.25,.65,.2,1) both}
#artist-corner[data-effect=flip] #artist-toggle:after{animation:quentin-reflection 4.4s ease both}
#artist-corner[data-effect=prism] #artist-toggle{animation:quentin-prism 4.6s ease both}
#artist-corner[data-effect=prism] #artist-toggle:before{animation:quentin-neon 4.6s ease both}
#artist-corner[data-effect=prism] #artist-toggle:after{animation:quentin-reflection 4.6s ease both}
@keyframes quentin-message{0%,100%{opacity:0;transform:translateY(5px)}12%,88%{opacity:1;transform:none}}
@keyframes quentin-neon{0%,100%{opacity:0;--quentin-orbit:0deg;filter:hue-rotate(0deg)}12%{opacity:1}85%{opacity:1;--quentin-orbit:680deg;filter:hue-rotate(100deg)}99%{--quentin-orbit:720deg}}
@keyframes quentin-aura{0%,100%{box-shadow:0 5px 18px #405c4310}40%{box-shadow:0 0 18px #9be6d966,0 0 3px #98e5d9}75%{box-shadow:0 0 22px #c6b6f166,0 0 3px #c6b6f1}}
@keyframes quentin-spin{0%{transform:rotate(0) scale(1)}12%{transform:rotate(-18deg) scale(.96)}65%{transform:rotate(1433deg) scale(1.04)}85%{transform:rotate(1442deg) scale(1.01)}100%{transform:rotate(1440deg) scale(1)}}
@keyframes quentin-bloom{0%,100%{transform:scale(1);box-shadow:0 5px 18px #405c4310}25%{transform:scale(1.13);box-shadow:0 0 0 8px #bce8df15,0 0 24px #b5d6dd66}55%{transform:scale(.98);box-shadow:0 0 0 18px #cdbfea00}75%{transform:scale(1.035);box-shadow:0 0 15px #b5d6dd33}}
@keyframes quentin-halo{0%,100%{opacity:0;transform:scale(1)}22%{opacity:.9;transform:scale(1.05)}65%{opacity:0;transform:scale(1.45)}}
@keyframes quentin-flip{0%,100%{transform:perspective(550px) rotateY(0) translateY(0)}20%{transform:perspective(550px) rotateY(-18deg) translateY(-3px)}70%{transform:perspective(550px) rotateY(365deg) translateY(-3px)}90%{transform:perspective(550px) rotateY(358deg)}99%{transform:perspective(550px) rotateY(360deg)}}
@keyframes quentin-prism{0%,100%{transform:perspective(500px) rotateX(0) rotateY(0)}25%{transform:perspective(500px) rotateX(12deg) rotateY(-16deg) translateY(-3px)}65%{transform:perspective(500px) rotateX(-5deg) rotateY(13deg) translateY(-2px)}}
@keyframes quentin-reflection{0%,100%{opacity:0;background-position:150% 0}20%{opacity:.7}80%{opacity:.6;background-position:-100% 0}}
@media(orientation:landscape) and (any-pointer:coarse) and (max-width:1100px) and (max-height:600px){#artist-transport-group{left:auto;right:var(--transport-rail-edge,12px);top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column;max-height:calc(100% - 24px);width:104px}#instrument-view #artist-transport-group #music-floating{max-width:100%;width:104px;flex-shrink:1;overflow-y:auto;max-height:calc(var(--workspace-height,100dvh) - 94px)}#artist-corner{flex:0 0 56px}#artist-panel{right:calc(100% + 22px);bottom:0;max-width:calc(100vw - 140px);max-height:calc(var(--workspace-height,100dvh) - 26px)}.artist-callout{right:calc(100% + 18px);bottom:0}.artist-callout:after{right:-5px;bottom:24px;transform:rotate(-45deg)}}
[dir=rtl] #artist-panel,[dir=rtl] .artist-callout{text-align:right}
@media(prefers-reduced-motion:reduce){#artist-corner[data-effect] #artist-toggle,#artist-corner[data-effect] #artist-toggle:before,#artist-corner[data-effect] #artist-toggle:after,.artist-callout,#artist-corner.is-open #artist-menu:not([hidden]) #artist-wheel,#artist-labels button.is-pulsing{animation:none}#artist-toggle,#artist-mini-wheel,.artist-segment,#artist-labels button,.artist-link{transition:none}#artist-toggle:hover,#artist-toggle:hover #artist-mini-wheel,#artist-corner.is-open #artist-mini-wheel{transform:none}}

#artist-transport-group:not(:has(#music-floating:not([hidden]))){left:auto;right:16px;transform:none}.recorder-open #artist-transport-group{display:none}#artist-panel,.artist-callout{translate:var(--artist-overlay-shift,0px) 0}

/* The phone keeps its full bottom transport; Hey sits beside the language button. */
#artist-toggle .artist-phone-arrow{display:none}
#artist-language-group{display:none}
.artist-phone-layout #artist-language-group{position:fixed;z-index:70;top:max(8px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));display:flex;align-items:center;gap:7px;direction:ltr}
.artist-phone-layout #artist-language-group .locale-page{position:relative;inset:auto}
.artist-phone-layout #artist-corner{flex:0 0 auto}
.artist-phone-layout #artist-toggle{width:66px;height:56px;padding-left:10px}
.artist-phone-layout #artist-toggle .artist-phone-arrow{display:block;position:absolute;left:5px;top:16px;font-size:23px;line-height:24px;font-weight:400;color:#81968a}
.artist-phone-layout #artist-panel{top:calc(100% + 12px);bottom:auto;right:0;max-width:calc(100vw - 32px);max-height:min(540px,calc(var(--workspace-height,100dvh) - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}
.artist-phone-layout .artist-callout{top:calc(100% + 13px);right:0;bottom:auto;border-radius:17px 4px 17px 17px}
.artist-phone-layout .artist-callout:after{top:-5px;right:23px;bottom:auto;transform:rotate(225deg)}
#instrument-view.artist-phone-layout #artist-transport-group{left:50%;right:auto;top:auto;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);flex-direction:row;width:max-content;max-width:calc(100% - 16px);max-height:none;gap:0}
#instrument-view.artist-phone-layout #artist-transport-group #music-floating{display:flex;position:relative;inset:auto;transform:none;flex-direction:row;align-items:center;justify-content:center;width:auto;max-width:100%;max-height:none;overflow:visible;gap:3px}
#instrument-view.artist-phone-layout:not(.controls-open) #music-floating>button{flex:0 1 auto;width:auto;min-width:0;padding-inline:7px}
#instrument-view.artist-phone-layout:not(.controls-open) #music-floating>.touch-record-button{width:42px;min-width:42px;padding:0}
#instrument-view.artist-phone-layout:not(.controls-open) #music-floating>.reset-handpan-button{width:32px;min-width:32px;padding:0}
#instrument-view.artist-phone-layout:not(.controls-open) #music-floating>.magic-compact{width:36px;min-width:36px;padding:7px}
#instrument-view.artist-phone-layout:not(.controls-open) #music-floating [data-music-play]{order:0;overflow:hidden;text-overflow:ellipsis}
#instrument-view.artist-phone-layout.controls-open #artist-language-group{visibility:hidden}
@media(orientation:landscape){
 body[data-view=play] #instrument-view.artist-phone-layout:not(.controls-open):not(.recorder-open) #stage-canvas{right:0;bottom:82px}
}
/* The same compact silhouette as Lab, with the chevron after Hey! on phones. */
.artist-phone-layout #artist-toggle{width:var(--artist-dock-width,116px);height:48px;min-width:96px;padding:5px 10px 5px 5px;border-radius:17px;flex-direction:row;gap:5px;background:#fffffff2;box-shadow:0 5px 20px #45668110}
.artist-phone-layout #artist-mini-wheel{width:35px;height:35px;flex:none}
.artist-phone-layout #artist-toggle .artist-hey-label{font-size:12px;line-height:1.4;white-space:nowrap;letter-spacing:0}
.artist-phone-layout #artist-toggle .artist-phone-arrow{position:static;display:inline-grid;place-items:center;flex:none;width:30px;height:30px;margin-left:2px;font-size:23px;line-height:1;border-radius:10px;color:#89978d}
.artist-phone-layout #artist-language-group{top:max(12px,env(safe-area-inset-top))}
#artist-settings-group{display:none}
.artist-settings-layout #artist-settings-group{display:block;position:absolute;z-index:67;left:calc(var(--artist-dock-center,35px) - 26px);top:var(--artist-dock-bottom,72px);width:52px}
.controls-open.artist-settings-layout #artist-corner{display:block}
.artist-settings-layout #artist-toggle{width:52px;height:52px;border:0;padding:0;background:transparent;box-shadow:none;border-radius:50%}
.artist-settings-layout #artist-mini-wheel{width:50px;height:50px}
.artist-settings-layout #artist-toggle .artist-hey-label,.artist-settings-layout #artist-toggle .artist-phone-arrow{display:none}
.artist-settings-layout #artist-panel{left:0;right:auto;top:calc(100% + 12px);bottom:auto;max-height:calc(var(--workspace-height,100dvh) - var(--artist-dock-bottom,72px) - 84px)}
.artist-settings-layout .artist-callout{left:calc(100% + 12px);right:auto;top:0;bottom:auto;border-radius:4px 17px 17px}
.artist-settings-layout .artist-callout:after{left:-5px;right:auto;top:18px;bottom:auto;transform:rotate(135deg)}
.artist-callout{z-index:8;font-size:14px;line-height:1.45;min-width:180px}
#artist-corner[data-effect] #artist-mini-wheel{animation:artist-invitation-turn 4.8s cubic-bezier(.15,.7,.15,1) both}
@keyframes artist-invitation-turn{0%{rotate:0deg}20%{rotate:-16deg}85%,100%{rotate:360deg}}
/* Recognizable platform marks, kept together with their destination name. */
.artist-link{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px}
.artist-link .artist-link-copy{display:flex;flex-direction:column;min-width:0;margin:0;gap:4px}
.artist-link-copy>span{margin:0;font-size:13px;line-height:1.4;color:#698174}
.artist-brand{display:block;flex:none;width:28px;height:28px;object-fit:contain;transition:transform .3s cubic-bezier(.2,.8,.3,1),filter .3s}
.artist-platforms .artist-link{padding:12px 10px;gap:8px}
.artist-platforms .artist-brand{width:25px;height:25px}
.artist-platforms .artist-link strong{font-size:14px}
.artist-brand-handpan{opacity:.7}
.artist-link:hover .artist-brand,.artist-link:focus-visible .artist-brand{animation:artist-brand-wave .7s cubic-bezier(.2,.8,.3,1) both;filter:drop-shadow(0 3px 5px #26473920)}
@keyframes artist-brand-wave{0%,100%{transform:none}35%{transform:translateY(-4px) rotate(-9deg) scale(1.12)}65%{transform:translateY(-2px) rotate(5deg) scale(1.05)}}
.support-card-link{flex-direction:column;align-items:flex-start!important;gap:8px}
.artist-link .payment-marks{display:flex;align-items:center;gap:16px;margin:0;width:100%;padding:5px 0 8px;border-bottom:1px solid #dcbcc755}
.payment-marks .artist-brand{width:58px;height:32px}.payment-marks .artist-brand-cartesbancaires{width:47px}.payment-marks .artist-brand-link{width:58px}
.payment-marks .artist-brand:nth-child(2){animation-delay:.07s}.payment-marks .artist-brand:nth-child(3){animation-delay:.14s}
.artist-label-icon{display:block;width:24px;height:24px;fill:none;stroke:#61756a;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex:none}
#artist-labels button{gap:7px;position:relative;isolation:isolate}
#artist-labels button:hover .artist-label-icon,#artist-labels button:focus-visible .artist-label-icon,.artist-segment:hover .artist-wheel-icon,.artist-segment:focus-visible .artist-wheel-icon{animation:artist-brand-wave .7s ease both;transform-box:fill-box;transform-origin:center}
#artist-corner.is-open #artist-labels [data-tool-view=support]{animation:artist-support-lift 2.4s cubic-bezier(.2,.7,.2,1) .35s both}
#artist-corner.is-open #artist-labels [data-tool-view=support]:before{content:'';position:absolute;inset:-2px;border-radius:15px;padding:2px;pointer-events:none;background:conic-gradient(from var(--quentin-orbit),transparent 10%,#f292b7 25%,#bfaae8 45%,#87d5c6 65%,transparent 85%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:quentin-neon 4.7s ease .2s both}
#artist-corner.is-open #artist-labels [data-tool-view=support] .artist-label-icon,#artist-corner.is-open .artist-segment[data-view=support] .artist-wheel-icon{stroke:#b96785;fill:#f3ccd83b;animation:artist-heart-pop 2.6s ease .6s both;transform-box:fill-box;transform-origin:center}
@keyframes artist-support-lift{0%,100%{translate:0 0}28%{translate:0 -5px}48%{translate:0 1px}68%{translate:0 -2px}}
@keyframes artist-heart-pop{0%,100%{scale:1;opacity:1}22%{scale:1.16}38%{scale:.88}58%{scale:1.28;opacity:1}69%{scale:1.5;opacity:0}70%{scale:.4;opacity:0}90%{scale:1.06;opacity:1}}
.support-heart-badge{position:relative;display:block;width:82px;height:82px;margin:4px auto 18px;isolation:isolate}
.support-heart-badge>img{width:100%;height:100%;opacity:.4;object-fit:contain}
.support-heart-badge>svg{position:absolute;inset:23px;width:36px;height:36px;fill:#eb8bb1;stroke:#b35b7d;stroke-width:1.2;filter:drop-shadow(0 2px 7px #ed91b577)}
.support-open .support-heart-badge>svg{animation:artist-heart-pop 3s ease .15s both}
.support-heart-badge:before,.support-heart-badge:after{content:'';position:absolute;inset:9px;border:1px solid #dd89ae;border-radius:50%;opacity:0;pointer-events:none}
.support-open .support-heart-badge:before{animation:artist-heart-ripple 2.7s ease .25s both}.support-open .support-heart-badge:after{animation:artist-heart-ripple 2.7s ease .7s both;border-color:#b8a3df}
@keyframes artist-heart-ripple{0%,25%{opacity:0;scale:.55}55%{opacity:.85}100%{opacity:0;scale:1.7}}
.support-heart-badge:hover>img{animation:artist-brand-wave .7s ease both}
@media(prefers-reduced-motion:reduce){#artist-corner[data-effect] #artist-mini-wheel,#artist-corner.is-open #artist-labels [data-tool-view=support],#artist-corner.is-open #artist-labels [data-tool-view=support]:before,#artist-corner.is-open #artist-labels [data-tool-view=support] .artist-label-icon,#artist-corner.is-open .artist-segment[data-view=support] .artist-wheel-icon,.support-open .support-heart-badge>svg,.support-open .support-heart-badge:before,.support-open .support-heart-badge:after,.artist-link:hover .artist-brand,.artist-link:focus-visible .artist-brand,#artist-labels button:hover .artist-label-icon,#artist-labels button:focus-visible .artist-label-icon,.artist-segment:hover .artist-wheel-icon,.artist-segment:focus-visible .artist-wheel-icon,.support-heart-badge:hover>img{animation:none}}
@media(max-width:350px){
 .artist-phone-layout #wheel-dock .dock-toggle{min-width:0;padding:5px;gap:2px}
 .artist-phone-layout #wheel-dock .dock-toggle .dock-arrow,.artist-phone-layout #artist-toggle .artist-phone-arrow{width:22px;margin-left:0}
 .artist-phone-layout #artist-toggle{min-width:0;padding:5px;gap:2px}
 .artist-phone-layout #artist-language-group{gap:4px}
 .artist-phone-layout #artist-language-group .locale-page{padding-inline:7px;gap:4px}
}
/* Show the invitation at full contrast immediately, including on a brief glance. */
.artist-callout{animation:artist-message-visible 5s ease both}
@keyframes artist-message-visible{0%,90%{opacity:1;transform:none}100%{opacity:0;transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce){.artist-callout{animation:none}}
.support-heart-badge:after{border:0;background:radial-gradient(circle at 50% 3%,#ed98b6 0 2px,transparent 3px),radial-gradient(circle at 85% 15%,#b3a0dc 0 2px,transparent 3px),radial-gradient(circle at 97% 50%,#ed98b6 0 2px,transparent 3px),radial-gradient(circle at 85% 85%,#a7d8ca 0 2px,transparent 3px),radial-gradient(circle at 50% 97%,#ed98b6 0 2px,transparent 3px),radial-gradient(circle at 15% 85%,#b3a0dc 0 2px,transparent 3px),radial-gradient(circle at 3% 50%,#ed98b6 0 2px,transparent 3px),radial-gradient(circle at 15% 15%,#a7d8ca 0 2px,transparent 3px)}
.artist-center-logo{transform-box:fill-box;transform-origin:center}
.artist-center-logo:hover{animation:artist-brand-wave .7s ease both}
@media(prefers-reduced-motion:reduce){.artist-center-logo:hover{animation:none}}

/* Stable header invitation: never share the recorder's or a collapsed menu's box. */
#instrument-view.artist-header-layout #artist-language-group{position:fixed;z-index:70;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));display:flex;align-items:center;gap:7px;direction:ltr;visibility:visible}
.artist-header-layout #artist-language-group .locale-page{position:relative;inset:auto;visibility:visible}
#instrument-view.artist-header-layout #artist-corner{display:block;flex:0 0 auto}
.artist-header-layout #artist-toggle{width:var(--artist-dock-width,116px);min-width:96px;height:48px;padding:5px 10px 5px 5px;border:1px solid #e0e6df;border-radius:17px;flex-direction:row;gap:5px;background:#fffffff2;box-shadow:0 5px 20px #45668110}
.artist-header-layout #artist-mini-wheel{width:35px;height:35px;flex:none}
.artist-header-layout #artist-toggle .artist-hey-label{display:block;font-size:12px;line-height:1.4;white-space:nowrap;letter-spacing:0}
.artist-header-layout #artist-toggle .artist-phone-arrow{position:static;display:inline-grid;place-items:center;flex:none;width:30px;height:30px;margin-left:2px;font-size:23px;line-height:1;border-radius:10px;color:#89978d}
.artist-header-layout #artist-panel{top:calc(100% + 12px);bottom:auto;left:auto;right:0;max-width:calc(100vw - 32px);max-height:min(540px,calc(var(--workspace-height,100dvh) - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}
.artist-header-layout .artist-callout{top:calc(100% + 13px);right:0;left:auto;bottom:auto;border-radius:17px 4px 17px 17px}
.artist-header-layout .artist-callout:after{top:-5px;right:23px;left:auto;bottom:auto;transform:rotate(225deg)}
#instrument-view.artist-header-layout #artist-transport-group #music-floating{max-width:100%}
/* Leave the header clear when a settings drawer fills the right side. */
@media(min-aspect-ratio:1/1),(min-width:1100px){
 #instrument-view.artist-header-layout #control-panel{top:max(76px,calc(env(safe-area-inset-top) + 64px));max-height:calc(100% - 86px)}
}
#instrument-view.artist-header-layout[data-sheet=full] #control-panel{top:max(76px,calc(env(safe-area-inset-top) + 64px));max-height:calc(100% - 86px)}
/* Every collapsed desktop workspace shares one centered, contained surface. */
@media(min-height:601px), (hover:hover) and (pointer:fine), (min-width:1101px){
 body[data-view] #instrument-view .workspace-edge-controls{left:50%;right:auto;top:auto;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);height:auto;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:5px;padding:6px;border:1px solid #e1e9ed;border-radius:22px;background:#fffffff2;box-shadow:0 8px 28px #45668117;backdrop-filter:blur(18px)}
 body[data-view=play] #instrument-view .workspace-edge-controls,body[data-view=inspire] #instrument-view .workspace-edge-controls{display:none}
 .workspace-edge-controls .settings-toggle{min-width:116px;margin:0;box-shadow:none}
}
.note-surface{transition:background 70ms ease-out,box-shadow 70ms ease-out}
.handpan-note:is(.sounding,.touch-sounding) .note-surface{transition:none}
#instrument-view.artist-header-layout.controls-open #artist-language-group{visibility:visible}

@media(max-width:600px), (max-width:950px) and (max-height:500px){
 #instrument-view.artist-header-layout #wheel-dock.is-floating .dock-panel{top:64px;max-height:calc(var(--workspace-height,100dvh) - 94px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
}