.study-view.active {
  position: relative;
  isolation: isolate;
}

.study-view.active::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 52px -18px 70px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 18% 14%, rgba(217, 237, 101, .2), transparent 32%),
    radial-gradient(circle at 86% 76%, rgba(35, 92, 65, .14), transparent 35%);
  filter: blur(1px);
  pointer-events: none;
}

.card-stage {
  position: relative;
  height: 480px;
  margin: 20px 0 24px;
  perspective: 1300px;
  transform-style: preserve-3d;
}

.stack-card {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(35, 92, 65, .18);
  border-radius: 23px;
  background: linear-gradient(145deg, #eef2dc, #dce5c4);
  box-shadow: 0 18px 32px rgba(23, 35, 29, .12);
  pointer-events: none;
  transform-style: preserve-3d;
}

.stack-card-far {
  opacity: .55;
  transform: translate3d(2px, 18px, -80px) rotateZ(2.2deg) scale(.95);
}

.stack-card-near {
  opacity: .82;
  transform: translate3d(-1px, 10px, -42px) rotateZ(-1.2deg) scale(.975);
}

.card-stage .flashcard {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --glare-x: 50%;
  --glare-y: 20%;
  position: absolute;
  z-index: 3;
  inset: 0;
  height: 460px;
  margin: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: translateZ(12px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform .55s cubic-bezier(.2, .75, .2, 1), filter .35s ease;
  will-change: transform;
}

.card-stage .flashcard.flipped {
  transform: translateZ(12px) rotateX(var(--tilt-x)) rotateY(calc(180deg + var(--tilt-y)));
}

.card-stage .face {
  overflow: hidden;
  transform-style: flat;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 -8px 18px rgba(23, 35, 29, .05) inset,
    0 20px 40px rgba(23, 35, 29, .13);
}

.card-stage .front {
  transform: translateZ(5px);
  background: linear-gradient(145deg, #fffef9 0%, #f7f5ec 100%);
}

.card-stage .back {
  transform: rotateY(180deg) translateZ(5px);
  background: linear-gradient(145deg, #1d3026 0%, #101b15 100%);
}

.card-stage .face::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: 0;
  background: radial-gradient(circle at var(--glare-x) var(--glare-y), rgba(255, 255, 255, .36), transparent 24%);
  opacity: .55;
  pointer-events: none;
  transform: translateZ(20px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card-stage .back::before {
  opacity: .16;
}

.card-stage .face > * {
  position: relative;
  z-index: 1;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.rating button {
  box-shadow: 0 5px 0 #cfd1c7, 0 9px 15px rgba(23, 35, 29, .1);
  transition: transform .15s ease, box-shadow .15s ease;
}

.rating button:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #cfd1c7, 0 3px 7px rgba(23, 35, 29, .12);
}

@media (max-width: 370px) {
  .card-stage { height: 440px; }
  .card-stage .flashcard { height: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .card-stage .flashcard { transition-duration: .01ms; }
  .stack-card { display: none; }
}