:root {
  --study-desk: #765286;
  --study-desk-light: #ddbee5;
  --study-book: #8f5dac;
  --study-book-light: #f0b3cf;
  --study-page: #fff4e5;
  --study-pencil: #e8a55f;
}

.study-scene::before {
  background: linear-gradient(180deg, var(--study-desk-light), var(--study-desk));
  box-shadow: inset 0 4px 3px color-mix(in srgb, var(--study-desk-light) 75%, white), 0 8px 14px #49335035;
}

.study-book {
  width: 92px;
  height: 50px;
  bottom: 17%;
  font-size: 0;
  filter: drop-shadow(0 5px 4px #3f2b4330);
}

.study-book::before,
.study-book::after {
  content: "";
  position: absolute;
  top: 0;
  width: 48%;
  height: 100%;
  box-sizing: border-box;
  border: 4px solid var(--study-book);
  background: linear-gradient(135deg, var(--study-page), var(--study-book-light));
  box-shadow: inset 0 2px 3px #fff8;
}

.study-book::before {
  right: 50%;
  border-radius: 12px 4px 5px 13px;
  transform: skewY(-6deg);
}

.study-book::after {
  left: 50%;
  border-radius: 4px 12px 13px 5px;
  transform: skewY(6deg);
}

.study-pencil {
  left: 66%;
  bottom: 28%;
  width: 44px;
  height: 8px;
  border-radius: 5px;
  font-size: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--study-pencil) 55%, white), var(--study-pencil));
  box-shadow: inset 0 1px 1px #fff8, 0 2px 3px #45304733;
}

.study-pencil::before {
  content: "";
  position: absolute;
  right: -8px;
  top: 0;
  border-left: 9px solid #ead0aa;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.study-pencil::after {
  content: "";
  position: absolute;
  left: -6px;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #e7a7aa;
}

.study-progress {
  background: linear-gradient(90deg, var(--study-book-light), var(--theme-accent));
}

.study-controls button {
  background: var(--theme-accent);
}