circle

#ColoursSite styles, Colours, Palette

White

#FFFBF4

Light accent

#E8B4BC

Accent

#5B1A2B

Dark accent

#3A0F1D

Black

#2B0D16

AaFontsSite styles, Fonts

HeadingFaculty Glyphic

Faculty Glyphic

ParagraphFaculty Glyphic

Faculty Glyphic

→ButtonsPrimary, secondary and tertiary

Book a lessonPrimary

Book a lessonSecondary

Book a lessonTertiary

Paste in: Settings, Developer tools, Code injection, Header

Ready to paste

<!-- Custom buttons · Novule
     Every button on the site (primary, secondary, tertiary, List section and form buttons) becomes the pill with the arrow pebble.
     Colours follow your Site Styles. -->
<style>
:is(.sqs-block-button-element,.sqs-system-button,[class*="sqs-button-element--"]):not(#header *):not(.header-skip-link):not(#novule-hero *):not(#novule-faq *):not(#folder-faq *){--nb-h:52px;--nb-peb:58px;--nb-bg:hsl(var(--accent-hsl));--nb-tx:hsl(var(--white-hsl));--nb-pb:hsl(var(--lightAccent-hsl));--nb-ar:hsl(var(--accent-hsl));--nb-edge:hsl(var(--darkAccent-hsl));position:relative!important;isolation:isolate;display:inline-flex!important;align-items:center!important;justify-content:center!important;height:var(--nb-h)!important;min-height:0!important;padding:0 calc(var(--nb-peb) - 4px) 0 26px!important;margin-right:20px!important;border:0!important;border-radius:999px!important;background:var(--nb-bg)!important;color:var(--nb-tx)!important;font-weight:700!important;line-height:1!important;white-space:nowrap!important;text-decoration:none!important;opacity:1!important;box-shadow:0 0 0 2.5px var(--nb-edge),4px 5px 0 2.5px var(--nb-edge)!important;transition:transform .3s cubic-bezier(.34,1.56,.64,1)!important}
:is(.sqs-block-button-element,.sqs-system-button,[class*="sqs-button-element--"]):not(#header *):not(.header-skip-link):not(#novule-hero *):not(#novule-faq *):not(#folder-faq *):is(.sqs-button-element--secondary,.sqs-block-button-element--secondary){--nb-bg:hsl(var(--lightAccent-hsl));--nb-tx:hsl(var(--darkAccent-hsl));--nb-pb:hsl(var(--accent-hsl));--nb-ar:hsl(var(--white-hsl))}
:is(.sqs-block-button-element,.sqs-system-button,[class*="sqs-button-element--"]):not(#header *):not(.header-skip-link):not(#novule-hero *):not(#novule-faq *):not(#folder-faq *):is(.sqs-button-element--tertiary,.sqs-block-button-element--tertiary){--nb-bg:hsl(var(--white-hsl));--nb-tx:hsl(var(--darkAccent-hsl));--nb-pb:hsl(var(--lightAccent-hsl));--nb-ar:hsl(var(--accent-hsl))}
:is(.sqs-block-button-element,.sqs-system-button,[class*="sqs-button-element--"]):not(#header *):not(.header-skip-link):not(#novule-hero *):not(#novule-faq *):not(#folder-faq *)::after,:is(.sqs-block-button-element,.sqs-system-button,[class*="sqs-button-element--"]):not(#header *):not(.header-skip-link):not(#novule-hero *):not(#novule-faq *):not(#folder-faq *)::before{content:""!important;position:absolute!important;right:-18px!important;left:auto!important;top:50%!important;bottom:auto!important;width:var(--nb-peb)!important;height:var(--nb-peb)!important;margin:calc(var(--nb-peb) / -2) 0 0!important;padding:0!important;border:0!important;opacity:1!important;display:block!important;transition:transform .45s cubic-bezier(.34,1.56,.64,1)!important}
:is(.sqs-block-button-element,.sqs-system-button,[class*="sqs-button-element--"]):not(#header *):not(.header-skip-link):not(#novule-hero *):not(#novule-faq *):not(#folder-faq *)::after{z-index:0!important;background:var(--nb-pb)!important;border-radius:58% 42% 46% 54%/50% 60% 40% 50%!important;box-shadow:0 0 0 2.5px var(--nb-edge),4px 5px 0 2.5px var(--nb-edge)!important;animation:nbWob 6s ease-in-out infinite alternate}
:is(.sqs-block-button-element,.sqs-system-button,[class*="sqs-button-element--"]):not(#header *):not(.header-skip-link):not(#novule-hero *):not(#novule-faq *):not(#folder-faq *)::before{z-index:1!important;background:var(--nb-ar)!important;border-radius:0!important;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat!important;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat!important}
:is(.sqs-block-button-element,.sqs-system-button,[class*="sqs-button-element--"]):not(#header *):not(.header-skip-link):not(#novule-hero *):not(#novule-faq *):not(#folder-faq *):hover{transform:translateY(-2px)!important}
:is(.sqs-block-button-element,.sqs-system-button,[class*="sqs-button-element--"]):not(#header *):not(.header-skip-link):not(#novule-hero *):not(#novule-faq *):not(#folder-faq *):hover::after,:is(.sqs-block-button-element,.sqs-system-button,[class*="sqs-button-element--"]):not(#header *):not(.header-skip-link):not(#novule-hero *):not(#novule-faq *):not(#folder-faq *):hover::before{transform:rotate(-30deg)!important}
@keyframes nbWob{0%{border-radius:58% 42% 46% 54%/50% 60% 40% 50%}50%{border-radius:46% 54% 58% 42%/58% 44% 56% 42%}100%{border-radius:52% 48% 42% 58%/44% 56% 48% 52%}}
@media (max-width:767px){:is(.sqs-block-button-element,.sqs-system-button,[class*="sqs-button-element--"]):not(#header *):not(.header-skip-link):not(#novule-hero *):not(#novule-faq *):not(#folder-faq *){--nb-h:48px;--nb-peb:52px}}
@media (prefers-reduced-motion:reduce){:is(.sqs-block-button-element,.sqs-system-button,[class*="sqs-button-element--"]):not(#header *):not(.header-skip-link):not(#novule-hero *):not(#novule-faq *):not(#folder-faq *)::after{animation:none!important}}
</style>

01HeaderRuled cells header

Section IDnone needed

Paste in: Settings, Developer tools, Code injection, Header

Ready to paste

<!-- Ruled Cells Header · Novule
     Edit links, logo and the button in Squarespace as usual. Colours follow your Site Styles. -->
<style>
:root{
  --nh-h:68px;
  --nh-float-y:14px;
  --nh-float-x:3vw;
  --nh-lift:0 1px 2px hsla(var(--darkAccent-hsl),.14),0 10px 18px -10px hsla(var(--darkAccent-hsl),.35),0 26px 46px -24px hsla(var(--darkAccent-hsl),.5);
  --nh-total:calc(var(--nh-h) + var(--nh-float-y));
  --nh-bg:color-mix(in srgb,hsl(var(--lightAccent-hsl)) 36%,hsl(var(--white-hsl)));
  --nh-wine:hsl(var(--accent-hsl,344 56% 23%));
  --nh-edge:color-mix(in srgb,hsl(var(--accent-hsl,344 56% 23%)) 70%,#000);
  --nh-cream:hsl(var(--white-hsl));
  --nh-hover:color-mix(in srgb,hsl(var(--lightAccent-hsl)) 62%,hsl(var(--white-hsl)));
  --nh-line:1.5px solid var(--nh-edge);
  --nh-sq:10px;
  --nh-cell:28px;
  --nh-bite:20px;
  --nh-r:14px;
  --nh-btn-gap:36px;
  --nh-dark:hsl(var(--darkAccent-hsl));
  --nh-rose:hsl(var(--lightAccent-hsl));
}

html body #header,html body #header.shrink{
  background:transparent!important;background-image:none!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  padding:var(--nh-float-y) var(--nh-float-x) 0!important;box-sizing:border-box!important;
}
html body #header .header-announcement-bar-wrapper,html body #header .header-inner{
  background:transparent!important;background-image:none!important;
  box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
#header .header-announcement-bar-wrapper{padding:0!important}
#header .header-inner{position:relative!important}
#header .header-border{display:none!important}
#header .header-inner{padding:0!important;min-height:0!important;height:var(--nh-h)!important;align-items:stretch!important}

html body #header .header-announcement-bar-wrapper,
html body #header.shrink .header-announcement-bar-wrapper{position:relative!important;outline:0!important;box-shadow:none!important}
#header .header-announcement-bar-wrapper::before{content:none!important}
#header .header-display-desktop{height:100%!important;align-items:center!important;width:100%!important}
#header .header-display-desktop .header-title-nav-wrapper{
  flex:1 1 auto!important;align-items:stretch!important;height:100%!important;position:relative!important;
  background:var(--nh-bg)!important;border-radius:var(--nh-r)!important;
  box-shadow:0 0 0 1.5px var(--nh-edge),var(--nh-lift)!important;
}

#header .header-display-desktop .header-title,
#header .header-display-desktop .header-nav-item,
#header .header-display-mobile .header-burger{position:relative!important}
#header .header-display-desktop .header-title::after,
#header .header-display-desktop .header-nav-item::after,
#header .header-display-mobile .header-burger::after,
#header .header-display-desktop .header-title::before,
#header .header-display-desktop .header-nav-item::before,
#header .header-display-mobile .header-burger::before{
  content:"";position:absolute;right:0;z-index:3;pointer-events:none;
  width:var(--nh-bite)!important;height:var(--nh-bite)!important;
  min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important;
  padding:0!important;margin:0!important;box-sizing:border-box!important;
  background:var(--nh-cream)!important;border:var(--nh-line)!important;border-radius:50%!important;
  transform:translateX(50%)!important;
}
#header .header-display-desktop .header-title::after,
#header .header-display-desktop .header-nav-item::after,
#header .header-display-mobile .header-burger::after{top:auto;bottom:calc(var(--nh-bite) / -2);clip-path:inset(0 -2px calc(50% - 2.5px) -2px)}
#header .header-display-desktop .header-title::before,
#header .header-display-desktop .header-nav-item::before,
#header .header-display-mobile .header-burger::before{bottom:auto;top:calc(var(--nh-bite) / -2);clip-path:inset(calc(50% - 2.5px) -2px 0 -2px)}

#header .header-display-desktop .header-title{
  display:flex!important;align-items:center!important;
  flex:0 0 auto!important;min-width:220px;height:100%!important;
  padding:0 var(--nh-cell)!important;margin:0!important;
  border-right:var(--nh-line)!important;
}

#header .header-display-desktop .header-nav{flex:1 1 auto!important;height:100%!important;padding:0!important;margin:0!important}
#header .header-display-desktop .header-nav-wrapper{height:100%!important;width:100%!important;margin:0!important}
#header .header-display-desktop .header-nav-list{
  display:flex!important;width:100%!important;height:100%!important;
  margin:0!important;padding:0!important;gap:0!important;
  background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  counter-reset:nh;
}
#header .header-display-desktop .header-nav-list::before,
#header .header-display-desktop .header-nav-list::after{content:none!important}
#header .header-display-desktop .header-nav-item{
  flex:1 1 0!important;min-width:0;height:100%!important;
  margin:0!important;padding:0!important;
  border-right:var(--nh-line)!important;
}
#header .header-display-desktop .header-nav-item > a,
#header .header-display-desktop .header-nav-folder-title{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px;
  height:100%!important;padding:0 var(--nh-cell) 0 calc(var(--nh-cell) - 6px)!important;
  border-radius:0!important;background:none;background-image:none!important;
  color:var(--nh-edge)!important;font-weight:600!important;transform:none!important;
  transition:background-color .2s ease,color .2s ease;
}
#header .header-display-desktop .header-nav-item > a::after,
#header .header-display-desktop .header-nav-folder-title::after{
  counter-increment:nh;content:"0" counter(nh);
  font:500 11px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;opacity:.55;
}
#header .header-display-desktop .header-nav-item > a:hover,
#header .header-display-desktop .header-nav-folder-title:hover{background-color:var(--nh-hover)!important}
#header .header-display-desktop .header-nav-item--active > a{background-color:var(--nh-wine)!important;color:var(--nh-cream)!important}
#header .header-display-desktop .header-nav-item--active > a::after{opacity:.8}
#header .header-display-desktop .header-nav-item:last-child{border-right:0!important}
#header .header-display-desktop .header-nav-item:last-child::after,
#header .header-display-desktop .header-nav-item:last-child::before{content:none!important}
#header .header-display-desktop .header-nav-item:last-child:not(.header-nav-item--active) > a:hover{
  background-color:transparent!important;
  background-image:linear-gradient(var(--nh-hover),var(--nh-hover))!important;
  background-repeat:no-repeat!important;background-position:0 0!important;
  background-size:calc(100% - var(--nh-r)) 100%!important;
}
#header .header-display-desktop .header-nav-item--active:last-child > a{border-radius:0 var(--nh-r) var(--nh-r) 0!important}

#header .header-display-desktop .header-actions{padding:0 22px 0 0!important;margin:0 0 0 var(--nh-btn-gap)!important;height:100%!important;align-items:center!important;flex:0 0 auto!important;background:none!important}
#header .header-display-desktop .header-actions-action--cta{margin:0!important;display:flex!important;align-items:center!important}
#header .header-display-desktop .header-actions-action--cta a.btn,
#header .header-display-desktop .header-actions-action--cta .btn{
  position:relative!important;display:inline-flex!important;align-items:center!important;
  height:52px!important;margin:0!important;padding:0 70px 0 28px!important;
  border:0!important;border-radius:999px!important;
  background:var(--nh-wine)!important;color:var(--nh-cream)!important;font-weight:700!important;
  white-space:nowrap!important;text-decoration:none!important;
  box-shadow:0 0 0 2.5px var(--nh-dark),4px 5px 0 2.5px var(--nh-dark)!important;
}
#header .header-display-desktop .header-actions-action--cta .btn::after{
  content:"";position:absolute;right:-18px;top:50%;width:60px;height:60px;margin-top:-30px;
  border-radius:58% 42% 46% 54%/50% 60% 40% 50%;
  background:var(--nh-rose) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%235B1A2B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat;
  box-shadow:0 0 0 2.5px var(--nh-dark),4px 5px 0 2.5px var(--nh-dark);
  animation:nhWob 6s ease-in-out infinite alternate;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
}
#header .header-display-desktop .header-actions-action--cta .btn:hover::after{transform:rotate(-30deg)}
@keyframes nhWob{
  0%{border-radius:58% 42% 46% 54%/50% 60% 40% 50%}
  50%{border-radius:46% 54% 58% 42%/58% 44% 56% 42%}
  100%{border-radius:52% 48% 42% 58%/44% 56% 48% 52%}
}
@media (prefers-reduced-motion:reduce){#header .header-actions-action--cta .btn::after{animation:none}}

#header .header-display-mobile{height:var(--nh-h)!important;width:100%!important;align-items:stretch!important;position:relative!important;
  background:var(--nh-bg)!important;border-radius:var(--nh-r)!important;box-shadow:0 0 0 1.5px var(--nh-edge),var(--nh-lift)!important}
#header .header-display-mobile .header-burger{
  display:flex!important;align-items:center!important;justify-content:center!important;
  height:var(--nh-h)!important;width:var(--nh-h)!important;flex:0 0 auto!important;
  padding:0!important;margin:0!important;border-right:var(--nh-line)!important;
}
#header .header-display-mobile .header-title-nav-wrapper{flex:1 1 auto!important;min-width:0!important;padding:0 20px!important;align-items:center!important}
#header .header-display-mobile .header-actions-action--cta a.btn{
  height:var(--nh-h)!important;display:flex!important;align-items:center!important;
  margin:0!important;padding:0 16px!important;border-radius:0 var(--nh-r) var(--nh-r) 0!important;border:0!important;border-left:var(--nh-line)!important;
  background:var(--nh-wine)!important;color:var(--nh-cream)!important;font-weight:700!important;
}

@media (max-width:767px){:root{--nh-float-y:10px;--nh-float-x:12px}}
</style>

02HeroThe lined tutor cube

Section IDnovule-cube

Paste in: Settings, Developer tools, Code injection, Header

Ready to paste

<!-- Tutor Cube styles · Novule
     Paste below the Ruled Cells Header. Section Anchor Link: novule-cube -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,800..900&display=swap">
<script>window.FB_CFG = Object.assign(window.FB_CFG || {}, {
  CUBE_STYLE: 'photo',
  GAP: 72,
  HINT: 'Tap the cube to hear it',
  BOTTOM_SPACE: -60
});</script>
<style>
#novule-cube{
--fb-ink:var(--headingLargeColor);
--fb-side-front:hsl(var(--accent-hsl));
--fb-side-depth:hsl(var(--darkAccent-hsl));
--fb-heading:var(--heading-font-font-family);
--fb-body:var(--body-font-font-family);
--fb-cube:clamp(290px,33vw,600px);
--fb-bold:.06em;
--fb-line:1.6px;
--fb-line-c:hsl(var(--darkAccent-hsl));
--fb-top:110px;
--fb-y:20px}
#novule-cube.fb-ready{display:block!important;padding:0!important;min-height:0!important}
#novule-cube.fb-ready>.content-wrapper{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important}
#novule-cube .fb-stage{position:relative;z-index:1;width:100%;height:100vh;height:100svh;min-height:640px;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none}

#novule-cube .fb-wash{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:hsl(var(--white-hsl))}
#novule-cube .fb-wash img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;display:block}
#novule-cube .fb-wash::after{content:"";position:absolute;inset:0}
#novule-cube.fb-bg-knockout .fb-wash img{display:none}
#novule-cube.fb-bg-frosted .fb-wash img{filter:blur(26px) saturate(1.1)}
#novule-cube.fb-bg-frosted .fb-wash::after{background:hsl(var(--white-hsl));opacity:.55}
#novule-cube.fb-bg-duotone .fb-wash img{filter:grayscale(1) contrast(1.05)}
#novule-cube.fb-bg-duotone .fb-wash::after{background:hsl(var(--accent-hsl));mix-blend-mode:multiply;opacity:.88}
#novule-cube.fb-bg-photo .fb-wash{background:none}

#novule-cube .fb-mid{position:absolute;left:50%;top:var(--fb-cy,calc(50% + var(--fb-y)));width:var(--fb-cube);height:calc(var(--fb-cube) * 1.15);transform:translate(-50%,-50%);z-index:2;perspective:1500px;perspective-origin:50% 40%;cursor:grab;will-change:transform,opacity}
#novule-cube .fb-mid.is-drag{cursor:grabbing}
#novule-cube .fb-floor{position:absolute;left:50%;top:calc(100% + 26px);width:160%;height:56px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,hsla(var(--darkAccent-hsl),.24),transparent);filter:blur(8px);pointer-events:none}
#novule-cube .fb-cube{position:absolute;inset:0;transform-style:preserve-3d}
#novule-cube .fb-fc{position:absolute;inset:0;overflow:hidden;border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:hsl(var(--lightAccent-hsl))}
#novule-cube .fb-fc img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%;-webkit-user-drag:none;pointer-events:none}
#novule-cube .fb-fc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,0,6,.45));pointer-events:none}
#novule-cube .fb-fc em{position:absolute;left:14px;bottom:12px;z-index:1;font-style:normal;font-family:var(--fb-body);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#fff}
#novule-cube .fb-shade{position:absolute;inset:0;background:#000;pointer-events:none;border-radius:10px}

#novule-cube .fb-fc .pf{position:absolute;overflow:hidden;display:block}
#novule-cube .fb-fc .pf img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
#novule-cube .cs-framed .fb-fc{background:#fffdf8;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
#novule-cube .cs-framed .fb-fc::after{display:none}
#novule-cube .cs-framed .pf{inset:9% 9% 20% 9%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
#novule-cube .cs-framed em{left:0;right:0;bottom:6.5%;text-align:center;color:hsl(var(--accent-hsl));letter-spacing:.24em}
#novule-cube .cs-folderword .fb-fc{background:none;overflow:visible;border-radius:0}
#novule-cube .cs-folderword .fb-fc::after{display:none}
#novule-cube .cs-folderword .tabw{position:absolute;left:0;top:.5%;width:54%;height:10%;transform-origin:50% 100%;transform-style:preserve-3d;z-index:1}
#novule-cube .cs-folderword .tab{position:absolute;inset:0;border-radius:12px 16px 0 0;background:hsl(var(--accent-hsl));display:flex;align-items:center;padding-left:14px}
#novule-cube .cs-folderword .tab em{position:static;font-size:11px;color:hsl(var(--white-hsl))}
#novule-cube .cs-folderword .body{position:absolute;left:0;right:0;top:9%;bottom:0;border-radius:0 16px 16px 16px;background:hsl(var(--accent-hsl));padding:9px;display:flex;flex-direction:column}
#novule-cube .cs-folderword .ph{display:block;flex:1;min-height:0;border-radius:4px 10px 10px 10px;overflow:hidden}
#novule-cube .cs-folderword .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
#novule-cube .cs-folderword .wd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 6px 6px;color:hsl(var(--white-hsl))}
#novule-cube .cs-folderword .wd strong{font-family:var(--fb-heading);font-weight:400;font-size:calc(var(--fb-cube) * .14 * var(--wf,1));line-height:1;white-space:nowrap}
#novule-cube .cs-folderword .wd small{font-family:var(--fb-body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.8;text-align:right}
#novule-cube .cs-folderword .fb-fc:nth-child(even) .tab,#novule-cube .cs-folderword .fb-fc:nth-child(even) .body{background:hsl(var(--lightAccent-hsl))}
#novule-cube .cs-folderword .fb-fc:nth-child(even) .tab em,#novule-cube .cs-folderword .fb-fc:nth-child(even) .wd{color:hsl(var(--darkAccent-hsl))}
#novule-cube .cs-folderword .fb-shade{top:9%;border-radius:0 16px 16px 16px}
#novule-cube .cs-folderword .fb-fc{transform-style:preserve-3d;--wc:hsl(var(--accent-hsl))}
#novule-cube .cs-folderword .fb-fc:nth-child(even){--wc:color-mix(in srgb,hsl(var(--lightAccent-hsl)),hsl(var(--accent-hsl)) 40%)}
#novule-cube .cs-folderword .w{position:absolute;display:block;pointer-events:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:color-mix(in srgb,var(--wc),#000 42%)}
#novule-cube .cs-folderword .wt,#novule-cube .cs-folderword .tt{background:color-mix(in srgb,var(--wc),#000 18%)}
#novule-cube .cs-folderword .wb{background:color-mix(in srgb,var(--wc),#000 58%)}
#novule-cube .cs-folderword .wt{left:16px;right:16px;top:calc(9% - var(--fd));height:var(--fd);transform-origin:50% 100%;transform:rotateX(90deg)}
#novule-cube .cs-folderword .wb{left:16px;right:16px;top:100%;height:var(--fd);transform-origin:50% 0;transform:rotateX(-90deg)}
#novule-cube .cs-folderword .wl{top:calc(9% + 4px);bottom:16px;left:calc(-1 * var(--fd));width:var(--fd);transform-origin:100% 50%;transform:rotateY(-90deg)}
#novule-cube .cs-folderword .wr{top:calc(9% + 16px);bottom:16px;left:100%;width:var(--fd);transform-origin:0 50%;transform:rotateY(90deg)}
#novule-cube .cs-folderword .tt{left:12px;right:16px;top:calc(-1 * var(--fd));height:var(--fd);transform-origin:50% 100%;transform:rotateX(90deg)}
#novule-cube .cs-folderword .tlw{top:12px;bottom:0;left:calc(-1 * var(--fd));width:var(--fd);transform-origin:100% 50%;transform:rotateY(-90deg)}
#novule-cube .cs-folderword .trw{top:16px;bottom:0;left:100%;width:var(--fd);transform-origin:0 50%;transform:rotateY(90deg)}
#novule-cube .cs-folderword .tab,#novule-cube .cs-folderword .body{transform:translateZ(.5px);backface-visibility:hidden;-webkit-backface-visibility:hidden}
#novule-cube .cs-folderword .body{border-radius:0 12px 12px 12px}
#novule-cube .cs-folderword .away .w,#novule-cube .cs-folderword .side .tabw .w{visibility:hidden}
#novule-cube .cs-folderword .tab{border-radius:10px 12px 0 0}
#novule-cube .cs-folderword .tab{box-shadow:inset 0 0 0 var(--fb-line) var(--fb-line-c),inset 0 2.5px 0 rgba(255,255,255,.24)}
#novule-cube .cs-folderword .body{box-shadow:inset 0 0 0 var(--fb-line) var(--fb-line-c),inset 0 2.5px 0 rgba(255,255,255,.2)}
#novule-cube .cs-folderword .fb-fc:nth-child(even) .tab,#novule-cube .cs-folderword .fb-fc:nth-child(even) .body{box-shadow:inset 0 0 0 var(--fb-line) hsl(var(--accent-hsl)),inset 0 2px 0 rgba(255,255,255,.35)}
#novule-cube .cs-folderword .ph{box-shadow:0 0 0 var(--fb-line) var(--fb-line-c)}
#novule-cube .cs-folderword .fb-fc:nth-child(even) .ph{box-shadow:0 0 0 var(--fb-line) hsl(var(--accent-hsl))}
#novule-cube .cs-folderword .tab{padding-right:10px}
#novule-cube .cs-folderword .tab em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#novule-cube .cs-folderword .fb-fc>*{backface-visibility:hidden;-webkit-backface-visibility:hidden}
#novule-cube .cs-folderword .fb-shade{transform:translateZ(1px)}
#novule-cube .fb-ring .fb-cube{transform-style:preserve-3d}
#novule-cube .fb-ring .fb-fc{left:21%;right:21%;top:21%;bottom:21%;inset:21%}
#novule-cube .fb-ring.cs-folderword .wd strong{font-size:calc(var(--fb-cube) * .085 * var(--wf,1))}
#novule-cube .fb-ring.cs-folderword .wd small{font-size:9px;letter-spacing:.12em}
#novule-cube .fb-ring.cs-folderword .tab em{font-size:9.5px}
#novule-cube .fb-ring.cs-folderword .tab{padding-left:10px}
#novule-cube .fb-ring.cs-folderword .tabw{width:74%}
#novule-cube .fb-ring.cs-folderword .body{padding:6px;gap:6px}
#novule-cube .fb-ring .hear{height:24px;padding:0 7px;right:7px;bottom:7px}
#novule-cube .fb-ring .fb-floor{width:200%}
#novule-cube .cs-folder .fb-fc{background:none;overflow:visible;border-radius:0}
#novule-cube .cs-folder .fb-fc::after{display:none}
#novule-cube .cs-folder .tab{position:absolute;left:0;top:0;width:52%;height:12%;border-radius:12px 16px 0 0;background:hsl(var(--accent-hsl));display:flex;align-items:center;padding-left:14px}
#novule-cube .cs-folder .tab em{position:static;font-size:11px;color:hsl(var(--white-hsl))}
#novule-cube .cs-folder .body{position:absolute;left:0;right:0;top:10%;bottom:0;border-radius:0 14px 14px 14px;overflow:hidden;border:7px solid hsl(var(--accent-hsl));background:hsl(var(--accent-hsl))}
#novule-cube .cs-folder .body img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;border-radius:0 8px 8px 8px}
#novule-cube .cs-folder .fb-fc:nth-child(even) .tab,#novule-cube .cs-folder .fb-fc:nth-child(even) .body{background:hsl(var(--lightAccent-hsl));border-color:hsl(var(--lightAccent-hsl))}
#novule-cube .cs-folder .fb-fc:nth-child(even) .tab em{color:hsl(var(--darkAccent-hsl))}
#novule-cube .cs-folder .fb-shade{top:10%;border-radius:0 14px 14px 14px}
#novule-cube .cs-polaroid .fb-fc{background:#fff;border-radius:3px}
#novule-cube .cs-polaroid .fb-fc::after{display:none}
#novule-cube .cs-polaroid .pf{inset:6% 6% 22% 6%}
#novule-cube .cs-polaroid em{left:0;right:0;bottom:6%;text-align:center;font-family:'Caveat','Comic Sans MS',cursive;font-size:24px;letter-spacing:0;text-transform:none;color:#3a2a2c}
#novule-cube .cs-word .fb-fc{background:hsl(var(--accent-hsl))}
#novule-cube .cs-word .fb-fc:nth-child(even){background:hsl(var(--lightAccent-hsl))}
#novule-cube .cs-word .fb-fc::after{display:none}
#novule-cube .cs-word .pf{left:0;right:0;top:0;height:70%}
#novule-cube .cs-word strong{position:absolute;left:14px;right:14px;bottom:12%;font-family:var(--fb-heading);font-weight:400;font-size:calc(var(--fb-cube) * .15);line-height:1;color:hsl(var(--white-hsl))}
#novule-cube .cs-word .fb-fc:nth-child(even) strong{color:hsl(var(--darkAccent-hsl))}
#novule-cube .cs-word em{bottom:5%;opacity:.8}
#novule-cube .cs-word .fb-fc:nth-child(even) em{color:hsl(var(--darkAccent-hsl))}
#novule-cube .cs-arch .fb-fc{background:hsl(var(--lightAccent-hsl));border-radius:6px}
#novule-cube .cs-arch .fb-fc:nth-child(even){background:hsl(var(--accent-hsl))}
#novule-cube .cs-arch .fb-fc::after{display:none}
#novule-cube .cs-arch .pf{inset:10% 12% 18% 12%;border-radius:999px 999px 8px 8px}
#novule-cube .cs-arch em{left:0;right:0;bottom:6.5%;text-align:center;color:hsl(var(--darkAccent-hsl))}
#novule-cube .cs-arch .fb-fc:nth-child(even) em{color:hsl(var(--white-hsl))}
#novule-cube .fb-capt,#novule-cube .fb-capb{position:absolute;left:0;background:hsl(var(--accent-hsl))}
#novule-cube .fb-capt{background:linear-gradient(135deg,hsl(var(--accent-hsl)),hsl(var(--darkAccent-hsl)))}
#novule-cube .cs-block .fb-fc{border-radius:0}
#novule-cube .cs-block .fb-shade{border-radius:0}
#novule-cube .fb-slice{position:absolute;left:0;right:0;height:33.34%;transform-style:preserve-3d}
#novule-cube .cs-sliced .fb-fc{border-radius:0;background-repeat:no-repeat}
#novule-cube .cs-sliced .fb-fc::after{display:none}
#novule-cube .cs-sliced .fb-slice:first-child .fb-fc{border-radius:10px 10px 0 0}
#novule-cube .cs-sliced .fb-slice:last-child .fb-fc{border-radius:0 0 10px 10px}
#novule-cube .cs-glass .fb-fc{background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.12));backface-visibility:visible;-webkit-backface-visibility:visible;border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 0 30px rgba(255,255,255,.35);backdrop-filter:blur(2px);transition:opacity .3s}
#novule-cube .cs-glass .fb-fc::after{display:none}
#novule-cube .cs-glass .pf{inset:12%;border-radius:8px;box-shadow:0 10px 24px hsla(var(--darkAccent-hsl),.18)}
#novule-cube .cs-glass em{left:12%;bottom:4%;color:hsl(var(--accent-hsl))}
#novule-cube .cs-glass .gl{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 45%,transparent 60%);pointer-events:none}
#novule-cube .fb-glow{position:absolute;left:50%;top:50%;width:160%;height:160%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,hsla(var(--lightAccent-hsl),.55),transparent);z-index:-1;pointer-events:none}

