:root{
  color-scheme:dark;
  --rksp-bg:#021923;
  --rksp-bg-soft:#03232d;
  --rksp-panel:#032630;
  --rksp-line:rgba(49,194,211,.14);
  --rksp-line-strong:rgba(49,194,211,.28);
  --rksp-cyan:#11d1e4;
  --rksp-gold:#f1c85a;
  --rksp-text:#f7fbfc;
  --rksp-muted:rgba(232,246,249,.69);
  --rksp-volume:100%;
  font-family:Inter,Lato,"Open Sans",Roboto,"Noto Sans","DejaVu Sans",sans-serif;
}
*{box-sizing:border-box}
html,body{width:100%;min-width:0;min-height:100%;margin:0;background:var(--rksp-bg);color:var(--rksp-text)}
body{
  min-height:100vh;
  padding:10px;
  display:grid;
  place-items:center;
  overflow-x:hidden;
  background:linear-gradient(180deg,#021923 0%,#03212b 52%,#021923 100%);
}
body.has-rk-standalone-modal{overflow:hidden}
button,input,textarea{font:inherit}
button{outline-offset:3px}

.rk-standalonePlayer{
  width:min(100%,390px);
  margin:0 auto;
  padding:15px 18px 16px;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(24,205,225,.10);
  border-radius:25px;
  background:
    linear-gradient(180deg,rgba(3,40,50,.94),rgba(2,28,38,.96));
  box-shadow:0 18px 48px rgba(0,0,0,.20);
  overflow:hidden;
}

.rk-standalonePlayer__head{
  position:relative;
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 38px 13px;
  border-bottom:1px solid rgba(78,183,196,.10);
}
.rk-standalonePlayer__brand{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:left;
  user-select:none;
}
.rk-standalonePlayer__brand img{
  width:45px;
  height:45px;
  flex:0 0 45px;
  object-fit:contain;
  background:transparent;
}
.rk-standalonePlayer__brand span{min-width:0;display:grid;gap:2px}
.rk-standalonePlayer__brand strong{font-size:17px;line-height:1.05;white-space:nowrap}
.rk-standalonePlayer__brand small{color:var(--rksp-gold);font-size:11.5px}
.rk-standaloneClose{
  position:absolute;
  top:50%;
  right:0;
  width:31px;
  height:31px;
  transform:translateY(calc(-50% - 6px));
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(55,188,204,.16);
  border-radius:50%;
  background:transparent;
  color:rgba(248,253,254,.90);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.rk-standaloneClose:hover,.rk-standaloneClose:focus-visible{
  border-color:rgba(17,209,228,.38);
  background:rgba(17,209,228,.06);
  color:#fff;
}

.rk-standaloneHero{
  padding:22px 6px 14px;
  display:grid;
  justify-items:center;
  text-align:center;
}
.rk-standaloneHero h1{
  margin:0;
  color:#fff;
  font-size:24px;
  line-height:1.04;
  letter-spacing:-.025em;
}
.rk-standaloneStatus{
  margin-top:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:rgba(242,250,252,.78);
  font-size:12px;
  font-weight:700;
}
.rk-standaloneStatus i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--rksp-gold);
  box-shadow:0 0 9px rgba(241,200,90,.40);
}
.rk-standalonePlayer[data-state="playing"] .rk-standaloneStatus i{
  background:var(--rksp-cyan);
  box-shadow:0 0 10px rgba(17,209,228,.52);
}
.rk-standalonePlayer[data-state="error"] .rk-standaloneStatus i{
  background:#ff7d70;
  box-shadow:0 0 9px rgba(255,125,112,.40);
}

