:root{
  --dts-tail-card-width: 420px;
  --dts-tail-card-paper: #fff6e5;
  --dts-tail-card-paper-soft: #f5dec0;
  --dts-tail-card-stroke: #8b6a55;
  --dts-tail-card-line: #80634b;
  --dts-tail-card-shadow: rgba(72,48,30,.28);
  --dts-tail-card-chip: #e9b45d;
  --dts-tail-card-chip-line: rgba(105,75,42,.62);
  --dts-tail-card-heart: #7b2d3a;
  --dts-tail-card-paw: #d77b27;
  --dts-tail-card-glow: rgba(215,123,39,.24);
  --dts-tail-card-focus: rgba(215,123,39,.82);
}

html[data-theme="night"]{
  --dts-tail-card-paper: #fff0d3;
  --dts-tail-card-paper-soft: #ddc29a;
  --dts-tail-card-stroke: #c8b69d;
  --dts-tail-card-line: #9e7a57;
  --dts-tail-card-shadow: rgba(0,0,0,.44);
  --dts-tail-card-chip: #d69a3e;
  --dts-tail-card-chip-line: rgba(76,48,23,.65);
  --dts-tail-card-heart: #c87b2a;
  --dts-tail-card-paw: #c87b2a;
  --dts-tail-card-glow: rgba(200,123,42,.32);
  --dts-tail-card-focus: rgba(200,123,42,.90);
}

.dts-tail-card,
.dts-tail-card *{
  box-sizing:border-box;
}

.dts-tail-card{
  width:var(--dts-tail-card-width);
  height:calc(var(--dts-tail-card-width) * .56);
  display:inline-block;
  position:relative;
  overflow:visible;
  line-height:1;
  isolation:isolate;
}

.dts-tail-card__scene{
  position:absolute;
  inset:0;
  overflow:visible;
  transform-origin:center;
  animation:dtsTailSceneBreathe 5.2s ease-in-out infinite;
}

.dts-tail-card__tail{
  position:absolute;
  z-index:1;
  width:61%;
  max-width:none;
  height:auto;
  left:58%;
  top:25%;
  transform-origin:7% 54%;
  transform:rotate(-5deg) translate(0,0);
  animation:dtsTailWag 4.1s ease-in-out infinite;
  filter:drop-shadow(0 4px 3px rgba(75,43,18,.22));
  pointer-events:none;
  user-select:none;
}

.dts-tail-card__card-svg{
  position:absolute;
  z-index:2;
  width:74%;
  height:auto;
  left:0%;
  top:12%;
  overflow:visible;
  transform-origin:52% 52%;
  transform:rotate(-7deg) scaleY(1.12);
  filter:drop-shadow(0 8px 6px var(--dts-tail-card-shadow));
}

.dts-tail-card__card-under{
  fill:var(--dts-tail-card-paper-soft);
  stroke:var(--dts-tail-card-stroke);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.62;
}

.dts-tail-card__card-body{
  fill:var(--dts-tail-card-paper);
  stroke:var(--dts-tail-card-stroke);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.dts-tail-card__paper-grain{
  opacity:.12;
}

.dts-tail-card__chip{
  fill:var(--dts-tail-card-chip);
  stroke:var(--dts-tail-card-stroke);
  stroke-width:1.65;
  stroke-linejoin:round;
}

.dts-tail-card__chip-line{
  fill:none;
  stroke:var(--dts-tail-card-chip-line);
  stroke-width:1.1;
  stroke-linecap:round;
}

.dts-tail-card__line{
  fill:none;
  stroke:var(--dts-tail-card-line);
  stroke-width:3.3;
  stroke-linecap:round;
  opacity:.50;
}

.dts-tail-card__mini-line{
  fill:none;
  stroke:var(--dts-tail-card-line);
  stroke-width:2.15;
  stroke-linecap:round;
  opacity:.34;
}

.dts-tail-card__heart{
  fill:var(--dts-tail-card-heart);
  opacity:.92;
  transform-box:fill-box;
  transform-origin:center;
  animation:dtsTailHeartPulse 5.2s ease-in-out infinite;
}

.dts-tail-card__paw{
  fill:var(--dts-tail-card-paw);
  opacity:.62;
}

.dts-tail-card__glow{
  position:absolute;
  z-index:0;
  left:58%;
  top:35%;
  width:32%;
  aspect-ratio:1;
  border-radius:999px;
  background:var(--dts-tail-card-glow);
  filter:blur(13px);
  opacity:0;
  transform-origin:center;
  animation:dtsTailGlow 5.2s ease-in-out infinite;
  pointer-events:none;
}

.dts-tail-card-link,
.dts-tail-card-button{
  display:inline-grid;
  place-items:center;
  width:max-content;
  border:0;
  background:transparent;
  padding:0;
  border-radius:28px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.dts-tail-card-link:focus-visible,
.dts-tail-card-button:focus-visible{
  outline:2px solid var(--dts-tail-card-focus);
  outline-offset:5px;
}

.dts-tail-card-link:hover .dts-tail-card__tail,
.dts-tail-card-button:hover .dts-tail-card__tail{
  animation-duration:2.7s;
}

@keyframes dtsTailWag{
  0%,100%{
    transform:rotate(-5deg) translate(0,0) scale(1);
  }
  34%{
    transform:rotate(2.5deg) translate(7px,-4px) scale(1.008);
  }
  62%{
    transform:rotate(-9deg) translate(-2px,3px) scale(.998);
  }
  82%{
    transform:rotate(-2deg) translate(3px,-2px) scale(1.004);
  }
}

@keyframes dtsTailSceneBreathe{
  0%,100%{transform:translateY(0)}
  45%{transform:translateY(-1.2px)}
  68%{transform:translateY(-.4px)}
}

@keyframes dtsTailHeartPulse{
  0%,72%,100%{transform:scale(1)}
  82%{transform:scale(1.16)}
  90%{transform:scale(.98)}
}

@keyframes dtsTailGlow{
  0%,60%,100%{opacity:0; transform:scale(.78)}
  72%{opacity:.42; transform:scale(1)}
  86%{opacity:0; transform:scale(1.22)}
}

@media (max-width:640px){
  :root{
    --dts-tail-card-width: 320px;
  }
}

@media (prefers-reduced-motion:reduce){
  .dts-tail-card *,
  .dts-tail-card__scene,
  .dts-tail-card__tail,
  .dts-tail-card__heart,
  .dts-tail-card__glow{
    animation:none !important;
    transition:none !important;
  }

  .dts-tail-card__glow{
    opacity:.16;
  }
}