#novule-cube .fb-mid:focus-visible{outline:3px solid hsl(var(--accent-hsl));outline-offset:14px;border-radius:12px}
#novule-cube .cs-folderword .ph{position:relative}
#novule-cube .hear{position:absolute;right:10px;bottom:10px;display:none;align-items:center;gap:3px;height:30px;padding:0 10px;border-radius:99px;background:hsla(var(--white-hsl),.92);box-shadow:0 6px 14px rgba(0,0,0,.15)}
#novule-cube .can-speak .hear{display:flex}
#novule-cube .hear i{display:block;width:3px;height:8px;border-radius:2px;background:hsl(var(--accent-hsl))}
#novule-cube .hear i:nth-child(2){height:14px}#novule-cube .hear i:nth-child(3){height:11px}#novule-cube .hear i:nth-child(4){height:6px}
#novule-cube .speaking .hear i{animation:fbWave .5s ease-in-out infinite alternate}
#novule-cube .speaking .hear i:nth-child(2){animation-delay:.12s}#novule-cube .speaking .hear i:nth-child(3){animation-delay:.24s}#novule-cube .speaking .hear i:nth-child(4){animation-delay:.36s}
@keyframes fbWave{from{transform:scaleY(.4)}to{transform:scaleY(1.6)}}
#novule-cube .speaking .fb-cube{animation:fbPop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes fbPop{40%{scale:1.04}}
#novule-cube .fb-hint{position:absolute;left:50%;top:calc(var(--fb-cy,calc(50% + var(--fb-y))) + var(--fb-ch,calc(var(--fb-cube) * 1.15)) / 2 + 92px);transform:translateX(-50%);z-index:4;font-family:var(--fb-body);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fb-ink);opacity:.55;white-space:nowrap;transition:opacity .5s;pointer-events:none}
#novule-cube .fb-hint.gone{opacity:0!important}

#novule-cube .fb-cap{position:absolute;left:50%;top:calc(var(--fb-cy,calc(50% + var(--fb-y))) + var(--fb-ch,calc(var(--fb-cube) * 1.15)) / 2 + 50px);transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:12px;white-space:nowrap;text-decoration:none!important;color:var(--fb-ink)!important;font-family:var(--fb-body);font-size:15px;transition:opacity .3s,transform .3s}
#novule-cube .fb-cap b{font-family:var(--fb-heading);font-weight:400;font-size:22px;color:hsl(var(--accent-hsl))}
#novule-cube .fb-cap i{font-style:normal;opacity:.75}
#novule-cube .fb-cap .ar{display:inline-flex;width:32px;height:32px;border-radius:50%;align-items:center;justify-content:center;background:var(--primaryButtonBackgroundColor);color:var(--primaryButtonTextColor);font-size:14px;transition:transform .3s}
#novule-cube .fb-cap:hover .ar{transform:rotate(-45deg)}
#novule-cube .fb-cap.sw{opacity:0;transform:translate(-50%,6px)}
#novule-cube.fb-bg-duotone .fb-cap{color:hsl(var(--white-hsl))!important}
#novule-cube.fb-bg-duotone .fb-cap b{color:hsl(var(--lightAccent-hsl))}

#novule-cube .fb-corners .fb-cap,#novule-cube .fb-corners .fb-hint{display:none}
#novule-cube .fb-intro{position:absolute;left:max(24px,4vw);bottom:var(--fb-bb,46px);z-index:5;max-width:min(560px,calc(50vw - var(--fb-cube) * .4 - 5vw));transition:opacity .3s}
#novule-cube .fb-head{margin:0;font-family:var(--fb-heading);font-weight:400;font-size:clamp(22px,2.2vw,38px);line-height:1.06;letter-spacing:-.005em;color:hsl(var(--accent-hsl));text-wrap:balance}
#novule-cube .fb-sub{margin:10px 0 0;font-family:var(--fb-body);font-size:15px;line-height:1.45;color:var(--fb-ink);opacity:.75}
#novule-cube .fb-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-top:22px}
#novule-cube .fb-btn{position:relative;display:inline-flex;align-items:center;height:48px;margin-bottom:4px;padding:0 24px;margin-right:53px;border-radius:999px;background:hsl(var(--accent-hsl));color:hsl(var(--white-hsl))!important;font-family:var(--fb-body);font-size:15px;text-decoration:none!important;white-space:nowrap;box-shadow:0 4px 0 hsl(var(--darkAccent-hsl));transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
#novule-cube .fb-btn:after{content:'\2192';position:absolute;left:calc(100% + 5px);top:0;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:hsl(var(--lightAccent-hsl));color:hsl(var(--accent-hsl));font-size:19px;box-shadow:0 4px 0 hsl(var(--darkAccent-hsl));transition:transform .45s cubic-bezier(.3,1.7,.5,1)}
#novule-cube .fb-btn:hover{transform:translateY(-2px)}
#novule-cube .fb-btn:hover:after{transform:translateX(4px) rotate(-45deg)}
#novule-cube .fb-btn:active{transform:translateY(3px)}
#novule-cube .fb-tip{display:block;margin-top:14px;font-family:var(--fb-body);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fb-ink);opacity:.55;transition:opacity .5s}
#novule-cube .fb-tip.gone{opacity:0}
#novule-cube .fb-meta{position:absolute;right:max(24px,4vw);top:var(--fb-mt,calc(var(--fb-hb,110px) + var(--fb-gap,16px)));z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right;font-family:var(--fb-body);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;line-height:1.6;color:hsl(var(--accent-hsl));transition:opacity .3s}
#novule-cube .fb-meta:before{content:'';width:min(260px,22vw);height:1.5px;background:currentColor;margin-bottom:14px;opacity:.85}
#novule-cube .fb-ml{font-family:var(--fb-heading);font-weight:400;font-size:17px;letter-spacing:0;text-transform:none}
#novule-cube .fb-m1,#novule-cube .fb-m2{transition:opacity .25s,transform .25s}
#novule-cube .fb-meta.sw .fb-m1,#novule-cube .fb-meta.sw .fb-m2{opacity:0;transform:translateY(4px)}
#novule-cube .fb-dots{position:absolute;right:max(24px,4vw);bottom:var(--fb-bb,46px);z-index:5;display:flex;gap:6px;transition:opacity .3s}
#novule-cube .fb-dots button{width:36px;height:36px;border-radius:50%;border:1.5px solid hsl(var(--accent-hsl));background:hsl(var(--white-hsl));color:hsl(var(--accent-hsl));font-family:var(--fb-heading);font-size:12px;letter-spacing:0;cursor:pointer;padding:0;transition:background .2s,color .2s,transform .3s cubic-bezier(.3,1.7,.5,1)}
#novule-cube .fb-dots button:hover{transform:translateY(-2px)}
#novule-cube .fb-dots button.on{background:hsl(var(--accent-hsl));color:hsl(var(--white-hsl))}

#novule-cube .fb-side{position:absolute;top:var(--fb-cy,calc(50% + var(--fb-y)));margin:0;font-family:var(--fb-heading);font-weight:400;font-size:clamp(64px,13vw,280px);line-height:1;color:var(--fb-ink);pointer-events:none;z-index:3;white-space:nowrap;will-change:transform,opacity;perspective:900px}
#novule-cube .fb-left{left:3vw;transform-origin:right center}
#novule-cube .fb-right{right:3vw;transform-origin:left center}
#novule-cube .x3w{display:inline-block;position:relative;transform-style:preserve-3d}
#novule-cube .x3{--ex:.0055em;--ey:.0055em;display:block;position:relative;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.5,1.6,.5,1)}
#novule-cube .fb-right.out .x3,#novule-cube .fb-left.out .x3{transform:rotateX(-95deg) scale(.6);transition:transform .22s ease-in}
#novule-cube .x3 .sz{visibility:hidden}
#novule-cube .x3 .ly{position:absolute;left:0;top:0;-webkit-text-stroke:var(--fb-bold) currentColor}
#novule-cube .x3 .sz{-webkit-text-stroke:var(--fb-bold) transparent}
#novule-cube .x3 .lf{color:var(--fb-side-front)}
#novule-cube .x3 .ln{color:var(--fb-line-c);-webkit-text-stroke:calc(var(--fb-bold) + var(--fb-line) * 2) var(--fb-line-c)}
#novule-cube .x3.ink{--fb-side-depth:hsl(var(--accent-hsl))}
#novule-cube .x3.ink .lf{color:var(--fb-ink)}
#novule-cube .x3.blush{--fb-side-depth:hsl(var(--accent-hsl))}
#novule-cube .x3.cream .lf{color:hsl(var(--white-hsl))}
#novule-cube .x3.blush .lf{color:hsl(var(--lightAccent-hsl))}
#novule-cube .x3.tutorfill .lf{-webkit-text-stroke:0;color:transparent;background:linear-gradient(hsla(var(--darkAccent-hsl),.25),hsla(var(--darkAccent-hsl),.25)),var(--x3-img) 50% 25%/cover;-webkit-background-clip:text;background-clip:text;transition:background-image .3s}
#novule-cube .x3.bgfill .lf{-webkit-text-stroke:0;color:transparent;background-image:linear-gradient(hsla(var(--accent-hsl),.62),hsla(var(--accent-hsl),.62)),var(--x3-bg);background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text}

@media (max-width:767px){
#novule-cube .fb-ring{--fb-cube:54vw}
#novule-cube .fb-hint{top:calc(50% + var(--fb-cube) * .575 + 76px);font-size:11px}
#novule-cube{--fb-cube:60vw;--fb-top:90px;--fb-y:0px}
#novule-cube .fb-stage{min-height:620px}
#novule-cube .fb-side{left:0;right:0;text-align:center;font-size:19vw}
#novule-cube .fb-left{top:calc(var(--fb-top) + 6px);transform-origin:center}
#novule-cube .fb-right{top:auto;bottom:40px;transform-origin:center}
#novule-cube .fb-cap{font-size:13px;top:calc(50% + var(--fb-cube) * .575 + 40px)}
#novule-cube .fb-cap b{font-size:18px}
#novule-cube .fb-corners .fb-cap,#novule-cube .fb-corners .fb-hint{display:flex}
#novule-cube .fb-corners .fb-hint{display:block}
#novule-cube .fb-intro,#novule-cube .fb-meta,#novule-cube .fb-dots{display:none}
}

#proof-spotlight-novule .user-items-list{padding-top:36px!important}

#novule-cube .cs-folderword .body{border-radius:0 7px 7px 7px}
#novule-cube .cs-folderword .tab{border-radius:7px 9px 0 0}
#novule-cube .cs-folderword .wt{left:3px;right:3px}
#novule-cube .cs-folderword .wb{left:3px;right:3px}
#novule-cube .cs-folderword .wl{top:9%;bottom:3px}
#novule-cube .cs-folderword .wr{top:calc(9% + 3px);bottom:3px}
#novule-cube .cs-folderword .tt{left:2px;right:3px}
#novule-cube .cs-folderword .tlw{top:2px;bottom:-1px}
#novule-cube .cs-folderword .trw{top:3px;bottom:0}
#novule-cube .cs-folderword .wt{top:calc(9% - var(--fd) + 1.5px)}
#novule-cube .cs-folderword .tt{top:calc(1.5px - var(--fd))}
#novule-cube .cs-folderword .body{box-shadow:inset 0 0 0 var(--fb-line) var(--fb-line-c)}
#novule-cube .cs-folderword .tab{box-shadow:inset 0 0 0 var(--fb-line) var(--fb-line-c)}
#novule-cube .fb-mid{perspective-origin:50% -20%!important}
#novule-cube,#novule-cube .content-wrapper,#novule-cube .section-border{overflow:visible!important}
#novule-cube .fb-stage{overflow:visible!important;overflow-x:clip!important;overflow-y:visible!important}
#novule-cube .cs-folderword .tab{border-radius:2px 9px 0 0}

#novule-cube .fb-mid.has-say .hear{display:none!important}
#novule-cube .fb-say{position:absolute;right:-21%;bottom:15%;z-index:6;display:flex;align-items:center;gap:10px;margin:0;padding:9px 15px 9px 9px;border:1.5px solid hsl(var(--accent-hsl));border-radius:20px 20px 20px 5px;background:hsl(var(--white-hsl));color:hsl(var(--darkAccent-hsl));font:inherit;text-align:left;cursor:pointer;box-shadow:0 14px 26px -16px hsla(var(--darkAccent-hsl),.7),0 3px 0 hsl(var(--accent-hsl));transition:transform .35s cubic-bezier(.3,1.7,.5,1),opacity .25s;animation:fbSayIn .7s cubic-bezier(.3,1.6,.5,1) .6s both}
#novule-cube .fb-say:hover{transform:translateY(-3px) rotate(-1.5deg)}
#novule-cube .fb-say:active{transform:translateY(2px)}
#novule-cube .fb-say:focus-visible{outline:2px solid hsl(var(--accent-hsl));outline-offset:4px}
#novule-cube .fb-say.sw{opacity:0;transform:translateY(6px) scale(.96)}
#novule-cube .fb-pl{flex:none;width:34px;height:34px;border-radius:50%;background:hsl(var(--accent-hsl));display:grid;place-items:center}
#novule-cube .fb-pl:after{content:'';margin-left:3px;border-left:10px solid hsl(var(--white-hsl));border-top:6.5px solid transparent;border-bottom:6.5px solid transparent}
#novule-cube .fb-st{display:flex;flex-direction:column;line-height:1.1}
#novule-cube .fb-st small{font-family:var(--fb-body);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:hsl(var(--accent-hsl));opacity:.75;margin-bottom:3px}
#novule-cube .fb-st b{font-family:var(--fb-heading);font-weight:400;font-size:19px;white-space:nowrap}
#novule-cube .fb-st b em{font-family:var(--fb-body);font-style:normal;font-size:13px;opacity:.7;margin-left:3px}
#novule-cube .fb-wv{display:flex;align-items:center;gap:3px;height:26px}
#novule-cube .fb-wv i{display:block;width:3px;height:7px;border-radius:2px;background:hsl(var(--accent-hsl));animation:fbWave 1.1s ease-in-out infinite alternate}
#novule-cube .fb-wv i:nth-child(2){animation-delay:-.25s}#novule-cube .fb-wv i:nth-child(3){animation-delay:-.55s}#novule-cube .fb-wv i:nth-child(4){animation-delay:-.8s}#novule-cube .fb-wv i:nth-child(5){animation-delay:-.4s}#novule-cube .fb-wv i:nth-child(6){animation-delay:-.95s}
#novule-cube .speaking .fb-wv i{animation-duration:.32s}
#novule-cube .speaking .fb-pl{animation:fbPulse .6s ease-out infinite}
@keyframes fbWave{to{height:22px}}
@keyframes fbPulse{0%{box-shadow:0 0 0 0 hsla(var(--accent-hsl),.45)}100%{box-shadow:0 0 0 10px hsla(var(--accent-hsl),0)}}
@keyframes fbSayIn{from{opacity:0;transform:translateY(14px) scale(.85)}}
@media (max-width:767px){#novule-cube .fb-say{right:-4%;bottom:6%;padding:7px 12px 7px 7px;gap:8px}#novule-cube .fb-pl{width:28px;height:28px}#novule-cube .fb-st b{font-size:16px}}
@media (prefers-reduced-motion:reduce){#novule-cube .fb-say,#novule-cube .fb-wv i{animation:none}}

#header{transition:background-color .2s ease,box-shadow .2s ease}
html.fb-top #header,html.fb-top #header .header-background,html.fb-top #header .header-inner{background-color:transparent!important;background-image:none!important;box-shadow:none!important;border-color:transparent!important}
#novule-cube .cs-folderword .fb-fc.side .tabw .w.tt{visibility:visible}
#novule-cube .cs-folderword .fb-fc.away .tabw .w.tt{visibility:hidden}

#novule-cube .cs-folderword .fb-fc .w{visibility:visible!important;opacity:var(--wv,1);transition:none!important}
#novule-cube .cs-folderword .fb-fc .tabw .w{opacity:calc(var(--wv,1) * var(--tv,1))}

#novule-cube{
  --ln-c:hsl(var(--darkAccent-hsl));
  --ln-cream:hsl(var(--white-hsl));
  --ln-hf:var(--ln-cream);
  --ln-sq:11px;
  --ln-e:calc(var(--ln-sq) / 2 - .75px);
  --ln-in:calc(var(--ln-sq) - 3px);
  --ln-sel:
    linear-gradient(var(--ln-hf),var(--ln-hf)) 1.5px 1.5px/var(--ln-in) var(--ln-in) no-repeat,
    linear-gradient(var(--ln-hf),var(--ln-hf)) calc(100% - 1.5px) 1.5px/var(--ln-in) var(--ln-in) no-repeat,
    linear-gradient(var(--ln-hf),var(--ln-hf)) 1.5px calc(100% - 1.5px)/var(--ln-in) var(--ln-in) no-repeat,
    linear-gradient(var(--ln-hf),var(--ln-hf)) calc(100% - 1.5px) calc(100% - 1.5px)/var(--ln-in) var(--ln-in) no-repeat,
    linear-gradient(var(--ln-c),var(--ln-c)) 0 0/var(--ln-sq) var(--ln-sq) no-repeat,
    linear-gradient(var(--ln-c),var(--ln-c)) 100% 0/var(--ln-sq) var(--ln-sq) no-repeat,
    linear-gradient(var(--ln-c),var(--ln-c)) 0 100%/var(--ln-sq) var(--ln-sq) no-repeat,
    linear-gradient(var(--ln-c),var(--ln-c)) 100% 100%/var(--ln-sq) var(--ln-sq) no-repeat,
    linear-gradient(var(--ln-c),var(--ln-c)) 0 var(--ln-e)/100% 1.5px no-repeat,
    linear-gradient(var(--ln-c),var(--ln-c)) 0 calc(100% - var(--ln-e))/100% 1.5px no-repeat,
    linear-gradient(var(--ln-c),var(--ln-c)) var(--ln-e) 0/1.5px 100% no-repeat,
    linear-gradient(var(--ln-c),var(--ln-c)) calc(100% - var(--ln-e)) 0/1.5px 100% no-repeat;
  --ln-lift:0 2px 4px hsla(var(--darkAccent-hsl),.16),0 14px 28px -12px hsla(var(--darkAccent-hsl),.5);
  --ln-grid:hsla(var(--darkAccent-hsl),.16);
  --ln-shadow:.32;
  --ln-ground:0;
  --ln-focus:50% 6%;
}
@media (min-width:768px){#novule-cube{--fb-cube:clamp(270px,28vw,500px)}}

#novule-cube .cs-photo .fb-fc{border-radius:0!important;overflow:visible!important;background:var(--ln-cream)!important;box-shadow:inset 0 0 0 1.5px var(--ln-c)}
#novule-cube .cs-photo .fb-fc img{position:absolute;inset:0;object-position:var(--ln-focus)!important}
#novule-cube .cs-photo .fb-shade{border-radius:0!important}
#novule-cube .cs-photo .fb-fc::after{content:"";position:absolute;inset:calc(var(--ln-e) * -1);background:var(--ln-sel);pointer-events:none;z-index:4;opacity:0;transition:opacity .35s ease}
#novule-cube .cs-photo .fb-fc:not(.side)::after{opacity:1}
#novule-cube .cs-photo .fb-fc.side img{filter:grayscale(1) contrast(1.05)}
#novule-cube .cs-photo .fb-fc.side::before{content:"";position:absolute;inset:0;z-index:1;background:hsl(var(--accent-hsl));mix-blend-mode:multiply;opacity:.38;pointer-events:none}
#novule-cube .cs-photo .fb-fc em{left:0!important;bottom:0!important;z-index:3;padding:9px 14px;background:var(--ln-cream);color:var(--ln-c)!important;
  font:500 11px/1 ui-monospace,Menlo,Consolas,monospace!important;letter-spacing:.16em!important;box-shadow:inset 0 0 0 1.5px var(--ln-c)}
#novule-cube .cs-photo .fb-fc{counter-increment:face}
#novule-cube .cs-photo .fb-cube{counter-reset:face}
#novule-cube .cs-photo .fb-fc em::after{content:"0" counter(face) "/04";opacity:.55}

#novule-cube .cs-photo .fb-cube::before{content:"";position:absolute;left:0;top:0;width:var(--fb-cube);height:var(--fb-cube);
  transform-origin:50% 0;transform:translateZ(calc(var(--fb-cube) / 2)) rotateX(-90deg);
  background:
    repeating-linear-gradient(0deg,var(--ln-grid) 0 1px,transparent 1px calc(var(--fb-cube) / 8)),
    repeating-linear-gradient(90deg,var(--ln-grid) 0 1px,transparent 1px calc(var(--fb-cube) / 8)),
    var(--ln-cream);
  box-shadow:inset 0 0 0 1.5px var(--ln-c)}
#novule-cube .cs-photo .fb-cube::after{content:"";position:absolute;left:50%;top:100%;width:calc(var(--fb-cube) * 1.32);height:calc(var(--fb-cube) * 1.32);
  margin:calc(var(--fb-cube) * -.66) 0 0 calc(var(--fb-cube) * -.66);transform:translateY(1px) rotateX(90deg);pointer-events:none;
  border:1.5px solid hsla(var(--darkAccent-hsl),.28);box-sizing:border-box}
#novule-cube .cs-photo .fb-floor{opacity:.8}

