/* Keep the printed word in normal flow: its original kerning owns the layout. */
.canvas-name{position:relative;display:block}
.canvas-name-print{display:block}
.canvas-name-letters{position:absolute;inset:0;display:none;pointer-events:none}
.canvas-name.is-measured>.canvas-name-print{opacity:0}
.canvas-name.is-measured>.canvas-name-letters{display:block}
.canvas-name-letter{position:absolute;top:0;display:block;transform-origin:50% 65%;white-space:pre;text-shadow:0 2px 10px rgb(32 37 31 / calc(var(--ink-energy,0) * .12))}
.intro-actions .scroll-invitation{font-size:13px;font-weight:550;line-height:1.5;gap:16px;min-height:44px;max-width:none;white-space:nowrap;text-shadow:0 1px 7px rgb(0 0 0 / .22);transition:color .35s ease,text-shadow .45s ease}
.scroll-invitation>span{position:relative}
.scroll-invitation>span[aria-hidden]{flex:none;display:grid;place-items:center;transition:transform .45s cubic-bezier(.22,.7,.3,1),filter .4s ease}
.scroll-invitation>span[data-i18n]::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;opacity:0;transform:scaleX(.15);transform-origin:left;transition:transform .5s cubic-bezier(.2,.65,.3,1),opacity .4s ease;box-shadow:0 0 8px #f8dbab80}
.intro-actions .scroll-invitation.is-name-hovered{color:#ffebc6;text-shadow:0 0 6px #f8dbab90,0 0 22px #f8dbab65,0 1px 4px #0005}
.intro-actions .scroll-invitation.is-name-pressed{color:#fff6e4;text-shadow:0 0 7px #ffe5bdda,0 0 26px #f8dbaba0,0 0 40px #f8dbab50}
.scroll-invitation:is(.is-name-hovered,.is-name-pressed)>span[data-i18n]::after{transform:scaleX(1);opacity:.8}
.scroll-invitation.is-name-hovered>span[aria-hidden]{transform:translateY(4px);filter:drop-shadow(0 0 6px #f8dbab90)}
.scroll-invitation.is-name-pressed>span[aria-hidden]{transform:translateY(7px);filter:drop-shadow(0 0 9px #ffe5bdcc)}
@media(max-width:600px){
  .intro-actions{gap:12px}
  .intro-actions .play-link{flex-shrink:0}
  .intro-actions .scroll-invitation{font-size:12px;gap:10px;max-width:160px;min-width:0;white-space:normal}
  .scroll-invitation>span[data-i18n]{text-align:right}
}
@media(prefers-reduced-motion:reduce){
  .canvas-name.is-measured>.canvas-name-print{opacity:1}
  .canvas-name.is-measured>.canvas-name-letters{display:none}
  .intro-actions .scroll-invitation,.scroll-invitation>span[aria-hidden],.scroll-invitation>span[data-i18n]::after{transition:none}
}