/* Paper-shadow is a self-contained overlay. It never changes the SVG's geometry. */
.browser-shell .paper-shadow-layer {
  --paper-ink: #40394a;
  --paper-blue: #6b9bc4;
  --paper-blue-soft: #e6f2fb;
  --paper-tape: #d2a565;
  --paper-shadow-color: #e991ac;
  --paper-shadow-light: #ffd0db;
  --paper-shadow-dark: #73546b;
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

.browser-shell .paper-shadow-layer::before {
  position: absolute;
  inset: var(--stage-top,43px) 0 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 74%, #fff8eeaa, transparent 57%);
  transition: opacity .28s ease;
}

.browser-shell .paper-shadow-layer.paper-shadow-peel-1::before,
.browser-shell .paper-shadow-layer.paper-shadow-peel-2::before,
.browser-shell .paper-shadow-layer.paper-shadow-stage-1::before,
.browser-shell .paper-shadow-layer.paper-shadow-stage-2::before {
  opacity: 1;
}

.browser-shell .paper-shadow-stage,
.browser-shell .paper-peel-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.browser-shell .paper-shadow-stage > *,
.browser-shell .paper-peel-stage > * {
  pointer-events: none;
}

.browser-shell .paper-shadow-stage > .paper-shadow-figure {
  pointer-events: auto;
}

.browser-shell .paper-shadow-controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.browser-shell .paper-shadow-control {
  position: absolute;
  pointer-events: auto;
  border: 1px solid #cbb5a9;
  color: #6f5b62;
  background: #fff9f0;
  box-shadow: 0 3px 0 #baa69c66, 0 8px 13px #6f5b621c;
  cursor: grab;
  touch-action: none;
  user-select: none;
  font: 700 10px/1 "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", sans-serif;
  letter-spacing: .08em;
  white-space: nowrap;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.browser-shell .paper-shadow-figure {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.browser-shell .paper-shadow-figure:focus-visible,
.browser-shell .paper-shadow-control:focus-visible {
  outline: 3px solid #4f8db8;
  outline-offset: 3px;
}

.browser-shell .paper-shadow-control:hover {
  background: #fffdf7;
  transform: translateY(-2px) rotate(-2deg);
  box-shadow: 0 5px 0 #baa69c66, 0 10px 15px #6f5b6224;
}

.browser-shell .paper-shadow-control:active,
.browser-shell .paper-shadow-control.paper-shadow-control-pulling {
  cursor: grabbing;
  transform: translateY(2px) rotate(2deg);
  box-shadow: 0 1px 0 #baa69c66, 0 4px 8px #6f5b6218;
}

.browser-shell .paper-peel-handle {
  top: 44px;
  left: 13px;
  padding: 7px 10px 8px 12px;
  border-radius: 4px 11px 10px 4px;
  border-color: #9bbbd2;
  color: #416a91;
  background: #edf7ff;
  rotate: -3deg;
}

.browser-shell .paper-peel-handle::before {
  position: absolute;
  top: -1px;
  right: -10px;
  width: 12px;
  height: 100%;
  content: "";
  border-top: 1px solid #9bbbd2;
  border-right: 1px solid #9bbbd2;
  border-bottom: 1px solid #9bbbd2;
  border-radius: 0 9px 8px 0;
  background: #d9ecf8;
  transform: skewY(-22deg);
  transform-origin: left center;
}

.browser-shell .paper-shadow-handle {
  right: 13px;
  bottom: 14px;
  min-width: 35px;
  min-height: 29px;
  padding: 7px 10px 8px;
  border-radius: 50% 45% 52% 43%;
  border-color: #af9cae;
  color: #534359;
  background: #f7eff8;
  rotate: 4deg;
}

.browser-shell .paper-shadow-handle::before,
.browser-shell .paper-shadow-handle::after {
  position: absolute;
  bottom: -5px;
  width: 8px;
  height: 11px;
  content: "";
  border-radius: 50%;
  background: #2b2630;
  opacity: .88;
}

.browser-shell .paper-shadow-handle::before { left: 8px; }
.browser-shell .paper-shadow-handle::after { right: 8px; }

.browser-shell .paper-peel-underside,
.browser-shell .paper-peel-doodle,
.browser-shell .paper-shadow-figure,
.browser-shell .paper-shadow-cracks,
.browser-shell .paper-shadow-relative {
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, transform .35s cubic-bezier(.22, .8, .28, 1), visibility .35s;
}

.browser-shell .paper-shadow-layer.paper-shadow-peel-1 .paper-peel-underside,
.browser-shell .paper-shadow-layer.paper-shadow-peel-2 .paper-peel-doodle,
.browser-shell .paper-shadow-layer.paper-shadow-stage-1 .paper-shadow-figure,
.browser-shell .paper-shadow-layer.paper-shadow-stage-2 .paper-shadow-figure,
.browser-shell .paper-shadow-layer.paper-shadow-kind-stone.paper-shadow-peel-1 .paper-shadow-cracks,
.browser-shell .paper-shadow-layer.paper-shadow-kind-stone.paper-shadow-peel-2 .paper-shadow-cracks,
.browser-shell .paper-shadow-layer.paper-shadow-kind-stone.paper-shadow-stage-1 .paper-shadow-cracks,
.browser-shell .paper-shadow-layer.paper-shadow-kind-stone.paper-shadow-stage-2 .paper-shadow-cracks {
  opacity: 1;
  visibility: visible;
}

.browser-shell .paper-peel-underside {
  position: absolute;
  top: 74px;
  left: 9%;
  width: 78%;
  height: 58%;
  overflow: hidden;
  border: 1px solid #9ebfd7;
  border-radius: 5px 18px 7px 8px;
  background-color: var(--paper-blue-soft);
  background-image:
    linear-gradient(#a9c9dd66 1px, transparent 1px),
    linear-gradient(90deg, #a9c9dd66 1px, transparent 1px);
  background-size: 18px 18px;
  box-shadow: 0 9px 0 #789bb233, 3px 9px 16px #6686a62b;
  transform: rotate(-1.6deg) translate(-6px, -8px);
}

.browser-shell .paper-shadow-layer.paper-shadow-peel-1 .paper-peel-underside {
  transform: rotate(-1.6deg) translate(0, 0);
}

.browser-shell .paper-peel-underside::before {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 70px;
  height: 72px;
  content: "";
  border-top: 1px solid #90aec1;
  border-left: 1px solid #90aec1;
  background: linear-gradient(135deg, #c2dce9, #e8f4fa 56%, #b1cfde);
  box-shadow: -7px -7px 10px #6289a31c;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  transform-origin: bottom right;
  rotate: -9deg;
}

.browser-shell .paper-peel-grid,
.browser-shell .paper-peel-fold,
.browser-shell .paper-peel-tape {
  position: absolute;
  display: block;
  font: 700 9px/1.45 monospace;
  letter-spacing: .08em;
}

.browser-shell .paper-peel-grid {
  top: 21px;
  left: 26px;
  color: #5d8bb0;
  rotate: -4deg;
}

.browser-shell .paper-peel-fold {
  right: 20px;
  bottom: 18px;
  color: #6b91aa;
  writing-mode: vertical-rl;
  rotate: 4deg;
}

.browser-shell .paper-peel-tape {
  top: -7px;
  right: 24%;
  padding: 4px 13px;
  color: #977451;
  background: #ebcf9cbb;
  box-shadow: 1px 2px 0 #b18b5c33;
  rotate: 3deg;
}

.browser-shell .paper-peel-doodle {
  position: absolute;
  top: var(--stage-top,43px);
  left: 0;
  width: 100%;
  height: calc(100% - var(--stage-top,43px));
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #d7bc96;
  border-radius: 4px 16px 5px 12px;
  color: #936f58;
  background:
    linear-gradient(12deg, transparent 49%, #d3b28a55 50%, transparent 51%),
    repeating-linear-gradient(0deg, #fff3d8 0 21px, #efd4aa 22px 23px);
  box-shadow: 0 8px 0 #ac856355, 4px 10px 18px #89694b2b;
  font: 800 clamp(15px, 3vw, 25px)/1.2 "Hiragino Maru Gothic ProN", sans-serif;
  letter-spacing: .15em;
  padding: 20px 18px;
  rotate: 1.8deg;
  transform: translate(8px, 9px) rotate(1.5deg);
}

.browser-shell .paper-shadow-layer.paper-shadow-peel-2 .paper-peel-doodle {
  transform: translate(0, 0) rotate(1.8deg);
}

.browser-shell .paper-peel-doodle::before,
.browser-shell .paper-peel-doodle::after {
  position: absolute;
  content: "ぬるぬる　404　なんで？";
  color: #c18486;
  font: 700 9px/1 monospace;
  letter-spacing: .03em;
  opacity: .8;
}

.browser-shell .paper-peel-doodle::before {
  top: 48%;
  right: 9%;
  rotate: -5deg;
}

.browser-shell .paper-peel-doodle::after {
  bottom: 13%;
  left: 14%;
  color: #7e9b88;
  rotate: 7deg;
}

.browser-shell .paper-peel-word {
  position: absolute;
  display: block;
  color: #a36f59;
  font: 800 clamp(13px, 2.8vw, 23px)/1.1 "Hiragino Maru Gothic ProN", sans-serif;
  letter-spacing: .1em;
  opacity: .88;
}

.browser-shell .paper-peel-word-1 { top: 13%; left: 10%; rotate: -4deg; }
.browser-shell .paper-peel-word-2 { top: 29%; right: 14%; color: #7291a2; rotate: 6deg; }
.browser-shell .paper-peel-word-3 { bottom: 25%; left: 18%; color: #b17187; rotate: 3deg; }
.browser-shell .paper-peel-word-4 { bottom: 10%; right: 9%; color: #779b83; rotate: -8deg; }

.browser-shell .paper-peel-corner-tape {
  position: absolute;
  right: 8%;
  bottom: 6%;
  display: block;
  padding: 4px 12px;
  color: #865f51;
  background: #e7c17fbb;
  box-shadow: 1px 2px 0 #9e795933;
  font: 700 8px/1 monospace;
  letter-spacing: .08em;
  rotate: -8deg;
}

.browser-shell .paper-peel-rider {
  position: absolute;
  left: 9%;
  bottom: 20%;
  z-index: 3;
  width: 72px;
  height: 48px;
  border: 2px solid var(--paper-shadow-dark);
  border-radius: 48% 52% 44% 57%;
  background: var(--paper-shadow-color);
  box-shadow: 8px 6px 0 #73546b33, 0 0 0 6px #fff6e266;
  rotate: -7deg;
  animation: paper-peel-rider-slide 3.6s ease-in-out infinite alternate;
}

.browser-shell .paper-shadow-layer[data-kind="jelly"] .paper-peel-rider {
  border-radius: 45% 55% 52% 46% / 62% 45% 55% 38%;
  box-shadow: 8px 6px 0 #2c777433, inset -10px -5px 0 #ffffff33;
}

.browser-shell .paper-shadow-layer[data-kind="spring"] .paper-peel-rider {
  border-radius: 34% 66% 38% 62%;
  background: repeating-linear-gradient(145deg, var(--paper-shadow-color) 0 8px, var(--paper-shadow-light) 9px 12px);
}

.browser-shell .paper-shadow-layer[data-kind="stone"] .paper-peel-rider {
  border-radius: 9px 14px 7px 11px;
  background: linear-gradient(135deg, var(--paper-shadow-light), var(--paper-shadow-color));
  clip-path: polygon(4% 17%, 23% 3%, 54% 8%, 96% 21%, 91% 82%, 66% 98%, 25% 89%, 2% 66%);
}

.browser-shell .paper-peel-rider-eye {
  position: absolute;
  top: 8px;
  width: 6px;
  height: 8px;
  border-radius: 50%;
  background: #453a43;
}

.browser-shell .paper-peel-rider-eye:first-child { left: 12px; }
.browser-shell .paper-peel-rider-eye:nth-child(2) { right: 12px; }

.browser-shell .paper-peel-rider::before {
  position: absolute;
  left: 50%;
  bottom: 7px;
  content: "•";
  color: #4b3541;
  font: 800 10px/1 sans-serif;
  translate: -50% 0;
}

.browser-shell .paper-peel-rider::after {
  position: absolute;
  left: 19px;
  bottom: 8px;
  width: 34px;
  height: 5px;
  content: "";
  border-radius: 50%;
  background: var(--paper-shadow-light);
  opacity: .8;
}

.browser-shell .paper-shadow-figure {
  position: absolute;
  left: clamp(17px, calc(var(--paper-body-x, 50%) + 96px), calc(100% - 74px));
  top: clamp(90px, calc(var(--paper-body-y, 270px) + 116px), calc(100% - 58px));
  width: 82px;
  height: 51px;
  z-index: 3;
  transform: translate(-50%, -50%) rotate(-4deg) scale(.82);
}

.browser-shell .paper-shadow-layer.paper-shadow-stage-1 .paper-shadow-figure,
.browser-shell .paper-shadow-layer.paper-shadow-stage-2 .paper-shadow-figure {
  transform: translate(-50%, -50%) rotate(-4deg) scale(1);
}

.browser-shell .paper-shadow-body {
  position: absolute;
  inset: 9px 4px 0;
  display: block;
  border: 2px solid #2b2630;
  border-radius: 45% 55% 52% 44% / 57% 51% 48% 43%;
  background: #211e27;
  box-shadow: 0 9px 0 #211e2733, 3px 5px 0 #211e2718;
  pointer-events: none;
}

.browser-shell .paper-shadow-eye {
  position: absolute;
  top: 10px;
  width: 15px;
  height: 19px;
  border-radius: 52% 48% 49% 51%;
  background: #fbf6eb;
  box-shadow: inset 0 -4px 0 #d6bfce;
}

.browser-shell .paper-shadow-eye:first-child { left: 17px; }
.browser-shell .paper-shadow-eye:nth-child(2) { right: 17px; }

.browser-shell .paper-shadow-eye::after {
  position: absolute;
  top: 7px;
  left: 5px;
  width: 5px;
  height: 7px;
  content: "";
  border-radius: 50%;
  background: #2b2630;
}

.browser-shell .paper-shadow-mouth {
  position: absolute;
  left: 50%;
  bottom: 5px;
  color: #f6dbe8;
  font: 800 11px/1 sans-serif;
  translate: -50% 0;
}

.browser-shell .paper-shadow-layer.paper-shadow-stage-2 .paper-shadow-body {
  border-color: var(--paper-shadow-dark);
  background: var(--paper-shadow-color);
  box-shadow: 0 9px 0 #73546b33, 3px 5px 0 #73546b18;
}

.browser-shell .paper-shadow-layer.paper-shadow-stage-2 .paper-shadow-eye {
  background: #fffaf3;
}

.browser-shell .paper-shadow-cracks {
  position: absolute;
  left: 14%;
  top: 26%;
  width: 72%;
  height: 52%;
  border: 4px solid #716979;
  border-radius: 8px;
  background:
    linear-gradient(42deg, transparent 48%, #716979bb 49% 51%, transparent 52%),
    linear-gradient(137deg, transparent 47%, #71697999 48% 50%, transparent 51%),
    #c9c2c888;
  box-shadow: 0 11px 0 #5b566444, 0 17px 19px #4a45532e;
  z-index: 1;
  opacity: 0;
  rotate: -2deg;
}

.browser-shell .paper-shadow-cracks::before {
  position: absolute;
  inset: 9px;
  content: "";
  border: 2px dashed #756d7c99;
  border-radius: 4px;
}

.browser-shell .paper-shadow-crack {
  position: absolute;
  display: block;
  width: 36%;
  height: 3px;
  background: #625c6e;
  transform-origin: left center;
}

.browser-shell .paper-shadow-crack-one { left: 23%; top: 31%; rotate: 47deg; }
.browser-shell .paper-shadow-crack-two { left: 55%; top: 28%; rotate: 121deg; }
.browser-shell .paper-shadow-crack-three { left: 42%; top: 67%; rotate: -25deg; }

.browser-shell .paper-shadow-relative {
  position: absolute;
  bottom: 17%;
  width: 29px;
  height: 21px;
  border: 2px solid var(--paper-shadow-dark);
  border-radius: 48% 52% 44% 58%;
  color: #fff9f4;
  background: var(--paper-shadow-color);
  box-shadow: 0 4px 0 #73546b33;
  font: 800 12px/17px sans-serif;
  text-align: center;
}

.browser-shell .paper-shadow-relative-1 { left: 18%; rotate: -12deg; }
.browser-shell .paper-shadow-relative-2 { left: 50%; bottom: 13%; rotate: 3deg; scale: 1.22; }
.browser-shell .paper-shadow-relative-3 { right: 17%; rotate: 11deg; }

.browser-shell .paper-shadow-layer.paper-shadow-stage-2.paper-shadow-habit-twins .paper-shadow-relative {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.browser-shell .paper-shadow-layer.paper-shadow-combo::after {
  position: absolute;
  top: 52px;
  right: 15%;
  width: 92px;
  height: 31px;
  content: "✎ ひっぱれ　✎";
  border-bottom: 3px solid #bd7f9d99;
  color: #a26987;
  font: 800 9px/26px monospace;
  letter-spacing: .02em;
  text-align: center;
  rotate: -8deg;
  pointer-events: none;
  animation: paper-shadow-scribble 1.4s ease-in-out infinite alternate;
}

.browser-shell .paper-shadow-layer.paper-shadow-combo .paper-peel-tape {
  background: #e4b5c9cc;
  color: #91596f;
}

.browser-shell .paper-shadow-layer.paper-shadow-combo .paper-peel-underside {
  animation: paper-shadow-tug-fold 1.1s ease-in-out infinite alternate;
}

.browser-shell .paper-shadow-layer.paper-shadow-combo .paper-peel-fold,
.browser-shell .paper-shadow-layer.paper-shadow-combo .paper-peel-corner-tape {
  animation: paper-shadow-tug-tape .9s ease-in-out infinite alternate;
}

.browser-shell .paper-shadow-layer.paper-shadow-combo .paper-peel-doodle::before,
.browser-shell .paper-shadow-layer.paper-shadow-combo .paper-peel-doodle::after {
  animation: paper-shadow-tug-scribble 1.2s ease-in-out infinite alternate;
}

.browser-shell svg.paper-shadow-original-muted #skin,
.browser-shell svg.paper-shadow-original-muted #bumps circle,
.browser-shell svg.paper-shadow-original-muted #material-detail,
.browser-shell svg.paper-shadow-original-muted #shine,
.browser-shell svg.paper-shadow-original-muted #face,
.browser-shell svg.paper-shadow-original-muted #eye-left,
.browser-shell svg.paper-shadow-original-muted #eye-right,
.browser-shell svg.paper-shadow-original-muted #pupils,
.browser-shell svg.paper-shadow-original-muted #eyelids,
.browser-shell svg.paper-shadow-original-muted #mouth,
.browser-shell svg.paper-shadow-original-muted .cheek {
  fill: #211e27 !important;
  stroke: #211e27 !important;
  opacity: 1 !important;
}

.browser-shell svg.paper-shadow-original-muted #face {
  filter: drop-shadow(3px 4px 0 #211e2733);
}

@keyframes paper-shadow-scribble {
  from { transform: translateX(-5px) rotate(-2deg); }
  to { transform: translateX(5px) rotate(2deg); }
}

@keyframes paper-shadow-tug-fold {
  from { transform: translate(-1px, 0) rotate(-1.6deg); }
  to { transform: translate(6px, 3px) rotate(-.3deg); }
}

@keyframes paper-shadow-tug-tape {
  from { transform: translate(-2px, 0) rotate(-2deg); }
  to { transform: translate(5px, 2px) rotate(5deg); }
}

@keyframes paper-shadow-tug-scribble {
  from { transform: translateX(-3px) rotate(-4deg); }
  to { transform: translateX(4px) rotate(4deg); }
}

@keyframes paper-peel-rider-slide {
  from { transform: translateX(0) rotate(-2deg); }
  to { transform: translateX(min(42vw, 220px)) rotate(4deg); }
}

.browser-shell .paper-shadow-layer.paper-shadow-reduced *,
.browser-shell .paper-shadow-layer.paper-shadow-reduced::before,
.browser-shell .paper-shadow-layer.paper-shadow-reduced::after {
  animation: none !important;
  transition: none !important;
}

@media (max-width: 520px) {
  .browser-shell .paper-peel-handle {
    top: 40px;
    left: 8px;
    padding: 6px 8px 7px 9px;
    font-size: 9px;
  }

  .browser-shell .paper-shadow-handle {
    right: 9px;
    bottom: 10px;
    min-width: 31px;
    min-height: 26px;
    padding: 6px 8px 7px;
  }

  .browser-shell .paper-peel-underside { top: 66px; height: 53%; }
  .browser-shell .paper-peel-doodle { top: var(--stage-top,43px); height: calc(100% - var(--stage-top,43px)); padding: 14px 11px; }
  .browser-shell .paper-peel-rider { width: 57px; height: 40px; }
  .browser-shell .paper-shadow-figure { scale: .82; }
  .browser-shell .paper-shadow-layer.paper-shadow-combo::after { right: 12%; width: 75px; }
}

@media (prefers-reduced-motion: reduce) {
  .browser-shell .paper-shadow-layer.paper-shadow-reduced *,
  .browser-shell .paper-shadow-layer.paper-shadow-reduced::before,
  .browser-shell .paper-shadow-layer.paper-shadow-reduced::after {
    animation: none !important;
    transition: none !important;
  }

  .browser-shell .paper-shadow-layer.paper-shadow-reduced .paper-peel-underside,
  .browser-shell .paper-shadow-layer.paper-shadow-reduced .paper-peel-doodle,
  .browser-shell .paper-shadow-layer.paper-shadow-reduced .paper-shadow-figure {
    transform: none;
  }
}