.panel.has-scratch{
  touch-action:pan-y;
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><g fill='none' stroke='%23f4efe4' stroke-width='5.5' stroke-linecap='round'><path d='M14 14 5 3M14 14 23 3'/></g><g fill='none' stroke='%230b0a10' stroke-width='2.4' stroke-linecap='round'><path d='M14 14 5 3M14 14 23 3'/><path d='M12 17l2-3M16 17l-2-3'/><circle cx='9' cy='20' r='3.4'/><circle cx='19' cy='20' r='3.4'/></g></svg>") 14 6,grab;
}
.panel.has-scratch > .symbiote{opacity:0;}
.panel.is-scratching{
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><g fill='none' stroke='%23f4efe4' stroke-width='5.5' stroke-linecap='round'><path d='M14 14 9 3M14 14 19 3'/></g><g fill='none' stroke='%230b0a10' stroke-width='2.4' stroke-linecap='round'><path d='M14 14 9 3M14 14 19 3'/><path d='M12 17l2-3M16 17l-2-3'/><circle cx='9' cy='20' r='3.4'/><circle cx='19' cy='20' r='3.4'/></g></svg>") 14 4,grabbing;
}
.panel.is-scratching.is-snip{
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><g fill='none' stroke='%23f4efe4' stroke-width='5.5' stroke-linecap='round'><path d='M14 14 3 5M14 14 25 5'/></g><g fill='none' stroke='%230b0a10' stroke-width='2.4' stroke-linecap='round'><path d='M14 14 3 5M14 14 25 5'/><path d='M12 17l2-3M16 17l-2-3'/><circle cx='9' cy='20' r='3.4'/><circle cx='19' cy='20' r='3.4'/></g></svg>") 14 4,grabbing;
}
.panel.is-scratching,.panel.is-scratching *{user-select:none;-webkit-user-select:none;}

.panel > .scratch__web{
  position:absolute;left:0;right:0;top:0;bottom:0;z-index:5;
  width:100%;height:100%;
  pointer-events:none;overflow:visible;
  --strand:var(--dim);
  --tear:320ms;
}

.scratch__veil{
  fill:none;
  fill-opacity:0;
}

.scratch__g{
  fill:none;
  stroke:var(--strand);
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-opacity:.72;
  contain:paint;
}

.scratch__strand{
  transform-box:view-box;
  transform-origin:var(--ox,0) var(--oy,0);
}

.scratch__strand--spoke{stroke-opacity:.9;}
.scratch__strand--ring{stroke-opacity:.66;}
.scratch__strand--cross{stroke-opacity:.5;}

.scratch__strand.is-torn{
  animation-name:scratch-snap;
  animation-duration:var(--tear);
  animation-timing-function:cubic-bezier(.4,0,.9,.4);
  animation-fill-mode:both;
}

.scratch__strand.is-gone{display:none;}

@keyframes scratch-snap{
  from{transform:scale(1) rotate(0);opacity:1;}
  40%{opacity:.8;}
  to{transform:scale(.06) rotate(-9deg);opacity:0;}
}

.panel.is-bared > .scratch__web .scratch__veil{opacity:0;}
.panel.is-bared > .scratch__web{pointer-events:none;}

.scratch-hint{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  z-index:6;pointer-events:none;white-space:nowrap;
  display:inline-block;padding:5px 10px 4px;
  background:var(--paper);color:var(--ink);
  border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  font-family:"IBM Plex Mono",monospace;
  font-size:clamp(.5625rem,1.1vw,.6875rem);
  letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  animation:scratch-hint-in 320ms cubic-bezier(.22,1,.36,1) both;
}

@keyframes scratch-hint-in{
  from{opacity:0;transform:translate(-50%,8px);}
  to{opacity:1;transform:translate(-50%,0);}
}

.scratch-found .scratch-hint{display:none;}
.is-capture .scratch-hint{display:none !important;}
.is-capture .scratch__web{display:none !important;}

@media(max-width:767px){
  .panel > .scratch__web{--strand:var(--dimmer);}
  .scratch__g{stroke-width:1.2;}
}

@media(max-width:600px){
  .scratch-hint{letter-spacing:.06em;padding:4px 8px 3px;}
}

@media(prefers-reduced-motion:reduce){
  .scratch-hint{animation:none;}
  .scratch__strand.is-torn{animation-name:none;opacity:0;}
}

@media print{
  .scratch__web,.scratch-hint{display:none !important;}
}