:root {
  --fu-paper: #EDF4FC;
  --fu-cream: #E6F0FA;
  --fu-platinum: #D5E2EE;
  --fu-ink: #141A24;
  --fu-ink-soft: #364454;
  --fu-steel: #A9B4BF;
  --fu-sky: #D6EAFB;
  --fu-sky-deep: #8CC8F2;
  --fu-mint: #DDF5E3;
  --fu-butter: #F3E6CB;
  --fu-blush: #FFE3DD;
  --fu-lilac: #EFE4FF;
  --fu-sea: #D7F7F3;
  --fu-red: #6C5BF0;       
  --fu-lamp: #E6CDA0;      
  --fu-orange: #9B8CFF;    
  --fu-blue: #2F6FC4;      
  --fu-s1: #FF4D3D;
  --fu-s2: #FF8A1F;
  --fu-s3: #E6CDA0;
  --fu-s4: #3FD36B;
  --fu-s5: #3B8BFF;
  --fu-s6: #9B5CFF;
  --fu-font-display: 'Nunito', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --fu-font-voice: 'Cormorant Garamond', Garamond, Georgia, serif;
  --fu-font-label: 'Big Shoulders Stencil', Impact, 'Arial Narrow', sans-serif;
  --fu-line: 3px;
  --fu-line-bold: 4px;
  --fu-shadow: 4px 4px 0 var(--fu-ink);
  --fu-shadow-lift: 7px 7px 0 var(--fu-ink);
  --fu-radius-s: 8px;
  --fu-radius-m: 14px;
  --fu-radius-pill: 999px;
  --fu-spring: cubic-bezier(.34, 1.56, .64, 1);
  --fu-ease: cubic-bezier(.4, 0, .2, 1);
  --fu-fast: 120ms;
  --fu-mid: 260ms;
  --fu-slow: 650ms;
}
.fu-night {
  --fu-paper: #0F1522;
  --fu-cream: #1A2232;
  --fu-platinum: #222B3D;
  --fu-ink: #E6F0FA;
  --fu-ink-soft: #B7C7D6;
  --fu-sky: #1C2B45;
  --fu-mint: #17302A;
  --fu-butter: #33301C;
  --fu-blush: #3A2426;
  --fu-lilac: #2A2340;
  --fu-sea: #15322F;
  --fu-blue: #8CC8F2;
}
.fu-wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--fu-ink);
  text-decoration: none;
  line-height: 1;
}
.fu-wordmark__lead {
  font-family: var(--fu-font-voice);
  font-style: italic;
  font-weight: 500;
  font-size: .32em;
  letter-spacing: .01em;
  padding-left: .2em;
  margin-bottom: .04em;
}
.fu-wordmark__row { display: inline-flex; align-items: flex-end; }
.fu-wordmark__main {
  font-family: var(--fu-font-display);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .86;
  text-shadow: .045em .045em 0 var(--fu-orange);
}
.fu-wordmark__tail {
  font-family: var(--fu-font-display);
  font-weight: 900;
  font-size: .42em;
  display: inline-flex;
  align-items: flex-end;
  gap: .02em;
  padding-bottom: .12em;
  margin-left: .12em;
}
.fu-l { display: inline-block; transform-origin: 50% 90%; }
.fu-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fu-wordmark__tail .fu-l:nth-child(2) { font-size: .78em; transform: translateY(.08em) rotate(10deg); }
.fu-wordmark__tail .fu-l:nth-child(3) { font-size: .6em; transform: translateY(.16em) rotate(-14deg); }
.fu-wordmark__tail .fu-l:nth-child(4) { font-size: .45em; transform: translateY(.28em) rotate(24deg); }
.fu-wordmark--s { font-size: 40px; }
.fu-wordmark--m { font-size: 96px; }
.fu-wordmark--l { font-size: clamp(88px, 13vw, 190px); }
.fu-lockup { display: inline-flex; align-items: baseline; flex-wrap: wrap; color: var(--fu-ink); }
.fu-lockup__voice { font-family: var(--fu-font-voice); font-weight: 500; font-size: 1em; }
.fu-lockup__dom { font-family: var(--fu-font-label); font-weight: 900; font-size: 1.08em; }
.fu-btn {
  font-family: var(--fu-font-display);
  font-weight: 900;
  font-size: 17px;
  line-height: 1.1;
  color: var(--fu-ink);
  background: var(--fu-butter);
  border: var(--fu-line) solid var(--fu-ink);
  border-radius: var(--fu-radius-s);
  padding: 12px 20px;
  min-height: 48px;
  box-shadow: var(--fu-shadow);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform var(--fu-fast) var(--fu-ease), box-shadow var(--fu-fast) var(--fu-ease);
}
.fu-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--fu-ink); }
.fu-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--fu-ink); }
.fu-btn--primary { 
  background: var(--fu-red);
  border-radius: var(--fu-radius-pill);
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.18), inset 0 4px 0 rgba(255,255,255,.35), 0 5px 0 var(--fu-ink);
  color: #F7FAFE;
}
.fu-btn--primary:hover { transform: translateY(-1px); box-shadow: inset 0 -5px 0 rgba(0,0,0,.18), inset 0 4px 0 rgba(255,255,255,.35), 0 6px 0 var(--fu-ink); }
.fu-btn--primary:active { transform: translateY(4px); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 1px 0 var(--fu-ink); }
.fu-btn--quiet { background: var(--fu-cream); }
.fu-card {
  background: var(--fu-cream);
  color: var(--fu-ink);
  border: var(--fu-line) solid var(--fu-ink);
  border-radius: var(--fu-radius-m);
  box-shadow: var(--fu-shadow);
  transition: transform var(--fu-mid) var(--fu-spring), box-shadow var(--fu-mid) var(--fu-spring);
}
a.fu-card:hover, .fu-card--lift:hover { transform: translate(-2px, -2px); box-shadow: var(--fu-shadow-lift); }
.fu-plate {
  font-family: var(--fu-font-label);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: inline-block;
  width: fit-content;
  justify-self: start;
  align-self: start;
  background: var(--fu-cream);
  color: var(--fu-ink);
  border: var(--fu-line) solid var(--fu-ink);
  border-radius: 6px;
  padding: 4px 10px;
}
.fu-voice { font-family: var(--fu-font-voice); font-style: italic; font-weight: 500; }
.fu-trail {
  display: block;
  height: 18px;
  border: 0;
  margin: 24px 0;
  background:
    linear-gradient(var(--fu-s1), var(--fu-s1)) 0 0 / 100% 2px no-repeat,
    linear-gradient(var(--fu-s2), var(--fu-s2)) 0 3px / 100% 2px no-repeat,
    linear-gradient(var(--fu-s3), var(--fu-s3)) 0 6px / 100% 2px no-repeat,
    linear-gradient(var(--fu-s4), var(--fu-s4)) 0 9px / 100% 2px no-repeat,
    linear-gradient(var(--fu-s5), var(--fu-s5)) 0 12px / 100% 2px no-repeat,
    linear-gradient(var(--fu-s6), var(--fu-s6)) 0 15px / 100% 2px no-repeat,
    var(--fu-ink);
  border-radius: 2px;
}
.fu-skin :focus-visible, .fu-btn:focus-visible, .fu-card:focus-visible, [data-fu]:focus-visible {
  outline: 3px dashed var(--fu-blue);
  outline-offset: 3px;
}
.fu-skin { background: var(--fu-paper); color: var(--fu-ink); font-family: var(--fu-font-display); transition: background-color var(--fu-slow), color var(--fu-slow); }
.fu-skin h1, .fu-skin h2 { font-family: var(--fu-font-display); font-weight: 900; letter-spacing: -.03em; }
.fu-skin h3 { font-family: var(--fu-font-display); font-weight: 800; }
.fu-skin a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.fu-skin a:hover { text-decoration-color: var(--fu-orange); }
.fu-skin blockquote, .fu-skin .lead { font-family: var(--fu-font-voice); font-size: 1.25em; }
.fu-jiggle-on { animation: fu-jiggle .45s var(--fu-ease); }
@keyframes fu-jiggle {
  25% { transform: rotate(-9deg) translateY(-.08em); }
  50% { transform: rotate(6deg); }
  75% { transform: rotate(-3deg); }
}
.fu-spring { display: inline-block; flex-shrink: 0; width: .26em; height: .38em; margin: 0 .02em .2em .04em; transform-origin: 0% 50%; transition: width .4s var(--fu-spring), transform .5s var(--fu-spring); }
.fu-spring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fu-spring path { stroke-width: 2px; }
.fu-wordmark--m .fu-spring path { stroke-width: 3.5px; }
.fu-wordmark--l .fu-spring path { stroke-width: 5px; }
.fu-spring.is-out { width: 1.1em; transition: width .12s cubic-bezier(.2,1.8,.4,1); }
.fu-spring.is-dangle { animation: fu-dangle 1.4s ease-out forwards; }
.fu-spring.is-hang { transform: rotate(64deg); }
@keyframes fu-dangle {
  0% { transform: rotate(0); } 22% { transform: rotate(82deg); } 40% { transform: rotate(50deg); }
  56% { transform: rotate(72deg); } 70% { transform: rotate(58deg); } 84% { transform: rotate(67deg); } 100% { transform: rotate(64deg); }
}
.fu-wordmark__tail.is-fly { animation: fu-fly .95s cubic-bezier(.3,.1,.6,1) .05s forwards; }
@keyframes fu-fly { 0% { transform: none; } 35% { transform: translate(2em, -1.8em) rotate(220deg); } 100% { transform: translate(7em, -.5em) rotate(640deg); opacity: 0; } }
.fu-wordmark__tail.is-gone { opacity: 0; }
.fu-wordmark__tail.is-drop { animation: fu-drop .95s ease-in forwards; }
@keyframes fu-drop { 0% { transform: translateY(-4em) rotate(-25deg); opacity: 0; } 10% { opacity: 1; } 55% { transform: none; } 70% { transform: translateY(-.25em); } 82% { transform: none; } 91% { transform: translateY(-.06em); } 100% { transform: none; } }
.fu-slip { display: inline-block; transform-origin: 20% 90%; }
.fu-slip.is-slipping { animation: fu-slip 14s ease-in forwards; }
@keyframes fu-slip { 80% { transform: translateY(.06em) rotate(8deg); } 100% { transform: translateY(.24em) rotate(28deg); } }
.fu-slip.is-fixed { animation: fu-pop .6s var(--fu-spring); }
@keyframes fu-pop { 0% { transform: translateY(.24em) rotate(28deg); } 100% { transform: none; } }
[data-fu="dodge-once"] { display: inline-block; transition: transform .25s var(--fu-spring); }
[data-fu="dodge-once"].is-dodging { transform: translate(48px, -4px) rotate(5deg); }
.fu-note { position: absolute; font-family: var(--fu-font-voice); font-style: italic; font-size: 16px; color: var(--fu-blue); pointer-events: none; white-space: nowrap; opacity: 0; transition: opacity .2s; }
.fu-note.is-on { opacity: 1; }
[data-fu="develop"] { transition: filter 4.5s var(--fu-ease); }
[data-fu="develop"].is-undeveloped { filter: sepia(1) brightness(.4) blur(2px); }
[data-fu="lamp"] { cursor: pointer; }
.fu-night [data-fu="lamp"] { filter: drop-shadow(0 0 8px #E6CDA0) drop-shadow(0 0 18px #C8AF80); }
.fu-falling { animation: fu-fall .7s cubic-bezier(.5,0,.8,.5) forwards; transform-origin: 20% 100%; }
@keyframes fu-fall { to { transform: translate(40px, 240px) rotate(55deg); opacity: 0; } }
.fu-returning { animation: fu-return .7s var(--fu-spring); }
@keyframes fu-return { from { transform: translate(40px, 240px) rotate(55deg); opacity: 0; } to { transform: none; opacity: 1; } }
[data-fu="drift"] { transition: transform 6s cubic-bezier(.45,0,.3,1); }
.fu-blob { display: inline-block; width: 96px; height: 96px; background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; vertical-align: bottom; }
.fu-blob-svg { width: 100%; height: 100%; overflow: visible; }
.fu-blob-body, .fu-blob-drop, .fu-blob-face, .fu-blob-eyes { transform-box: fill-box; }
.fu-blob-body { transform-origin: 50% 100%; animation: fu-breathe 2.8s ease-in-out infinite; }
@keyframes fu-breathe { 50% { transform: scale(1.04, .95); } }
.fu-blob-eyes { transform-origin: 50% 50%; animation: fu-blink 4.6s steps(1) infinite; }
@keyframes fu-blink { 0%, 96% { transform: none; } 97%, 99% { transform: scaleY(.15); } }
.fu-blob:hover .fu-blob-body { animation: fu-wobble .55s var(--fu-spring); }
@keyframes fu-wobble { 30% { transform: scale(1.12, .86); } 60% { transform: scale(.94, 1.08); } }
.fu-blob.is-splat .fu-blob-body { animation: fu-splat 1.4s var(--fu-ease); }
@keyframes fu-splat { 12% { transform: scale(1.55, .32); } 55% { transform: scale(1.35, .45); } 85% { transform: scale(.9, 1.16); } 100% { transform: none; } }
.fu-blob.is-splat .fu-d1 { animation: fu-d1 1.4s var(--fu-ease); }
.fu-blob.is-splat .fu-d2 { animation: fu-d2 1.4s var(--fu-ease); }
.fu-blob.is-splat .fu-d3 { animation: fu-d3 1.4s var(--fu-ease); }
@keyframes fu-d1 { 15% { transform: translate(-50px, 4px); } 55% { transform: translate(-56px, 6px); } 90%, 100% { transform: none; } }
@keyframes fu-d2 { 15% { transform: translate(50px, 4px); } 55% { transform: translate(58px, 6px); } 90%, 100% { transform: none; } }
@keyframes fu-d3 { 15% { transform: translate(0, -46px); } 40% { transform: translate(6px, -54px); } 85%, 100% { transform: none; } }
.fu-blob.is-splat .fu-blob-face { animation: fu-face 1.4s var(--fu-ease); }
@keyframes fu-face { 8%, 55% { transform: translateY(16px) scale(1.12, .72); } 100% { transform: none; } }
.fu-mood { display: none; }
.fu-blob:not([data-fu-mood]) .fu-mood--content,
.fu-blob[data-fu-mood="content"] .fu-mood--content,
.fu-blob[data-fu-mood="curious"] .fu-mood--curious,
.fu-blob[data-fu-mood="delighted"] .fu-mood--delighted,
.fu-blob[data-fu-mood="startled"] .fu-mood--startled,
.fu-blob[data-fu-mood="dizzy"] .fu-mood--dizzy,
.fu-blob[data-fu-mood="sheepish"] .fu-mood--sheepish,
.fu-blob[data-fu-mood="determined"] .fu-mood--determined,
.fu-blob[data-fu-mood="cheeky"] .fu-mood--cheeky { display: inline; }
.fu-blob-body { transition: d .35s var(--fu-ease); }
.fu-blob[data-fu-mood="curious"] .fu-blob-body { d: path("M70 38 C92 42 104 72 102 94 C101 109 84 113 60 113 C36 113 18 108 19 92 C21 64 48 35 70 38 Z"); }
.fu-blob[data-fu-mood="delighted"] .fu-blob-body { d: path("M62 48 C90 48 106 74 106 94 C106 109 86 113 60 113 C34 113 14 109 14 94 C14 72 36 48 62 48 Z"); }
.fu-blob[data-fu-mood="startled"] .fu-blob-body { d: path("M61 30 C84 32 98 66 98 90 C98 108 82 113 60 113 C38 113 22 108 22 90 C22 62 40 28 61 30 Z"); }
.fu-blob[data-fu-mood="dizzy"] .fu-blob-body { d: path("M56 42 C82 38 100 66 103 93 C104 109 82 112 61 113 C38 114 17 107 18 90 C19 70 34 45 56 42 Z"); }
.fu-blob[data-fu-mood="sheepish"] .fu-blob-body { d: path("M60 42 C84 44 100 72 100 93 C100 108 83 113 60 113 C37 113 20 108 20 93 C20 70 38 41 60 42 Z"); }
.fu-blob[data-fu-mood="determined"] .fu-blob-body { d: path("M62 42 C88 40 103 68 102 92 C102 108 84 113 60 113 C36 113 18 108 18 92 C17 68 38 44 62 42 Z"); }
.fu-blob[data-fu-mood="cheeky"] .fu-blob-body { d: path("M54 38 C72 35 99 64 101 92 C102 108 84 113 60 113 C36 113 19 109 18 94 C16 72 28 42 54 38 Z"); }
.fu-blob-drip { r: 0px; transition: r .4s var(--fu-spring); }
.fu-blob[data-fu-mood="dizzy"] .fu-blob-drip { r: 6px; }
@media (prefers-reduced-motion: reduce) {
  .fu-jiggle-on, .fu-spring.is-dangle, .fu-wordmark__tail.is-fly, .fu-wordmark__tail.is-drop,
  .fu-slip.is-slipping, .fu-slip.is-fixed, .fu-falling, .fu-returning,
  .fu-blob-body, .fu-blob-eyes, .fu-blob .fu-blob-body, .fu-blob-drop, .fu-blob-face { animation: none !important; }
  .fu-blob-body, .fu-blob-drip, .fu-spring, .fu-spring.is-out, [data-fu="dodge-once"], [data-fu="develop"], [data-fu="drift"], .fu-card, .fu-btn { transition: none !important; }
  [data-fu="dodge-once"].is-dodging, [data-fu="drift"] { transform: none !important; }
}
.fu-wordmark__main{text-shadow:.045em .045em 0 #9B8CFF,.085em .085em 0 #FF8FB1 !important;position:relative}
.fu-wordmark__main:after{content:'';position:absolute;right:-.12em;top:-.06em;width:.2em;height:.2em;background:#F6D486;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:fu-glint 3.2s ease-in-out infinite;pointer-events:none;filter:drop-shadow(0 0 .04em #fff)}
.fu-wordmark__main:before{content:'';position:absolute;right:.32em;top:-.16em;width:.1em;height:.1em;background:#FF8FB1;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:fu-glint 3.2s ease-in-out 1.1s infinite;pointer-events:none}
@keyframes fu-glint{0%,62%,100%{transform:scale(0) rotate(0deg);opacity:0}70%{transform:scale(1.25) rotate(45deg);opacity:1}82%{transform:scale(.9) rotate(90deg);opacity:1}92%{transform:scale(0) rotate(135deg);opacity:0}}
.fbtn,.nv.on,.ttab,.stp.here,.ls.here,.kc.on,.tabx,.bigf,.resume .fu-btn--primary~x{background-image:linear-gradient(180deg,#FFF3D6 0%,#F2D9A6 38%,#E2C083 62%,#C9A35E 100%) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(120,90,40,.25),3px 3px 0 #141A24 !important}
.fu-btn:not(.fu-btn--primary):not(.fu-btn--quiet){background-image:linear-gradient(180deg,#FFF3D6 0%,#F2D9A6 38%,#E2C083 62%,#C9A35E 100%)}
.fbtn{position:relative;overflow:visible}
.fbtn:after,.fu-btn--primary:after{content:'';position:absolute;right:-7px;top:-8px;width:15px;height:15px;background:#F7FAFE;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);opacity:0;transform:scale(0);transition:all .25s cubic-bezier(.34,1.56,.64,1);pointer-events:none;filter:drop-shadow(0 0 3px #FF8FB1)}
.fbtn:hover:after,.fu-btn--primary:hover:after{opacity:1;transform:scale(1) rotate(45deg)}
.fu-btn--primary{position:relative;background-image:linear-gradient(180deg,#8E80FF 0%,#6C5BF0 55%,#5847D8 100%)}
.note:before,.tape{background:rgba(255,143,177,.6) !important}
.live,.eled{filter:saturate(1.3)}
@media (prefers-reduced-motion: reduce){.fu-wordmark__main:after,.fu-wordmark__main:before{animation:none;opacity:0}}
body{margin:0}.lbl{font-family:'Big Shoulders Stencil',Impact,sans-serif;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.vc{font-family:'Cormorant Garamond',Garamond,Georgia,serif;font-style:italic;font-weight:500}.mini{line-height:0}.mini svg,.fu-blob svg{overflow:visible}.pb{transform-box:fill-box;transform-origin:50% 100%}.cut{position:absolute;display:block;pointer-events:none;user-select:none}.shadow{position:absolute;border-radius:50%;background:radial-gradient(ellipse at center,rgba(20,26,36,.32),rgba(20,26,36,0) 70%);pointer-events:none}.wmbtn{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}.fu-wordmark__main .fu-l:hover{animation:fu-jiggle .45s var(--fu-ease)}@keyframes v10-track{0%{transform:translateX(var(--x0))}100%{transform:translateX(var(--x1))}}@keyframes v10-hop{0%,100%{transform:translateY(0) scale(1.18,.8)}8%{transform:translateY(-8px) scale(.92,1.1)}50%{transform:translateY(var(--hop)) scale(.96,1.05)}92%{transform:translateY(-6px) scale(1,1)}}.track{position:absolute;left:0;animation:v10-track var(--dur) ease-in-out infinite alternate}.hop{transform-origin:50% 100%;animation:v10-hop .9s cubic-bezier(.3,.7,.4,1) infinite}@media (prefers-reduced-motion: reduce){.track,.hop{animation:none !important}}.tw{position:relative;display:inline-flex;align-items:flex-end}
.tw .fx{position:absolute;pointer-events:none}
.tw .fu-l{translate:0 0}
/* zap */
.g-zap .bolt{left:50%;bottom:.2em;height:6.8em;transform:translateX(-50%);opacity:0;z-index:20;filter:drop-shadow(0 0 .04em #fff) drop-shadow(0 0 .14em #B48CFF) drop-shadow(0 0 .4em #6A3BFF)}
.g-zap.ph-strike .bolt{animation:gz-bolt .18s steps(1) forwards}
@keyframes gz-bolt{0%{opacity:1}30%{opacity:.15}55%{opacity:1}80%{opacity:.4}100%{opacity:0}}
.g-zap .dim{left:-3000px;top:-3000px;width:6000px;height:6000px;background:#0E1420;opacity:0;transition:opacity .25s;z-index:18}
.g-zap.ph-charge .dim{opacity:.22}
.flashw{left:-3000px;top:-3000px;width:6000px;height:6000px;background:#F2EEFF;opacity:0;z-index:19}
.g-zap.ph-strike .flashw,.g-flash.ph-pop .flashw{animation:gz-flash .34s ease-out}
@keyframes gz-flash{0%{opacity:.9}100%{opacity:0}}
.g-zap.ph-charge .fu-wordmark__tail{animation:gz-jit .07s steps(2) infinite}
@keyframes gz-jit{50%{translate:.03em -.03em}}
.g-zap.ph-strike .fu-wordmark__tail{color:#fff;text-shadow:0 0 .12em #9B5CFF}
.g-zap.ph-gone .fu-wordmark__tail,.g-zap.ph-fade .fu-wordmark__tail{opacity:0}
.g-zap.ph-flicker .fu-wordmark__tail{animation:gz-on 1s steps(1) forwards}
@keyframes gz-on{0%{opacity:0}10%{opacity:1}16%{opacity:0}32%{opacity:1}37%{opacity:0}56%{opacity:1}62%{opacity:.3}72%,100%{opacity:1}}
.g-zap .scorch{left:50%;bottom:-.12em;width:1.15em;transform:translateX(-50%) rotate(-8deg);opacity:0;transition:opacity .9s}
.g-zap.ph-gone .scorch{opacity:1;transition:opacity .05s}
.g-zap .ember{left:50%;bottom:.05em;width:.5em;height:.18em;margin-left:-.25em;border-radius:50%;background:radial-gradient(ellipse,#FF8A1F,rgba(255,77,61,0) 70%);opacity:0}
.g-zap.ph-gone .ember{animation:gz-ember .6s ease-in-out infinite alternate}
@keyframes gz-ember{from{opacity:.25}to{opacity:.95}}
.g-zap .smoke{left:50%;bottom:.3em;width:0;height:0;opacity:1}
.g-zap .smoke i{position:absolute;left:-.22em;top:-.22em;width:.44em;height:.44em;border-radius:50%;background:radial-gradient(circle,rgba(70,66,62,.45),rgba(70,66,62,0) 68%);opacity:0;filter:blur(.04em)}
.g-zap.ph-gone .smoke i{animation:gz-puff 2.6s ease-out forwards}
.g-zap.ph-gone .smoke i:nth-child(2){animation-delay:.35s;left:-.05em}.g-zap.ph-gone .smoke i:nth-child(3){animation-delay:.7s;left:-.32em}.g-zap.ph-gone .smoke i:nth-child(4){animation-delay:1.05s;left:-.14em}
@keyframes gz-puff{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:.9}100%{opacity:0;transform:translate(.18em,-1.3em) scale(1.9)}}
.tw .spk{position:absolute;left:50%;bottom:.3em;width:.06em;height:.06em;border-radius:50%;opacity:0;pointer-events:none;z-index:21}
.g-zap.ph-strike .spk,.g-zap.ph-gone .spk{animation:gz-spk .7s ease-out forwards}
@keyframes gz-spk{0%{opacity:1;translate:0 0}100%{opacity:0;translate:var(--tx) var(--ty)}}
/* claw */
.g-claw .rig{left:50%;bottom:.36em;width:.82em;transform:translate(-50%,-15em);transition:transform .9s cubic-bezier(.5,0,.4,1);z-index:20}
.g-claw .clawimg{display:block;width:100%;transition:scale .25s}
.g-claw .cable{position:absolute;left:50%;bottom:96%;width:.03em;height:20em;margin-left:-.015em;background:linear-gradient(90deg,#5A5F66,#A9B0B8,#5A5F66)}
.g-claw.ph-down .rig,.g-claw.ph-grab .rig,.g-claw.ph-back .rig,.g-claw.ph-let .rig{transform:translate(-50%,0)}
.g-claw.ph-grab .clawimg,.g-claw.ph-lift .clawimg,.g-claw.ph-away .clawimg,.g-claw.ph-back .clawimg{scale:.8 1}
.g-claw .fu-wordmark__tail{transition:translate .9s cubic-bezier(.5,0,.4,1)}
.g-claw.ph-lift .fu-wordmark__tail,.g-claw.ph-away .fu-wordmark__tail{translate:0 -35.7em}
.g-claw.ph-lift .fu-l,.g-claw.ph-away .fu-l{animation:gc-dangle 1s ease-in-out infinite alternate}
@keyframes gc-dangle{from{rotate:-6deg}to{rotate:6deg}}
/* sink */
.g-sink .hole{left:50%;bottom:-.14em;width:1.7em;height:.36em;border-radius:50%;transform:translateX(-50%) scaleX(0);transition:transform .35s cubic-bezier(.34,1.56,.64,1);background:radial-gradient(ellipse at center,#9FD4FF 0,#3B8BFF 38%,#1C2B45 54%,#C9CED3 58%,#F2F4F6 66%,#8A9097 74%,rgba(0,0,0,0) 76%);z-index:0}
.g-sink .fu-wordmark__tail{position:relative;z-index:1}
.g-sink.ph-open .hole,.g-sink.ph-sink .hole{transform:translateX(-50%) scaleX(1)}
.g-sink.ph-sink .fu-wordmark__tail{animation:gs-sink .75s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes gs-sink{from{translate:0 0;clip-path:inset(-3em -3em 0 -3em)}to{translate:0 2.4em;clip-path:inset(-3em -3em 2.4em -3em)}}
.g-sink.ph-gone .fu-wordmark__tail{opacity:0}
.g-sink.ph-drop .fu-wordmark__tail{animation:gs-drop .95s ease-in forwards}
@keyframes gs-drop{0%{translate:0 -30em;opacity:1}55%{translate:0 0}70%{translate:0 -.6em}82%{translate:0 0}91%{translate:0 -.15em}100%{translate:0 0}}
/* shuffle */
.g-shuffle .bulb{left:50%;bottom:1.05em;height:1.05em;width:.5em;transform:translateX(-50%) scale(0);transform-origin:50% 100%;transition:transform .3s cubic-bezier(.34,1.56,.64,1);z-index:20}
.g-shuffle .bulb img{position:absolute;left:0;bottom:0;height:100%;width:auto}
.g-shuffle .bulb .on{opacity:0}
.g-shuffle.ph-bulb .bulb,.g-shuffle.ph-lit .bulb,.g-shuffle.ph-s1 .bulb,.g-shuffle.ph-s2 .bulb,.g-shuffle.ph-s3 .bulb,.g-shuffle.ph-s4 .bulb{transform:translateX(-50%) scale(1)}
.g-shuffle.ph-lit .bulb .on,.g-shuffle.ph-s1 .bulb .on,.g-shuffle.ph-s2 .bulb .on,.g-shuffle.ph-s3 .bulb .on,.g-shuffle.ph-s4 .bulb .on{opacity:1;filter:drop-shadow(0 0 .2em #E6CDA0)}
.g-shuffle.ph-s1 .fu-l,.g-shuffle.ph-s3 .fu-l{animation:gf-a .24s ease-in-out}
.g-shuffle.ph-s2 .fu-l,.g-shuffle.ph-s4 .fu-l{animation:gf-b .24s ease-in-out}
@keyframes gf-a{50%{scale:1 .1}}@keyframes gf-b{50%{scale:1 .1}}
/* shake */
.g-shake .rings{left:-.15em;bottom:.15em;width:0;height:0}
.g-shake .rings i{position:absolute;left:-.3em;top:-.3em;width:.6em;height:.6em;border:.04em solid #FF4D3D;border-radius:50%;opacity:0}
.g-shake.ph-rattle .rings i{animation:gk-ring .6s ease-out infinite}
.g-shake.ph-rattle .rings i:nth-child(2){animation-delay:.2s}.g-shake.ph-rattle .rings i:nth-child(3){animation-delay:.4s}
@keyframes gk-ring{0%{opacity:1;scale:.3}100%{opacity:0;scale:3.2}}
.g-shake.ph-rattle .fu-l{animation:gk-rat .06s steps(2) infinite}
@keyframes gk-rat{50%{translate:.04em -.05em;rotate:6deg}}
.g-shake.ph-fall .fu-l{animation:gk-fall .55s ease-in forwards}
.g-shake.ph-fall .fu-l:nth-child(2){animation-delay:.12s}.g-shake.ph-fall .fu-l:nth-child(3){animation-delay:.24s}.g-shake.ph-fall .fu-l:nth-child(4){animation-delay:.36s}
@keyframes gk-fall{to{translate:.2em 3em;rotate:70deg;opacity:0}}
.g-shake.ph-gone .fu-l{opacity:0}
.g-shake.ph-bounce .fu-l{animation:gk-back .7s cubic-bezier(.3,1.6,.5,1) both}
.g-shake.ph-bounce .fu-l:nth-child(2){animation-delay:.1s}.g-shake.ph-bounce .fu-l:nth-child(3){animation-delay:.2s}.g-shake.ph-bounce .fu-l:nth-child(4){animation-delay:.3s}
@keyframes gk-back{from{translate:0 -3em;opacity:0}to{translate:0 0;opacity:1}}
/* flash */
.g-flash .burst{left:50%;bottom:.3em;width:2.6em;height:2.6em;margin:0 0 -1.3em -1.3em;border-radius:50%;background:radial-gradient(circle,#fff 0,#fff 20%,rgba(243,230,203,.8) 35%,rgba(255,255,255,0) 70%);opacity:0;z-index:20}
.g-flash.ph-pop .burst{animation:gl-burst .35s ease-out}
@keyframes gl-burst{0%{opacity:1;scale:.2}100%{opacity:0;scale:1.5}}
.g-flash.ph-neg .fu-wordmark__tail{color:#E6F0FA;text-shadow:.02em .02em 0 #364454;filter:blur(.02em)}
.g-flash.ph-develop .fu-wordmark__tail{animation:gl-dev 2s ease-out forwards}
@keyframes gl-dev{0%{color:#D9E4EE;filter:blur(.03em)}45%{color:#A27A4C;filter:blur(.01em)}100%{color:#141A24;filter:none}}
/* type */
.tw .caret{display:none;width:.045em;height:.42em;margin:0 0 .14em .05em;background:#2F6FC4;animation:gt-blink .8s steps(1) infinite}
.g-type:not(.ph-idle) .caret{display:inline-block}
@keyframes gt-blink{50%{opacity:0}}
.g-type .fu-wordmark__tail{min-width:.1em}
/* roll */
.g-roll .clap{right:-.9em;bottom:1em;width:.8em;height:.6em;opacity:0;z-index:20}
.g-roll .clapper{transform-box:fill-box;transform-origin:0 100%;rotate:-28deg}
.g-roll.ph-roll .clap{opacity:1}
.g-roll.ph-roll .clapper{animation:gr-clap .3s steps(3) forwards}
@keyframes gr-clap{to{rotate:0deg}}
.g-roll.ph-roll .fu-l{animation:gr-wave .8s steps(8) 1 .3s}
.g-roll.ph-roll .fu-l:nth-child(2){animation-delay:.38s}.g-roll.ph-roll .fu-l:nth-child(3){animation-delay:.46s}.g-roll.ph-roll .fu-l:nth-child(4){animation-delay:.54s}
@keyframes gr-wave{0%,100%{translate:0 0}25%{translate:0 -.7em;rotate:-12deg}50%{translate:0 .05em}75%{translate:0 -.25em;rotate:8deg}}
/* dots */
.g-dots .fu-wordmark__tail{transition:scale .25s,opacity .25s;transform-origin:50% 80%}
.g-dots.ph-dot .fu-wordmark__tail,.g-dots.ph-travel .fu-wordmark__tail{scale:.1;opacity:0}
.g-dots .dots{left:20%;bottom:.3em;width:0;height:0}
.g-dots .dt{position:absolute;width:.09em;height:.09em;border-radius:50%;opacity:0;offset-path:path('M0 0 C -40 -90, -180 -110, -240 -20 C -280 40, -120 80, 0 0');offset-distance:0%}
.g-dots.ph-dot .dt{opacity:1}
.g-dots.ph-travel .dt{opacity:1;animation:gd-trav 1.2s ease-in-out forwards}
@keyframes gd-trav{to{offset-distance:100%}}
@media (prefers-reduced-motion: reduce){.tw *{animation:none !important;transition:none !important}}.wm13 .fu-wordmark__tail{font-size:.5em;padding-bottom:.1em;gap:0;letter-spacing:-.01em}
.wm13 .fu-wordmark__tail .fu-l:nth-child(2){font-size:.96em;transform:translateY(.02em) rotate(4deg)}
.wm13 .fu-wordmark__tail .fu-l:nth-child(3){font-size:.9em;transform:translateY(.04em) rotate(-5deg)}
.wm13 .fu-wordmark__tail .fu-l:nth-child(4){font-size:.84em;margin-left:-.03em;transform:translateY(.06em) rotate(7deg)}
.wm13 .sfx{font-family:'Cormorant Garamond',Garamond,Georgia,serif;font-style:italic;font-weight:500;font-size:.56em;margin-left:.24em;padding-bottom:.09em;line-height:1;white-space:nowrap}
.dancer{position:absolute;right:58px;top:14px;width:242px;height:330px;z-index:14;pointer-events:none}
.dz{transform-box:view-box;transform-origin:110px 218px;animation:dz-wig 2s infinite}
.hip{transform-box:view-box;transform-origin:110px 218px;animation:dz-hip 1s infinite}
/* hips: drop hard on the beat (0s, 1s), spring back up */
@keyframes dz-hip{0%{transform:translateY(0);animation-timing-function:cubic-bezier(.5,0,.8,.4)}6%{transform:translateY(16px);animation-timing-function:cubic-bezier(.2,.6,.3,1)}40%,100%{transform:translateY(0)}}
/* wiggle: off-beats. 0.5s to the left (same side as the 0s knee), 1.5s to the right */
@keyframes dz-wig{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-16px) rotate(-7deg)}30%{transform:translateX(-13px) rotate(-5deg)}50%{transform:translateX(0) rotate(0)}75%{transform:translateX(16px) rotate(7deg)}80%{transform:translateX(13px) rotate(5deg)}}
.lmb{fill:none;stroke:#141A24;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.lg,.sh,.ar,.fa{transform-box:view-box}
.lgL{transform-origin:96px 116px;animation:dz-thL 2s infinite}.shL{transform-origin:96px 166px;animation:dz-shL 2s infinite}
.lgR{transform-origin:124px 116px;animation:dz-thR 2s infinite}.shR{transform-origin:124px 166px;animation:dz-shR 2s infinite}
/* left knee: bent AT 0s, right knee: bent AT 1s */
@keyframes dz-thL{0%{transform:rotate(0);animation-timing-function:cubic-bezier(.5,0,.8,.4)}3%,12%{transform:rotate(34deg)}30%,100%{transform:rotate(0)}}
@keyframes dz-shL{0%{transform:rotate(0);animation-timing-function:cubic-bezier(.5,0,.8,.4)}3%,12%{transform:rotate(-70deg)}30%,100%{transform:rotate(0)}}
@keyframes dz-thR{0%,50%{transform:rotate(0);animation-timing-function:cubic-bezier(.5,0,.8,.4)}53%,62%{transform:rotate(-34deg)}80%,100%{transform:rotate(0)}}
@keyframes dz-shR{0%,50%{transform:rotate(0);animation-timing-function:cubic-bezier(.5,0,.8,.4)}53%,62%{transform:rotate(70deg)}80%,100%{transform:rotate(0)}}
.arL{transform-origin:66px 82px;animation:dz-uaL 2s infinite}.faL{transform-origin:66px 120px;animation:dz-faL 2s infinite}
.arR{transform-origin:154px 82px;animation:dz-uaR 2s infinite}.faR{transform-origin:154px 120px;animation:dz-faR 2s infinite}
/* fist pump on the opposite side: right arm on the 0s beat, left arm on the 1s beat. two punches up, elbow snaps */
@keyframes dz-uaR{0%{transform:rotate(-30deg)}4%{transform:rotate(-165deg)}12%{transform:rotate(-140deg)}20%{transform:rotate(-168deg)}34%,100%{transform:rotate(-30deg)}}
@keyframes dz-faR{0%{transform:rotate(40deg)}4%{transform:rotate(-8deg)}12%{transform:rotate(-60deg)}20%{transform:rotate(-6deg)}34%,100%{transform:rotate(40deg)}}
@keyframes dz-uaL{0%,50%{transform:rotate(30deg)}54%{transform:rotate(165deg)}62%{transform:rotate(140deg)}70%{transform:rotate(168deg)}84%,100%{transform:rotate(30deg)}}
@keyframes dz-faL{0%,50%{transform:rotate(-40deg)}54%{transform:rotate(8deg)}62%{transform:rotate(60deg)}70%{transform:rotate(6deg)}84%,100%{transform:rotate(-40deg)}}
.beat{position:absolute;right:58px;top:344px;width:242px;display:flex;justify-content:center;gap:14px;pointer-events:none}
.beat i{width:9px;height:9px;border-radius:50%;background:#141A24;opacity:.15;animation:dz-dot 2s steps(1) infinite}
.beat i:nth-child(2){animation-delay:-1s}
@keyframes dz-dot{0%{opacity:1}12%,100%{opacity:.15}}
@media (prefers-reduced-motion: reduce){.dz,.hip,.lg,.sh,.ar,.fa,.beat i{animation:none !important}}
.room{position:relative;width:1440px;height:1240px;overflow:hidden;background:#EDF4FC;font-family:'Nunito','Arial Rounded MT Bold',system-ui,sans-serif;color:#141A24}
.room:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 62%,#F7FAFE 0,#EDF4FC 70%,#DCE8F4 100%)}
.head{position:absolute;left:64px;top:44px;z-index:12}
.sub{position:absolute;left:68px;top:226px;margin:0;width:700px;font-size:24px;line-height:1.35;z-index:12}
.slot{position:absolute;z-index:4}
.slot:hover{z-index:9}
.pool{position:absolute;width:340px;height:300px;border-radius:50%;background:radial-gradient(ellipse at 50% 70%,rgba(169,156,235,.0),rgba(169,156,235,0) 70%);transition:background .4s;pointer-events:none}
.slot:hover .pool{background:radial-gradient(ellipse at 50% 70%,rgba(169,156,235,.55),rgba(169,156,235,0) 68%)}
.obj{position:absolute;background:none;border:0;padding:0;cursor:pointer;transition:transform .4s cubic-bezier(.34,1.56,.64,1);z-index:2}
.slot:hover .obj{transform:translateY(-12px) scale(1.03)}
.slot .shadow{transition:transform .4s,opacity .4s}
.slot:hover .shadow{transform:scale(.86);opacity:.6}
.obj:focus-visible{outline:3px dashed #2F6FC4;outline-offset:8px;border-radius:12px}
.tclip{position:absolute;width:54px;overflow:hidden;z-index:1;display:flex;align-items:stretch;padding:0 6px 6px 0}
.tabx{flex-grow:1;font-family:'Big Shoulders Stencil',Impact,sans-serif;font-weight:900;font-size:18px;letter-spacing:.1em;text-transform:uppercase;writing-mode:vertical-rl;padding:0;border:3px solid #141A24;border-left:0;border-radius:0 12px 12px 0;box-shadow:4px 4px 0 #141A24;cursor:pointer;transform:translateX(-110%);transition:transform .35s cubic-bezier(.34,1.4,.64,1);background:#EEDDBA;color:#141A24}
.tabx.open{background:#B9D9C6}
.tabx:hover{background:#E6CDA0}.tabx.open:hover{background:#3FD36B}
.slot:hover .tabx,.tabx:focus-visible{transform:translateX(0)}
.tag .live{display:inline-block;width:10px;height:10px;border-radius:50%;background:#3FD36B;border:2px solid #141A24;margin-right:8px;vertical-align:2px;animation:live 2s ease-in-out infinite}
@keyframes live{50%{box-shadow:0 0 0 5px rgba(63,211,107,.25)}}
.obj img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.obj .fb{opacity:0}
.tag em{display:block;font-style:normal;font-weight:700;font-size:12px;opacity:0;text-align:center;transform:translateY(-4px);transition:all .25s}
.slot:hover .tag em{opacity:.7;transform:none}
/* words: the typebars strike, the words appear on the paper */
.using .k-words .f1{animation:w-strike .22s steps(1) 14}
@keyframes w-strike{0%{opacity:1}50%{opacity:0}}
.typed{position:absolute;left:28%;top:12%;width:0;overflow:hidden;white-space:nowrap;font-family:'Courier New',monospace;font-weight:700;font-size:10.5px;letter-spacing:.02em;color:#2A2622;opacity:.85}
.using .typed{animation:w-type 3s steps(19) forwards}
.wrote .typed{width:52%}
@keyframes w-type{from{width:0}to{width:52%}}
/* software: the clear globe turns on its axle, its LEDs blink */
.sph{position:absolute;left:2%;top:3%;width:90%;height:61%;border-radius:50%;background-size:auto 70%;background-repeat:repeat-x;background-position:0 50%;opacity:.38;pointer-events:none;-webkit-mask-image:radial-gradient(circle,#000 55%,transparent 71%);mask-image:radial-gradient(circle,#000 55%,transparent 71%)}
.slot:hover .sph{animation:g-spin 9s linear infinite}
.using .sph{animation:g-spin 1.1s linear infinite;opacity:.7}
@keyframes g-spin{to{background-position:-240px 50%}}
.leds{position:absolute;left:32%;top:36%;width:20%;height:10%}
.leds i{position:absolute;width:5px;height:5px;border-radius:50%;background:#7CFF8A;box-shadow:0 0 6px 2px #7CFF8A;opacity:0}
.leds i:nth-child(1){left:10%;top:20%}.leds i:nth-child(2){left:55%;top:60%;background:#FFC46B;box-shadow:0 0 6px 2px #FFC46B}.leds i:nth-child(3){left:85%;top:10%;background:#8CC8F2;box-shadow:0 0 6px 2px #8CC8F2}
.using .leds i{animation:led .3s steps(1) infinite}.using .leds i:nth-child(2){animation-delay:.1s}.using .leds i:nth-child(3){animation-delay:.2s}
@keyframes led{0%{opacity:1}50%{opacity:.1}}
/* portals: the ring hums and the place inside it changes */
.using .k-portals .f1{animation:p-cyc 2.4s steps(1) forwards}.using .k-portals .f2{animation:p-cyc2 2.4s steps(1) forwards}.using .k-portals .f3{animation:p-cyc3 2.4s steps(1) forwards}
@keyframes p-cyc{0%,24%{opacity:0}25%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes p-cyc2{0%,49%{opacity:0}50%,74%{opacity:1}75%,100%{opacity:0}}
@keyframes p-cyc3{0%,74%{opacity:0}75%,100%{opacity:1}}
.rip{position:absolute;left:16%;top:12%;width:68%;height:62%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,0) 70%);opacity:0;pointer-events:none}
.using .rip{animation:p-rip .6s ease-out 4}
@keyframes p-rip{0%{opacity:.9;transform:scale(.2)}100%{opacity:0;transform:scale(1.1)}}
.slot.using .k-portals{filter:drop-shadow(0 0 14px rgba(155,140,255,.8))}
/* motions: the drum spins and, through the slit, the bird actually flies */
.using .k-motions .f1{opacity:1}
.bwin{position:absolute;left:24%;top:15%;width:52%;height:25%;overflow:hidden;border-radius:6px;opacity:0;transition:opacity .2s;background:#F4F1EA}
.slot:hover .bwin,.using .bwin{opacity:1}
.bird{position:absolute;left:18%;top:0;width:64%;height:100%;animation:b-bob .5s ease-in-out infinite alternate}
.bird .w{opacity:0}
.bird .w1{animation:b-w1 .25s steps(1) infinite}.bird .w2{animation:b-w2 .25s steps(1) infinite}.bird .w3{animation:b-w3 .25s steps(1) infinite}
.slot:hover .bird .w{animation-duration:.6s}
.using .bird .w{animation-duration:.25s}
@keyframes b-w1{0%,32%{opacity:1}33%,100%{opacity:0}}@keyframes b-w2{0%,32%{opacity:0}33%,65%{opacity:1}66%,100%{opacity:0}}@keyframes b-w3{0%,65%{opacity:0}66%,100%{opacity:1}}
@keyframes b-bob{from{transform:translateY(-6%)}to{transform:translateY(8%)}}
.slits{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(20,26,36,.5) 0 5px,transparent 5px 20px);opacity:.55}
.using .slits{animation:sl .18s linear infinite}.slot:hover .slits{animation:sl .6s linear infinite}
@keyframes sl{to{background-position:20px 0}}
/* electronics: the board runs, its LEDs blink */
.slot:hover .k-electronics .f1{animation:e-blink .9s steps(1) infinite}
.using .k-electronics .f1{animation:e-blink .2s steps(1) infinite}
@keyframes e-blink{0%{opacity:1}50%{opacity:0}}
/* noises: only the bell moves. hover: it trembles. press: the button goes down and the bell rings */
.k-noises .bell{transition:transform .2s}
.slot:hover .k-noises .bell{animation:n-trem .08s linear infinite}
.using .k-noises .press{animation:n-press .5s steps(1) forwards}
@keyframes n-press{0%,70%{opacity:1}71%,100%{opacity:0}}
.using .k-noises .bell{animation:n-ring 1.4s cubic-bezier(.2,.6,.3,1) .2s}
@keyframes n-trem{0%,100%{rotate:-.8deg}50%{rotate:.8deg}}
@keyframes n-ring{0%,100%{rotate:0deg}5%{rotate:-6deg}10%{rotate:6deg}15%{rotate:-5deg}20%{rotate:5deg}28%{rotate:-4deg}36%{rotate:3.5deg}46%{rotate:-2.5deg}58%{rotate:2deg}72%{rotate:-1deg}86%{rotate:.5deg}}
.snd{position:absolute;width:0;height:0;z-index:3}
.snd i{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border:3px solid #9B8CFF;border-radius:50%;opacity:0}
.slot:hover .snd i{animation:o-ring 1s ease-out infinite}.slot:hover .snd i:nth-child(2){animation-delay:.33s}.slot:hover .snd i:nth-child(3){animation-delay:.66s}
.using .snd i{animation:o-ring .5s ease-out .2s infinite;border-color:#FF8FB1}.using .snd i:nth-child(2){animation-delay:.36s}.using .snd i:nth-child(3){animation-delay:.52s}
@keyframes o-ring{0%{opacity:1;scale:.3}100%{opacity:0;scale:3}}
/* images: the flash fires and a photo of the room slides out and develops */
.photo{position:absolute;left:30%;top:4%;width:36%;height:40%;background:#FDFDFB;border:1px solid rgba(20,26,36,.2);padding:4% 3% 9%;box-sizing:border-box;box-shadow:0 4px 10px rgba(20,26,36,.2);transform:translateY(30%);opacity:0;transition:none}
.photo img{position:static;width:100%;height:100%;object-fit:cover;object-position:70% 45%;filter:brightness(1.8) contrast(.4) sepia(.3)}
.using .photo,.wrote2 .photo{animation:i-eject 1.2s cubic-bezier(.3,.8,.3,1) .35s forwards}
.using .photo img,.wrote2 .photo img{animation:i-dev 2.6s ease-out .9s forwards}
@keyframes i-eject{0%{opacity:1;transform:translateY(30%)}100%{opacity:1;transform:translateY(-62%) rotate(-4deg)}}
@keyframes i-dev{to{filter:none}}
.flash{position:absolute;left:5%;top:2%;width:44%;height:40%;border-radius:50%;background:radial-gradient(circle,#fff 0,rgba(255,255,255,.9) 25%,rgba(255,255,255,0) 70%);opacity:0;pointer-events:none}
.using .flash{animation:i-flash .45s ease-out}
@keyframes i-flash{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
/* ideas: the lamp switches on, and the fern inside it gets the light */
.k-ideas .f1{transition:opacity .25s}
.lit .k-ideas .f1{opacity:1;animation:l-flick .5s steps(1) 1}
@keyframes l-flick{0%{opacity:1}20%{opacity:.2}35%{opacity:1}50%{opacity:.4}65%,100%{opacity:1}}
.halo{position:absolute;left:-40%;top:-30%;width:140%;height:100%;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(255,214,140,.55),rgba(255,214,140,0) 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.lit .halo{opacity:1}
@media (prefers-reduced-motion: reduce){.slot *{animation:none !important}}
.tag{position:absolute;transform:translateX(-50%);font-weight:900;font-size:22px;letter-spacing:-.01em;white-space:nowrap;pointer-events:none}
.veil{position:absolute;inset:0;background:rgba(20,26,36,.42);z-index:20;opacity:0;pointer-events:none;transition:opacity .25s}
.veil.on{opacity:1;pointer-events:auto}
.card{position:absolute;left:50%;top:52%;width:900px;transform:translate(-50%,-46%) scale(.94);opacity:0;pointer-events:none;transition:all .32s cubic-bezier(.34,1.4,.64,1);z-index:21;background:#EDF4FC;border:3px solid #141A24;border-radius:22px;box-shadow:10px 10px 0 #141A24;display:grid;grid-template-columns:340px minmax(0,1fr);overflow:hidden}
.card.on{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.card .pic{position:relative;background:radial-gradient(ellipse at 50% 70%,#F7FAFE,#DCE8F4 75%);display:flex;align-items:center;justify-content:center;padding:34px;border-right:3px solid #141A24;min-height:380px}
.card .pic img{max-width:100%;max-height:300px;filter:drop-shadow(0 18px 14px rgba(20,30,50,.25))}
.card .txt{padding:34px 36px 32px;display:flex;flex-direction:column;gap:14px}
.card input{font:inherit;font-size:17px;padding:12px 14px;border:3px solid #141A24;border-radius:10px;background:#fff;flex-grow:1;min-width:0}
.ttl{display:flex;align-items:baseline;font-weight:900;line-height:1;letter-spacing:-.035em;font-size:58px}
.ttl .f{text-shadow:3px 3px 0 #9B8CFF}
.hook{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:29px;line-height:1.22}
.x{position:absolute;right:16px;top:14px;width:40px;height:40px;border:3px solid #141A24;border-radius:50%;background:#E6F0FA;font-weight:900;font-size:19px;cursor:pointer;z-index:2}
.cmini{position:absolute;right:26px;bottom:20px;width:70px;height:70px;opacity:0;transform:translateY(20px);transition:all .4s cubic-bezier(.34,1.56,.64,1)}
.cmini.on{opacity:1;transform:none}