.vp-portable{width:min(1440px,97vw);max-width:97vw}.vp-portable .vp-grid{grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr)}.tp-instruction{margin:0 0 14px;color:#eee0c5;min-height:1.5em}.tp-stage{position:relative;isolation:isolate;width:100%;aspect-ratio:3/2;overflow:hidden;border:1px solid #65706a;background:#24241d}.tp-bench{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.tp-spool{position:absolute;width:22%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(1px 3px 2px #0009)}.tp-spool-face{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:rotate(var(--tp-angle,0deg))}.tp-takeup{--tp-angle:var(--tp-wind,0deg)}.tp-takeup .tp-spool-face{transition:transform .35s ease-out}.tp-tape-pack{position:absolute;inset:11%;border:5px solid #36251b;border-radius:50%;background:repeating-radial-gradient(circle,#452e20 0 1px,#69472b 1.5px 2.5px);box-shadow:0 0 4px #0008}.tp-selected{filter:drop-shadow(0 0 5px #dfd5b080);transform:translate(-50%,-57%)}.tp-tape-path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.tp-tape-path path{fill:none;stroke:#472d1d;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(1px 2px 1px #0007)}.vp-dialog .tp-hotspot{position:absolute;background:transparent;border:1px solid transparent;padding:0;min-width:26px;min-height:26px;cursor:pointer;border-radius:5px}.vp-dialog .tp-hotspot:hover{background:#ded1af06;border-color:#e0d3af40}.vp-dialog .tp-hotspot:focus-visible{outline:2px solid #f1cf91;outline-offset:2px;background:#d4bd7320}.vp-dialog .tp-targets .tp-hotspot{border:2px solid #dfc791b3;background:#c3ab6612}.vp-dialog .tp-hotspot[aria-disabled=true]{cursor:help}.vp-dialog .tp-pick{cursor:grab}.tp-state{margin:12px 0 5px;font:12px/1.5 system-ui,sans-serif;letter-spacing:.7px;color:#c8b78f}.tp-keyboard{font:12px/1.6 system-ui,sans-serif;color:#a6b2ac;margin:6px 0}.tp-captions{padding:12px;background:#070e12;border-left:2px solid #a1916b;font-size:15px}.tp-playing .tp-supply .tp-spool-face{animation:tp-spin 4.7s linear infinite}.tp-playing .tp-takeup .tp-spool-face{animation:tp-spin 3.6s linear infinite}.tp-playing .tp-takeup .tp-spool-face{transition:none}@keyframes tp-spin{from{transform:rotate(var(--tp-angle,0deg))}to{transform:rotate(calc(var(--tp-angle,0deg) + 360deg))}}@media(max-width:900px){.vp-portable .vp-grid{grid-template-columns:1fr}.vp-portable .vp-right{border-left:0;border-top:1px solid #53605c}.tp-stage{max-width:900px;margin:auto}}@media(prefers-reduced-motion:reduce){.tp-playing .tp-spool .tp-spool-face{animation:none}.tp-takeup .tp-spool-face{transition:none}}

.tp-tape-pack{mask-image:radial-gradient(circle,transparent 0 20%,#000 21%)}.tp-stage:not(.tp-playing) .tp-winding .tp-spool-face{animation:tp-hand-wind .4s ease-out}@keyframes tp-hand-wind{from{transform:rotate(calc(var(--tp-angle,0deg) - 85deg))}to{transform:rotate(var(--tp-angle,0deg))}}@media(prefers-reduced-motion:reduce){.tp-stage:not(.tp-playing) .tp-winding .tp-spool-face{animation:none}}