/* Shared chrome of the special sections of the first generation templates
   (assets/sp-old/kit.js). Every class is prefixed spk- so nothing leaks into
   the template. A template's special.css sets the tokens on its section:
   --spk-ink --spk-mute --spk-acc --spk-on (text on the accent) --spk-line
   --spk-disp --spk-body --spk-lat --spk-btn (button background) --spk-glow */
.spk{position:relative;overflow:hidden;isolation:isolate;text-align:center;color:var(--spk-ink);font-family:var(--spk-body);
  max-height:100svh;padding:clamp(26px,6vw,40px) 0 clamp(26px,6vw,40px);box-sizing:border-box}
.spk *,.spk *::before,.spk *::after{box-sizing:border-box}
.spk-w{position:relative;z-index:2;width:100%;max-width:560px;margin:0 auto;padding:0 16px}
.spk-h{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 0 4px}
.spk-tg{display:block;font:400 22px/1.15 var(--spk-lat);color:var(--spk-acc);direction:ltr;letter-spacing:0}
.spk h2.spk-t{margin:0;font:var(--spk-h2w,400) clamp(29px,8.2vw,40px)/1.14 var(--spk-disp);color:var(--spk-ink);text-wrap:balance;letter-spacing:0}
.spk-lm{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.spk-lm>span{display:block}
.spk-lede{margin:6px auto 0;max-width:24em;font:400 16px/1.5 var(--spk-body);color:var(--spk-mute);text-wrap:balance}
.spk-fit{position:relative;display:flex;justify-content:center;margin:0 auto}
.spk-fit>*{flex:none;transform-origin:50% 0}
.spk-stage{position:relative;margin:0 auto;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.spk-fx{position:absolute;left:0;top:0;pointer-events:none;z-index:8}
.spk-swap{position:relative;display:grid;margin-top:10px}
.spk-swap>*{grid-area:1/1;min-width:0;align-self:start}
.spk-swap>.spk-btn{justify-self:center;align-self:start}
.spk-btn{-webkit-appearance:none;appearance:none;border:0;cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border-radius:999px;background:var(--spk-btn,var(--spk-acc));color:var(--spk-on);font:600 17px/1.1 var(--spk-body);
  box-shadow:0 14px 30px -16px var(--spk-glow,rgba(0,0,0,.4)),inset 0 1px 0 rgba(255,255,255,.32);
  transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .3s;-webkit-tap-highlight-color:transparent}
.spk-btn:active{transform:scale(.96);transition-duration:.1s}
.spk-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.spk-btn[disabled]{opacity:.55;pointer-events:none}
.spk-lnk{-webkit-appearance:none;appearance:none;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  font:500 15px/1.2 var(--spk-body);color:var(--spk-mute);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--spk-line)}
.spk-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:370px;margin:0 auto 10px}
.spk-pills button{-webkit-appearance:none;appearance:none;border:0;background:transparent;cursor:pointer;min-height:42px;padding:0 15px;border-radius:99px;
  font:500 15px/1.2 var(--spk-body);color:var(--spk-ink);box-shadow:inset 0 0 0 1px var(--spk-line);
  transition:background-color .4s cubic-bezier(.16,1,.3,1),color .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.spk-pills button[aria-pressed="true"]{background:var(--spk-acc);color:var(--spk-on);box-shadow:inset 0 0 0 1px var(--spk-acc)}
.spk-fld{display:block;width:100%;max-width:330px;margin:0 auto;padding:11px 18px;border-radius:14px;border:1px solid var(--spk-line);
  background:var(--spk-fld,rgba(255,255,255,.6));color:var(--spk-ink);font:400 18px/1.4 var(--spk-body);text-align:center;-webkit-appearance:none;appearance:none}
.spk-fld::placeholder{color:var(--spk-mute);opacity:.8}
.spk-fld:focus{outline:none;border-color:var(--spk-acc)}
.spk-fld.spk-shake{animation:spkShk .5s cubic-bezier(.16,1,.3,1)}
@keyframes spkShk{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.spk-stt{margin:0;font:400 18px/1.4 var(--spk-disp);color:var(--spk-ink)}
.spk-stt small{display:block;margin-top:2px;font:400 14.5px/1.45 var(--spk-body);color:var(--spk-mute)}
.spk-off{visibility:hidden;opacity:0}
.spk :focus-visible{outline:2px solid var(--spk-acc);outline-offset:3px;border-radius:10px}
html[lang="ru"] .spk h2.spk-t,html[lang="ar"] .spk h2.spk-t{font-size:clamp(25px,7vw,34px)}
@media (prefers-reduced-motion:reduce){.spk *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}