:root{
  --dts-doc-icon-size: 160px;
  --dts-doc-paper: #fffdf8;
  --dts-doc-paper-back: #f3e5d3;
  --dts-doc-paper-middle: #f8eedf;
  --dts-doc-line: #8b6a55;
  --dts-doc-stroke: #6f5748;
  --dts-doc-shadow: rgba(72, 48, 30, .30);
  --dts-doc-stamp: #7b2d3a;
  --dts-doc-stamp-soft: rgba(123, 45, 58, .18);
  --dts-doc-stamp-glow: rgba(123, 45, 58, .25);
  --dts-doc-clip: #9a6e47;
  --dts-doc-heart: #7b2d3a;
  --dts-doc-focus: rgba(255, 122, 0, .88);
}

html[data-theme="night"]{
  --dts-doc-paper: #fffaf0;
  --dts-doc-paper-back: #d9c7ae;
  --dts-doc-paper-middle: #eee0cb;
  --dts-doc-line: #9b7b62;
  --dts-doc-stroke: #c8b69d;
  --dts-doc-shadow: rgba(0, 0, 0, .42);
  --dts-doc-stamp: #c87b2a;
  --dts-doc-stamp-soft: rgba(200, 123, 42, .18);
  --dts-doc-stamp-glow: rgba(214, 145, 61, .34);
  --dts-doc-clip: #d7bc82;
  --dts-doc-heart: #c87b2a;
  --dts-doc-focus: rgba(255, 217, 142, .92);
}

.dts-doc-icon,
.dts-doc-icon *{
  box-sizing:border-box;
}

.dts-doc-icon{
  width:var(--dts-doc-icon-size);
  height:var(--dts-doc-icon-size);
  display:inline-grid;
  place-items:center;
  position:relative;
  overflow:visible;
  line-height:1;
  color:var(--dts-doc-line);
}

.dts-doc-icon__svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}

.dts-doc-icon__stack{
  transform-origin:center;
  animation:dtsDocStackBreathe 4.8s ease-in-out infinite;
  filter:drop-shadow(0 7px 5px var(--dts-doc-shadow));
}

.dts-doc-icon__front{
  transform-origin:center;
  animation:dtsDocFrontBreathe 4.8s ease-in-out infinite;
}

.dts-doc-icon__sheet{
  stroke:var(--dts-doc-stroke);
  stroke-width:2.05;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.dts-doc-icon__sheet--back{
  fill:var(--dts-doc-paper-back);
  opacity:.72;
}

.dts-doc-icon__sheet--middle{
  fill:var(--dts-doc-paper-middle);
  opacity:.9;
}

.dts-doc-icon__sheet--front{
  fill:var(--dts-doc-paper);
  filter:drop-shadow(0 2px 2px rgba(88, 58, 36, .08));
}

.dts-doc-icon__lines path{
  fill:none;
  stroke:var(--dts-doc-line);
  stroke-width:3.5;
  stroke-linecap:round;
  opacity:.55;
}

.dts-doc-icon__clip-heart{
  fill:var(--dts-doc-heart);
  opacity:.94;
  filter:drop-shadow(0 1px 1px rgba(72,48,30,.14));
}

.dts-doc-icon__stamp-puff{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation:dtsDocStampPuff 4.8s ease-in-out infinite;
}

.dts-doc-icon__stamp-puff circle{
  fill:var(--dts-doc-stamp-glow);
  filter:url(#dtsDocSoftGlow);
}

.dts-doc-icon__stamp{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation:dtsDocStampPlace 4.8s ease-in-out infinite;
}

.dts-doc-icon__stamp-ring{
  fill:var(--dts-doc-stamp-soft);
  stroke:var(--dts-doc-stamp);
  stroke-width:2.85;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.dts-doc-icon__stamp-ring--inner{
  fill:none;
  stroke-width:1.55;
  opacity:.72;
  stroke-dasharray:2.4 4.5;
}

.dts-doc-icon__stamp-marks path{
  fill:none;
  stroke:var(--dts-doc-stamp);
  stroke-width:2;
  stroke-linecap:round;
  opacity:.62;
}

.dts-doc-icon__paw{
  fill:var(--dts-doc-stamp);
  opacity:.94;
}

.dts-doc-icon__paw-pad{
  transform-origin:center;
}

.dts-doc-icon-link,
.dts-doc-icon-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-doc-icon-link:focus-visible,
.dts-doc-icon-button:focus-visible{
  outline:2px solid var(--dts-doc-focus);
  outline-offset:5px;
}

.dts-doc-icon-link:hover .dts-doc-icon__front,
.dts-doc-icon-button:hover .dts-doc-icon__front{
  transform:translateY(-2px);
}

.dts-doc-icon-link:hover .dts-doc-icon__stamp,
.dts-doc-icon-button:hover .dts-doc-icon__stamp{
  filter:drop-shadow(0 0 5px var(--dts-doc-stamp-glow));
}

@keyframes dtsDocStackBreathe{
  0%,100%{transform:translateY(0) rotate(0deg)}
  42%{transform:translateY(-1.1px) rotate(-.25deg)}
  62%{transform:translateY(-.4px) rotate(.1deg)}
}

@keyframes dtsDocFrontBreathe{
  0%,100%{transform:translateY(0)}
  44%{transform:translateY(-1.8px)}
  64%{transform:translateY(-.6px)}
}

@keyframes dtsDocStampPlace{
  0%,16%{opacity:0; transform:translate(3px,-3px) rotate(-9deg) scale(1.18)}
  24%{opacity:1; transform:translate(0,0) rotate(-2deg) scale(.96)}
  31%,82%{opacity:1; transform:translate(0,0) rotate(0deg) scale(1)}
  100%{opacity:0; transform:translate(0,0) rotate(0deg) scale(.98)}
}

@keyframes dtsDocStampPuff{
  0%,18%{opacity:0; transform:scale(.62)}
  25%{opacity:.68; transform:scale(1)}
  39%{opacity:0; transform:scale(1.24)}
  100%{opacity:0; transform:scale(1.24)}
}

@media (max-width:640px){
  :root{
    --dts-doc-icon-size: 104px;
  }
}

@media (prefers-reduced-motion:reduce){
  .dts-doc-icon *,
  .dts-doc-icon__stack,
  .dts-doc-icon__front,
  .dts-doc-icon__stamp,
  .dts-doc-icon__stamp-puff{
    animation:none !important;
    transition:none !important;
  }

  .dts-doc-icon__stamp{
    opacity:1;
    transform:none;
  }
}
