.slate-stage {
  --stage-line: #a79f8b;
  --stage-background: #cbc4ad;
  --stage-ink: #2b393d;
}

.slate-table {
  display: grid;
  justify-items: center;
  padding: clamp(19px, 4vw, 37px) 30px;
  background: radial-gradient(ellipse at 36% 10%, #eee6cc, #c4b89e 75%);
}

.slate-board {
  position: relative;
  width: min(100%, 295px);
  padding: clamp(10px, 2vw, 18px);
  border: 2px solid #805839;
  border-radius: 12px;
  background:
    repeating-linear-gradient(1deg, #e2a47127 0 2px, #8f65471a 2px 4px),
    linear-gradient(120deg, #d4ae81, #a97650);
  box-shadow: 0 4px 0 #805839, 0 7px 0 #6a4830, 9px 14px 18px #45372758, inset 0 0 0 2px #e9c6a2;
}

.slate-inset {
  display: grid;
  grid-template-columns: clamp(6px, 1vw, 9px) minmax(0, 1fr);
  gap: 4px;
  padding: 6px;
  border: 1px solid #977359;
  background: #f1e8d4;
  box-shadow: 0 0 0 2px #9f744f50;
}

.slate-strip {
  background: linear-gradient(#47738d 0 19%, #ce786e 19% 36%, #eed998 36% 55%, #95b8c4 55% 78%, #374c76 78%);
}

.slate-surface {
  position: relative;
  aspect-ratio: 280 / 354;
  overflow: hidden;
  border: 1px solid #a69b8a;
  background:
    linear-gradient(#fff7e6ad, #fff7e6ad),
    url("demo-listener.jpg") center / 100% 100%;
  box-shadow: inset 0 0 9px #51453045;
}

.slate-surface[data-ready] { cursor: crosshair; touch-action: none; }
.slate-surface :is(svg, canvas) { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.slate-stylus {
  position: absolute;
  right: -18px;
  bottom: 11%;
  width: 8px;
  height: 30%;
  border-radius: 2px 2px 50% 50%;
  background: linear-gradient(90deg, #704834, #d7a779 47%, #936549 76%);
  box-shadow: 2px 3px 4px #5b4e4e70;
  transform: rotate(8deg);
}

.slate-stylus::after {
  position: absolute;
  top: 6%;
  left: 4px;
  width: 10px;
  height: 106%;
  content: "";
  border: 1px solid #5e5444;
  border-left: 0;
  border-radius: 0 75% 75% 0;
  transform: rotate(-6deg);
}