#novule-cube .fb-meta{gap:0!important;outline:1.5px solid var(--ln-c);background:hsl(var(--white-hsl));min-width:min(300px,24vw)}
#novule-cube .fb-meta:before{display:none!important}
#novule-cube .fb-meta>*{display:block;width:100%;padding:9px 16px;border-bottom:1.5px solid var(--ln-c);box-sizing:border-box}
#novule-cube .fb-meta>*:last-child{border-bottom:0}
#novule-cube .fb-meta::after{content:"";position:absolute;inset:calc(var(--ln-e) * -1 - .75px);background:var(--ln-sel);pointer-events:none}
#novule-cube .fb-dots{gap:0!important;outline:1.5px solid var(--ln-c);background:hsl(var(--white-hsl))}
#novule-cube .fb-dots button{border-radius:0!important;border:0!important;border-right:1.5px solid var(--ln-c)!important;width:54px!important;height:42px!important;font-family:"Figtree",system-ui,sans-serif!important;font-weight:700!important;transform:none!important}
#novule-cube .fb-dots button:last-child{border-right:0!important}
#novule-cube .fb-dots button{opacity:1!important;background:hsl(var(--white-hsl))!important;color:hsl(var(--accent-hsl))!important}
#novule-cube .fb-dots button.on{background:hsl(var(--accent-hsl))!important;color:var(--ln-cream)!important}
#novule-cube .fb-dots button:hover:not(.on){background:color-mix(in srgb,hsl(var(--accent-hsl)) 8%,hsl(var(--white-hsl)))!important}
#novule-cube .fb-btn{border-radius:0!important;outline:1.5px solid var(--ln-c);box-shadow:var(--ln-lift)!important;margin-right:56px!important;font-weight:700}
#novule-cube .fb-btn:after{border-radius:0!important;left:100%!important;top:0!important;width:56px!important;height:100%!important;background:hsl(var(--white-hsl))!important;outline:1.5px solid var(--ln-c);box-shadow:none!important;border:0!important}
#novule-cube .fb-btn:hover:after{transform:none!important}
#novule-cube .fb-say{border-radius:0!important;outline:1.5px solid var(--ln-c)!important;box-shadow:var(--ln-lift)!important;border:0!important}
#novule-cube .fb-say .fb-pl{border-radius:0!important}

#novule-cube .cs-photo .fb-fc img{inset:6% 6% 19% 6%;width:88%;height:75%;box-shadow:0 0 0 1.5px var(--ln-c)}
#novule-cube .cs-photo .fb-fc em{left:0!important;right:0!important;bottom:0!important;height:13%;display:flex;align-items:center;justify-content:space-between;padding:0 7%;font-size:12px!important;background:transparent!important;box-shadow:none!important;border-top:1.5px solid var(--ln-c);box-sizing:border-box}
#novule-cube .cs-photo .fb-fc.side::before{inset:6% 6% 19% 6%}
#novule-cube .cs-photo .fb-cube::before{background:var(--ln-sel),hsl(var(--accent-hsl))}

@media (min-width:768px){
  #novule-cube{--ln-ws:clamp(60px,8vw,170px);--ln-lead:46px}
  #novule-cube .fb-side{font-size:var(--ln-ws)!important}
  #novule-cube .fb-right::after{content:"Your first word";position:absolute;right:0;bottom:calc(100% + .1em + 12px);
    font:500 11px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:hsl(var(--accent-hsl));opacity:.7;white-space:nowrap}
  #novule-cube .fb-meta{top:calc(var(--fb-cy) + var(--ln-ws) * .56 + var(--ln-lead))!important;bottom:auto!important;
    right:max(24px,4vw)!important;min-width:0!important;padding:12px 16px!important;gap:6px!important;
    outline:1.5px solid var(--ln-c);background:hsl(var(--white-hsl));box-shadow:none}
  #novule-cube .fb-meta>*{padding:0!important;border:0!important;width:auto!important}
  #novule-cube .fb-meta .fb-ml{display:none!important}
  #novule-cube .fb-meta .fb-m1{font-family:var(--fb-heading);font-size:19px;letter-spacing:0;text-transform:none;line-height:1.2;color:hsl(var(--accent-hsl))}
  #novule-cube .fb-meta .fb-m2{font:500 11px/1.3 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;opacity:.75}
  #novule-cube .fb-meta:before{display:block!important;content:""!important;position:absolute;right:44px;bottom:100%;width:1.5px!important;height:var(--ln-lead)!important;margin:0!important;opacity:1!important;background:var(--ln-c)!important}
  #novule-cube .fb-meta::after{inset:auto!important;right:calc(44px - 3.25px)!important;bottom:calc(100% + var(--ln-lead) - 4px)!important;width:8px;height:8px;background:var(--ln-c)!important}
}

#novule-cube .fb-mid{perspective:2600px!important;perspective-origin:50% 30%!important}
#novule-cube .cs-photo .fb-cube::after{border-color:transparent!important}
#novule-cube .fb-floor{opacity:1!important;filter:blur(10px)!important;width:115%!important;height:34px!important;top:calc(100% + 34px)!important;
  background:radial-gradient(closest-side,hsla(var(--darkAccent-hsl),var(--ln-shadow,.32)),transparent)!important}
#novule-cube .fb-stage::after{content:"";position:absolute;z-index:1;pointer-events:none;
  left:max(24px,4vw);right:max(24px,4vw);top:calc(var(--fb-cy) + var(--fb-ch) / 2 + 52px);height:1.5px;
  background:linear-gradient(90deg,transparent,hsla(var(--darkAccent-hsl),var(--ln-ground,.35)) 18%,hsla(var(--darkAccent-hsl),var(--ln-ground,.35)) 82%,transparent)}

#novule-cube .cs-photo .fb-cube::after{border:1.5px solid hsl(var(--darkAccent-hsl))!important;background:hsl(var(--white-hsl));
  width:calc(var(--fb-cube) * 1.5)!important;height:calc(var(--fb-cube) * 1.5)!important;margin:calc(var(--fb-cube) * -.75) 0 0 calc(var(--fb-cube) * -.75)!important;
  box-shadow:0 0 0 calc(var(--fb-cube) * .03) hsl(var(--white-hsl)),0 0 0 calc(var(--fb-cube) * .03 + 1.5px) hsla(var(--darkAccent-hsl),.35)}
#novule-cube .fb-floor{top:calc(100% + 60px)!important;width:170%!important}

#novule-cube .cs-photo .fb-cube::after{background:hsl(var(--lightAccent-hsl))!important;border:calc(var(--fb-cube) * .06) solid hsl(var(--accent-hsl))!important;
  box-shadow:inset 0 0 0 1.5px hsl(var(--white-hsl)),0 0 0 1.5px hsl(var(--darkAccent-hsl))!important}

@media (min-width:768px){
  #novule-cube .fb-side{font-family:"Archivo","Arial Black",system-ui,sans-serif!important;font-weight:900!important;font-stretch:112%;letter-spacing:-.045em}
  #novule-cube .x3 .ly:not(.lf){display:none!important}
  #novule-cube .x3 .ly,#novule-cube .x3 .sz{-webkit-text-stroke:0!important}
  #novule-cube .x3 .lf{color:hsl(var(--darkAccent-hsl))!important}
  #novule-cube .fb-left{margin-left:.14em!important}
  #novule-cube .fb-right{margin-right:.14em!important}
  #novule-cube{--ln-up:calc(var(--ln-ws) * .4);--ln-pad:.12em;--ln-pad-x:.3em}
  #novule-cube .fb-side{margin-top:calc(var(--ln-up) * -1)!important}
  #novule-cube .fb-left::before,#novule-cube .fb-right::before{content:"";position:absolute;z-index:-1;left:calc(var(--ln-pad-x) * -1);right:calc(var(--ln-pad-x) * -1);top:calc(.06em - var(--ln-pad));bottom:calc(-.06em - var(--ln-pad));
    background:var(--ln-sel),hsl(var(--lightAccent-hsl));box-shadow:var(--ln-lift);pointer-events:none}
  #novule-cube .fb-stage::before{content:"";position:absolute;z-index:1;pointer-events:none;left:max(24px,4vw);right:max(24px,4vw);
    top:calc(var(--fb-cy) - var(--ln-up));height:1.5px;background:hsl(var(--darkAccent-hsl))}
  #novule-cube .fb-left{margin-left:var(--ln-pad-x)!important}
  #novule-cube .fb-right{margin-right:var(--ln-pad-x)!important}
  #novule-cube .fb-right::after{bottom:calc(100% + .1em + var(--ln-pad) + 14px)!important;right:calc(var(--ln-pad-x) * -1)!important}
  #novule-cube{--ln-lift-t:1}
  #novule-cube .x3 .lf{text-shadow:0 calc(.03em * var(--ln-lift-t)) 0 hsla(var(--accent-hsl),.35),0 calc(.09em * var(--ln-lift-t)) calc(.1em * var(--ln-lift-t)) hsla(var(--darkAccent-hsl),.3)}
  #novule-cube .fb-meta{top:calc(var(--fb-cy) - var(--ln-up) + var(--ln-ws) * .5 + var(--ln-ws) * var(--ln-pad-n,.18) + var(--ln-lead))!important}
}

@media (min-width:768px){
  #novule-cube .x3 .lf{text-shadow:none!important}
}

@media (min-width:768px){
  #novule-cube{--ln-bar:30px;--ln-card-ws:.82}
  #novule-cube .fb-side{font-family:var(--fb-heading)!important;font-weight:400!important;font-stretch:100%!important;letter-spacing:-.02em!important;
    font-size:calc(var(--ln-ws) * var(--ln-card-ws))!important}
  #novule-cube .x3 .lf{text-shadow:none!important}
  #novule-cube .fb-left .x3 .lf{color:hsl(var(--darkAccent-hsl))!important}
  #novule-cube .fb-right .x3 .lf{color:hsl(var(--white-hsl))!important}
  #novule-cube .fb-left::before,#novule-cube .fb-right::before{top:calc(.06em - var(--ln-pad) - var(--ln-bar))!important;
    box-shadow:0 2px 4px hsla(var(--darkAccent-hsl),.14),0 18px 34px -16px hsla(var(--darkAccent-hsl),.5)!important}
  #novule-cube .fb-left::before{background:var(--ln-sel),linear-gradient(hsla(var(--darkAccent-hsl),.45),hsla(var(--darkAccent-hsl),.45)) 0 var(--ln-bar)/100% 1.5px no-repeat,hsl(var(--lightAccent-hsl))!important}
  #novule-cube .fb-right::before{background:var(--ln-sel),linear-gradient(hsla(var(--white-hsl),.3),hsla(var(--white-hsl),.3)) 0 var(--ln-bar)/100% 1.5px no-repeat,hsl(var(--accent-hsl))!important}
  #novule-cube .fb-left::after,#novule-cube .fb-right::after{position:absolute;top:calc(.06em - var(--ln-pad) - var(--ln-bar))!important;bottom:auto!important;
    height:var(--ln-bar);display:flex;align-items:center;white-space:nowrap;pointer-events:none;
    font:500 11px/1 ui-monospace,Menlo,Consolas,monospace;font-style:normal;letter-spacing:.16em;text-transform:uppercase;opacity:1}
  #novule-cube .fb-left::after{content:"In English";left:calc(var(--ln-pad-x) * -1 + 14px);color:hsl(var(--darkAccent-hsl));opacity:.75}
  #novule-cube .fb-right::after{content:"Your first word"!important;right:calc(var(--ln-pad-x) * -1 + 14px)!important;color:hsl(var(--lightAccent-hsl))}
}

@media (min-width:768px){
  #novule-cube{--ln-card-w:3.1em;--ln-pad-b:.26em;--ln-pad-n:.3}
  #novule-cube .fb-left,#novule-cube .fb-right{width:var(--ln-card-w)!important;text-align:center!important}
  #novule-cube .fb-left .x3w,#novule-cube .fb-right .x3w{margin:0 auto}
  #novule-cube .fb-left::before,#novule-cube .fb-right::before{bottom:calc(var(--ln-pad-b) * -1)!important}
  #novule-cube .fb-right::before{background:
    linear-gradient(hsl(var(--accent-hsl)),hsl(var(--accent-hsl))) 1.5px 1.5px/var(--ln-in) var(--ln-in) no-repeat,
    linear-gradient(hsl(var(--accent-hsl)),hsl(var(--accent-hsl))) calc(100% - 1.5px) 1.5px/var(--ln-in) var(--ln-in) no-repeat,
    linear-gradient(hsl(var(--accent-hsl)),hsl(var(--accent-hsl))) 1.5px calc(100% - 1.5px)/var(--ln-in) var(--ln-in) no-repeat,
    linear-gradient(hsl(var(--accent-hsl)),hsl(var(--accent-hsl))) calc(100% - 1.5px) calc(100% - 1.5px)/var(--ln-in) var(--ln-in) no-repeat,
    linear-gradient(hsl(var(--white-hsl)),hsl(var(--white-hsl))) 0 0/var(--ln-sq) var(--ln-sq) no-repeat,
    linear-gradient(hsl(var(--white-hsl)),hsl(var(--white-hsl))) 100% 0/var(--ln-sq) var(--ln-sq) no-repeat,
    linear-gradient(hsl(var(--white-hsl)),hsl(var(--white-hsl))) 0 100%/var(--ln-sq) var(--ln-sq) no-repeat,
    linear-gradient(hsl(var(--white-hsl)),hsl(var(--white-hsl))) 100% 100%/var(--ln-sq) var(--ln-sq) no-repeat,
    linear-gradient(hsl(var(--white-hsl)),hsl(var(--white-hsl))) 0 var(--ln-e)/100% 1.5px no-repeat,
    linear-gradient(hsl(var(--white-hsl)),hsl(var(--white-hsl))) 0 calc(100% - var(--ln-e))/100% 1.5px no-repeat,
    linear-gradient(hsl(var(--white-hsl)),hsl(var(--white-hsl))) var(--ln-e) 0/1.5px 100% no-repeat,
    linear-gradient(hsl(var(--white-hsl)),hsl(var(--white-hsl))) calc(100% - var(--ln-e)) 0/1.5px 100% no-repeat,
    linear-gradient(hsla(var(--white-hsl),.35),hsla(var(--white-hsl),.35)) 0 var(--ln-bar)/100% 1.5px no-repeat,
    hsl(var(--accent-hsl))!important}
  #novule-cube .fb-meta{top:calc(var(--fb-cy) - var(--ln-up) + var(--ln-ws) * var(--ln-card-ws) * .5 + var(--ln-ws) * var(--ln-card-ws) * var(--ln-pad-n) + var(--ln-lead))!important}
}

@media (min-width:768px){
  #novule-cube{--ln-card-ws:.68;--ln-card-w:2.9em}
  #novule-cube .fb-stage::before{content:none!important}
  #novule-cube .fb-side{z-index:1!important}
  #novule-cube .fb-left .x3w,#novule-cube .fb-right .x3w{display:block!important;width:100%}
  #novule-cube .fb-left .x3,#novule-cube .fb-right .x3{width:max-content;margin:0 auto}
  #novule-cube .fb-left .x3w::after,#novule-cube .fb-right .x3w::after{content:"";position:absolute;top:50%;height:1.5px;pointer-events:none;
    background:hsl(var(--darkAccent-hsl));
    width:max(0px,calc(50vw - var(--fb-cube) * .42 - max(24px,4vw) - var(--ln-card-w) - var(--ln-pad-x) * 2))}
  #novule-cube .fb-left .x3w::after{left:calc(100% + var(--ln-pad-x))}
  #novule-cube .fb-right .x3w::after{right:calc(100% + var(--ln-pad-x))}
}
@media (max-width:767px){
  #novule-cube{--fb-cube:54vw;--ln-rug-m:1.28}
  #novule-cube .cs-photo .fb-cube::after{
    width:calc(var(--fb-cube) * var(--ln-rug-m))!important;height:calc(var(--fb-cube) * var(--ln-rug-m))!important;
    margin:calc(var(--fb-cube) * var(--ln-rug-m) / -2) 0 0 calc(var(--fb-cube) * var(--ln-rug-m) / -2)!important;
    border-width:calc(var(--fb-cube) * .045)!important}
  #novule-cube .fb-floor{width:130%!important;top:calc(100% + 34px)!important}
}
@media (min-width:768px){
  html body section#novule-cube{position:relative!important;z-index:6!important}
  html body section#novule-cube + section#novule-hero{--top-space:28px!important}
}
</style>

<style>
#novule-cube{
  --st-r:22px;
  --st-face-r:14px;
  --st-label:600 13px/1 var(--fb-body);
  --st-soft:0 2px 4px hsla(var(--darkAccent-hsl),.10),0 20px 36px -18px hsla(var(--darkAccent-hsl),.45);
}

html body #novule-cube .cs-photo .fb-fc{border-radius:var(--st-face-r)!important;box-shadow:inset 0 0 0 1.5px hsla(var(--darkAccent-hsl),.18)!important;overflow:hidden!important}
html body #novule-cube .cs-photo .fb-fc::after{display:none!important}
html body #novule-cube .cs-photo .fb-fc img{border-radius:calc(var(--st-face-r) - 4px)!important;box-shadow:none!important}
html body #novule-cube .cs-photo .fb-fc.side img{filter:none!important}
html body #novule-cube .cs-photo .fb-fc.side::before{background:hsl(var(--darkAccent-hsl))!important;mix-blend-mode:normal!important;opacity:.08!important;border-radius:calc(var(--st-face-r) - 4px)}
html body #novule-cube .cs-photo .fb-shade{border-radius:var(--st-face-r)!important}
html body #novule-cube .cs-photo .fb-fc em{border-top:0!important;justify-content:center!important;font:var(--st-label)!important;letter-spacing:.01em!important;text-transform:none!important;color:hsl(var(--accent-hsl))!important}
html body #novule-cube .cs-photo .fb-fc em::after{content:none!important}
html body #novule-cube .cs-photo .fb-cube::before{background:hsl(var(--accent-hsl))!important;border-radius:var(--st-face-r);box-shadow:none!important}

@media (min-width:768px){
  html body #novule-cube .fb-left::before,
  html body #novule-cube .fb-right::before{border-radius:var(--st-r)!important;box-shadow:var(--st-soft)!important}
  html body #novule-cube .fb-left::before{background:hsl(var(--lightAccent-hsl))!important}
  html body #novule-cube .fb-right::before{background:hsl(var(--accent-hsl))!important}
  html body #novule-cube .fb-left::after,
  html body #novule-cube .fb-right::after{font:var(--st-label)!important;letter-spacing:.01em!important;text-transform:none!important;opacity:.85!important}
  html body #novule-cube .fb-left::after{content:"in English"!important}
  html body #novule-cube .fb-right::after{content:"your first word"!important}
  html body #novule-cube .fb-left .x3w::after,
  html body #novule-cube .fb-right .x3w::after{content:none!important}
  html body #novule-cube .fb-meta{outline:0!important;border-radius:18px!important;box-shadow:var(--st-soft)!important;padding:12px 18px!important}
  html body #novule-cube .fb-meta::before,
  html body #novule-cube .fb-meta::after{display:none!important}
  html body #novule-cube .fb-meta .fb-m2{font:var(--st-label)!important;letter-spacing:.01em!important;text-transform:none!important;opacity:.7}
}

html body #novule-cube .fb-btn{border-radius:999px!important;outline:0!important;box-shadow:0 4px 0 hsl(var(--darkAccent-hsl))!important;margin-right:56px!important}
html body #novule-cube .fb-btn:after{left:calc(100% + 6px)!important;width:48px!important;height:48px!important;border-radius:50%!important;outline:0!important;background:hsl(var(--lightAccent-hsl))!important;box-shadow:0 4px 0 hsl(var(--darkAccent-hsl))!important}
html body #novule-cube .fb-btn:hover:after{transform:rotate(-35deg)!important}
html body #novule-cube .fb-dots{outline:0!important;background:none!important;gap:8px!important}
html body #novule-cube .fb-dots button{width:46px!important;height:46px!important;border-radius:50%!important;border:0!important;box-shadow:inset 0 0 0 1.5px hsla(var(--accent-hsl),.35)!important;font:700 13px/1 var(--fb-body)!important;transition:transform .35s cubic-bezier(.34,1.56,.64,1),background-color .2s!important}
html body #novule-cube .fb-dots button:hover{transform:translateY(-3px)!important}
html body #novule-cube .fb-dots button.on{box-shadow:none!important}
html body #novule-cube .fb-say{border-radius:22px 22px 22px 6px!important;outline:0!important;box-shadow:var(--st-soft),inset 0 0 0 1.5px hsla(var(--accent-hsl),.25)!important}
html body #novule-cube .fb-say .fb-pl{border-radius:50%!important}
html body #novule-cube .fb-say .fb-st small{font:var(--st-label)!important;font-size:11px!important;letter-spacing:.01em!important;text-transform:none!important}

html body #novule-cube .cs-photo .fb-cube::after{border-radius:28px!important}
@media (min-width:768px){
  html body #novule-cube .fb-left{rotate:-3deg}
  html body #novule-cube .fb-right{rotate:3deg}
}
html body #novule-cube .fb-tip{text-transform:none!important;letter-spacing:.01em!important;font:var(--st-label)!important;opacity:.6}

@keyframes stLand{0%{scale:1 1}35%{scale:1.035 .965}65%{scale:.985 1.015}100%{scale:1 1}}
@keyframes stPop{0%{scale:.86}55%{scale:1.06}100%{scale:1}}
html body #novule-cube .fb-mid.st-land{animation:stLand .55s ease-out}
html body #novule-cube .fb-side.st-pop{animation:stPop .5s cubic-bezier(.34,1.56,.64,1)}
@media (prefers-reduced-motion:reduce){html body #novule-cube .fb-mid.st-land,html body #novule-cube .fb-side.st-pop{animation:none}}

@media (min-width:768px){
  html body #novule-cube .fb-left::before,html body #novule-cube .fb-right::before{border-radius:20px!important;
    box-shadow:0 0 0 2.5px hsl(var(--darkAccent-hsl)),7px 7px 0 2.5px hsl(var(--darkAccent-hsl))!important}
  html body #novule-cube .fb-meta{box-shadow:0 0 0 2px hsl(var(--darkAccent-hsl)),5px 5px 0 2px hsl(var(--darkAccent-hsl))!important}
}
html body #novule-cube .cs-photo .fb-fc{box-shadow:inset 0 0 0 2.5px hsl(var(--darkAccent-hsl))!important}
html body #novule-cube .cs-photo .fb-fc img{box-shadow:0 0 0 2px hsl(var(--darkAccent-hsl))!important}
html body #novule-cube .cs-photo .fb-cube::before{box-shadow:inset 0 0 0 2.5px hsl(var(--darkAccent-hsl))!important}
html body #novule-cube .fb-btn{box-shadow:0 0 0 2.5px hsl(var(--darkAccent-hsl)),5px 5px 0 2.5px hsl(var(--darkAccent-hsl))!important}
html body #novule-cube .fb-btn:after{box-shadow:0 0 0 2.5px hsl(var(--darkAccent-hsl)),4px 4px 0 2.5px hsl(var(--darkAccent-hsl))!important}
html body #novule-cube .fb-dots button{box-shadow:0 0 0 2px hsl(var(--darkAccent-hsl)),3px 3px 0 2px hsl(var(--darkAccent-hsl))!important;background:hsl(var(--white-hsl))!important}
html body #novule-cube .fb-dots button.on{background:hsl(var(--lightAccent-hsl))!important;color:hsl(var(--darkAccent-hsl))!important}
html body #novule-cube .fb-say{box-shadow:0 0 0 2px hsl(var(--darkAccent-hsl)),4px 4px 0 2px hsl(var(--darkAccent-hsl))!important}