.rk-standaloneMainControls{
  display:grid;
  gap:10px;
  padding:5px 0 10px;
}
.rk-standalonePlay{
  width:100%;
  min-height:116px;
  padding:13px 10px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  border:0;
  border-top:1px solid rgba(40,203,220,.09);
  border-bottom:1px solid rgba(40,203,220,.09);
  border-radius:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
}
.rk-standalonePlay:hover,.rk-standalonePlay:focus-visible{background:rgba(6,65,77,.08)}
.rk-standalonePlay__disc{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  padding-left:3px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:transparent;
  color:#fff;
  font-size:23px;
  line-height:1;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.rk-standalonePlay:hover .rk-standalonePlay__disc{
  transform:scale(1.035);
  border-color:rgba(17,209,228,.52);
  box-shadow:0 0 0 5px rgba(17,209,228,.04);
}
.rk-standalonePlay__copy{display:grid;justify-items:center;gap:3px}
.rk-standalonePlay strong{font-size:21px;line-height:1;letter-spacing:.03em}
.rk-standalonePlay small{color:var(--rksp-gold);font-size:10.5px;font-weight:900;letter-spacing:.16em}
.rk-standalonePlayer.is-playing .rk-standalonePlay__disc{
  padding-left:0;
  border-color:rgba(17,209,228,.52);
  color:var(--rksp-cyan);
}

.rk-standaloneGreeting{
  width:100%;
  min-height:56px;
  padding:9px 12px;
  display:grid;
  grid-template-columns:auto auto;
  grid-template-areas:"icon title" "icon sub";
  align-items:center;
  justify-content:center;
  column-gap:10px;
  border:1px solid var(--rksp-line);
  border-radius:14px;
  background:rgba(4,48,59,.16);
  color:#fff;
  cursor:pointer;
}
.rk-standaloneGreeting:hover,.rk-standaloneGreeting:focus-visible{
  border-color:var(--rksp-line-strong);
  background:rgba(5,61,74,.21);
}
.rk-standaloneGreeting>span{grid-area:icon;color:var(--rksp-cyan);font-size:21px}
.rk-standaloneGreeting strong{grid-area:title;align-self:end;font-size:13.5px;text-align:left}
.rk-standaloneGreeting small{grid-area:sub;align-self:start;color:var(--rksp-muted);font-size:10.5px;text-align:left}

.rk-standaloneVolume{
  min-height:42px;
  display:grid;
  grid-template-columns:22px 1fr;
  align-items:center;
  gap:9px;
  padding:8px 3px 2px;
  border-top:1px solid rgba(49,194,211,.08);
}
.rk-standaloneVolume__icon{
  display:grid;
  place-items:center;
  color:rgba(229,247,249,.62);
  font-size:15px;
  transform:rotate(-10deg);
}
.rk-standaloneVolume input[type="range"]{
  --rksp-volume:100%;
  width:100%;
  height:18px;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  cursor:pointer;
}
.rk-standaloneVolume input[type="range"]::-webkit-slider-runnable-track{
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--rksp-cyan) 0 var(--rksp-volume),rgba(136,207,214,.18) var(--rksp-volume) 100%);
}
.rk-standaloneVolume input[type="range"]::-webkit-slider-thumb{
  width:12px;
  height:12px;
  margin-top:-4.5px;
  appearance:none;
  -webkit-appearance:none;
  border:0;
  border-radius:50%;
  background:#eafcfe;
  box-shadow:0 0 0 3px rgba(17,209,228,.08);
}
.rk-standaloneVolume input[type="range"]::-moz-range-track{height:3px;border:0;border-radius:99px;background:rgba(136,207,214,.18)}
.rk-standaloneVolume input[type="range"]::-moz-range-progress{height:3px;border-radius:99px;background:var(--rksp-cyan)}
.rk-standaloneVolume input[type="range"]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#eafcfe;box-shadow:0 0 0 3px rgba(17,209,228,.08)}

.rk-standalonePlayer :is(button,input,textarea):focus-visible{outline:2px solid var(--rksp-cyan);outline-offset:2px}

