:root{
  --dts-medallion-size:108px;
  --dts-medallion-day-glow:rgba(255,186,84,.84);
  --dts-medallion-day-glow-soft:rgba(255,229,166,.72);
  --dts-medallion-night-glow:rgba(252,251,237,.88);
  --dts-medallion-night-glow-soft:rgba(255,247,214,.58);
}

.dts-medallion-toggle,
.dts-medallion-toggle *{box-sizing:border-box}

.dts-medallion-toggle{
  width:var(--dts-medallion-size);
  height:var(--dts-medallion-size);
  position:relative;
  display:inline-grid;
  place-items:center;
  padding:0;
  border:0;
  margin:0;
  background:transparent;
  cursor:pointer;
  line-height:1;
  appearance:none;
  -webkit-appearance:none;
  isolation:isolate;
  overflow:visible;
  border-radius:50%;
  -webkit-tap-highlight-color:transparent;
}

.dts-medallion-toggle:focus-visible{
  outline:2px solid rgba(255,170,68,.95);
  outline-offset:6px;
}

.dts-medallion-toggle__glow{
  position:absolute;
  inset:12%;
  border-radius:50%;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(circle, var(--dts-medallion-day-glow-soft) 0 28%, var(--dts-medallion-day-glow) 42%, transparent 74%);
  filter:blur(10px);
  opacity:.96;
  transform:scale(.96);
  animation:dtsMedallionGlowDay 4.8s ease-in-out infinite alternate;
  transition:background .7s ease, opacity .7s ease, filter .7s ease, transform .7s ease;
}

.dts-medallion-toggle__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  z-index:2;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
  transition:opacity .74s ease, filter .74s ease;
  will-change:opacity,filter;
}

.dts-medallion-toggle__image--day{
  opacity:1;
  filter:drop-shadow(0 0 10px rgba(255,201,98,.58)) drop-shadow(0 6px 13px rgba(88,54,19,.16));
}

.dts-medallion-toggle__image--night{
  opacity:0;
  filter:drop-shadow(0 0 11px rgba(252,251,237,.50)) drop-shadow(0 6px 14px rgba(0,0,0,.18));
}

.dts-medallion-toggle__stars{
  position:absolute;
  inset:-13%;
  z-index:1;
  opacity:0;
  pointer-events:none;
  transition:opacity .55s ease .08s;
}

.dts-medallion-toggle__star{
  position:absolute;
  display:block;
  width:5px;
  height:5px;
  background:#fff4cf;
  opacity:.72;
  filter:drop-shadow(0 0 4px rgba(255,226,151,.82));
  transform-origin:center;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
}

.dts-medallion-toggle__star--a{left:17%;top:8%;animation:dtsMedallionStarA 3.2s ease-in-out infinite}
.dts-medallion-toggle__star--b{right:10%;top:10%;width:4px;height:4px;animation:dtsMedallionStarB 3.8s ease-in-out .25s infinite}
.dts-medallion-toggle__star--c{right:-1%;top:46%;width:6px;height:6px;animation:dtsMedallionStarC 4.1s ease-in-out .55s infinite}
.dts-medallion-toggle__star--d{left:14%;bottom:10%;width:4px;height:4px;animation:dtsMedallionStarD 3.6s ease-in-out .75s infinite}
.dts-medallion-toggle__star--e{left:53%;bottom:-1%;width:5px;height:5px;animation:dtsMedallionStarE 4.4s ease-in-out .4s infinite}

html[data-theme="night"] .dts-medallion-toggle__image--day,
.dts-medallion-toggle.is-night .dts-medallion-toggle__image--day{opacity:0}

html[data-theme="night"] .dts-medallion-toggle__image--night,
.dts-medallion-toggle.is-night .dts-medallion-toggle__image--night{opacity:1}

html[data-theme="night"] .dts-medallion-toggle__glow,
.dts-medallion-toggle.is-night .dts-medallion-toggle__glow{
  background:radial-gradient(circle, var(--dts-medallion-night-glow-soft) 0 28%, var(--dts-medallion-night-glow) 44%, transparent 75%);
  filter:blur(11px);
  opacity:.98;
  animation:dtsMedallionGlowNight 4.6s ease-in-out infinite alternate;
}

html[data-theme="night"] .dts-medallion-toggle__stars,
.dts-medallion-toggle.is-night .dts-medallion-toggle__stars{opacity:1}

.dts-medallion-toggle:hover .dts-medallion-toggle__image--day,
.dts-medallion-toggle:hover .dts-medallion-toggle__image--night{
  filter:drop-shadow(0 0 14px rgba(255,240,205,.60)) drop-shadow(0 7px 16px rgba(0,0,0,.16));
}

.dts-medallion-toggle:active{transform:scale(.975)}

@keyframes dtsMedallionGlowDay{
  0%{opacity:.76;transform:scale(.92)}
  100%{opacity:1;transform:scale(1.02)}
}
@keyframes dtsMedallionGlowNight{
  0%{opacity:.78;transform:scale(.94)}
  100%{opacity:1;transform:scale(1.03)}
}
@keyframes dtsMedallionStarA{
  0%,100%{opacity:.42;transform:translate(0,0) scale(.86) rotate(0deg)}
  45%{opacity:1;transform:translate(2px,-3px) scale(1.16) rotate(8deg)}
}
@keyframes dtsMedallionStarB{
  0%,100%{opacity:.36;transform:translate(0,0) scale(.82) rotate(0deg)}
  50%{opacity:.95;transform:translate(-2px,2px) scale(1.22) rotate(-10deg)}
}
@keyframes dtsMedallionStarC{
  0%,100%{opacity:.34;transform:translate(0,0) scale(.78) rotate(0deg)}
  48%{opacity:1;transform:translate(-3px,-1px) scale(1.14) rotate(12deg)}
}
@keyframes dtsMedallionStarD{
  0%,100%{opacity:.38;transform:translate(0,0) scale(.84) rotate(0deg)}
  45%{opacity:.92;transform:translate(2px,2px) scale(1.2) rotate(-7deg)}
}
@keyframes dtsMedallionStarE{
  0%,100%{opacity:.32;transform:translate(0,0) scale(.82) rotate(0deg)}
  52%{opacity:.9;transform:translate(1px,-3px) scale(1.12) rotate(10deg)}
}

@media (max-width:640px){
  :root{--dts-medallion-size:78px}
  .dts-medallion-toggle__glow{filter:blur(8px)}
  .dts-medallion-toggle__stars{inset:-15%}
}

@media (prefers-reduced-motion:reduce){
  .dts-medallion-toggle,
  .dts-medallion-toggle *{
    animation:none !important;
    transition:none !important;
  }
}