@media (min-width:768px){
html body #novule-cube .fb-left::before{background:radial-gradient(circle at 0 58%,hsl(var(--white-hsl)) 0 14px,hsl(var(--darkAccent-hsl)) 14px 16.5px,transparent 17px),radial-gradient(circle at 100% 58%,hsl(var(--white-hsl)) 0 14px,hsl(var(--darkAccent-hsl)) 14px 16.5px,transparent 17px),linear-gradient(90deg,transparent calc(100% - 46px),hsl(var(--darkAccent-hsl)) calc(100% - 46px) calc(100% - 44.5px),transparent calc(100% - 44.5px)) 0 0/100% 100% no-repeat,hsl(var(--lightAccent-hsl))!important;border-radius:14px!important}
html body #novule-cube .fb-right::before{background:radial-gradient(circle at 0 58%,hsl(var(--white-hsl)) 0 14px,hsl(var(--darkAccent-hsl)) 14px 16.5px,transparent 17px),radial-gradient(circle at 100% 58%,hsl(var(--white-hsl)) 0 14px,hsl(var(--darkAccent-hsl)) 14px 16.5px,transparent 17px),linear-gradient(90deg,transparent 44.5px,hsla(var(--white-hsl),.4) 44.5px 46px,transparent 46px) 0 0/100% 100% no-repeat,hsl(var(--accent-hsl))!important;border-radius:14px!important}}

@media (min-width:768px){
  html body #novule-cube .fb-left,html body #novule-cube .fb-right{rotate:0deg!important}
  html body #novule-cube .fb-meta{background:none!important;box-shadow:none!important;outline:0!important;padding:0!important;border-radius:0!important;min-width:0!important;align-items:flex-end!important;gap:4px!important}
  html body #novule-cube .fb-meta .fb-m1{font-size:20px!important}
}
html body #novule-cube .fb-dots button.on{background:hsl(var(--accent-hsl))!important;color:hsl(var(--white-hsl))!important;box-shadow:0 0 0 2px hsl(var(--darkAccent-hsl)),3px 3px 0 2px hsl(var(--darkAccent-hsl))!important}
@media (min-width:768px){
  html body #novule-cube .fb-meta .fb-m1{color:hsl(var(--darkAccent-hsl))!important;opacity:1!important}
  html body #novule-cube .fb-meta .fb-m2{color:hsl(var(--darkAccent-hsl))!important;opacity:.75!important}
}
html body #novule-cube{--bb:hsl(var(--accent-hsl));--bt:hsl(var(--white-hsl));--ba:hsl(var(--lightAccent-hsl));--bat:hsl(var(--accent-hsl))}
html body #novule-cube .fb-row .fb-btn{transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,background-color .3s,color .3s!important}

html body #novule-cube .fb-row .fb-btn{isolation:isolate;height:58px!important;padding:0 64px 0 28px!important;margin-right:26px!important;border-radius:999px!important;background:var(--bb)!important;color:var(--bt)!important}
html body #novule-cube .fb-row .fb-btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:999px;background:var(--ba);clip-path:inset(0 0 0 100% round 999px);transition:clip-path .5s cubic-bezier(.65,0,.35,1)}
html body #novule-cube .fb-row .fb-btn:hover::before{clip-path:inset(0 0 0 0 round 999px)}
html body #novule-cube .fb-row .fb-btn:hover{color:var(--bat)!important}
html body #novule-cube .fb-row .fb-btn:after{left:auto!important;right:-22px!important;top:50%!important;width:56px!important;height:56px!important;transform:translateY(-50%)!important;border-radius:58% 42% 46% 54%/50% 60% 40% 50%!important;background:var(--ba)!important;color:var(--bat)!important;box-shadow:0 0 0 2.5px hsl(var(--darkAccent-hsl)),4px 4px 0 2.5px hsl(var(--darkAccent-hsl))!important;outline:0!important;animation:wob 6s ease-in-out infinite alternate}
html body #novule-cube .fb-row .fb-btn:hover:after{background:var(--bb)!important;color:var(--bt)!important;transform:translateY(-50%) rotate(-30deg)!important}
@keyframes wob{0%{border-radius:58% 42% 46% 54%/50% 60% 40% 50%}50%{border-radius:46% 54% 58% 42%/58% 44% 56% 42%}100%{border-radius:52% 48% 42% 58%/44% 56% 48% 52%}}
</style>
<script>
(function(){
  function hook(){
    var s=document.querySelector('#novule-cube .fb-stage');
    if(!s){setTimeout(hook,300);return}
    var r=s.querySelector('.fb-right'),l=s.querySelector('.fb-left'),m=s.querySelector('.fb-mid'),was=false;
    if(!r||!l||!m)return;
    function kick(el,c){el.classList.remove(c);void el.offsetWidth;el.classList.add(c)}
    new MutationObserver(function(){
      var out=r.classList.contains('out');
      if(was&&!out){kick(m,'st-land');kick(l,'st-pop');kick(r,'st-pop')}
      was=out;
    }).observe(r,{attributes:true,attributeFilter:['class']});
  }
  if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',hook);else hook();
  window.addEventListener('mercury:load',function(){setTimeout(hook,600)});
})();
</script>

<style>
@keyframes fbShow{to{visibility:visible}}
body:not(.sqs-edit-mode-active) #novule-cube:not(.fb-ready) > *{visibility:hidden;animation:fbShow 0s 4s forwards}

@media (max-width:767px){
  html body #novule-cube{--fb-cube:min(54vw,290px)!important;--m-c:min(54vw,290px);--m-t:calc(178px + var(--m-c) * 1.6)}
  html body #novule-cube .fb-stage{min-height:calc(var(--m-t) + 310px)!important}
  html body #novule-cube .fb-stage::before{content:none!important}

  html body #novule-cube .fb-intro{display:block!important;position:static!important;max-width:none!important;opacity:1!important}
  html body #novule-cube .fb-head{position:absolute!important;top:112px;left:24px;right:24px;z-index:6;text-align:center;font-size:30px!important;line-height:1.08!important}
  html body #novule-cube .fb-tip,html body #novule-cube .fb-cap,html body #novule-cube .fb-hint,html body #novule-cube .fb-side{display:none!important}

  html body #novule-cube .fb-mid{top:calc(186px + var(--m-c) * .72)!important}

  html body #novule-cube .fb-say{top:calc(100% + var(--m-c) * .305 - 8px)!important;bottom:auto!important;
    left:calc(50% - min(50vw - 24px, 210px))!important;right:calc(50% - min(50vw - 24px, 210px))!important;width:auto!important;margin:0!important;
    display:flex!important;align-items:center!important;gap:12px!important;padding:10px 18px 10px 10px!important;
    border:0!important;outline:0!important;border-radius:999px!important;
    background:hsl(var(--accent-hsl))!important;color:hsl(var(--white-hsl))!important;
    box-shadow:0 0 0 1.5px hsl(var(--darkAccent-hsl)),4px 5px 0 1.5px hsl(var(--darkAccent-hsl))!important;
    transform:none!important;rotate:none!important}
  html body #novule-cube .fb-say.sw{opacity:.4}
  html body #novule-cube .fb-say .fb-pl{width:38px!important;height:38px!important;border-radius:50%!important;background:hsl(var(--lightAccent-hsl))!important}
  html body #novule-cube .fb-say .fb-pl:after{border-left-color:hsl(var(--accent-hsl))!important}
  html body #novule-cube .fb-say .fb-st{display:grid!important;text-align:left!important;line-height:1!important}
  html body #novule-cube .fb-say .fb-st small{font:600 10px/1 var(--fb-body)!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:hsl(var(--lightAccent-hsl))!important;opacity:1!important}
  html body #novule-cube .fb-say .fb-st b{font-family:var(--fb-heading)!important;font-weight:400!important;font-size:26px!important;line-height:1.05!important;color:hsl(var(--white-hsl))!important}
  html body #novule-cube .fb-say .fb-wv{margin-left:auto!important}
  html body #novule-cube .fb-say .fb-wv i{background:hsl(var(--lightAccent-hsl))!important}

  html body #novule-cube .fb-meta{display:flex!important;top:calc(var(--m-t) + 84px)!important;left:24px!important;right:24px!important;bottom:auto!important;
    align-items:center!important;text-align:center!important;gap:2px!important;min-width:0!important;outline:0!important;background:none!important;box-shadow:none!important}
  html body #novule-cube .fb-meta::before,html body #novule-cube .fb-meta::after,html body #novule-cube .fb-meta .fb-ml{display:none!important}
  html body #novule-cube .fb-meta > *{padding:0!important;border:0!important;width:auto!important;text-transform:none!important;letter-spacing:0!important}
  html body #novule-cube .fb-meta .fb-m1{font-family:var(--fb-heading)!important;font-size:18px!important;line-height:1.2!important;color:hsl(var(--darkAccent-hsl))!important}
  html body #novule-cube .fb-meta .fb-m2{font-family:var(--fb-body)!important;font-size:13px!important;opacity:.75}

  html body #novule-cube .fb-dots{display:flex!important;top:calc(var(--m-t) + 140px)!important;bottom:auto!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important}
  html body #novule-cube .fb-row{position:absolute!important;top:calc(var(--m-t) + 198px);left:0;right:0;z-index:6;justify-content:center!important}
  html body #novule-cube .fb-row .fb-btn{padding-right:66px!important}
  html body #novule-cube .fb-row .fb-btn::after{right:6px!important;top:50%!important;width:46px!important;height:46px!important;
    transform:translateY(-50%)!important;border-radius:50%!important;box-shadow:0 0 0 2px hsl(var(--darkAccent-hsl))!important}
}
</style>

Paste in: Settings, Developer tools, Code injection, Footer (the cube)

Ready to paste

<!-- Tutor Cube · Novule
     Edit everything in the List section (Anchor Link: novule-cube):
     Section title: word pairs, English on the left, e.g. "Hey = Ehi, Hi = Hola, Hello = Bonjour"
     One item per tutor, in the same order as the words:
       Title: the tutor's name
       Description: language · word · small line, e.g. "Italian · Ehi · means hello"
       Image: their photo. Button (optional): where their card links
     One item with no image: the headline. Section button: Meet your tutor.
     Add ?hello=fr to the page address to demo a language. -->