.rk-standaloneModal[hidden]{display:none!important}
.rk-standaloneModal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:12px;
}
.rk-standaloneModal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,10,15,.78);
  backdrop-filter:blur(6px);
}
.rk-standaloneModal__dialog{
  position:relative;
  width:min(100%,390px);
  max-height:calc(100dvh - 24px);
  overflow:auto;
  padding:16px;
  border:1px solid rgba(40,203,220,.18);
  border-radius:21px;
  background:#042631;
  box-shadow:0 24px 70px rgba(0,0,0,.42);
}
.rk-standaloneModal__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(40,203,220,.10);
}
.rk-standaloneModal__head span{display:block;color:var(--rksp-cyan);font-size:10px;font-weight:900;letter-spacing:.18em}
.rk-standaloneModal__head h2{margin:4px 0 0;font-size:20px;line-height:1.1}
.rk-standaloneModal__head button{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(40,203,220,.16);
  border-radius:50%;
  background:transparent;
  color:#fff;
  font-size:20px;
  cursor:pointer;
}
.rk-greetingIntro{
  margin-top:13px;
  display:flex;
  align-items:flex-start;
  gap:9px;
  color:var(--rksp-muted);
  font-size:11.5px;
  line-height:1.45;
}
.rk-greetingIntro>span{color:var(--rksp-cyan);font-size:17px;line-height:1}
.rk-greetingIntro p{margin:0}
.rk-greetingIntro strong{color:#fff}
.rk-standaloneGreetingForm{display:grid;gap:11px;padding-top:13px}
.rk-standaloneGreetingForm[hidden],.rk-standaloneResult[hidden]{display:none!important}
.rk-standaloneModal__dialog.is-result{display:grid;place-items:center;min-height:280px}
.rk-standaloneModal__dialog.is-result .rk-standaloneModal__head{display:none}
.rk-standaloneGreetingForm .rk-field{display:grid;gap:5px;position:relative}
.rk-standaloneGreetingForm .rk-field>span:first-child{color:rgba(245,251,252,.88);font-size:11.5px;font-weight:800}
.rk-standaloneGreetingForm input,.rk-standaloneGreetingForm textarea{
  width:100%;
  border:1px solid rgba(55,179,193,.18);
  border-radius:11px;
  background:#031d27;
  color:#fff;
  padding:10px 11px;
  outline:none;
}
.rk-standaloneGreetingForm textarea{resize:vertical;min-height:92px}
.rk-standaloneGreetingForm .rk-countedField{display:grid;gap:4px}
.rk-standaloneGreetingForm .rk-countedField small{justify-self:end;color:var(--rksp-muted);font-size:10px}
.rk-standaloneGreetingForm .rk-formRule{margin:0;color:rgba(232,246,249,.56);font-size:10.5px}
.rk-standaloneGreetingForm .rk-flowActions{display:block}
.rk-standaloneSubmit{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(17,209,228,.28);
  border-radius:13px;
  background:rgba(5,100,112,.22);
  color:#fff;
  cursor:pointer;
}
.rk-standaloneSubmit:disabled{opacity:.55;cursor:wait}
.rk-standaloneSubmit>span{color:var(--rksp-cyan);font-size:18px}
.rk-standaloneSubmit strong{font-size:13px}
.rk-standaloneResult{min-height:220px;padding:20px 10px;display:grid;place-items:center;align-content:center;gap:8px;text-align:center}
.rk-standaloneResult__icon{width:60px;height:60px;display:grid;place-items:center;border:1px solid rgba(17,209,228,.34);border-radius:50%;color:var(--rksp-cyan);font-size:25px;font-weight:900}
.rk-standaloneResult strong{font-size:22px;line-height:1.1}
.rk-standaloneResult small{max-width:280px;color:var(--rksp-muted);font-size:12px;line-height:1.5}
.rk-standaloneResult[data-result-state="error"] .rk-standaloneResult__icon{border-color:rgba(255,125,112,.42);color:#ff8b7f}

@media(max-width:700px){
  html,body{height:100%;min-height:100%}
  body{
    width:100%;
    height:100dvh;
    min-height:100dvh;
    padding:0;
    display:block;
    overflow:hidden;
  }
  .rk-standalonePlayer{
    width:100%;
    height:100dvh;
    min-height:100dvh;
    max-height:100dvh;
    margin:0;
    overflow-y:auto;
    padding:
      max(14px,env(safe-area-inset-top))
      max(16px,env(safe-area-inset-right))
      max(12px,env(safe-area-inset-bottom))
      max(16px,env(safe-area-inset-left));
    border:0;
    border-radius:0;
    box-shadow:none;
    background:linear-gradient(180deg,#03232d 0%,#021d27 100%);
  }
  .rk-standalonePlayer__head{min-height:58px;padding-bottom:12px}
  .rk-standalonePlayer__brand img{width:45px;height:45px;flex-basis:45px}
  .rk-standalonePlayer__brand strong{font-size:17px}
  .rk-standaloneClose{right:0}
  .rk-standaloneHero{padding:24px 4px 16px}
  .rk-standaloneHero h1{font-size:26px}
  .rk-standaloneMainControls{margin:auto 0;padding-top:8px}
  .rk-standalonePlay{min-height:128px}
  .rk-standalonePlay__disc{width:66px;height:66px}
  .rk-standaloneGreeting{min-height:58px}
  .rk-standaloneVolume{padding-bottom:4px}
  .rk-standaloneModal{padding:0}
  .rk-standaloneModal__dialog{
    width:100%;
    height:100dvh;
    max-height:100dvh;
    padding:
      max(17px,env(safe-area-inset-top))
      max(16px,env(safe-area-inset-right))
      max(17px,env(safe-area-inset-bottom))
      max(16px,env(safe-area-inset-left));
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  .rk-standaloneGreetingForm textarea{min-height:110px}
}