.newsletter-keyboard{
  position:relative;isolation:isolate;overflow:hidden;color:#f1f2ef;background:#08090a;
  margin:70px calc(-1 * var(--gutter)) 0;padding:64px 0 28px;border-top:1px solid #ffffff12;
  box-shadow:inset 0 1px #ffffff0a;
}
.newsletter-keyboard:before{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 45% at 50% 76%,#14313a38,transparent 72%),radial-gradient(ellipse 42% 30% at 76% 66%,#ef342711,transparent 75%),linear-gradient(180deg,#0d0f10,#060708 78%);
}
.newsletter-top{display:flex;justify-content:space-between;align-items:center;gap:24px;color:#969b9e}
.newsletter-form{position:relative;max-width:1180px;margin:64px auto 0;padding:0 var(--gutter)}
.newsletter-composer{position:relative;height:max(var(--prompt-height,0px),clamp(150px,16vw,220px));min-height:clamp(150px,16vw,220px);cursor:text}
.newsletter-display,.newsletter-placeholder-measure,.newsletter-measure,.newsletter-composer>input{font:700 clamp(46px,6.9vw,104px)/.96 General,Arial,sans-serif;letter-spacing:-.06em}
.newsletter-display{position:relative;z-index:1;max-width:1120px;color:#a4a8a9;overflow-wrap:anywhere;transition:color 180ms ease;text-wrap:balance}
.newsletter-placeholder-measure{position:absolute;visibility:hidden;pointer-events:none;left:0;top:0;width:100%;max-width:1120px;overflow-wrap:anywhere;text-wrap:balance}
.newsletter-form.has-value .newsletter-display{color:#d8dad9;text-wrap:initial;white-space:nowrap;overflow:hidden}
.newsletter-form.has-value #newsletter-display-text{display:inline-block;transform:translateX(calc(-1 * var(--input-scroll,0px)))}
.newsletter-composer:focus-within .newsletter-display{color:#eff0ed}
.newsletter-caret{
  position:absolute;z-index:2;left:0;top:.08em;width:.48em;height:.76em;border-radius:.025em;
  background:#ef3427;mix-blend-mode:screen;transform:translateX(var(--caret-x,0));
  box-shadow:0 0 24px #ef34274d;animation:newsletter-caret-blink .92s steps(1,end) infinite;
}
.newsletter-caret.caret-hidden{visibility:hidden}
.newsletter-measure{position:absolute;visibility:hidden;left:0;top:0;white-space:pre;pointer-events:none}
.newsletter-composer>input{
  position:absolute;z-index:3;inset:0;width:100%;height:1.02em;padding:0;margin:0;border:0;outline:0;
  color:transparent!important;-webkit-text-fill-color:transparent;background:transparent;caret-color:transparent;
  white-space:nowrap;border-radius:0;
}
.newsletter-composer>input::selection{background:#ef342780;color:transparent}
.newsletter-actions{display:flex;align-items:center;gap:11px;margin-top:28px}
.newsletter-actions button{
  min-height:46px;border-radius:999px;padding:12px 21px;font:600 13px/1 General,Arial,sans-serif;
  transition:transform 160ms ease,background 160ms ease,color 160ms ease,border-color 160ms ease;
}
.newsletter-actions button:hover{transform:translateY(-2px)}
.newsletter-actions button:active{transform:translateY(0)}
#newsletter-submit{background:#ef3427;color:#140a08;box-shadow:0 9px 28px #ef34272b}
#newsletter-submit:hover{background:#ff493d}
#newsletter-submit:disabled{opacity:.58;cursor:wait;transform:none}
#sound-toggle{min-height:38px;padding:9px 15px;color:#b7bbba;border:1px solid #ffffff2b;background:#ffffff08;font:500 10px/1.4 Mono,monospace}
#sound-toggle:hover{color:#fff;border-color:#ffffff57;background:#ffffff10}
.newsletter-form output{display:block;min-height:38px;margin-top:14px;color:#7f8587;font-size:12px;line-height:1.5}
.newsletter-form[data-status=error] output{color:#ff8178}.newsletter-form[data-status=success] output{color:#8ce0ca}
.newsletter-trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden}
.newsletter-keyboard .keyboard-stage{height:380px;max-width:1440px;margin:-8px auto -6px}
.newsletter-keyboard .keyboard-stage canvas{filter:drop-shadow(0 32px 35px #000b)}
.newsletter-keyboard .keyboard-stage:not(.ready) canvas{display:none!important}
.newsletter-keyboard .keyboard-bottom{justify-content:flex-end;color:#717678;gap:24px}
.newsletter-keyboard .keyboard-bottom .eyebrow{font-size:9px;letter-spacing:.09em}
.newsletter-keyboard .sound-credit{margin-top:12px;color:#707678;font:500 9px/1.6 Mono,monospace;letter-spacing:.03em}
.newsletter-keyboard .sound-credit a{color:#929798;text-decoration:underline;text-decoration-color:#ffffff29;text-underline-offset:3px}
.newsletter-keyboard .sound-credit a:hover{color:#b7bbba}
.newsletter-keyboard .keyboard-fallback{
  width:min(88%,1080px);max-width:none;padding:10px;gap:6px;border:1px solid #596064;border-radius:13px;
  background:linear-gradient(150deg,#303438,#171a1c);box-shadow:0 8px 0 #111416,0 31px 55px #000a;
  transform:translate(-50%,-50%) perspective(1400px) rotateX(38deg) rotateZ(-4deg);
}
.newsletter-keyboard .key-row{gap:5px}
.newsletter-keyboard .key-row button{
  height:37px;white-space:pre-line;color:#c9ccca;background:#202427;border:1px solid #34393c;border-bottom:2px solid #111416;
  border-radius:6px;font:500 8px/1.05 Mono,monospace;box-shadow:0 2px 3px #0007;
}
.newsletter-keyboard .key-row button[data-key=ENTER],.newsletter-keyboard .key-row button[data-key=ESC],.newsletter-keyboard .key-row button[data-key=UP]{background:#ef3427;color:#190b09;border-color:#ff5a4f}
.newsletter-keyboard .key-row button.pressed{background:#ef3427;color:#190b09;transform:translateY(2px);box-shadow:0 0 12px #ef342766}
@keyframes newsletter-caret-blink{0%,48%{opacity:1}49%,100%{opacity:0}}
.motion-paused .newsletter-caret{animation:none;opacity:1}
@media(max-width:900px){
  .newsletter-keyboard{padding-top:52px}.newsletter-form{margin-top:52px}.newsletter-keyboard .keyboard-stage{height:320px;margin-top:0}
  .newsletter-display,.newsletter-placeholder-measure,.newsletter-measure,.newsletter-composer>input{font-size:clamp(42px,8vw,72px)}
}
@media(max-width:600px){
  .newsletter-keyboard{margin-top:48px;padding:38px 0 22px}
  .newsletter-form{margin-top:42px;padding:0 22px}.newsletter-composer{min-height:180px}
  .newsletter-display,.newsletter-placeholder-measure,.newsletter-measure,.newsletter-composer>input{font-size:clamp(40px,13vw,58px);line-height:.98}
  .newsletter-actions{margin-top:18px;flex-wrap:wrap}.newsletter-actions button{min-height:44px}
  .newsletter-form output{min-height:50px;margin-top:13px;max-width:34ch}
  .newsletter-keyboard .keyboard-stage{height:235px;margin:2px auto 0}
  .newsletter-keyboard .keyboard-bottom{gap:10px;flex-wrap:wrap}.newsletter-keyboard .keyboard-bottom .eyebrow{font-size:8px}
  .newsletter-keyboard .keyboard-fallback{width:94%;padding:5px;gap:3px;border-radius:8px;transform:translate(-50%,-50%) perspective(900px) rotateX(36deg) rotateZ(-3deg)}
  .newsletter-keyboard .key-row{gap:2px}.newsletter-keyboard .key-row button{height:23px;font-size:5px;border-radius:3px}
}
@media(prefers-reduced-motion:reduce){.newsletter-caret{animation:none;opacity:1}.newsletter-actions button{transition:none}}
#contact .newsletter-keyboard+footer,
#contact .newsletter-keyboard+footer.studio-footer{
  margin:0 calc(-1 * var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter);
  border:0;border-radius:0;background:#060708;color:#f5f5f7;box-shadow:none;
}
@media(max-width:600px){#contact .newsletter-keyboard+footer,#contact .newsletter-keyboard+footer.studio-footer{margin:0 calc(-1 * var(--gutter));border-radius:0}}