<script>
(function () {
var SECTION = '#novule-cube';
var WORD_SECONDS = 3;
var TILT = true;
var CUBE_STYLE = 'folderword';
var GAP = 0; 
var TOP_SPACE = 24;
var LAYOUT = 'corners';
var HEADLINE = 'Learn it from a person, not an app.';
var META_LABEL = 'Your first word';
var FOLDER_DEPTH = 22;
var SHAPE = 'cube';
var SHRINK = .45;
var TAB_OPEN = 0;
var WORD_STYLE = 'straight';
var REST_ANGLE = 22;
var EXTRUDE = true;
var DEPTH = 26;
var FIT_HEIGHT = true;
var BOTTOM_SPACE = 8;
var BG_MODE = 'knockout';
var WORD_FACE = 'blush';
var LINE = 'Your {lang} tutor';
var GREET_VISITOR = true;
var SPEAK = true;
var SAY_IT = true;
var SAY_LABEL = 'Say it';
var HINT = 'Tap the folder to hear it';
var LANGS = { english: 'en', spanish: 'es', french: 'fr', italian: 'it', portuguese: 'pt', german: 'de', dutch: 'nl', swedish: 'sv', norwegian: 'no', danish: 'da', finnish: 'fi', polish: 'pl', turkish: 'tr', greek: 'el', romanian: 'ro', russian: 'ru', ukrainian: 'uk', arabic: 'ar', hebrew: 'he', hindi: 'hi', japanese: 'ja', korean: 'ko', chinese: 'zh', mandarin: 'zh', cantonese: 'zh-HK', thai: 'th', vietnamese: 'vi', indonesian: 'id', swahili: 'sw', yoruba: 'yo', czech: 'cs', hungarian: 'hu' };
var state = null;
function cfg(k, v) { return (window.FB_CFG && window.FB_CFG[k] != null) ? window.FB_CFG[k] : v; }
function txt(el) { return el ? el.textContent.replace(/\s+/g, ' ').trim() : ''; }
function imgSrc(img) { if (!img) return ''; var u = img.getAttribute('data-src') || img.currentSrc || img.src || ''; if (u.indexOf('data:') === 0) return ''; return u.split('?')[0] + (u.indexOf('squarespace-cdn') > -1 ? '?format=1000w' : ''); }
function el(tag, cls, html) { var e = document.createElement(tag); if (cls) e.className = cls; if (html != null) e.innerHTML = html; return e; }
function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); }
function mod(a, n) { return ((a % n) + n) % n; }
function x3(word, face, flat) {
var n = cfg('DEPTH', DEPTH), h = '<span class="x3w"><span class="x3 ' + face + '">';
for (var k = n; k >= 1; k--) h += '<span class="ly" style="transform:' + (flat ? 'translate(calc(var(--ex) * ' + k + '), calc(var(--ey) * ' + k + '))' : 'translateZ(' + (-k * 2.6).toFixed(1) + 'px)') + ';color:color-mix(in srgb, var(--fb-side-depth), #000 ' + Math.round(22 + k / n * 50) + '%)">' + esc(word) + '</span>';
return h + '<span class="ly ln">' + esc(word) + '</span><span class="ly lf">' + esc(word) + '</span><span class="sz">' + esc(word) + '</span></span></span>';
}
function build() {
var s = document.querySelector(SECTION);
if (!s || state) return;
if (document.body.classList.contains('sqs-edit-mode-active')) return;
var items = Array.prototype.slice.call(s.querySelectorAll('li.list-item'));
if (!items.length) return;
var EX = cfg('EXTRUDE', EXTRUDE), MODE = cfg('BG_MODE', BG_MODE), FACE = cfg('WORD_FACE', WORD_FACE), WS = cfg('WORD_STYLE', WORD_STYLE);
var btn = s.querySelector('.list-section-button-container a');
var data = items.map(function (li) {
var b = li.querySelector('.list-item-content__button-container a, a.list-item-content__button');
var dEl = li.querySelector('.list-item-content__description'), ps = [];
if (dEl) { var tmp = document.createElement('div'); tmp.innerHTML = dEl.innerHTML.replace(/<br\s*\/?>/gi, '\n').replace(/<\/(p|div|li|h\d)>/gi, '\n'); ps = (tmp.textContent || '').split('\n').map(function (x) { return x.replace(/\s+/g, ' ').trim(); }).filter(function (x) { return x; }); }
if (ps.length === 1 && /[\u00B7\u2022|]/.test(ps[0])) ps = ps[0].split(/[\u00B7\u2022|]/).map(function (x) { return x.trim(); }).filter(function (x) { return x; });
var title = txt(li.querySelector('.list-item-content__title')), raw = ps.join(' ');
ps = ps.filter(function (x) { return !/^\[.*\]$/.test(x); });
ps = ps.reduce(function (a, x) { var m = x.match(/^([A-Za-z]+)([A-Z\u00C0-\u00DE\u00A1\u00BF].*)$/); if (m && LANGS[m[1].toLowerCase()]) { a.push(m[1], m[2].trim()); } else a.push(x); return a; }, []);
var pr = ''; ps = ps.filter(function (x) { if (!pr && /^\/.+\/$/.test(x)) { pr = x; return false; } return true; });
var li2 = -1, lg = '';
ps.forEach(function (x, i) { var w = x.replace(/^learning\s+/i, '').toLowerCase().split(/[\s(]/)[0]; if (li2 < 0 && LANGS[w]) { li2 = i; lg = x.replace(/^learning\s+/i, ''); } });
if (li2 < 0 && ps.length) { li2 = 0; lg = ps[0].replace(/^learning\s+/i, ''); }
var rest = ps.filter(function (x, i) { return i !== li2; });
var nm = title, gr = rest[0] || '', sy = rest[1] || '';
if (/[!\u00A1\u00BF?]/.test(title) || /\[[^\]]*\]/.test(raw)) { gr = title; nm = ''; sy = rest[0] && !/[!\u00A1\u00BF?]/.test(rest[0]) && rest[0].split(' ').length > 1 ? rest[0] : ''; if (rest[0] && rest[0].split(' ').length === 1 && !/[!\u00A1\u00BF?]/.test(rest[0])) nm = rest[0]; }
return { img: imgSrc(li.querySelector('.list-item-media img')), name: nm, lang: lg, code: LANGS[lg.toLowerCase().split(/[\s(]/)[0]] || '', greet: gr, say: sy, pron: pr, sub: raw,
href: (b && b.getAttribute('href')) || (btn && btn.getAttribute('href')) || '' };
});
var headItem = null;
data = data.filter(function (d) { if (!d.img && !headItem) { headItem = d; return false; } return true; });
if (!data.length) return;
var picked = null, startStep = 0;
if (cfg('GREET_VISITOR', GREET_VISITOR)) {
var force = (location.search.match(/[?&]hello=([a-z-]+)/i) || [])[1] || cfg('FORCE_LANG', '');
var prefs = force ? [force] : (navigator.languages || [navigator.language || '']);
for (var pi2 = 0; pi2 < prefs.length && !picked; pi2++) {
var base = String(prefs[pi2]).toLowerCase(), b2 = base.split('-')[0];
for (var di = 0; di < data.length; di++) { var c = (data[di].code || '').toLowerCase(); if (c && (c === base || c.split('-')[0] === b2)) { picked = data[di]; startStep = di; break; } }
if (b2 === 'en' && !force) break;
}
}
var words = txt(s.querySelector('.list-section-title')).split(/[?,|]/).map(function (w) { return w.trim(); }).filter(function (w) { return w; });
var pairs = words.some(function (w) { return w.indexOf('=') > 0; });
var leftWords, rightWords;
if (pairs) {
leftWords = []; rightWords = [];
words.forEach(function (w) { var p = w.split('='); leftWords.push((p[0] || '').trim()); rightWords.push((p[1] || p[0] || '').trim()); });
} else {
if (words.length === 1 && words[0].indexOf(' ') > 0) { var sp = words[0].indexOf(' '); words = [words[0].slice(0, sp), words[0].slice(sp + 1)]; }
if (!words.length) words = ['Say', 'hello.'];
leftWords = [words[0]]; rightWords = words.slice(1);
if (!rightWords.length) rightWords = [''];
}
if (pairs) {
var clean = function (x) { return String(x || '').toLowerCase().replace(/[!\u00A1\u00BF?.]/g, '').trim(); };
var L2 = [], R2 = [];
data.forEach(function (d, i) {
var g = clean(d.greet), k = -1;
rightWords.forEach(function (r, j) { if (k < 0 && g && clean(r) === g) k = j; });
var mean = ((d.say || '').match(/^means\s+(.+)$/i) || [])[1];
R2.push(d.greet || rightWords[i % rightWords.length] || '');
L2.push(k >= 0 ? leftWords[k] : (mean ? mean.charAt(0).toUpperCase() + mean.slice(1) : (leftWords[i % leftWords.length] || '')));
});
leftWords = L2; rightWords = R2;
}
var leftWord = leftWords[0];
var bgEl = s.querySelector('.section-background img'), bg = bgEl ? (bgEl.getAttribute('data-src') || bgEl.currentSrc || bgEl.src || '').split('?')[0] : '';
if (bg.indexOf('data:') === 0) bg = '';
var fp = ((bgEl && bgEl.getAttribute('data-image-focal-point')) || '0.5,0.5').split(',').map(parseFloat);
if (bg && bg.indexOf('squarespace-cdn') > -1) bg += '?format=2500w';
if (FACE === 'auto') FACE = !bg ? 'wine' : (MODE === 'knockout' || MODE === 'frosted') ? 'bg' : MODE === 'duotone' ? 'cream' : 'wine';
var faceCls = FACE === 'bg' ? (bg ? 'bgfill' : 'wine') : FACE === 'tutor' ? 'tutorfill' : FACE;
var flat = WS === 'straight';

var stage = el('div', 'fb-stage');
if (bg) { stage.appendChild(el('div', 'fb-wash', MODE === 'knockout' ? '' : '<img src="' + esc(bg) + '" alt="" style="object-position:' + (fp[0] * 100) + '% ' + (fp[1] * 100) + '%">')); s.classList.add('fb-bg-' + MODE); }
var mid = el('div', 'fb-mid');
mid.appendChild(el('div', 'fb-floor'));
var CS = cfg('CUBE_STYLE', CUBE_STYLE), RING = cfg('SHAPE', SHAPE) === 'ring' && CS !== 'sliced';
if (RING) mid.classList.add('fb-ring');
mid.classList.add('cs-' + CS);
var cube = el('div', 'fb-cube');
var slices = [], faces;
function depthHTML() {
return cfg('FOLDER_DEPTH', FOLDER_DEPTH) ? '<i class="w wt"></i><i class="w wb"></i><i class="w wl"></i><i class="w wr"></i>' : '';
}
function tabHTML() {
return '<span class="tabw" style="transform:rotateX(' + (-cfg('TAB_OPEN', TAB_OPEN)) + 'deg)">' + (cfg('FOLDER_DEPTH', FOLDER_DEPTH) ? '<i class="w tt"></i><i class="w tlw"></i><i class="w trw"></i>' : '') + '<span class="tab"><em></em></span></span>';
}
function faceHTML() {
if (CS === 'framed') return '<span class="pf"><img alt="" draggable="false"></span><em></em><span class="fb-shade"></span>';
if (CS === 'folderword') return depthHTML() + tabHTML() + '<span class="body"><span class="ph"><img alt="" draggable="false"><span class="hear" aria-hidden="true"><i></i><i></i><i></i><i></i></span></span></span><span class="fb-shade"></span>';
if (CS === 'folder') return '<span class="tab"><em></em></span><span class="body"><img alt="" draggable="false"></span><span class="fb-shade"></span>';
if (CS === 'polaroid') return '<span class="pf"><img alt="" draggable="false"></span><em></em><span class="fb-shade"></span>';
if (CS === 'word') return '<span class="pf"><img alt="" draggable="false"></span><strong></strong><em></em><span class="fb-shade"></span>';
if (CS === 'arch') return '<span class="pf"><img alt="" draggable="false"></span><em></em><span class="fb-shade"></span>';
if (CS === 'glass') return '<span class="pf"><img alt="" draggable="false"></span><em></em><span class="gl"></span>';
return '<img alt="" draggable="false"><em></em><span class="fb-shade"></span>';
}
if (CS === 'sliced') {
for (var si = 0; si < 3; si++) { var sl = el('div', 'fb-slice'); sl.style.top = (si * 100 / 3) + '%'; slices.push({ el: sl, a: 0, f: [0, 1, 2, 3].map(function () { var f = el('div', 'fb-fc', '<span class="fb-shade"></span>'); sl.appendChild(f); return f; }) }); cube.appendChild(sl); }
faces = slices[0].f;
} else {
faces = [0, 1, 2, 3].map(function () { var f = el('div', 'fb-fc', faceHTML()); f.style.setProperty('--fd', cfg('FOLDER_DEPTH', FOLDER_DEPTH) + 'px'); cube.appendChild(f); return f; });
}
if (CS === 'block') { cube.appendChild(el('div', 'fb-capt')); cube.appendChild(el('div', 'fb-capb')); }
mid.appendChild(cube);
if (CS === 'glass') mid.appendChild(el('div', 'fb-glow'));
stage.appendChild(mid);
var leftEl = el('p', 'fb-side fb-left', EX ? x3(leftWord, faceCls, flat) : esc(leftWord));
var rightEl = el('p', 'fb-side fb-right', EX ? x3(rightWords[0], faceCls, flat) : esc(rightWords[0]));
stage.appendChild(leftEl); stage.appendChild(rightEl);
if (flat) stage.classList.add('fb-flat');
var cap = el('a', 'fb-cap');
stage.appendChild(cap);
var canSpeak = cfg('SPEAK', SPEAK) && 'speechSynthesis' in window && typeof SpeechSynthesisUtterance !== 'undefined';
if (canSpeak) { mid.classList.add('can-speak'); try { speechSynthesis.getVoices(); } catch (err) {} }
var hint = null, corners = cfg('LAYOUT', LAYOUT) === 'corners', intro = null, meta = null, dots = null;
if (corners) {
stage.classList.add('fb-corners');
var hl = headItem ? (headItem.name || headItem.greet) : cfg('HEADLINE', HEADLINE), hs = headItem ? headItem.sub : '';
intro = el('div', 'fb-intro', (hl ? '<h2 class="fb-head">' + esc(hl) + '</h2>' : '') + (hs ? '<p class="fb-sub">' + esc(hs) + '</p>' : '') + (canSpeak && cfg('HINT', HINT) ? '<span class="fb-tip">' + esc(cfg('HINT', HINT)) + '</span>' : '') + (btn ? '<div class="fb-row"><a class="fb-btn" href="' + esc(btn.getAttribute('href') || '#') + '">' + esc(txt(btn)) + '</a></div>' : ''));
stage.appendChild(intro);
meta = el('div', 'fb-meta', (cfg('META_LABEL', META_LABEL) ? '<b class="fb-ml">' + esc(cfg('META_LABEL', META_LABEL)) + '</b>' : '') + '<span class="fb-m1"></span><span class="fb-m2"></span>');
stage.appendChild(meta);
if (data.length > 1) { dots = el('div', 'fb-dots', data.map(function (d, i) { return '<button type="button" data-i="' + i + '" aria-label="' + esc(d.lang || d.name) + '">' + esc((d.code || d.lang.replace(/[^A-Za-z\u00C0-\u00FF]/g, '') || d.name || '?').slice(0, 2).toUpperCase()) + '</button>'; }).join('')); stage.appendChild(dots); }
} else if (canSpeak && cfg('HINT', HINT)) { hint = el('span', 'fb-hint', esc(cfg('HINT', HINT))); stage.appendChild(hint); }
var say = null;
if (canSpeak && cfg('SAY_IT', SAY_IT)) {
say = el('button', 'fb-say', '<span class="fb-pl"></span><span class="fb-st">' + (cfg('SAY_LABEL', SAY_LABEL) ? '<small>' + esc(cfg('SAY_LABEL', SAY_LABEL)) + '</small>' : '') + '<b></b></span><span class="fb-wv"><i></i><i></i><i></i><i></i><i></i><i></i></span>');
say.type = 'button';
mid.appendChild(say); mid.classList.add('has-say');
say.addEventListener('pointerdown', function (e) { e.stopPropagation(); });
say.addEventListener('click', function (e) { e.stopPropagation(); speak(); });
}
mid.setAttribute('tabindex', '0'); mid.setAttribute('role', 'button');
s.appendChild(stage);
s.classList.add('fb-ready');
if (!window.__fbHdr) { window.__fbHdr = function () { var hs = document.querySelector(SECTION + '.fb-ready'), hd = document.querySelector('#header, header.header'), hb = hd ? hd.getBoundingClientRect().bottom : 0; document.documentElement.classList.toggle('fb-top', !!hs && hs.getBoundingClientRect().bottom > hb + 2); }; window.addEventListener('scroll', window.__fbHdr, { passive: true }); window.addEventListener('resize', window.__fbHdr); }
window.__fbHdr();

var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var mobile = window.matchMedia('(max-width: 767px)');
var lw = EX ? leftEl.querySelector('.x3w') : null, rw = EX ? rightEl.querySelector('.x3w') : null;
state = { s: s, stage: stage, A: 0, T: 0, v: 0, step: null, drag: false, mx: 0, my: 0, tx: 0, ty: 0, raf: 0, last: 0, t0: performance.now(), visible: true, timer: 0 };

function setFace(k, step) {
var d = data[mod(step, data.length)];
if (CS === 'sliced') { slices.forEach(function (sl) { sl.f[mod(k, 4)].style.backgroundImage = d.img ? 'url(' + d.img + ')' : ''; }); return; }
var f = faces[mod(k, 4)], im = f.querySelector('img');
if (d.img && im.getAttribute('src') !== d.img) im.src = d.img;
var em = f.querySelector('em'); if (em) em.textContent = (CS === 'polaroid' || CS === 'folderword') && d.name ? d.name + (d.lang ? ' \u00B7 ' + d.lang : '') : d.lang;
var st = f.querySelector('strong'); if (st) { st.textContent = d.greet || rightWords[mod(step, rightWords.length)] || ''; st.style.setProperty('--wf', Math.min(1, 6 / Math.max(1, st.textContent.length)).toFixed(3)); }
var sm = f.querySelector('.wd small'); if (sm) sm.textContent = d.say || (d.lang ? 'means hello in ' + d.lang : '');
}
function speak() {
if (!canSpeak || !state) return;
var d = data[mod(state.step, data.length)], word = (d.greet || rightWords[mod(state.step, rightWords.length)] || '').replace(/[\u00A1!\u00BF?.]/g, '').trim();
if (!word) return;
try {
speechSynthesis.cancel();
var u = new SpeechSynthesisUtterance(word), code = d.code || 'en';
u.lang = code; u.rate = .9;
var vs = speechSynthesis.getVoices().filter(function (v) { return v.lang && v.lang.toLowerCase().indexOf(code.toLowerCase().split('-')[0]) === 0; });
if (vs.length) u.voice = vs[0];
mid.classList.add('speaking');
u.onend = u.onerror = function () { mid.classList.remove('speaking'); };
speechSynthesis.speak(u);
setTimeout(function () { mid.classList.remove('speaking'); }, 2500);
} catch (err) {}
if (hint) hint.classList.add('gone');
var tp = stage.querySelector('.fb-tip'); if (tp) tp.classList.add('gone');
}
function tutorFill(d) { if (faceCls === 'tutorfill' && d.img) stage.style.setProperty('--x3-img', 'url(' + d.img + ')'); }
function capHTML(d) { return '<b>' + esc(d.name) + '</b><i>' + esc(cfg('LINE', LINE).replace('{lang}', d.lang)) + (d === picked && !state.moved ? ' \u00B7 picked for you' : '') + '</i><span class="ar">&#8594;</span>'; }
function setSay(d, step) {
if (!say) return;
var w = d.greet || rightWords[mod(step, rightWords.length)] || '';
say.querySelector('b').innerHTML = esc(w) + (d.pron ? ' <em>' + esc(d.pron) + '</em>' : '');
say.setAttribute('aria-label', 'Hear ' + w);
}
function setMeta(d, step) {
setSay(d, step);
if (!meta) return;
var w = d.greet || rightWords[mod(step, rightWords.length)] || '';
meta.querySelector('.fb-m1').textContent = w + (d.say ? ' \u00B7 ' + d.say : (w ? ' \u00B7 means hello' : ''));
meta.querySelector('.fb-m2').textContent = (d.lang || '') + (d.name ? (d.lang ? ', with ' : 'With ') + d.name : '');
if (dots) Array.prototype.forEach.call(dots.querySelectorAll('button'), function (b, i) { b.classList.toggle('on', i === mod(step, data.length)); });
}
function setWord(step, first) {
var d = data[mod(step, data.length)], w = rightWords[mod(step, rightWords.length)];
for (var k = -1; k <= 2; k++) setFace(step + k, step + k);
mid.setAttribute('aria-label', (canSpeak ? 'Hear ' : '') + (d.greet || w) + ', ' + d.name + ', ' + d.lang + ' tutor');
if (first) { cap.innerHTML = capHTML(d); cap.href = d.href || '#'; tutorFill(d); setMeta(d, step);
if (pairs) { var lw0 = leftWords[mod(step, leftWords.length)]; Array.prototype.forEach.call(leftEl.querySelectorAll('.ly,.sz'), function (n) { n.textContent = lw0; }); Array.prototype.forEach.call(rightEl.querySelectorAll('.ly,.sz'), function (n) { n.textContent = w; }); fit(); }
return; }
var lwNew = leftWords[mod(step, leftWords.length)];
var swapLeft = pairs && leftWords.length > 1;
rightEl.classList.add('out'); cap.classList.add('sw'); if (meta) meta.classList.add('sw'); if (say) say.classList.add('sw'); if (swapLeft) leftEl.classList.add('out');
setTimeout(function () {
if (!state) return;
if (EX) Array.prototype.forEach.call(rightEl.querySelectorAll('.ly,.sz'), function (n) { n.textContent = w; }); else rightEl.textContent = w;
if (swapLeft) { if (EX) Array.prototype.forEach.call(leftEl.querySelectorAll('.ly,.sz'), function (n) { n.textContent = lwNew; }); else leftEl.textContent = lwNew; }
cap.innerHTML = capHTML(d); cap.href = d.href || '#'; setMeta(d, step); if (meta) meta.classList.remove('sw'); if (say) say.classList.remove('sw');
tutorFill(d);
fit(); alignBg();
rightEl.classList.remove('out'); cap.classList.remove('sw'); leftEl.classList.remove('out');
}, 240);
}
function layout() {
var W = mid.clientWidth, H = mid.clientHeight;
var all = CS === 'sliced' ? slices.reduce(function (a, s2) { return a.concat(s2.f); }, []) : faces;
if (!RING) all.forEach(function (f, i) { f.style.transform = 'rotateY(' + ((i % 4) * 90) + 'deg) translateZ(' + (W / 2) + 'px)'; });
slices.forEach(function (sl, si) { sl.f.forEach(function (f) { f.style.backgroundSize = W + 'px ' + H + 'px'; f.style.backgroundPosition = '50% ' + (-si * H / 3) + 'px'; }); });
var ct = cube.querySelector('.fb-capt'), cb = cube.querySelector('.fb-capb');
if (ct) { ct.style.cssText = 'width:' + W + 'px;height:' + W + 'px;top:' + ((H - W) / 2) + 'px;transform:rotateX(90deg) translateZ(' + (H / 2) + 'px)'; cb.style.cssText = 'width:' + W + 'px;height:' + W + 'px;top:' + ((H - W) / 2) + 'px;transform:rotateX(-90deg) translateZ(' + (H / 2) + 'px)'; }
}
function place() {
if (mobile.matches) { stage.style.removeProperty('--fb-cy'); stage.style.removeProperty('--fb-ch'); stage.style.height = ''; mid.style.width = ''; mid.style.height = ''; return; }
var hd = document.querySelector('#header, header.header, header');
stage.style.height = '';
var R = stage.getBoundingClientRect(), hb = hd ? hd.getBoundingClientRect().bottom - R.top + window.scrollY * 0 : 110;
if (hb < 0 || hb > R.height * .4) hb = (R.top + (window.scrollY || 0) > 200) ? cfg('TOP_SPACE', TOP_SPACE) : 110;
mid.style.width = ''; mid.style.height = '';
var W = mid.clientWidth, H = mid.clientHeight, gap = cfg('GAP', GAP);
var maxH = R.height - hb - gap - (corners ? 96 : 120);
if (H > maxH && maxH > 160) { W = maxH / 1.15; H = maxH; mid.style.width = W + 'px'; mid.style.height = H + 'px'; }
stage.style.setProperty('--fb-cy', (hb + gap + H / 2) + 'px');
stage.style.setProperty('--fb-ch', H + 'px');
stage.style.setProperty('--fb-hb', hb + 'px');
stage.style.setProperty('--fb-gap', gap + 'px');
stage.style.removeProperty('--fb-mt'); stage.style.removeProperty('--fb-bb');
if (corners) { clearTimeout(state.al); state.al = setTimeout(alignCorners, 1300); }
if (cfg('FIT_HEIGHT', FIT_HEIGHT)) stage.style.height = Math.round(hb + gap + H + (corners ? 110 : 50 + 26 + (hint ? 44 : 6)) + cfg('BOTTOM_SPACE', BOTTOM_SPACE)) + 'px';
}
function fit() {
var ws = [leftEl, rightEl];
ws.forEach(function (w) { w.style.fontSize = ''; w.style.left = ''; w.style.right = ''; });
if (mobile.matches) return;
var SW = stage.clientWidth, half = mid.clientWidth * (RING ? .8 : flat ? .66 : .72), gap = Math.max(14, SW * .012);
var M = corners ? Math.max(24, SW * .04) : SW * .025;
var room = SW / 2 - half - gap - M;
half = mid.clientWidth * (RING ? .8 : flat ? .62 : .72);
room = SW / 2 - half - gap - M;
var max = parseFloat(getComputedStyle(leftEl).fontSize), size = max;
var extra = (cfg('DEPTH', DEPTH) * .0055 * 1.3 + .08) * max;
leftWords.concat(rightWords).forEach(function (wd) {
var probe = el('span', '', esc(wd));
probe.style.cssText = 'position:absolute;visibility:hidden;white-space:nowrap;font:inherit';
leftEl.appendChild(probe); var wid = probe.offsetWidth + extra; leftEl.removeChild(probe);
if (wid > room) size = Math.min(size, max * room / wid);
});
size = Math.max(40, size);
if (size < max) ws.forEach(function (w) { w.style.fontSize = size + 'px'; });
if (corners) { leftEl.style.right = 'auto'; leftEl.style.left = M + 'px'; rightEl.style.left = 'auto'; rightEl.style.right = M + 'px'; }
else { leftEl.style.left = 'auto'; leftEl.style.right = (SW / 2 + half + gap) + 'px'; rightEl.style.right = 'auto'; rightEl.style.left = (SW / 2 + half + gap) + 'px'; }
}
function alignCorners() {
if (!state || !corners || mobile.matches) return;
if (Math.abs(state.T - state.A) > 1 || state.drag || progress() > 0) { clearTimeout(state.al); state.al = setTimeout(alignCorners, 500); return; }
var sr = stage.getBoundingClientRect(), top = Infinity, bot = -Infinity, bob = parseFloat(cube.parentNode.style.getPropertyValue('--bob')) || 0;
var fr = null, lo = 9;
faces.forEach(function (f) { var sh = f.querySelector('.fb-shade'), o = sh ? parseFloat(sh.style.opacity || 0) : 0; if (o < lo) { lo = o; fr = f; } });
if (fr) { var rt = (fr.querySelector('.tab') || fr).getBoundingClientRect(), rb = (fr.querySelector('.body') || fr).getBoundingClientRect(); top = rt.top; bot = rb.bottom; }
if (!isFinite(top)) return;
stage.style.setProperty('--fb-mt', Math.round(top - bob - sr.top) + 'px');
stage.style.setProperty('--fb-bb', Math.max(16, Math.round(sr.bottom - (bot - bob))) + 'px');
}
var bgSize = null;
function alignBg() {
if (faceCls !== 'bgfill' || !bgSize) return;
var R = stage.getBoundingClientRect();
var sc = Math.max(R.width / bgSize[0], R.height / bgSize[1]), w = bgSize[0] * sc, h = bgSize[1] * sc;
var ox = (R.width - w) * fp[0], oy = (R.height - h) * fp[1];
Array.prototype.forEach.call(stage.querySelectorAll('.x3 .lf'), function (n) {
var r = n.getBoundingClientRect();
n.style.backgroundSize = '100% 100%, ' + w.toFixed(0) + 'px ' + h.toFixed(0) + 'px';
n.style.backgroundPosition = '0 0, ' + (ox - (r.left - R.left)).toFixed(1) + 'px ' + (oy - (r.top - R.top)).toFixed(1) + 'px';
});
}
if (faceCls === 'bgfill') { stage.style.setProperty('--x3-bg', 'url(' + bg + ')'); var pi = new Image(); pi.onload = function () { bgSize = [pi.naturalWidth, pi.naturalHeight]; alignBg(); }; pi.src = bg; }
function progress() { var r = stage.getBoundingClientRect(); return clamp(-r.top / (r.height * .85), 0, 1); }
function render(now) {
var tt = (now - state.t0) / 1000, p = progress();
var W = mid.clientWidth, rest = cfg('REST_ANGLE', REST_ANGLE);
var ang = state.A + rest + state.tx * 18 + p * 50;
var rx = (CS === 'block' ? -20 : CS === 'folderword' ? -11 : -6) - state.ty * 10;
if (CS === 'sliced') {
cube.style.transform = 'translateZ(' + (-W / 2) + 'px) rotateX(' + rx.toFixed(2) + 'deg)';
slices.forEach(function (sl, si) { sl.a += (ang - sl.a) * (si === 0 ? .2 : si === 1 ? .11 : .065); if (state.fr === undefined) sl.a = ang; sl.el.style.transform = 'rotateY(' + sl.a.toFixed(2) + 'deg)';
sl.f.forEach(function (f, k) { var c = Math.cos((sl.a + k * 90) * Math.PI / 180); f.querySelector('.fb-shade').style.opacity = clamp((1 - c) * .32, 0, .55).toFixed(3); }); });
} else if (RING) {
var H2 = mid.clientHeight, RX = W * .45, RZ = W * .42, RY = H2 * .08;
cube.style.transform = 'translateY(var(--bob, 0px)) rotateX(' + (-7 - state.ty * 6).toFixed(2) + 'deg) rotateY(' + (state.tx * 6).toFixed(2) + 'deg)';
faces.forEach(function (f, k) {
var t = (ang + k * 90) * Math.PI / 180, sn = Math.sin(t), c = Math.cos(t), sh = f.querySelector('.fb-shade');
f.style.transform = 'translate3d(' + (sn * RX).toFixed(1) + 'px,' + (c * RY).toFixed(1) + 'px,' + (c * RZ).toFixed(1) + 'px) rotateY(' + (sn * 26).toFixed(2) + 'deg)';
if (sh) sh.style.opacity = ((1 - c) * .22).toFixed(3);
});
} else {
cube.style.transform = 'translateY(var(--bob, 0px)) translateZ(' + (-W / 2) + 'px) rotateX(' + rx.toFixed(2) + 'deg) rotateY(' + ang.toFixed(2) + 'deg)';
faces.forEach(function (f, k) {
var a = (ang + k * 90) * Math.PI / 180, c = Math.cos(a), sh = f.querySelector('.fb-shade');
if (sh) sh.style.opacity = clamp((1 - c) * .32, 0, .55).toFixed(3);
f.classList.toggle('away', c < .05);
f.classList.toggle('side', c < .8); f.style.setProperty('--wv', clamp(c / .12, 0, 1).toFixed(3)); f.style.setProperty('--tv', clamp((c - .45) / .35, 0, 1).toFixed(3));
if (CS === 'glass') f.style.opacity = (c > 0 ? 1 : .35).toString();
});
}
var SK = cfg('SHRINK', SHRINK), sc = 1 - p * SK * .8, op = clamp(1.25 - p * 1.6, 0, 1), y = mobile.matches ? '' : 'translateY(-50%) ';
leftEl.style.transform = y + 'scale(' + sc.toFixed(3) + ')'; leftEl.style.opacity = clamp(1.3 - p * 1.3, 0, 1).toFixed(3);
rightEl.style.transform = y + 'scale(' + sc.toFixed(3) + ')'; rightEl.style.opacity = clamp(1.3 - p * 1.3, 0, 1).toFixed(3);
mid.style.transform = 'translate(-50%,-50%) translateY(' + (p * 60).toFixed(1) + 'px) scale(' + (1 - p * SK).toFixed(3) + ')';
mid.style.opacity = clamp(1.4 - p * 1.2, 0, 1).toFixed(3);
cap.style.opacity = op.toFixed(3);
if (intro) intro.style.opacity = op.toFixed(3);
if (meta) meta.style.opacity = op.toFixed(3);
if (dots) dots.style.opacity = op.toFixed(3);
if (hint && !hint.classList.contains('gone')) hint.style.opacity = (op * .55).toFixed(3);
if (lw && flat) {
var sw2 = reduced ? 0 : Math.sin(tt * .7) * .25;
var ex = ((1.1 - state.tx * .9 + sw2) * .005).toFixed(4) + 'em', ey = ((1.1 - state.ty * .7) * .005).toFixed(4) + 'em';
[lw, rw].forEach(function (w) { var x = w.firstChild; x.style.setProperty('--ex', ex); x.style.setProperty('--ey', ey); });
} else if (lw) {
var sw = reduced ? 0 : Math.sin(tt * .7);
lw.style.transform = 'rotateY(' + (24 + state.tx * 16 + sw * 8).toFixed(2) + 'deg) rotateX(' + (8 - state.ty * 12).toFixed(2) + 'deg)';
rw.style.transform = 'rotateY(' + (-24 + state.tx * 16 - sw * 8).toFixed(2) + 'deg) rotateX(' + (8 - state.ty * 12).toFixed(2) + 'deg)';
}
if (!reduced) cube.parentNode.style.setProperty('--bob', (Math.sin(tt * 1.3) * 6).toFixed(2) + 'px');
}
function tick(now) {
state.raf = 0;
if (!state.visible || document.hidden) { state.last = 0; return; }
var dt = state.last ? Math.min(.1, (now - state.last) / 1000) : 0;
state.last = now;
if (!state.drag) { state.v += ((state.T - state.A) * 60 - state.v * 11) * dt; state.A += state.v * dt; }
var k = Math.min(1, dt * 5);
state.tx += (state.mx - state.tx) * k; state.ty += (state.my - state.ty) * k;
var step = Math.round(-state.A / 90);
if (step !== state.step) { var first = state.step === null; state.step = step; setWord(step, first); }
render(now);
state.fr = (state.fr || 0) + 1; if (faceCls === 'bgfill' && state.fr % 3 === 0) alignBg();
state.raf = requestAnimationFrame(tick);
}
function start() { if (!state.raf) state.raf = requestAnimationFrame(tick); }
function auto() { clearInterval(state.timer); if (reduced) return; state.timer = setInterval(function () { if (state && !state.drag && state.visible && !document.hidden) { state.T -= 90; state.moved = true; } }, cfg('WORD_SECONDS', WORD_SECONDS) * 1000); }
stage.addEventListener('pointermove', function (e) {
if (TILT && e.pointerType === 'mouse') { var r = stage.getBoundingClientRect(); state.mx = ((e.clientX - r.left) / r.width - .5) * 2; state.my = ((e.clientY - r.top) / r.height - .5) * 2; }
if (!state.drag) return;
var now = performance.now(), dx = e.clientX - state.lastX, dA = dx * 180 / Math.max(300, mid.clientWidth * 2.2);
state.A += dA; var dt = Math.max(.008, (now - state.lastT) / 1000); state.v = state.v * .5 + (dA / dt) * .5;
state.lastX = e.clientX; state.lastT = now;
});
stage.addEventListener('pointerleave', function () { state.mx = 0; state.my = 0; });
if (dots) dots.addEventListener('click', function (e) {
var b = e.target.closest('button[data-i]'); if (!b) return;
var i = +b.getAttribute('data-i'), cur = state.step || 0, d = mod(i - cur, data.length);
if (d > data.length / 2) d -= data.length;
state.T = -90 * (cur + d); state.moved = true; auto(); start();
});
[meta, intro, dots].forEach(function (n) { if (n) n.addEventListener('pointerdown', function (e) { e.stopPropagation(); }); });
mid.addEventListener('keydown', function (e) {
if (e.key === 'ArrowRight') { state.T -= 90; state.moved = true; auto(); start(); e.preventDefault(); }
else if (e.key === 'ArrowLeft') { state.T += 90; state.moved = true; auto(); start(); e.preventDefault(); }
else if (e.key === 'Enter' || e.key === ' ') { speak(); e.preventDefault(); }
});
mid.addEventListener('pointerdown', function (e) {
if (e.button !== 0) return;
state.drag = true; state.lastX = e.clientX; state.lastT = performance.now(); state.v = 0; state.downX = e.clientX; state.downY = e.clientY; state.downT = performance.now(); mid.classList.add('is-drag');
try { stage.setPointerCapture(e.pointerId); } catch (err) {}
});
function end(e) {
if (!state.drag) return;
state.drag = false; mid.classList.remove('is-drag');
var tap = e && e.type === 'pointerup' && Math.abs(e.clientX - state.downX) < 6 && Math.abs(e.clientY - state.downY) < 6 && performance.now() - state.downT < 400;
if (tap) { state.v = 0; state.T = Math.round(state.A / 90) * 90; speak(); start(); return; }
state.moved = true;
state.T = Math.round((state.A + clamp(state.v, -900, 900) * .18) / 90) * 90;
state.v = 0; state.last = 0; start(); auto();
}
stage.addEventListener('pointerup', end); stage.addEventListener('pointercancel', end); stage.addEventListener('lostpointercapture', end);
state.onScroll = function () { if (state) start(); };
state.onResize = function () { if (state) { place(); layout(); fit(); alignBg(); } };
window.addEventListener('scroll', state.onScroll, { passive: true });
window.addEventListener('resize', state.onResize);
if ('IntersectionObserver' in window) { state.io = new IntersectionObserver(function (en) { state.visible = en[0].isIntersecting; if (state.visible) { state.last = 0; start(); } }); state.io.observe(stage); }
document.addEventListener('visibilitychange', function () { if (state && !document.hidden) { state.last = 0; start(); } });
place(); layout(); fit();
if (document.fonts && document.fonts.ready) document.fonts.ready.then(function () { if (state) { fit(); alignBg(); } });
state.A = -90 * startStep + (reduced ? 0 : 90); state.T = -90 * startStep;
start(); auto();
}
function teardown() {
if (!state) return;
if (state.raf) cancelAnimationFrame(state.raf);
if (state.io) state.io.disconnect();
clearInterval(state.timer);
try { if ('speechSynthesis' in window) speechSynthesis.cancel(); } catch (err) {}
window.removeEventListener('scroll', state.onScroll);
window.removeEventListener('resize', state.onResize);
state.stage.remove();
document.documentElement.classList.remove('fb-top');
state.s.classList.remove('fb-ready', 'fb-bg-knockout', 'fb-bg-frosted', 'fb-bg-duotone', 'fb-bg-photo');
state = null;
}
window.TutorCube = { build: build, teardown: teardown };
new MutationObserver(function () { if (document.body.classList.contains('sqs-edit-mode-active')) teardown(); else build(); }).observe(document.body, { attributes: true, attributeFilter: ['class'] });
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', build); else build();
window.addEventListener('load', build);
window.addEventListener('mercury:load', function () { teardown(); build(); });
})();

</script>

Paste in: Settings, Developer tools, Code injection, Footer (the cube roll on scroll)

Ready to paste

<!-- Cube Roll · Novule
     Paste below the Tutor Cube footer code. Needs Anchor Links novule-cube and novule-hero. Desktop only. -->
