/* Studio v3.11.2: only the contents of the two top-level tabs transition. */
:root{view-transition-name:none;scrollbar-color:#bacbee #f1f4fa;scrollbar-width:thin}
#main{view-transition-name:studio-content}
::view-transition-group(studio-content){animation-duration:280ms;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
::view-transition-old(studio-content){animation:studio-tab-out 160ms ease-out both;mix-blend-mode:normal}
::view-transition-new(studio-content){animation:studio-tab-in 280ms cubic-bezier(.22,.61,.36,1) both;mix-blend-mode:normal}
::view-transition{pointer-events:none}
@keyframes studio-tab-out{to{opacity:0;transform:translateY(-4px)}}
@keyframes studio-tab-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
/* Matching scrollbars for the page, sidebar and editor; no layout changes on hover. */
body,.sidebar,.slide-rail,.editor-inspector,.editor-center{scrollbar-color:#bacbee #f1f4fa;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px;background:#f1f4fa}
::-webkit-scrollbar-track{background:#f1f4fa;border-radius:999px}
::-webkit-scrollbar-thumb{background:#bacbee;border:3px solid #f1f4fa;border-radius:999px;min-height:42px}
::-webkit-scrollbar-thumb:hover{background:#8faee0}
::-webkit-scrollbar-thumb:active{background:#7194d3}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-corner{background:#f1f4fa}
/* Native template scenes with their own text, backgrounds and local photographs. */
.hero-art .studio-cover{container-type:inline-size}
.studio-cover .showcase-image{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.studio-cover .showcase-round-photo{border-radius:50%;border:.65cqw solid #c6a767}
.studio-cover .showcase-slide{height:100%;width:100%;text-align:left}
.studio-cover figcaption{font-size:max(6px,2.2cqw);bottom:5px;padding:2px 5px}
/* A full angular turn is identical at 0 and 360 degrees: no loop seam. */
@property --studio-ring-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.template-card{isolation:isolate;transition:border-color .15s,box-shadow .15s;--tier-ring:#8c9bea;--tier-shadow:#5263ef20}
.template-card.tariff-start{--tier-ring:#7db7aa;--tier-shadow:#569d8625}
.template-card.tariff-premium{border-color:#e7c247;--tier-ring:#e7c247;--tier-shadow:#e7c24740}
.template-card::after{content:'';position:absolute;inset:-2px;border:2px solid transparent;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .375s ease,box-shadow .375s ease;z-index:3}
@media(hover:hover) and (pointer:fine){
  .template-card:hover{transform:none;border-color:var(--tier-ring);box-shadow:0 5px 20px var(--tier-shadow)}
  .template-card.tariff-start::after{border-color:#8cc5b6;animation:studio-start-glow 5s ease-in-out infinite;animation-play-state:paused}
  .template-card.tariff-premium::after{border-color:#f3d977;animation:studio-gold-glow 5.833333s ease-in-out infinite;animation-play-state:paused}
  .template-card.tariff-start:hover{border-color:#7db7aa;box-shadow:0 5px 20px #569d8625}
  .template-card.tariff-premium:hover{border-color:#e7c247;box-shadow:0 5px 22px #e7c24738,0 0 0 1px #f4d66e66}
  .template-card.tariff-start:hover::after,.template-card.tariff-premium:hover::after{opacity:1;animation-play-state:running}
  @supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
    .studio-smooth-rings .template-card.tariff-start::after,.studio-smooth-rings .template-card.tariff-premium::after{border:0;padding:2px;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
    .studio-smooth-rings .template-card.tariff-start::after{background:conic-gradient(from var(--studio-ring-angle),#7db7aa 0deg,#7db7aa 225deg,#a6dac8 270deg,#def6eb 295deg,#a6dac8 320deg,#7db7aa 360deg);animation:studio-ring-turn 6.666667s linear infinite;animation-play-state:paused}
    .studio-smooth-rings .template-card.tariff-premium::after{background:conic-gradient(from var(--studio-ring-angle),#e7c247 0deg,#e7c247 225deg,#f5da79 270deg,#fff9da 295deg,#f5da79 320deg,#e7c247 360deg);animation:studio-ring-turn 8.333333s linear infinite;animation-play-state:paused}
    .studio-smooth-rings .template-card.tariff-start:hover::after,.studio-smooth-rings .template-card.tariff-premium:hover::after{animation-play-state:running}
  }
}
.template-card:focus-visible{outline:2px solid var(--tier-ring);outline-offset:4px}
.template-card.tariff-premium:focus-visible{box-shadow:0 0 16px #efd15e55}
.template-card.selected{border-color:var(--accent);box-shadow:0 0 0 2px #5263ef24}
@keyframes studio-ring-turn{from{--studio-ring-angle:0deg}to{--studio-ring-angle:360deg}}
@keyframes studio-start-glow{0%,100%{box-shadow:0 0 6px #7db7aa20}50%{box-shadow:0 0 14px #7db7aa50}}
@keyframes studio-gold-glow{0%,100%{box-shadow:0 0 7px #ebcb4d35}50%{box-shadow:0 0 16px #f0d36b75}}
@media(prefers-reduced-motion:reduce){
  #main{view-transition-name:none}
  ::view-transition-group(studio-content),::view-transition-old(studio-content),::view-transition-new(studio-content){animation:none}
  .template-card::after{animation:none!important;transition:none}
}

.deck-card.is-deleting{pointer-events:none}
@media(prefers-reduced-motion:reduce){.deck-card.is-deleting{transition:none}}