:root {
  --paper: #fbf7ec;
  --rail: rgba(117, 78, 43, .13);
  --fill: .035;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; background: var(--paper); }
body { min-height: 100vh; }
button { font: inherit; }

.toy-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: clamp(16px, 4vw, 68px);
  background: radial-gradient(circle at 28% 8%, #fffdf8 0 13%, transparent 42%), var(--paper);
}
.toy { width: min(1280px, 100%); }
.stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 3 / 1;
  border-radius: clamp(14px, 2vw, 28px);
  background: #fdf8ed;
  box-shadow: 0 20px 60px rgba(111, 75, 34, .07), inset 0 1px rgba(255,255,255,.9);
}
.cel-viewport { position: absolute; inset: 0; overflow: hidden; background: #fdf8ed; }
.cel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  will-change: opacity, transform;
}
.cel-current { z-index: 2; opacity: 1; }
.cel-previous { z-index: 1; }
.stage.is-dragging .cel-current { transform: translate3d(calc(var(--scene-sway, 0px) * -.18), 0, 0) scale(1.003); }
.stage.is-resetting .cel-previous { opacity: 1; }
.stage.is-resetting .cel-current { animation: scene-reset .34s ease-out both; }

.hit-layer { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rope-hit { fill: none; stroke: #fff; stroke-opacity: .001; stroke-width: 82; stroke-linecap: round; pointer-events: stroke; cursor: grab; touch-action: none; }
.rope-hit:active { cursor: grabbing; }
.stage.is-locked .rope-hit { pointer-events: none; }
.leash-control { position: absolute; z-index: 5; top: 50%; left: 40%; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; }
.leash-control:focus-visible { width: 30px; height: 30px; opacity: 1; outline: 2px solid rgba(237, 141, 66, .72); outline-offset: 5px; border-radius: 50%; transform: translate(-50%, -50%); }

.grab-cue {
  --cue-x: 22.6%;
  --cue-y: 49%;
  --cue-scale: 1;
  position: absolute;
  z-index: 6;
  left: var(--cue-x);
  top: var(--cue-y);
  width: clamp(30px, 4.2vw, 52px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) translate3d(var(--cue-shift, 0px), 0, 0) scale(var(--cue-scale));
  transform-origin: 50% 58%;
  transition: opacity .16s ease, transform .1s linear;
}
.grab-cue svg { position: relative; z-index: 2; display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 2px rgba(92, 48, 23, .2)); }
.cue-hand { fill: #ffe4be; stroke: #633c26; stroke-width: 2.15; stroke-linejoin: round; }
.cue-line, .cue-motion { fill: none; stroke: #d76a30; stroke-width: 2.4; stroke-linecap: round; }
.cue-motion { opacity: .76; }
.grab-ripple { position: absolute; z-index: 1; inset: 21%; border: 2px solid rgba(221, 108, 43, .58); border-radius: 50%; opacity: 0; transform: scale(.4); }
.stage.is-hovering .grab-cue, .stage.is-dragging .grab-cue { opacity: 1; }
.stage.is-hovering .grab-cue { animation: cue-float 1.25s ease-in-out infinite; }
.stage.is-hovering .ripple-one { animation: cue-ripple 1.3s ease-out infinite; }
.stage.is-hovering .ripple-two { animation: cue-ripple 1.3s .46s ease-out infinite; }
.stage.is-dragging .grab-cue { --cue-scale: calc(1 + var(--grab-tightness, 0) * .1); }
.stage.is-dragging .cue-hand { fill: #ffd29e; }
.stage.is-dragging .cue-line { stroke-width: calc(2.4px + var(--grab-tightness, 0) * 1.5px); }
.stage.is-dragging .ripple-one { animation: cue-ripple .72s ease-out infinite; }
.stage.is-dragging .ripple-two { animation: cue-ripple .72s .24s ease-out infinite; }

.fluid-progress { position: relative; width: min(82%, 740px); height: 13px; margin: clamp(18px, 3.2vw, 34px) auto 0; }
.fluid-track {
  position: absolute;
  inset: 3px 0;
  overflow: hidden;
  border-radius: 999px;
  background: var(--rail);
  box-shadow: inset 0 1px 2px rgba(92, 55, 27, .08), 0 1px rgba(255,255,255,.72);
}
.fluid-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(105deg, #cf6125 0%, #f28b45 19%, #ffd4a1 39%, #ffe8c9 52%, #f6a25d 66%, #df722d 82%, #ffdcb2 100%);
  background-size: 260% 100%;
  box-shadow: 0 0 13px rgba(235, 136, 59, .36), inset 0 1px rgba(255,255,255,.68);
  transform: scaleX(var(--fill));
  transform-origin: left center;
  transition: transform .36s cubic-bezier(.18,.85,.22,1.1);
  animation: morpheus-flow 4.8s linear infinite;
}
.fluid-progress.is-pulling .fluid-fill { transition-duration: .14s; transform: scaleX(var(--pull-fill)); }
.fluid-progress.is-dragging .fluid-fill { transition: none; transform: scaleX(var(--drag-fill)); filter: saturate(calc(1 + var(--drag-energy, 0) * .28)) brightness(calc(1 + var(--drag-energy, 0) * .12)); }
.fluid-progress.is-complete .fluid-fill { animation: morpheus-flow 2.4s linear infinite, completion-breathe .75s ease-in-out infinite alternate; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@keyframes morpheus-flow { to { background-position: 260% 0; } }
@keyframes completion-breathe { from { filter: brightness(1); } to { filter: brightness(1.15) saturate(1.12); } }
@keyframes scene-reset { from { opacity: 0; } to { opacity: 1; } }
@keyframes cue-float { 0%, 100% { transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(1); } 50% { transform: translate(-50%, -50%) translate3d(-4px, -2px, 0) scale(1.05); } }
@keyframes cue-ripple { 0% { opacity: .72; transform: scale(.42); } 100% { opacity: 0; transform: scale(1.7); } }

@media (max-width: 620px) {
  .toy-shell { padding: 12px; }
  .stage { border-radius: 14px; }
  .fluid-progress { width: 88%; height: 11px; margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}