<style>
:root{
  --cube-tilt:-6deg;
  --cube-tilt-shift:3%;
}
@media (min-width:768px){
  #novule-cube .fb-cube{rotate:x var(--cube-tilt)}
  #novule-cube .fb-mid{translate:0 var(--cube-tilt-shift)}
}
.cr-actor{position:fixed;inset:0;z-index:999;pointer-events:none;perspective:1700px;display:none}
.cr-cube{position:absolute;left:0;top:0;width:var(--s);height:var(--s);transform-style:preserve-3d}
.cr-cube .cr-in{position:absolute;inset:0;transform-style:preserve-3d}
.cr-f{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:10px;background:hsl(var(--white-hsl));box-shadow:inset 0 0 0 3px hsl(var(--darkAccent-hsl))}
.cr-f .cr-pic{position:absolute;left:8%;top:7%;right:8%;bottom:19%;border-radius:6px;overflow:hidden;box-shadow:0 0 0 2.5px hsl(var(--darkAccent-hsl))}
.cr-f .cr-pic img,.cr-flap .cr-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.cr-f .cr-nm{position:absolute;left:0;right:0;bottom:5%;text-align:center;font-family:var(--heading-font-font-family);font-size:calc(var(--s) * .062);line-height:1;color:hsl(var(--darkAccent-hsl));transform:rotate(-2deg)}
.cr-f.cr-top{background:hsl(var(--accent-hsl));box-shadow:none;overflow:hidden}
.cr-f.cr-top.cr-has{background:none}
.cr-tkw{position:absolute;left:0;top:0;transform-origin:0 0}
.cr-actor .cr-det{opacity:var(--crd,1)!important}
.cr-top .cr-root::after{display:none!important}
.cr-f.cr-bot{background:hsl(var(--darkAccent-hsl))}
.cr-flap{position:absolute;left:0;top:0;transform-style:preserve-3d;display:none}
.cr-flap .cr-side{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.cr-flap .cr-front{background:hsl(var(--white-hsl));box-shadow:inset 0 0 0 3px hsl(var(--darkAccent-hsl))}
.cr-flap .cr-pic{position:absolute;overflow:hidden;box-shadow:0 0 0 2.5px hsl(var(--darkAccent-hsl))}
.cr-flap .cr-tint{position:absolute;inset:0;background:hsl(var(--accent-hsl));mix-blend-mode:multiply;opacity:0}
.cr-flap .cr-back{transform:rotateX(180deg);display:grid;place-items:center;background:hsl(var(--lightAccent-hsl));color:hsl(var(--darkAccent-hsl));white-space:nowrap}
.cr-flap.cr-lid .cr-front{background:none;box-shadow:none;overflow:visible}
html body #novule-cube.cr-rolling .fb-cube,
html body #novule-cube.cr-rolling .fb-say{opacity:0!important;transition:opacity .15s}
html body #novule-hero#novule-hero.cr-landing li.list-item{opacity:0!important}
html body #novule-hero#novule-hero li.list-item{transition:opacity .25s ease}
</style>

<script>
(function () {
var CUBE = '#novule-cube', SPOT = '#novule-hero';
var MIN_WIDTH = 1024;

function q(s, r) { return (r || document).querySelector(s); }
function qa(s, r) { return Array.prototype.slice.call((r || document).querySelectorAll(s)); }
function cl(x) { return Math.max(0, Math.min(1, x)); }
function lerp(a, b, t) { return a + (b - a) * t; }
function io(t) { return t < .5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; }
function out(t) { return 1 - Math.pow(1 - t, 3); }
function outExpo(t) { return t >= 1 ? 1 : 1 - Math.pow(2, -9 * t); }
function outBack(t) { var c = 1.4; return 1 + (c + 1) * Math.pow(t - 1, 3) + c * Math.pow(t - 1, 2); }
function src(img) { return img ? (img.currentSrc || img.getAttribute('data-src') || img.src || '') : ''; }
function base(u) { return String(u).split('?')[0]; }
function txt(e) { return e ? e.textContent.replace(/\s+/g, ' ').trim() : ''; }
function off() {
  return window.innerWidth < MIN_WIDTH || document.body.classList.contains('sqs-edit-mode-active') ||
    (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
}

var cubeSec, spot, actor, cube, flaps = {}, built = false, raf = 0;
var pass = null, dirty = true;

var n = 0, rules = '';
function copyStyle(cs) {
  var o = '', inf = /infinite/.test(cs.getPropertyValue('animation-iteration-count'));
  for (var i = 0; i < cs.length; i++) {
    var k = cs[i];
    if (k.charAt(0) === '-' && k.charAt(1) === '-') continue;
    if (/^transition/.test(k) || (!inf && /^animation/.test(k))) continue;
    o += k + ':' + cs.getPropertyValue(k) + ';';
  }
  return o + 'transition:none;' + (inf ? '' : 'animation:none;');
}
function copyNode(el) {
  var c = el.cloneNode(false), id = 'crm-' + (n++);
  c.removeAttribute('id'); c.setAttribute('class', id);
  var cs0 = getComputedStyle(el);
  c.setAttribute('style', copyStyle(cs0));
  if (cs0.display !== 'none') { c.style.opacity = '1'; c.style.visibility = 'visible'; }
  if (/\bpre(Fade|Slide|Scale|Clip|Flex)/.test(el.className || '')) { c.style.transform = 'none'; c.style.clipPath = 'none'; }
  ['::before', '::after'].forEach(function (ps) {
    var d = getComputedStyle(el, ps);
    if (d.getPropertyValue('content') !== 'none') rules += '.cr-actor .' + id + ps + '{' + copyStyle(d) + '}';
  });
  Array.prototype.forEach.call(el.childNodes, function (ch) {
    if (ch.nodeType === 1) c.appendChild(copyNode(ch));
    else if (ch.nodeType === 3) c.appendChild(document.createTextNode(ch.textContent));
  });
  return c;
}
function snap() {
  var open = qa('li.list-item', spot)[2], ct = open && q('.list-item-content', open);
  if (!ct) return false;
  if (ct.getAnimations) ct.getAnimations({ subtree: true }).forEach(function (a) {
    try { if (a.effect && a.effect.getTiming().iterations !== Infinity) a.finish(); } catch (e) {}
  });
  var cb = ct.getBoundingClientRect(), b = getComputedStyle(ct, '::before');
  var P = { l: parseFloat(b.left) || 0, t: parseFloat(b.top) || 0, w: parseFloat(b.width) || 0, h: parseFloat(b.height) || 0 };
  if (b.getPropertyValue('content') === 'none' || P.w < 50) {
    var tw = q('.list-item-content__text-wrapper', open).getBoundingClientRect();
    P = { l: tw.left - cb.left, t: tw.top - cb.top, w: tw.width, h: open.getBoundingClientRect().bottom - tw.top };
  }
  n = 0; rules = '';
  var root = copyNode(ct);
  root.classList.add('cr-root');
  root.style.position = 'absolute'; root.style.left = -P.l + 'px'; root.style.top = -P.t + 'px';
  root.style.margin = '0'; root.style.transform = 'none'; root.style.opacity = '1'; root.style.zIndex = 'auto'; root.style.isolation = 'isolate';
  var rid = root.classList[0];
  rules += '.cr-actor .' + rid + '::before,.cr-actor .' + rid + '::after{height:auto!important;bottom:0!important;border-radius:var(--crr,56px)!important}';
  rules += '.cr-actor .' + rid + '::before{opacity:1!important;scale:none!important;filter:none!important}';
  rules += '.cr-actor .' + rid + '::after{opacity:var(--crs,1)!important;scale:none!important;filter:none!important}';
  var ps = qa('.list-item-content__description p', ct), cps = qa('p', root);
  cps.forEach(function (c, i) {
    if (i === ps.length - 1 && getComputedStyle(ps[i]).position === 'absolute') c.style.display = 'none';
    else if (i >= 2) c.classList.add('cr-det');
  });
  var css = q('style.cr-css', actor); css.textContent = rules;
  var top = q('.cr-top', actor), lid = q('.cr-front', flaps.lid);
  top.innerHTML = ''; lid.innerHTML = '';
  [top, lid].forEach(function (host) {
    var w = document.createElement('div'); w.className = 'cr-tkw';
    w.appendChild(host === top ? root.cloneNode(true) : root); host.appendChild(w);
  });
  top.classList.add('cr-has');
  pass = P; pass.ct = ct;
  return true;
}
function fit(host, w, h, r, d, sh) {
  var wr = host.firstChild; if (!wr || !pass) return;
  var k = w / pass.w;
  wr.style.transform = 'scale(' + k + ')';
  wr.firstChild.style.height = (pass.t + h / k) + 'px';
  wr.style.setProperty('--crr', (r / k) + 'px');
  wr.style.setProperty('--crd', d);
  wr.style.setProperty('--crs', sh);
}

function build() {
  if (built) return true;
  cubeSec = q(CUBE); spot = q(SPOT);
  if (!cubeSec || !spot || !q('.fb-cube', cubeSec)) return false;
  var lis = qa('li.list-item', spot).slice(0, 3);
  if (lis.length < 3) return false;

  var sp = lis.map(function (li) {
    var em = q('.list-item-content__description p:nth-child(1) em', li);
    return { img: src(q('img', li)), name: txt(em) || txt(q('.list-item-content__title', li)) };
  });
  var used = sp.map(function (s) { return base(s.img); });
  var extra = null;
  qa('li.list-item', cubeSec).forEach(function (li) {
    var u = src(q('img', li)); if (!u || extra) return;
    if (used.indexOf(base(u)) === -1) extra = { img: u, name: txt(q('.list-item-content__description p', li)) };
  });
  if (!extra) { var f = q('li.list-item img', cubeSec); extra = { img: src(f), name: '' }; }

  var F = [extra, sp[2], sp[0], sp[1]];
  var FB = 'inset:auto;left:0;top:0;width:var(--s);height:var(--s);';
  var SD = 'inset:auto;top:0;height:var(--s);width:var(--d);left:calc((var(--s) - var(--d)) / 2);';
  var turns = [FB + 'transform:rotateY(0deg) translateZ(calc(var(--d) / 2))', SD + 'transform:rotateY(90deg) translateZ(calc(var(--s) / 2))',
    FB + 'transform:rotateY(180deg) translateZ(calc(var(--d) / 2))', SD + 'transform:rotateY(-90deg) translateZ(calc(var(--s) / 2))'];
  var TB = 'inset:auto;left:0;width:var(--s);height:var(--d);top:calc((var(--s) - var(--d)) / 2);';
  actor = document.createElement('div'); actor.className = 'cr-actor'; actor.setAttribute('aria-hidden', 'true');
  var html = '<div class="cr-cube"><div class="cr-in">';
  F.forEach(function (f, i) {
    html += '<div class="cr-f" style="' + turns[i] + '"><div class="cr-pic"><img alt="" src="' + f.img + '"></div><span class="cr-nm">' + (f.name || '') + '</span></div>';
  });
  html += '<div class="cr-f cr-top" style="' + TB + 'transform:rotateX(90deg) translateZ(calc(var(--s) / 2))"></div><div class="cr-f cr-bot" style="' + TB + 'transform:rotateX(-90deg) translateZ(calc(var(--s) / 2))"></div></div></div>';
  html += '<div class="cr-flap cr-lid" data-k="lid"><div class="cr-side cr-front"></div></div><style class="cr-css"></style>';
  html += '<div class="cr-flap" data-k="L"><div class="cr-side cr-front"><div class="cr-pic"><img alt="" src="' + sp[1].img + '"><span class="cr-tint"></span></div></div></div>';
  html += '<div class="cr-flap" data-k="T"><div class="cr-side cr-front"><div class="cr-pic"><img alt="" src="' + sp[0].img + '"><span class="cr-tint"></span></div></div></div>';
  html += '<div class="cr-flap" data-k="R"><div class="cr-side cr-front"><div class="cr-pic"><img alt="" src="' + sp[2].img + '"></div></div></div>';
  var yt = q('.list-section-title strong', spot);
  html += '<div class="cr-flap" data-k="B"><div class="cr-side cr-front"><div class="cr-pic"><img alt="" src="' + extra.img + '"></div></div><div class="cr-side cr-back">' + (yt ? yt.innerHTML : '') + '</div></div>';
  actor.innerHTML = html;
  document.body.appendChild(actor);
  cube = q('.cr-cube', actor);
  qa('.cr-flap', actor).forEach(function (f) { flaps[f.getAttribute('data-k')] = f; });
  built = true;
  return true;
}

function targets() {
  var lis = qa('li.list-item', spot), open = lis[2];
  var r = function (el) { var b = el.getBoundingClientRect(); return { x: b.left, y: b.top, w: b.width, h: b.height }; };
  var tw = q('.list-item-content__text-wrapper', open).getBoundingClientRect(), lb = open.getBoundingClientRect();
  var yt = q('.list-section-title strong', spot);
  var lid = { x: lb.left, y: tw.top, w: tw.width, h: lb.bottom - tw.top };
  if (pass) { var cb = pass.ct.getBoundingClientRect(); lid = { x: cb.left + pass.l, y: cb.top + pass.t, w: pass.w, h: pass.h }; }
  return {
    lid: lid,
    L: r(q('.list-item-media', lis[1])),
    T: r(q('.list-item-media', lis[0])),
    R: r(q('.list-item-media', open)),
    B: yt ? r(yt) : { x: 0, y: 0, w: 1, h: 1 }
  };
}

var done = false;
function rest() { actor.style.display = 'none'; cubeSec.classList.remove('cr-rolling'); spot.classList.remove('cr-landing'); }
function frame() {
  raf = requestAnimationFrame(frame);
  if (off()) { rest(); return; }
  var sy = window.scrollY || window.pageYOffset, vh = window.innerHeight;
  var c0 = cubeSec.getBoundingClientRect().top + sy, s1 = spot.getBoundingClientRect().top + sy;
  var endOff = Math.min(vh * .3, 260);
  var p = cl((sy - c0) / Math.max(1, (s1 - c0) - endOff));
  if (done) { if (p < .02) done = false; rest(); return; }
  if (p >= .985) { done = true; rest(); return; }
  cubeSec.classList.toggle('cr-rolling', p > .015);
  spot.classList.add('cr-landing');
  if (p <= .015) { actor.style.display = 'none'; return; }
  actor.style.display = 'block';
  if (dirty) { if (!snap()) pass = null; dirty = false; }

  var fc = q('.fb-cube', cubeSec), fr = fc.getBoundingClientRect();
  var S0 = Math.min(fc.offsetWidth, fc.offsetHeight) * .86;
  var A = { x: fr.left + fr.width / 2, y: fr.top + fr.height / 2 };
  var T = targets(), S1 = Math.min(Math.max(T.lid.w * .9, 260), 360);
  var ratio = pass ? Math.max(1, Math.min(1.5, pass.h / pass.w)) : 1.16, D1 = S1 * ratio;
  var B = { x: T.lid.x + T.lid.w / 2, y: Math.max(D1 * .6 + 20, Math.min(T.lid.y + T.lid.h / 2, vh - D1 * .62)) };
  var lift = cl(p / .1), roll = cl((p - .04) / .56), unf = cl((p - .62) / .36);
  actor.style.opacity = cl(p / .04);

  if (unf <= 0) {
    cube.style.display = 'block'; Object.keys(flaps).forEach(function (k) { flaps[k].style.display = 'none'; });
    var e = io(roll), s = lerp(S0, S1, e);
    var tip = io(cl((p - .02) / .24)), settle = io(cl((p - .5) / .12));
    var d = s * lerp(1, ratio, tip);
    var x = lerp(A.x, B.x, e);
    var y = lerp(A.y, B.y, e) - lift * 30 * (1 - e) - Math.sin(Math.PI * roll) * 14 * (1 - settle);
    var hb = q('header'), top0 = hb ? Math.max(0, hb.getBoundingClientRect().bottom) : 0;
    y = Math.min(Math.max(y, Math.max(top0 + d * .62 + 20, vh * .46)), vh - d * .62);
    var t0 = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--cube-tilt')) || 0;
    var rx = lerp(lerp(-11 + t0, -74, tip), -90, settle);
    var ry = lerp(-9 * tip, 0, settle);
    cube.style.setProperty('--s', s + 'px'); cube.style.setProperty('--d', d + 'px');
    fit(q('.cr-top', cube), s, d, 10, 1, 0);
    cube.style.transform = 'translate3d(' + (x - s / 2) + 'px,' + (y - s / 2) + 'px,0)';
    q('.cr-in', cube).style.transform = 'rotateX(' + rx + 'deg) rotateY(' + ry + 'deg)';
    actor.style.perspectiveOrigin = x + 'px ' + y + 'px';
  } else {
    cube.style.display = 'none';
    var s2 = S1, d2 = D1;
    actor.style.perspectiveOrigin = B.x + 'px ' + B.y + 'px';
    var start = {
      lid: { x: B.x, y: B.y, z: s2 / 2, ax: 0, ay: 0, w: s2, h: d2 },
      L: { x: B.x - s2 / 2, y: B.y, z: 0, ax: 0, ay: -90, w: s2, h: d2 },
      R: { x: B.x + s2 / 2, y: B.y, z: 0, ax: 0, ay: 90, w: s2, h: d2 },
      T: { x: B.x, y: B.y - d2 / 2, z: 0, ax: 90, ay: 0, w: s2, h: s2 },
      B: { x: B.x, y: B.y + d2 / 2, z: 0, ax: -90, ay: 0, w: s2, h: s2 }
    };
    var endAx = { B: -180 }, delay = { lid: .18, L: 0, R: .04, T: .1, B: .16 };
    Object.keys(flaps).forEach(function (k) {
      var el = flaps[k], a = start[k], b = T[k];
      if (k === 'B') { el.style.display = 'none'; return; }
      el.style.display = 'block';
      var t = cl((unf - delay[k]) / .7), te = k === 'lid' ? io(t) : out(t);
      var w = lerp(a.w, b.w, te), h = lerp(a.h, b.h, te);
      var arc = Math.sin(Math.PI * t);
      var x = lerp(a.x, b.x + b.w / 2, te), y = lerp(a.y, b.y + b.h / 2, te) - (k === 'B' ? arc * 140 : arc * 40);
      var z = lerp(a.z, 0, te) + (k !== 'lid' ? arc * 120 : 0);
      var ax = lerp(a.ax, endAx[k] || 0, te), ay = lerp(a.ay, 0, te);
      el.style.width = w + 'px'; el.style.height = h + 'px';
      el.style.transform = 'translate3d(' + (x - w / 2) + 'px,' + (y - h / 2) + 'px,' + z + 'px) rotateX(' + ax + 'deg) rotateY(' + ay + 'deg)';
      var front = q('.cr-front', el);
      if (k === 'lid') {
        var R = pass ? parseFloat(getComputedStyle(spot).getPropertyValue('--tp-r')) || 56 : 56;
        fit(front, w, h, lerp(10, R, te), 1, cl((te - .6) / .3));
      } else {
        var pic = q('.cr-pic', el), ins = lerp(.075, 0, te);
        pic.style.left = pic.style.right = (ins * w) + 'px'; pic.style.top = (ins * h) + 'px'; pic.style.bottom = (lerp(.18, 0, te) * h) + 'px';
        pic.style.borderRadius = lerp(6, 0, te) + 'px';
        front.style.boxShadow = 'inset 0 0 0 ' + lerp(3, 0, te) + 'px hsl(var(--darkAccent-hsl))';
        front.style.borderRadius = lerp(10, 0, te) + 'px';
        if (k === 'L' || k === 'T') { q('img', pic).style.filter = 'grayscale(' + te + ') contrast(1.05)'; q('.cr-tint', pic).style.opacity = te * .35; }
        if (k === 'B') {
          var yt = q('.list-section-title strong', spot), back = q('.cr-back', el);
          if (yt) { var cs = getComputedStyle(yt); back.style.fontFamily = cs.fontFamily; back.style.fontSize = cs.fontSize; back.style.fontWeight = cs.fontWeight; back.style.letterSpacing = cs.letterSpacing; back.style.borderRadius = '.2em'; }
        }
      }
    });
  }
}

var mx = -1, my = -1;
function settleOnMove(e) {
  var moved = Math.abs(e.clientX - mx) + Math.abs(e.clientY - my) > 3; mx = e.clientX; my = e.clientY;
  if (moved && built && actor.style.display === 'block' && spot && spot.contains(e.target)) { done = true; rest(); }
}
function start() {
  if (!build()) return;
  if (!start.hooked) { document.addEventListener('pointermove', settleOnMove, { passive: true }); start.hooked = true; }
  if (!raf) raf = requestAnimationFrame(frame);
}
var tries = 0;
(function wait() { if (build()) start(); else if (tries++ < 80) setTimeout(wait, 150); })();
window.addEventListener('resize', function () { dirty = true; });
window.addEventListener('mercury:load', function () { built = false; dirty = true; pass = null; if (actor) actor.remove(); flaps = {}; tries = 0; setTimeout(function () { if (build()) start(); }, 300); });
})();
</script>

03SpotlightBoarding pass spotlight

Section IDnovule-hero

Paste in: Pages, Custom code, Custom CSS

Ready to paste

/* Boarding Pass Spotlight · Novule
   List section Anchor Link: novule-hero */
#novule-hero {
  --tint: ~"hsl(var(--accent-hsl))";
  --tint-a: .35;
  --gray: 1;
  --lift: 18px;
  --depth: ~"0 2px 4px hsla(var(--darkAccent-hsl), .16), 0 calc(var(--lift) * .9) calc(var(--lift) * 2) calc(var(--lift) * -.7) hsla(var(--darkAccent-hsl), .55)";

  --ink: ~"var(--headingLargeColor, hsl(var(--darkAccent-hsl)))";
  --wine: ~"hsl(var(--accent-hsl))";
  --edge: ~"hsl(var(--darkAccent-hsl))";
  --cream: ~"hsl(var(--white-hsl))";
  --rose: ~"hsl(var(--lightAccent-hsl))";
  --hi: ~"hsl(var(--lightAccent-hsl))";
  --hi-text: ~"hsl(var(--darkAccent-hsl))";
  --stub: var(--wine);

  --sel-line: var(--edge);
  --sel-fill: var(--cream);
  --sel-size: 11px;
  --sel-e: ~"calc(var(--sel-size) / 2 - .75px)";
  --sel-in: ~"calc(var(--sel-size) - 3px)";
  --sel-bg:
    ~"linear-gradient(var(--sel-fill), var(--sel-fill)) 1.5px 1.5px / var(--sel-in) var(--sel-in) no-repeat,"
    ~"linear-gradient(var(--sel-fill), var(--sel-fill)) calc(100% - 1.5px) 1.5px / var(--sel-in) var(--sel-in) no-repeat,"
    ~"linear-gradient(var(--sel-fill), var(--sel-fill)) 1.5px calc(100% - 1.5px) / var(--sel-in) var(--sel-in) no-repeat,"
    ~"linear-gradient(var(--sel-fill), var(--sel-fill)) calc(100% - 1.5px) calc(100% - 1.5px) / var(--sel-in) var(--sel-in) no-repeat,"
    ~"linear-gradient(var(--sel-line), var(--sel-line)) 0 0 / var(--sel-size) var(--sel-size) no-repeat,"
    ~"linear-gradient(var(--sel-line), var(--sel-line)) 100% 0 / var(--sel-size) var(--sel-size) no-repeat,"
    ~"linear-gradient(var(--sel-line), var(--sel-line)) 0 100% / var(--sel-size) var(--sel-size) no-repeat,"
    ~"linear-gradient(var(--sel-line), var(--sel-line)) 100% 100% / var(--sel-size) var(--sel-size) no-repeat,"
    ~"linear-gradient(var(--sel-line), var(--sel-line)) 0 var(--sel-e) / 100% 1.5px no-repeat,"
    ~"linear-gradient(var(--sel-line), var(--sel-line)) 0 calc(100% - var(--sel-e)) / 100% 1.5px no-repeat,"
    ~"linear-gradient(var(--sel-line), var(--sel-line)) var(--sel-e) 0 / 1.5px 100% no-repeat,"
    ~"linear-gradient(var(--sel-line), var(--sel-line)) calc(100% - var(--sel-e)) 0 / 1.5px 100% no-repeat";
  --card-w: ~"clamp(210px, 17vw, 310px)";
  --text-w: ~"clamp(320px, 27vw, 520px)";
  --gap: 24px;
  --stub-w: ~"calc(var(--text-w) - var(--gap))";
  --pad: ~"clamp(26px, 2.4vw, 42px)";
  --top-space: 48px;
  --title-drop: 22px;
  --title-size: ~"clamp(2.3rem, 3.4vw, 4.6rem)";
  --title-weight: 400;
  --hero-top: ~"calc(var(--nh-total, var(--nh-h, var(--header-height, 80px))) + var(--top-space))";
  --row-max: 740px;
  --row-room: 72px;
  --row-h: ~"clamp(440px, calc(100vh - var(--nh-total, var(--nh-h, var(--header-height, 80px))) - var(--top-space) - var(--row-room)), var(--row-max))";
  --drop: ~"calc(var(--row-h) * .4)";
  --peek: ~"clamp(46px, 7vh, 84px)";
  --r: ~"0px";
  --spring: cubic-bezier(.22,1,.36,1);
  --pop: cubic-bezier(.34,1.56,.64,1);
  background: transparent !important;
  padding: 0 !important;
  min-height: 0 !important;
  overflow-x: clip !important;
}
#novule-hero .content-wrapper { padding: 0 !important; }
html body #novule-hero#novule-hero .user-items-list { padding-top: var(--hero-top) !important; }
section.page-section:has(+ section#novule-hero):not(.user-items-list-section):not(:has(.sqs-block)):not(:has(li)):not(:has(img)) { display: none !important; }
section.page-section.user-items-list-section + section#novule-hero { --hero-top: var(--top-space); }
section#novule-hero { position: relative !important; z-index: 5 !important; margin-top: 0 !important; }
section#novule-hero .section-background { width: 100% !important; left: 0 !important; right: 0 !important; }
#novule-hero li.list-item:nth-child(n+4) { display: none !important; }

#novule-hero .user-items-list {
  position: relative !important;
  display: block !important;
  max-width: 1640px !important;
  margin: 0 auto !important;
  padding: 112px 3vw 26px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

#novule-hero .list-section-title {
  position: absolute !important;
  top: ~"calc(var(--hero-top) + var(--title-drop))" !important;
  z-index: 3 !important;
  width: ~"calc(var(--text-w) - 16px)" !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  pointer-events: none;
}
#novule-hero .list-section-title p,
#novule-hero .list-section-title h1,
#novule-hero .list-section-title h2,
#novule-hero .list-section-title h3 {
  margin: 0 !important;
  color: var(--ink) !important;
  text-align: left !important;
  font-family: var(--heading-font-font-family, Georgia, serif) !important;
  font-size: var(--title-size) !important;
  line-height: .98 !important;
  letter-spacing: -.02em !important;
  width: 7.2em !important;
  max-width: none !important;
  text-box: trim-both cap alphabetic;
}
html body #novule-hero#novule-hero .list-section-title p,
html body #novule-hero#novule-hero .list-section-title h1,
html body #novule-hero#novule-hero .list-section-title h2,
html body #novule-hero#novule-hero .list-section-title h3 {
  font-family: var(--heading-font-font-family, Georgia, serif) !important;
  font-weight: var(--title-weight) !important;
  font-stretch: normal !important;
  letter-spacing: -.01em !important;
}
#novule-hero .list-section-title strong {
  position: relative;
  display: inline-block;
  font-weight: inherit;
  margin: .1em .04em 0;
  padding: .02em .32em .1em;
  background: var(--hi);
  color: var(--hi-text);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: labelIn .6s ease .2s both;
}
#novule-hero .list-section-title strong::after {
  content: "";
  position: absolute;
  inset: ~"calc(var(--sel-e) * -1)";
  pointer-events: none;
  background: var(--sel-bg);
}
@keyframes labelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

#novule-hero .user-items-list-simple {
  --d: .12s;
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 22px !important;
  width: 100% !important;
  height: var(--row-h) !important;
  margin: 0 !important;
  padding: 0 14px 14px 0 !important;
  box-sizing: border-box !important;
  list-style: none !important;
  transform: none !important;
  filter: none !important;
}
#novule-hero .user-items-list-simple:not(:has(> li.list-item:hover)) { --d: .4s; }
#novule-hero .user-items-list-simple::before,
#novule-hero .user-items-list-simple::after { display: none !important; content: none !important; }

#novule-hero li.list-item {
  --top: ~"0px";
  position: relative !important;
  display: block !important;
  flex: 0 0 var(--card-w) !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
  -webkit-mask: none !important;
  mask: none !important;
  transition: ~"flex .6s var(--spring) var(--d)" !important;
}
#novule-hero .user-items-list-simple:has(> li.list-item:hover) > li.list-item { --top: ~"calc(var(--drop) - var(--peek))"; }
#novule-hero .user-items-list-simple > li.list-item:hover .list-item-content { pointer-events: auto; }
#novule-hero .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item { --top: ~"calc(var(--drop) - var(--peek))"; }
#novule-hero .user-items-list-simple > li.list-item:hover ~ li.list-item { --top: ~"0px"; }

#novule-hero .list-item-media {
  position: absolute !important;
  z-index: 1 !important;
  top: var(--top) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  display: block !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: var(--r) !important;
  background: var(--edge) !important;
  box-shadow: var(--depth) !important;
  pointer-events: auto;
  cursor: pointer;
  transition: ~"top .6s var(--spring) var(--d), left .6s var(--spring) var(--d)" !important;
  will-change: left, top;
}
#novule-hero .list-item-media::before,
#novule-hero .list-item-media::after { content: none !important; display: none !important; }
#novule-hero .list-item-media-inner {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: var(--r);
}
#novule-hero .list-item-media-inner img,
#novule-hero .list-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 26% !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  filter: ~"grayscale(var(--gray)) contrast(1.05)";
  transition: ~"filter .5s ease calc(var(--d) + .1s)" !important;
}
#novule-hero .list-item-media-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--tint);
  mix-blend-mode: multiply;
  opacity: var(--tint-a);
  transition: ~"opacity .6s ease var(--d)";
}
#novule-hero .list-item-media-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: ~"linear-gradient(180deg, hsla(var(--accent-hsl), 0) 60%, hsla(var(--accent-hsl), .35) 100%)";
}

#novule-hero .list-item-content {
  position: absolute !important;
  z-index: 2 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: ~"calc(var(--drop) + var(--pad)) 0 var(--pad) calc(var(--pad) + 10px)" !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  text-align: left !important;
  background: transparent !important;
  overflow: visible !important;
  pointer-events: none;
  opacity: 1 !important;
  visibility: visible !important;
}
#novule-hero .list-item-content::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: var(--drop);
  bottom: 0;
  width: var(--stub-w);
  background: var(--stub);
  border-radius: 0;
  box-shadow: var(--depth);
  opacity: 0;
  transition: none;
}
#novule-hero .list-item-content__text-wrapper {
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(min-content, 1fr));
  column-gap: 16px;
  row-gap: 0;
  width: ~"calc(var(--stub-w) - var(--pad) * 2 - 10px)" !important;
  max-width: none !important;
  margin: 0 !important;
}
#novule-hero .list-item-content__description { display: contents !important; }
#novule-hero .list-item-content__description p,
#novule-hero .list-item-content__title {
  grid-column: ~"1 / -1";
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  text-align: left !important;
}
#novule-hero .list-item-content__description p:nth-child(1) {
  order: 1;
  margin-bottom: 10px !important;
  color: var(--rose) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase;
  line-height: 1.4 !important;
}
#novule-hero .list-item-content__description p:nth-child(1) em { font-style: normal; }
#novule-hero .list-item-content__description p:nth-child(2) {
  order: 2;
  margin-bottom: 8px !important;
  color: var(--cream) !important;
  font-family: var(--heading-font-font-family, Georgia, serif) !important;
  font-size: ~"clamp(2.8rem, 4.2vw, 4.6rem)" !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
#novule-hero .list-item-content__description p:nth-child(2) strong { font-weight: inherit; }
#novule-hero .list-item-content__description p:nth-child(2) strong + strong::before {
  content: "";
  display: inline-block;
  width: .62em;
  height: .62em;
  margin: 0 .45em 0 .25em;
  vertical-align: .02em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='rotate(90 12 12)' fill='%23ffffff' d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
#novule-hero .list-item-content__title {
  order: 3;
  color: var(--cream) !important;
  font-size: ~"clamp(1.3rem, 1.7vw, 1.8rem)" !important;
  line-height: 1.1 !important;
  letter-spacing: -.01em !important;
}
#novule-hero .list-item-content__description p:nth-child(3) {
  order: 4;
  margin: 18px 0 6px !important;
  color: var(--rose) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase;
  line-height: 1.4 !important;
}
#novule-hero .list-item-content__description p:nth-child(n+4):nth-last-child(n+2) {
  order: 5;
  grid-column: auto;
  color: var(--cream) !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase;
  line-height: 1.3 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  margin-bottom: 6px !important;
}
#novule-hero .list-item-content__description p:last-child:nth-child(n+5) {
  position: absolute;
  z-index: 3;
  left: ~"calc(var(--text-w) + 22px)";
  top: 22px;
  padding: 11px 20px !important;
  border-radius: 0;
  background: var(--cream);
  color: var(--wine) !important;
  font-family: var(--heading-font-font-family, Georgia, serif) !important;
  font-size: 1.6rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: none;
  outline: 1.5px solid var(--edge);
}
#novule-hero .list-item-content__button-wrapper { position: static !important; margin: 22px 0 0 !important; }
#novule-hero .list-item-content__button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 7px 7px 7px 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--cream) !important;
  color: var(--wine) !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  transition: transform .3s var(--pop) !important;
}
#novule-hero .list-item-content__button::after {
  content: "";
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--wine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform .4s var(--pop);
}
#novule-hero .list-item-content__button:hover { transform: translateY(-2px) !important; }
#novule-hero .list-item-content__button:hover::after { transform: rotate(-45deg); }
#novule-hero .proof-spotlight-rail { display: none !important; }

#novule-hero .list-item-content__text-wrapper > *,
#novule-hero .list-item-content__description p,
#novule-hero .list-item-content__button-wrapper { visibility: hidden; }
#novule-hero .list-item-content__description p:nth-child(1) em {
  visibility: visible;
  position: absolute;
  left: 18px;
  top: ~"calc(var(--top) + 22px)";
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--cream);
  font-size: .82rem;
  letter-spacing: .28em;
  animation: ~"fadeIn .4s ease calc(var(--d) + .55s) backwards";
}

#novule-hero .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child,
#novule-hero .user-items-list-simple > li.list-item:hover {
  flex: 1 1 var(--card-w) !important;
  --top: ~"0px" !important;
}
#novule-hero .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-media,
#novule-hero .user-items-list-simple > li.list-item:hover .list-item-media { left: var(--text-w) !important; cursor: default; }
#novule-hero .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-media-inner img,
#novule-hero .user-items-list-simple > li.list-item:hover .list-item-media-inner img { filter: none; }
#novule-hero .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-media-inner::before,
#novule-hero .user-items-list-simple > li.list-item:hover .list-item-media-inner::before { opacity: 0; }
#novule-hero .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-content::before,
#novule-hero .user-items-list-simple > li.list-item:hover .list-item-content::before { opacity: 1; transition: ~"opacity .3s ease calc(var(--d) + .35s)"; }
#novule-hero .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-content__text-wrapper > *,
#novule-hero .user-items-list-simple > li.list-item:hover .list-item-content__text-wrapper > *,
#novule-hero .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-content__description p,
#novule-hero .user-items-list-simple > li.list-item:hover .list-item-content__description p,
#novule-hero .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-content__button-wrapper,
#novule-hero .user-items-list-simple > li.list-item:hover .list-item-content__button-wrapper { visibility: visible; }
#novule-hero .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-content__button-wrapper,
#novule-hero .user-items-list-simple > li.list-item:hover .list-item-content__button-wrapper { pointer-events: auto; }
#novule-hero .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-content__description p:nth-child(1) em,
#novule-hero .user-items-list-simple > li.list-item:hover .list-item-content__description p:nth-child(1) em {
  position: static;
  writing-mode: horizontal-tb;
  transform: none;
  color: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  animation: none;
}
#novule-hero .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-content__description p:nth-child(1),
#novule-hero .user-items-list-simple > li.list-item:hover .list-item-content__description p:nth-child(1) { animation: ~"rise .5s var(--spring) calc(var(--d) + .45s) backwards"; }
#novule-hero .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-content__description p:nth-child(2),
#novule-hero .user-items-list-simple > li.list-item:hover .list-item-content__description p:nth-child(2) { animation: ~"rise .5s var(--spring) calc(var(--d) + .5s) backwards"; }
#novule-hero .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-content__title,
#novule-hero .user-items-list-simple > li.list-item:hover .list-item-content__title { animation: ~"rise .5s var(--spring) calc(var(--d) + .55s) backwards"; }
#novule-hero .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-content__description p:nth-child(n+3),
#novule-hero .user-items-list-simple > li.list-item:hover .list-item-content__description p:nth-child(n+3) { animation: ~"rise .5s var(--spring) calc(var(--d) + .6s) backwards"; }
#novule-hero .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-content__button-wrapper,
#novule-hero .user-items-list-simple > li.list-item:hover .list-item-content__button-wrapper { animation: ~"rise .5s var(--spring) calc(var(--d) + .65s) backwards"; }
#novule-hero .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-content__description p:last-child:nth-child(n+5),
#novule-hero .user-items-list-simple > li.list-item:hover .list-item-content__description p:last-child:nth-child(n+5) { animation: ~"popIn .6s var(--pop) calc(var(--d) + .35s) backwards"; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: scale(.4) rotate(-10deg); } }

@media (prefers-reduced-motion: reduce) {
  #novule-hero *, #novule-hero *::before, #novule-hero *::after { animation: none !important; transition: none !important; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  #novule-hero .list-item-content__text-wrapper { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1024px) {
  #novule-hero li.list-item::before {
    content: "";
    position: absolute;
    z-index: 6;
    pointer-events: none;
    top: ~"calc(var(--top) - var(--sel-e))";
    left: ~"calc(var(--sel-e) * -1)";
    right: ~"calc(var(--sel-e) * -1)";
    bottom: ~"calc(var(--sel-e) * -1)";
    background: var(--sel-bg);
    transition: ~"top .6s var(--spring) var(--d), left .6s var(--spring) var(--d)";
  }
  #novule-hero .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child::before,
  #novule-hero .user-items-list-simple > li.list-item:hover::before {
    left: ~"calc(var(--text-w) - var(--sel-e))";
  }
  #novule-hero li.list-item .list-item-content::after {
    content: "";
    position: absolute;
    z-index: 6;
    pointer-events: none;
    top: ~"calc(var(--drop) - var(--sel-e))";
    left: ~"calc(var(--sel-e) * -1)";
    width: ~"calc(var(--stub-w) + var(--sel-e) * 2)";
    bottom: ~"calc(var(--sel-e) * -1)";
    background: var(--sel-bg);
    opacity: 0;
    transition: opacity .2s ease;
  }
  #novule-hero .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-content::after,
  #novule-hero .user-items-list-simple > li.list-item:hover .list-item-content::after {
    opacity: 1;
    transition: ~"opacity .3s ease calc(var(--d) + .35s)";
  }

  #novule-hero .list-item-content {
    padding: var(--drop) 0 0 0 !important;
    justify-content: stretch !important;
    align-items: stretch !important;
  }
  #novule-hero .list-item-content__text-wrapper {
    flex: 1 1 auto;
    width: var(--stub-w) !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto 1fr auto auto;
    column-gap: 0;
    row-gap: 0;
  }
  #novule-hero .list-item-content__description p,
  #novule-hero .list-item-content__title { box-sizing: border-box; }
  #novule-hero .list-item-content__description p:nth-child(1) {
    display: flex;
    justify-content: space-between;
    margin: 0 !important;
    padding: 14px 24px !important;
    border-bottom: 1px solid ~"hsla(var(--white-hsl), .3)";
  }
  #novule-hero .list-item-content__description p:nth-child(2) {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    margin: 0 !important;
    padding: 6px 24px !important;
    border-bottom: 1px solid ~"hsla(var(--white-hsl), .3)";
  }
  #novule-hero .list-item-content__description p:nth-child(2) strong { grid-row: 1; }
  #novule-hero .list-item-content__description p:nth-child(2) strong:first-child { grid-column: 1; }
  #novule-hero .list-item-content__description p:nth-child(2) strong + strong { grid-column: 3; }
  #novule-hero .list-item-content__description p:nth-child(2) strong + strong::before { display: none; }
  #novule-hero .list-item-content__description p:nth-child(2)::before {
    content: "";
    grid-column: 2;
    grid-row: 1;
    height: .5em;
    margin: 0 .5em;
    border-bottom: 2px dotted ~"hsla(var(--white-hsl), .5)";
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='rotate(90 12 12)' fill='%23ffffff' d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E") center top / .32em no-repeat;
  }
  #novule-hero .list-item-content__title {
    margin: 0 !important;
    padding: 12px 24px !important;
    border-bottom: 1px solid ~"hsla(var(--white-hsl), .3)";
  }
  #novule-hero .list-item-content__description p:nth-child(3) { display: none !important; }
  #novule-hero .list-item-content__description p:nth-child(n+4):nth-last-child(n+2) {
    margin: 0 !important;
    padding: 12px 14px 16px 24px !important;
    border-right: 1px solid ~"hsla(var(--white-hsl), .3)";
    font-size: .82rem !important;
  }
  #novule-hero .list-item-content__description p:nth-child(3n):nth-last-child(n+2) { border-right: 0; }
  #novule-hero .list-item-content__description p:nth-child(n+4):nth-last-child(n+2)::before {
    content: "Included";
    display: block;
    margin-bottom: 6px;
    color: var(--rose);
    font-size: 10px;
    letter-spacing: .18em;
  }
  #novule-hero .list-item-content__description p:nth-child(5):nth-last-child(n+2)::before { content: "Plus"; }
  #novule-hero .list-item-content__description p:nth-child(n+6):nth-last-child(n+2)::before { content: "And"; }
  #novule-hero .list-item-content__button-wrapper { grid-column: ~"1 / -1"; margin: 0 !important; padding: 14px 24px; border-top: 1px solid ~"hsla(var(--white-hsl), .3)"; }
}

@media (max-width: 1023px) {
  #novule-hero {
    --m-photo: 210px;
    --m-card: 72vw;
    --m-turn: 22deg;
    --m-focus: 50% 4%;
    --m-page: var(--siteBackgroundColor, #fffbf4);
  }
  #novule-hero .user-items-list { padding: 100px 6vw 8px !important; }
  html body #novule-hero#novule-hero .user-items-list { padding-top: ~"calc(var(--nh-total, var(--nh-h, var(--header-height, 70px))) + 16px)" !important; }
  html body section.user-items-list-section + #novule-hero#novule-hero .user-items-list { padding-top: 32px !important; }

  #novule-hero .list-section-title { position: relative !important; top: auto !important; width: auto !important; margin: 0 0 18px !important; }
  #novule-hero .list-section-title p,
  #novule-hero .list-section-title h1,
  #novule-hero .list-section-title h2,
  #novule-hero .list-section-title h3 { font-size: ~"clamp(2.3rem, 9vw, 3.2rem)" !important; }

  html body #novule-hero#novule-hero .user-items-list-simple {
    display: flex !important;
    gap: 10px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 -6vw !important;
    padding: 4px ~"calc((100vw - var(--m-card)) / 2)" 20px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory;
    perspective: 900px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  html body #novule-hero#novule-hero .user-items-list-simple::-webkit-scrollbar { display: none; }

  html body #novule-hero#novule-hero li.list-item {
    --top: ~"0px";
    flex: 0 0 var(--m-card) !important;
    display: flex !important;
    flex-direction: column !important;
    scroll-snap-align: center;
    pointer-events: auto;
    border-radius: var(--r) !important;
    background: var(--stub) !important;
    box-shadow: ~"0 2px 4px hsla(var(--darkAccent-hsl), .16), 0 12px 24px -12px hsla(var(--darkAccent-hsl), .5)" !important;
    outline: 1.5px solid var(--edge);
    overflow: hidden !important;
    transition: none !important;
  }
  html body #novule-hero#novule-hero li.list-item::before {
    content: "";
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    top: ~"calc(var(--m-photo) - 9px)";
    height: 18px;
    pointer-events: none;
    background:
      ~"radial-gradient(circle at 0 50%, var(--m-page) 9px, transparent 9.5px),"
      ~"radial-gradient(circle at 100% 50%, var(--m-page) 9px, transparent 9.5px),"
      ~"repeating-linear-gradient(90deg, hsla(var(--white-hsl), .35) 0 7px, transparent 7px 13px) center / calc(100% - 40px) 2px no-repeat";
  }
  html body #novule-hero#novule-hero li.list-item .list-item-media { position: relative !important; flex: none !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; height: var(--m-photo) !important; box-shadow: none !important; border-radius: 0 !important; cursor: default; }
  html body #novule-hero#novule-hero li.list-item .list-item-media-inner { border-radius: 0; }
  html body #novule-hero#novule-hero li.list-item .list-item-media-inner img,
  html body #novule-hero#novule-hero li.list-item .list-image { filter: none !important; transform: none !important; object-position: var(--m-focus) !important; }
  html body #novule-hero#novule-hero li.list-item .list-item-media-inner::before { opacity: 0 !important; }

  html body #novule-hero#novule-hero li.list-item .list-item-content { position: static !important; flex: 1 1 auto !important; justify-content: flex-start !important; padding: 18px 20px 22px !important; }
  html body #novule-hero#novule-hero li.list-item .list-item-content::before { display: none !important; }
  html body #novule-hero#novule-hero li.list-item .list-item-content__text-wrapper { display: flex !important; flex-wrap: wrap !important; align-items: center; gap: 7px !important; width: 100% !important; }
  html body #novule-hero#novule-hero li.list-item .list-item-content__description p,
  html body #novule-hero#novule-hero li.list-item .list-item-content__title { flex: 0 0 100%; margin: 0 !important; }
  html body #novule-hero#novule-hero li.list-item .list-item-content *,
  html body #novule-hero#novule-hero li.list-item .list-item-content__button-wrapper { visibility: visible !important; opacity: 1 !important; animation: none !important; transition: none !important; }
  html body #novule-hero#novule-hero li.list-item .list-item-content__description p:nth-child(1) { display: none !important; }
  html body #novule-hero#novule-hero li.list-item .list-item-content__description p:nth-child(2) {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: end;
    margin: 0 !important;
    font-size: ~"clamp(2rem, 9vw, 2.5rem)" !important;
  }
  html body #novule-hero#novule-hero li.list-item .list-item-content__description p:nth-child(2) strong { display: block; grid-row: 1; }
  html body #novule-hero#novule-hero li.list-item .list-item-content__description p:nth-child(2) strong:first-child { grid-column: 1; }
  html body #novule-hero#novule-hero li.list-item .list-item-content__description p:nth-child(2) strong + strong { grid-column: 3; text-align: right; }
  html body #novule-hero#novule-hero li.list-item .list-item-content__description p:nth-child(2) strong::before,
  html body #novule-hero#novule-hero li.list-item .list-item-content__description p:nth-child(2) strong + strong::before {
    content: "From";
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 5px;
    background: none;
    vertical-align: baseline;
    color: var(--rose);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .2em;
    line-height: 1;
    text-transform: uppercase;
  }
  html body #novule-hero#novule-hero li.list-item .list-item-content__description p:nth-child(2) strong + strong::before { content: "To"; }
  html body #novule-hero#novule-hero li.list-item .list-item-content__description p:nth-child(2)::before {
    content: "";
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    height: 22px;
    margin: 0 12px 9px;
    border-bottom: 2px dotted ~"hsla(var(--white-hsl), .35)";
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='rotate(90 12 12)' fill='%23ffffff' d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E") center top / 16px no-repeat;
  }
  html body #novule-hero#novule-hero li.list-item .list-item-content__title { font-size: 1.15rem !important; margin: 2px 0 4px !important; }
  html body #novule-hero#novule-hero li.list-item .list-item-content__description p:nth-child(3) { display: none !important; }
  html body #novule-hero#novule-hero li.list-item .list-item-content__description p:nth-child(n+4):nth-last-child(n+2) {
    flex: 1 1 0;
    min-width: 0;
    margin: 4px 0 0 !important;
    padding: 9px 0 0 !important;
    border-top: 1px solid ~"hsla(var(--white-hsl), .2)";
    font-size: .66rem !important;
    letter-spacing: .04em !important;
    line-height: 1.25 !important;
    overflow-wrap: break-word !important;
  }
  html body #novule-hero#novule-hero li.list-item .list-item-content__description p:nth-child(n+4):nth-last-child(n+2)::before {
    content: "Included";
    display: block;
    margin-bottom: 4px;
    color: var(--rose);
    font-size: 8px;
    letter-spacing: .18em;
  }
  html body #novule-hero#novule-hero li.list-item .list-item-content__description p:nth-child(5):nth-last-child(n+2)::before { content: "Plus"; }
  html body #novule-hero#novule-hero li.list-item .list-item-content__description p:nth-child(n+6):nth-last-child(n+2)::before { content: "And"; }
  html body #novule-hero#novule-hero li.list-item .list-item-content__description p:last-child:nth-child(n+5) { left: 14px !important; top: 14px !important; font-size: 1.2rem !important; flex: none; }
  html body #novule-hero#novule-hero li.list-item .list-item-content__button-wrapper { flex: 0 0 100%; margin: 10px 0 0 !important; }
  @supports (animation-timeline: view()) {
    html body #novule-hero#novule-hero li.list-item {
      view-timeline: --cl-pass inline;
      animation: clPassFlow linear both;
      animation-timeline: --cl-pass;
      animation-range: cover;
    }
    html body #novule-hero#novule-hero li.list-item::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 6;
      pointer-events: none;
      border-radius: inherit;
      background: ~"hsla(var(--darkAccent-hsl), .38)";
      animation: clPassShade linear both;
      animation-timeline: --cl-pass;
      animation-range: cover;
    }
  }
}
@keyframes clPassFlow {
  0% { rotate: y var(--m-turn); scale: .9; transform-origin: 0% 50%; }
  50% { rotate: y 0deg; scale: 1; transform-origin: 50% 50%; }
  100% { rotate: y ~"calc(var(--m-turn) * -1)"; scale: .9; transform-origin: 100% 50%; }
}
@keyframes clPassShade {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html body #novule-hero#novule-hero li.list-item,
  html body #novule-hero#novule-hero li.list-item::after { animation: none !important; }
  html body #novule-hero#novule-hero li.list-item::after { display: none; }
}

@media (max-width: 380px) {
  #novule-hero { --m-photo: 190px; --m-card: 78vw; }
}

@media (min-width: 1024px) {
  #novule-hero {
    --tp-r: 56px;
    --tp-bite: 16px;
    --tp-stub-h: 72px;
    --tp-plane: .9em;
    --tp-shadow: ~"7px 9px 0 hsl(var(--darkAccent-hsl))";
    --tp-shadow-sm: ~"5px 6px 0 hsl(var(--darkAccent-hsl))";
    --tp-shadow-xs: ~"4px 5px 0 hsl(var(--darkAccent-hsl))";
    --tp-tear: ~"hsla(var(--white-hsl), .4)";
    --tp-shape: ~"58% 42% 46% 54% / 50% 60% 40% 50%";
    --tp-pad: 38px;
  }

  html body #novule-hero#novule-hero li.list-item .list-item-content::before,
  html body #novule-hero#novule-hero li.list-item .list-item-content::after {
    border-radius: var(--tp-r) !important;
    -webkit-mask:
      ~"radial-gradient(circle at 0 var(--tp-stub-h), transparent var(--tp-bite), #000 calc(var(--tp-bite) + .5px)) 0 0 / 51% 100% no-repeat,"
      ~"radial-gradient(circle at 100% var(--tp-stub-h), transparent var(--tp-bite), #000 calc(var(--tp-bite) + .5px)) 100% 0 / 51% 100% no-repeat";
    mask:
      ~"radial-gradient(circle at 0 var(--tp-stub-h), transparent var(--tp-bite), #000 calc(var(--tp-bite) + .5px)) 0 0 / 51% 100% no-repeat,"
      ~"radial-gradient(circle at 100% var(--tp-stub-h), transparent var(--tp-bite), #000 calc(var(--tp-bite) + .5px)) 100% 0 / 51% 100% no-repeat";
  }
  html body #novule-hero#novule-hero li.list-item .list-item-content::before {
    box-shadow: none !important;
    background: linear-gradient(var(--rose) var(--tp-stub-h), var(--wine) 0) !important;
  }
  html body #novule-hero#novule-hero li.list-item .list-item-content::after {
    z-index: -2 !important;
    inset: auto !important;
    top: var(--drop) !important;
    left: 0 !important;
    bottom: 0 !important;
    width: var(--stub-w) !important;
    background: ~"hsl(var(--darkAccent-hsl))" !important;
    transform: translate(7px, 9px);
  }

  html body #novule-hero#novule-hero li.list-item .list-item-content__description p,
  html body #novule-hero#novule-hero li.list-item .list-item-content__title,
  html body #novule-hero#novule-hero li.list-item .list-item-content__button-wrapper { border: 0 !important; }
  html body #novule-hero#novule-hero li.list-item .list-item-content__description p:nth-child(1) {
    height: var(--tp-stub-h);
    box-sizing: border-box;
    align-items: center !important;
    margin-bottom: 26px !important;
    padding: 0 var(--tp-pad) !important;
    color: var(--wine) !important;
  }
  html body #novule-hero#novule-hero li.list-item .list-item-content__description p:nth-child(2) { padding: 0 var(--tp-pad) !important; }
  html body #novule-hero#novule-hero li.list-item .list-item-content__title { padding: 4px var(--tp-pad) 14px !important; font-size: 1.6rem !important; }
  html body #novule-hero#novule-hero li.list-item .list-item-content__description p:nth-child(n+4):nth-last-child(n+2) { padding: 4px 6px 18px var(--tp-pad) !important; font-size: .74rem !important; }
  html body #novule-hero#novule-hero li.list-item .list-item-content__description p:nth-child(n+5):nth-last-child(n+2) { padding-left: 6px !important; }

  html body #novule-hero#novule-hero li.list-item:not(:has(.list-item-content__button-wrapper)) .list-item-content__description p:nth-child(n+4):nth-last-child(n+2) {
    padding-top: 8px !important;
    padding-bottom: 38px !important;
  }

  html body #novule-hero#novule-hero li.list-item .list-item-content__description p:nth-child(2)::before {
    height: ~"calc(var(--tp-plane) + .14em)" !important;
    margin: 0 .3em !important;
    align-self: center;
    border-bottom: 4px dotted ~"hsla(var(--white-hsl), .55)" !important;
    background-size: var(--tp-plane) !important;
  }

  html body #novule-hero#novule-hero li.list-item .list-item-content__button-wrapper {
    position: relative !important;
    z-index: 7;
    width: var(--stub-w);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 6px var(--tp-pad) 34px !important;
  }

  html body #novule-hero#novule-hero .user-items-list-simple:not(:has(> li.list-item:hover)) > li.list-item:last-child .list-item-content__description p:nth-child(2)::before,
  html body #novule-hero#novule-hero .user-items-list-simple > li.list-item:hover .list-item-content__description p:nth-child(2)::before {
    animation: tpFly 2.6s ease-in-out .9s infinite alternate;
  }

  html body #novule-hero#novule-hero li.list-item .list-item-content__button {
    position: relative;
    isolation: isolate;
    height: 54px;
    padding: 0 64px 0 24px !important;
    margin-right: 24px !important;
    text-decoration: none !important;
    background: var(--cream) !important;
    color: var(--wine) !important;
    box-shadow: var(--tp-shadow-sm) !important;
    transition: color .35s, transform .4s var(--pop) !important;
  }
  html body #novule-hero#novule-hero li.list-item .list-item-content__button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 999px;
    background: var(--rose);
    clip-path: inset(0 0 0 100% round 999px);
    transition: clip-path .5s cubic-bezier(.65,0,.35,1);
  }
  html body #novule-hero#novule-hero li.list-item .list-item-content__button:hover::before { clip-path: inset(0 0 0 0 round 999px); }
  html body #novule-hero#novule-hero li.list-item .list-item-content__button:hover { transform: translateY(-2px) !important; }
  html body #novule-hero#novule-hero li.list-item .list-item-content__button::after {
    position: absolute;
    right: -22px;
    top: 50%;
    width: 58px !important;
    height: 58px !important;
    margin-top: -29px;
    border-radius: var(--tp-shape) !important;
    background: var(--rose) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%235B1A2B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat !important;
    box-shadow: var(--tp-shadow-xs);
    animation: tpWob 6s ease-in-out infinite alternate;
    transition: transform .45s var(--pop), background-color .3s !important;
  }
  html body #novule-hero#novule-hero li.list-item .list-item-content__button:hover::after {
    background: var(--wine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23FFFBF4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat !important;
    transform: rotate(-30deg) !important;
  }

}
@keyframes tpFly { from { background-position: 0 0; } to { background-position: 100% 0; } }
@keyframes tpPop { from { scale: .3; opacity: 0; } }
@keyframes tpWob {
  0%   { border-radius: ~"58% 42% 46% 54% / 50% 60% 40% 50%"; }
  50%  { border-radius: ~"46% 54% 58% 42% / 58% 44% 56% 42%"; }
  100% { border-radius: ~"52% 48% 42% 58% / 44% 56% 48% 52%"; }
}
@media (prefers-reduced-motion: reduce) {
  #novule-hero .list-item-content__text-wrapper::after,
  #novule-hero .list-item-content__button::after,
  #novule-hero .list-item-content__description p:nth-child(2)::before { animation: none !important; }
}

@media (max-width: 1023px) {
  html body #novule-hero#novule-hero li.list-item .list-item-content__description p:nth-child(2)::before {
    height: 34px;
    margin: 0 10px 7px;
    border-bottom-width: 3px;
    background-size: 30px;
  }
}

html body #novule-hero#novule-hero .list-section-title strong {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  color: ~"hsl(var(--accent-hsl))" !important;
  font-weight: inherit !important;
  animation: none !important;
}
html body #novule-hero#novule-hero .list-section-title strong::before,
html body #novule-hero#novule-hero .list-section-title strong::after {
  content: none !important;
  display: none !important;
}

html body #novule-hero#novule-hero li.list-item .list-item-content__description p:nth-child(2)::before {
  border-bottom: 0 !important;
  background-position: center center !important;
  align-self: center !important;
  animation: none !important;
}
@media (max-width: 1023px) {
  html body #novule-hero#novule-hero li.list-item .list-item-content__description p:nth-child(2)::before {
    align-self: end !important;
    margin-bottom: 4px !important;
  }
}

@media (min-width: 1024px) {
  html body #novule-hero#novule-hero {
    --split-size: ~"clamp(3rem, 5.2vw, 6.6rem)";
    --title-band: ~"calc(var(--split-size) * 1.1 + 28px)";
    --rise: .26;
    --drop: ~"calc(var(--row-h) * var(--rise))";
    --row-h: ~"clamp(540px, calc(100vh - var(--nh-total, var(--nh-h, var(--header-height, 80px))) - var(--top-space) - var(--row-room) - var(--title-band) / 2), var(--row-max))";
  }
  html body #novule-hero#novule-hero .user-items-list { padding-top: ~"calc(var(--hero-top) + var(--title-band))" !important; }
  html body #novule-hero#novule-hero .list-section-title {
    top: var(--hero-top) !important;
    left: 0 !important;
    right: 14px !important;
    width: auto !important;
    padding-left: inherit !important;
    padding-right: inherit !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 40px;
  }
  html body #novule-hero#novule-hero .list-section-title p,
  html body #novule-hero#novule-hero .list-section-title h1,
  html body #novule-hero#novule-hero .list-section-title h2,
  html body #novule-hero#novule-hero .list-section-title h3 {
    width: auto !important;
    font-size: var(--split-size) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }
  html body #novule-hero#novule-hero .list-section-title > *:last-child:not(:first-child) { text-align: right !important; }
  html body #novule-hero#novule-hero .list-section-title > *:has(> .nv-split-a) {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 40px;
  }
  html body #novule-hero#novule-hero .list-section-title .nv-split-b { text-align: right; }
}

Paste in: Settings, Developer tools, Code injection, Footer (splits the headline)

Ready to paste

<!-- Spotlight headline split · Novule
     Splits the Spotlight title after the first full stop. Nothing to edit. -->
<style>
@media (max-width:767px){
  html body #novule-hero .list-section-title p{display:grid!important;gap:2px}
  html body #novule-hero .nv-split-a,html body #novule-hero .nv-split-b{display:block!important}
  html body #novule-hero .nv-split-b{text-align:right!important}
  html body #novule-hero#novule-hero#novule-hero ul.user-items-list-item-container{padding-left:32px!important;padding-right:32px!important}
  html body #novule-hero#novule-hero#novule-hero ul.user-items-list-item-container > li.list-item{flex:0 0 calc(100vw - 64px)!important;width:calc(100vw - 64px)!important;max-width:none!important}
  html body #novule-hero#novule-hero#novule-hero ul.user-items-list-item-container > li.list-item .list-item-media{height:300px!important}
  html body #novule-hero#novule-hero#novule-hero ul.user-items-list-item-container > li.list-item::before{top:291px!important}
}
</style>
<script>
(function () {
  function split() {
    if (document.body.classList.contains('sqs-edit-mode-active')) return;
    var t = document.querySelector('#novule-hero .list-section-title');
    if (!t || t.querySelector('.nv-split-a')) return;
    var blocks = t.querySelectorAll('p, h1, h2, h3');
    if (blocks.length !== 1) return;
    var p = blocks[0], h = p.innerHTML, i = h.indexOf('. ');
    if (i < 0) return;
    p.innerHTML = '<span class="nv-split-a">' + h.slice(0, i + 1) + '</span><span class="nv-split-b">' + h.slice(i + 2) + '</span>';
  }
  function centre() {
    if (window.innerWidth > 767 || document.body.classList.contains('sqs-edit-mode-active')) return;
    var ul = document.querySelector('#novule-hero ul.user-items-list-item-container');
    if (!ul || ul.children.length < 2 || ul.getAttribute('data-nv-centred')) return;
    var li = ul.children[Math.floor((ul.children.length - 1) / 2)];
    var a = li.getBoundingClientRect(), b = ul.getBoundingClientRect();
    if (!a.width) return;
    ul.style.scrollSnapType = 'none';
    ul.scrollLeft += (a.left + a.width / 2) - (b.left + b.width / 2);
    requestAnimationFrame(function () { ul.style.scrollSnapType = ''; });
    ul.setAttribute('data-nv-centred', '1');
  }
  function run() { split(); centre(); }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', run); else run();
  window.addEventListener('load', run);
  window.addEventListener('mercury:load', run);
})();
</script>

04FAQFolder FAQ with the departure board

Section IDnovule-faq

Paste in: Settings, Developer tools, Code injection, Footer (CSS included)

Ready to paste

<!-- Folder FAQ · Novule
     List section (Anchor Link: novule-faq). Section title: "Got questions?"
     Item title: the question. Item description: the answer. -->
<style>
.ff,.ff-fly{
  --ff-wine:hsl(var(--accent-hsl));--ff-dark:hsl(var(--darkAccent-hsl));--ff-rose:hsl(var(--lightAccent-hsl));--ff-cream:hsl(var(--white-hsl));
  --ff-blush:color-mix(in srgb,hsl(var(--lightAccent-hsl)) 36%,hsl(var(--white-hsl)));
  --ff-ink2:color-mix(in srgb,hsl(var(--darkAccent-hsl)) 72%,hsl(var(--white-hsl)));
  --ff-head:var(--heading-font-font-family);--ff-body:var(--body-font-font-family);
  --ff-peb:58% 42% 46% 54%/50% 60% 40% 50%;
}
.ff{
  --ff-space:clamp(8px,1.5vw,24px);
  box-sizing:border-box;width:100%;margin-top:var(--ff-space);padding-top:40px;
  display:grid;grid-template-columns:minmax(320px,440px) minmax(0,1fr);gap:clamp(28px,4vw,48px);align-items:stretch;
  font-family:var(--ff-body);color:var(--ff-dark);
}
.ff *{box-sizing:border-box}
.ff-lbl{font:700 11px/1 var(--ff-body);letter-spacing:.24em;text-transform:uppercase;color:var(--ff-wine)}

.ff-fold{position:relative;min-height:500px}
.ff{--ff-tab-h:40px}
.ff-shape{position:absolute;left:0;right:0;top:calc(var(--ff-tab-h) * -1);bottom:0;z-index:1;
  filter:drop-shadow(1.5px 0 0 var(--ff-dark)) drop-shadow(-1.5px 0 0 var(--ff-dark)) drop-shadow(0 1.5px 0 var(--ff-dark)) drop-shadow(0 -1.5px 0 var(--ff-dark)) drop-shadow(5px 6px 0 var(--ff-dark))}
.ff-sil{position:absolute;inset:0;background:var(--ff-rose)}
.ff-front{position:absolute;left:0;right:0;top:calc(100% - var(--ff-pocket,190px));bottom:0;z-index:3;border-radius:22px 22px 26px 26px;background:var(--ff-blush);
  box-shadow:0 0 0 1.5px var(--ff-dark),7px 9px 0 1.5px var(--ff-dark);padding:28px 30px 26px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.ff-front::before{content:"";position:absolute;left:18px;right:18px;top:13px;border-top:1.5px dashed color-mix(in srgb,hsl(var(--accent-hsl)) 40%,transparent)}
.ff-front h2{margin:0!important;text-wrap:balance;font-family:var(--ff-head)!important;font-weight:400!important;font-size:clamp(32px,3vw,42px)!important;line-height:1.02!important;letter-spacing:-.01em;color:var(--ff-dark)!important}
.ff-front .ff-qm{display:inline-grid;place-items:center;width:1.45em;height:1.45em;margin-left:.22em;vertical-align:.12em;font-size:.72em;line-height:1;
  border-radius:var(--ff-peb);background:var(--ff-wine);color:var(--ff-cream);box-shadow:0 0 0 2px var(--ff-dark),3px 4px 0 2px var(--ff-dark)}

.ff-card{position:absolute;inset:0;background:color-mix(in srgb,hsl(var(--darkAccent-hsl)) 15%,hsl(var(--white-hsl)))}
.ff-card .c-im{position:absolute;inset:0;overflow:hidden}
.ff-card .c-im img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.ff-sil > .ff-card{opacity:0;transition:opacity .35s}
.ff-sil > .ff-card.on{opacity:1}

.ff-fly{position:fixed;left:0;top:0;z-index:998;pointer-events:none;display:none;width:290px;height:350px;transform-style:preserve-3d}
.ff-fly > *{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ff-fly > .ff-card{transform:rotateY(180deg);background:none;filter:drop-shadow(1.5px 0 0 var(--ff-dark)) drop-shadow(-1.5px 0 0 var(--ff-dark)) drop-shadow(0 1.5px 0 var(--ff-dark)) drop-shadow(0 -1.5px 0 var(--ff-dark)) drop-shadow(5px 6px 0 var(--ff-dark))}
.ff-fly > .ff-card .c-im{background:color-mix(in srgb,hsl(var(--darkAccent-hsl)) 15%,hsl(var(--white-hsl)))}
.ff-pass{position:absolute;inset:0;color:var(--ff-cream);border-radius:28px;background:linear-gradient(var(--ff-rose) 48px,var(--ff-wine) 0);filter:drop-shadow(4px 5px 0 var(--ff-dark));
  -webkit-mask:radial-gradient(circle at 0 48px,transparent 11px,#000 11.5px) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 48px,transparent 11px,#000 11.5px) 100% 0/51% 100% no-repeat;
          mask:radial-gradient(circle at 0 48px,transparent 11px,#000 11.5px) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 48px,transparent 11px,#000 11.5px) 100% 0/51% 100% no-repeat}
.ff-pass .p-e{height:48px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 20px;color:var(--ff-wine);font:700 8.5px/1 var(--ff-body);letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
.ff-pass .p-r{display:flex;justify-content:space-between;align-items:center;margin:30px 20px 0;font:400 42px/1 var(--ff-head)}
.ff-pass .p-r i{width:.62em;height:.62em;background:var(--ff-cream);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='rotate(90 12 12)' d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='rotate(90 12 12)' d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E") center/contain no-repeat}
.ff-pass .p-t{margin:26px 20px 0;font:400 19px/1.15 var(--ff-head)}

.ff{--ff-board:hsl(var(--darkAccent-hsl));--ff-rowbg:color-mix(in srgb,hsl(var(--accent-hsl)) 32%,hsl(var(--darkAccent-hsl)));
  --ff-tile:color-mix(in srgb,hsl(var(--darkAccent-hsl)) 70%,#000)}
.ff-items{display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:16px;border-radius:24px;background:var(--ff-board);
  box-shadow:0 0 0 1.5px var(--ff-dark),7px 9px 0 1.5px color-mix(in srgb,hsl(var(--darkAccent-hsl)) 60%,#000)}
.ff-row{border-radius:14px;background:var(--ff-rowbg);transition:background-color .3s}
.ff-row:hover{background:color-mix(in srgb,hsl(var(--accent-hsl)) 45%,hsl(var(--darkAccent-hsl)))}
.ff-btn{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:16px 18px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ff-btn:focus-visible{outline:2px solid var(--ff-rose);outline-offset:-4px;border-radius:12px}
.ff-flap{display:flex;gap:3px;perspective:300px}
.ff-flap span{position:relative;width:30px;height:42px;border-radius:6px;background:var(--ff-tile);color:var(--ff-rose);display:grid;place-items:center;font:400 25px/1 var(--ff-head)}
.ff-flap span::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:color-mix(in srgb,hsl(var(--darkAccent-hsl)) 40%,#000)}
.ff-flap span.go{animation:ffFlap .5s cubic-bezier(.3,.7,.4,1)}
@keyframes ffFlap{0%{transform:rotateX(0)}40%{transform:rotateX(90deg)}41%{transform:rotateX(-90deg)}100%{transform:rotateX(0)}}
.ff-q{font:500 clamp(17px,1.5vw,20px)/1.3 var(--ff-body);color:var(--ff-cream);letter-spacing:.01em;perspective:600px}
.ff-q .ff-w{display:inline-block;white-space:pre;transform-origin:50% 0}
.ff-q.run .ff-w{animation:ffWord .5s cubic-bezier(.3,.7,.4,1) both}
@keyframes ffWord{0%{transform:rotateX(-90deg);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
.ff-led{width:11px;height:11px;border-radius:50%;background:color-mix(in srgb,hsl(var(--accent-hsl)) 60%,hsl(var(--darkAccent-hsl)));box-shadow:0 0 0 2px var(--ff-tile);transition:background-color .4s,box-shadow .4s}
.ff-row.open .ff-led{background:var(--ff-rose);box-shadow:0 0 0 2px var(--ff-tile),0 0 10px 1px color-mix(in srgb,hsl(var(--lightAccent-hsl)) 70%,transparent)}
.ff-ex{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1)}
.ff-ex>div{overflow:hidden;min-height:0}
.ff-a{margin:0 18px 18px;padding:18px 20px;border-radius:10px;background:var(--ff-cream);color:var(--ff-dark);font-size:16px;line-height:1.55}
.ff-a p{margin:0 0 .8em;color:inherit!important}.ff-a p:last-child{margin-bottom:0}
.ff-a a{color:var(--ff-wine)!important;text-decoration:underline}
.ff-row.open .ff-ex{grid-template-rows:1fr}

:is(#novule-faq,#folder-faq).ff-ready .list-section-title,
:is(#novule-faq,#folder-faq).ff-ready .user-items-list-item-container{display:none!important}
html body #novule-hero .ff-moving{opacity:0!important;transition:none!important}

@media (max-width:900px){
  .ff{grid-template-columns:minmax(0,1fr)}
  .ff-fold{max-width:440px;width:100%;min-height:520px}
  .ff-items{margin-top:12px}
}
@media (max-width:640px){
  .ff{padding-top:44px}
  .ff{--ff-pocket:160px}
  .ff-front{padding:24px 22px}
  .ff-items{padding:12px}
  .ff-btn{gap:12px;padding:14px 12px}
  .ff-flap span{width:24px;height:34px;font-size:20px}
  .ff-a{margin:0 12px 12px;padding:16px}
}
@media (max-width:767px){
  html body .ff{padding-top:88px!important;padding-left:24px!important;padding-right:24px!important}
  html body .ff-fold{max-width:none!important;width:100%!important}
}
@keyframes ffShow{to{visibility:visible}}
body:not(.sqs-edit-mode-active) :is(#novule-faq,#folder-faq):not(.ff-ready) .content-wrapper{visibility:hidden;animation:ffShow 0s 4s forwards}
@media (prefers-reduced-motion:reduce){.ff-ex{transition:none}.ff-q.run .ff-w,.ff-flap span.go{animation:none}}
</style>

<script>
(function () {
var SECTION = '#novule-faq, #folder-faq', SPOT = '#novule-hero';
var OPEN_FIRST = true;
var ONE_AT_A_TIME = true;
var FLIGHT = true;
var WORD_FLIP = false;
var NUMBER_FLIP = true;
var MIN_WIDTH = 1024;
var ENGLISH = { 'español': 'Spanish', 'français': 'French', 'francais': 'French', 'italiano': 'Italian', 'português': 'Portuguese', 'portugues': 'Portuguese', 'deutsch': 'German' };

function q(s, r) { return (r || document).querySelector(s); }
function qa(s, r) { return Array.prototype.slice.call((r || document).querySelectorAll(s)); }
function el(tag, cls, html) { var e = document.createElement(tag); if (cls) e.className = cls; if (html != null) e.innerHTML = html; return e; }
function txt(e) { return e ? e.textContent.replace(/\s+/g, ' ').trim() : ''; }
function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
function two(n) { return (n < 10 ? '0' : '') + n; }
function cl(x) { return Math.max(0, Math.min(1, x)); }
function lerp(a, b, t) { return a + (b - a) * t; }
function io(t) { return t < .5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; }
function src(img) { return img ? (img.currentSrc || img.getAttribute('data-src') || img.src || '') : ''; }
function still() { return window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; }

function cardData(li) {
  var ps = qa('.list-item-content__description p', li);
  var codes = ps[1] ? qa('strong', ps[1]).map(txt) : [];
  var eyebrow = ps[0] ? txt(ps[0]) : 'Boarding pass';
  var lang = (eyebrow.split('·')[1] || '').trim();
  var key = lang.toLowerCase();
  return {
    eyebrow: eyebrow, lang: lang, a: codes[0] || 'EN', b: codes[1] || '', title: txt(q('.list-item-content__title', li)),
    img: src(q('.list-item-media img', li) || q('img', li)),
    langEn: ENGLISH[key] || lang
  };
}
function passHTML(d) {
  var parts = d.eyebrow.split('·'), left = (parts[0] || '').trim() + (parts.length > 1 ? ' ·' : '');
  return '<div class="ff-pass"><div class="p-e"><span>' + esc(left) + '</span><span>' + esc(d.lang) + '</span></div>' +
    '<div class="p-r"><span>' + esc(d.a) + '</span><i></i><span>' + esc(d.b) + '</span></div><div class="p-t">' + esc(d.title) + '</div></div>';
}
function cardHTML(d) {
  return '<div class="c-im">' + (d.img ? '<img alt="" src="' + esc(d.img) + '">' : '') + '</div>';
}

function folderPath(w, h) {
  var th = Math.min(40, h / 4), tw = Math.min(150, w * .42), tr = 14, r = Math.min(26, w / 6), j = 10;
  return "path('M0 " + tr + " A" + tr + " " + tr + " 0 0 1 " + tr + " 0 L" + (tw - tr) + " 0 A" + tr + " " + tr + " 0 0 1 " + tw + " " + tr +
    " L" + tw + " " + (th - j) + " A" + j + " " + j + " 0 0 0 " + (tw + j) + " " + th + " L" + (w - r) + " " + th + " A" + r + " " + r + " 0 0 1 " + w + " " + (th + r) +
    " L" + w + " " + (h - r) + " A" + r + " " + r + " 0 0 1 " + (w - r) + " " + h + " L" + r + " " + h + " A" + r + " " + r + " 0 0 1 0 " + (h - r) + " Z')";
}
function cutFolder() {
  if (!built) return;
  var w = built.shape.offsetWidth, h = built.shape.offsetHeight;
  if (w && h) built.sil.style.clipPath = folderPath(w, h);
}

function flipWords(row, text, delay) {
  if (still()) return;
  var t = q('.ff-q', row);
  setTimeout(function () {
    if (NUMBER_FLIP) qa('.ff-flap span', row).forEach(function (tile, k) {
      tile.classList.remove('go'); void tile.offsetWidth;
      setTimeout(function () { tile.classList.add('go'); }, k * 90);
    });
    if (!WORD_FLIP) return;
    t.classList.remove('run');
    t.innerHTML = text.split(' ').map(function (w, i, a) {
      return '<span class="ff-w" style="animation-delay:' + (i * 70) + 'ms">' + esc(w) + (i < a.length - 1 ? ' ' : '') + '</span>';
    }).join('');
    void t.offsetWidth;
    t.classList.add('run');
  }, delay || 0);
}

var built = null;
function build() {
  var s = q(SECTION);
  if (!s || built) return;
  if (document.body.classList.contains('sqs-edit-mode-active')) return;
  var list = q('.user-items-list', s), lis = qa('li.list-item', s);
  if (!list || !lis.length) return;
  var data = lis.map(function (li) {
    var d = q('.list-item-content__description', li);
    return { q: txt(q('.list-item-content__title', li)), a: d ? d.innerHTML.trim() : '' };
  }).filter(function (d) { return d.q; });
  if (!data.length) return;
  var tt = q('.list-section-title', s), head = '';
  if (tt) { var c = tt.cloneNode(true); qa('strong, b', c).forEach(function (b) { b.remove(); }); head = txt(c) || txt(tt); }

  var uid = 'ff' + Math.random().toString(36).slice(2, 7);
  var wrap = el('div', 'ff');
  var fold = el('div', 'ff-fold',
    '<div class="ff-shape" aria-hidden="true"><div class="ff-sil"><div class="ff-card"></div></div></div>' +
    '<div class="ff-front">' + (head ? '<h2>' + esc(head).replace(/[?？]/g, '<span class="ff-qm">?</span>') + '</h2>' : '') +
      '</div>');
  wrap.appendChild(fold);
  var box = el('div', 'ff-items');
  var rows = data.map(function (d, i) {
    var n = two(i + 1);
    var r = el('div', 'ff-row',
      '<button class="ff-btn" type="button" aria-expanded="false" aria-controls="' + uid + '-' + i + '" aria-label="' + esc(d.q) + '">' +
        '<span class="ff-flap" aria-hidden="true"><span>' + n.charAt(0) + '</span><span>' + n.charAt(1) + '</span></span>' +
        '<span class="ff-q" aria-hidden="true">' + esc(d.q) + '</span><i class="ff-led" aria-hidden="true"></i></button>' +
      '<div class="ff-ex" id="' + uid + '-' + i + '" role="region"><div><div class="ff-a">' + d.a + '</div></div></div>');
    var btn = q('.ff-btn', r);
    btn.addEventListener('click', function () {
      var open = !r.classList.contains('open');
      if (ONE_AT_A_TIME) rows.forEach(function (x) { x.classList.remove('open'); q('.ff-btn', x).setAttribute('aria-expanded', 'false'); });
      r.classList.toggle('open', open); btn.setAttribute('aria-expanded', open ? 'true' : 'false');
      if (open) flipWords(r, d.q, 0);
    });
    box.appendChild(r); return r;
  });
  wrap.appendChild(box);
  if (OPEN_FIRST && rows[0]) { rows[0].classList.add('open'); q('.ff-btn', rows[0]).setAttribute('aria-expanded', 'true'); }
  if (window.IntersectionObserver && (WORD_FLIP || NUMBER_FLIP) && !still()) {
    var seen = new IntersectionObserver(function (es) { es.forEach(function (e) {
      if (e.isIntersecting) { rows.forEach(function (r, i) { flipWords(r, data[i].q, i * 180); }); seen.disconnect(); }
    }); }, { threshold: .3 });
    seen.observe(box);
  }

  var ul = q('.user-items-list-item-container', s);
  if (ul && ul.parentNode) ul.parentNode.insertBefore(wrap, ul.nextSibling); else list.appendChild(wrap);
  function align() { if (!ul) return; var cs = getComputedStyle(ul); ['paddingLeft', 'paddingRight', 'marginLeft', 'marginRight', 'maxWidth'].forEach(function (p) { wrap.style[p] = cs[p]; }); }
  align(); window.addEventListener('resize', align);
  s.classList.add('ff-ready');
  built = { s: s, wrap: wrap, fold: fold, card: q('.ff-card', fold), shape: q('.ff-shape', fold), sil: q('.ff-sil', fold) };
  cutFolder();
  if (window.ResizeObserver) new ResizeObserver(cutFolder).observe(built.shape); else window.addEventListener('resize', cutFolder);
}
function teardown() { if (!built) return; built.wrap.remove(); built.s.classList.remove('ff-ready'); built = null; }

var filedKey = null, current = null;
function file(li, show) {
  if (!built) return;
  if (li) {
    var d = cardData(li), key = d.title + d.img;
    if (filedKey !== key) { built.card.innerHTML = cardHTML(d); filedKey = key; current = d; }
  }
  built.card.classList.toggle('on', !!show && !!current);
}

var fly = null, moving = null, done = false, raf = 0;
function off() {
  return !FLIGHT || window.innerWidth < MIN_WIDTH || document.body.classList.contains('sqs-edit-mode-active') || still();
}
function openLi(spot) { var lis = qa('li.list-item', spot); return q('li.list-item:hover', spot) || lis[lis.length - 1] || null; }
function release() {
  if (moving) { var ct = q('.list-item-content', moving); if (ct) ct.classList.remove('ff-moving'); moving = null; }
  if (fly) fly.style.display = 'none';
  if (built) { built.card.style.transform = ''; built.card.classList.remove('pop'); }
}
function frame() {
  raf = requestAnimationFrame(frame);
  if (!built) return;
  var spot = q(SPOT);
  if (!spot || off()) { release(); file(spot && openLi(spot), !!spot); built.card.classList.add('up'); return; }
  built.card.classList.remove('up');

  var vh = window.innerHeight, F = built.fold.getBoundingClientRect();
  var p = cl((vh - F.top) / (vh * .6));
  if (done) { if (p <= 0) { done = false; release(); file(null, false); } return; }
  if (p <= 0) { release(); file(null, false); return; }

  if (!moving) { moving = openLi(spot); if (!moving) return; file(moving, false); }
  var ct = q('.list-item-content', moving), d = current;
  if (!fly) {
    fly = el('div', 'ff-fly'); fly.setAttribute('aria-hidden', 'true');
    document.body.appendChild(fly);
  }
  if (fly.dataset.k !== filedKey) { fly.innerHTML = passHTML(d) + '<div class="ff-card">' + cardHTML(d) + '</div>'; fly.dataset.k = filedKey; }

  var li = ct.getBoundingClientRect(), b = getComputedStyle(ct, '::before');
  var P = { x: li.left + (parseFloat(b.left) || 0), y: li.top + (parseFloat(b.top) || 0), w: parseFloat(b.width) || li.width, h: parseFloat(b.height) || li.height };
  var rest = built.card, S = built.shape.getBoundingClientRect(), W = S.width, H = S.height;
  ct.classList.add('ff-moving');

  var a = io(cl(p / .62)), flip = io(cl((p - .08) / .46)) * 180, fade = cl((p - .57) / .07);
  if (p >= .66) { done = true; fly.style.display = 'none'; q('.ff-card', fly).style.opacity = ''; file(moving, true); return; }
  var w = lerp(P.w, W, a), h = lerp(P.h, H, a);
  var x = lerp(P.x, S.left, a), y = lerp(P.y, S.top, a) - Math.sin(Math.PI * a) * 80;
  fly.style.display = 'block';
  fly.style.width = w + 'px'; fly.style.height = h + 'px';
  q('.c-im', fly).style.clipPath = folderPath(w, h);
  fly.style.transformOrigin = '50% 50%';
  fly.style.transform = 'translate(' + x + 'px,' + y + 'px) perspective(1400px) rotate(' + (Math.sin(Math.PI * a) * -6) + 'deg) rotateY(' + flip + 'deg)';
  q('.ff-card', fly).style.opacity = 1 - fade;
  rest.classList.toggle('on', fade > 0);
}

function start() { build(); if (!raf) raf = requestAnimationFrame(frame); }
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start); else start();
window.addEventListener('load', build);
new MutationObserver(function () { if (document.body.classList.contains('sqs-edit-mode-active')) { release(); teardown(); } else build(); }).observe(document.body, { attributes: true, attributeFilter: ['class'] });
window.addEventListener('mercury:load', function () { release(); teardown(); done = false; filedKey = null; current = null; build(); });
})();
</script>