/* The creatures have their own rhythm; the paper moves only in response to you. */
html{scrollbar-color:var(--purple) var(--paper)}
.creature-pet{position:relative;display:block;width:100%;padding:0;border:0;background:none;color:var(--purple);pointer-events:auto;isolation:isolate;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.creature-pet:disabled{cursor:default;pointer-events:none}
.creature-pet:focus-visible{outline:3px dashed var(--hotpink);outline-offset:6px;border-radius:35%}
.creature-reaction,.creature-body{display:block;transform-origin:50% 80%}
.creature-body img{user-select:none;-webkit-user-drag:none;pointer-events:none}
.pet-love{position:absolute;top:10%;right:5%;font:600 46px/1 'Shantell Sans',sans-serif;color:var(--hotpink);opacity:0;transform:rotate(12deg);pointer-events:none;text-shadow:2px 3px 0 var(--white)}
.creature-pet.is-happy .pet-love{opacity:1}



.motion-ready .sticker-axo .creature-body{animation:yume-axo-idle 6.8s cubic-bezier(.45,0,.55,1) infinite;animation-play-state:paused}
.motion-ready .sticker-frog .creature-body{animation:yume-frog-idle 9.4s cubic-bezier(.45,0,.55,1) infinite;animation-play-state:paused;animation-delay:-3.1s}
.motion-on .creature-pet.in-view .creature-body{animation-play-state:running}
.creature-pet:focus-visible .creature-body{animation-play-state:paused}
@keyframes yume-axo-idle{
 0%,100%{transform:translateY(0) rotate(0) scale(1)}
 28%{transform:translateY(-7px) rotate(2deg) scale(1.015)}
 55%{transform:translateY(-2px) rotate(-1.3deg) scale(1)}
 76%{transform:translateY(-5px) rotate(1deg) scale(1.01)}
}
@keyframes yume-frog-idle{
 0%,38%,78%,100%{transform:translateY(0) rotate(0) scale(1)}
 43%{transform:translateY(2px) rotate(-2deg) scale(1.025,.96)}
 49%{transform:translateY(-12px) rotate(-4deg) scale(.99,1.025)}
 55%{transform:translateY(1px) rotate(2deg) scale(1.015,.98)}
 62%{transform:translateY(-5px) rotate(3deg) scale(1)}
 70%{transform:translateY(0) rotate(-1deg) scale(1)}
}
.yume-burst{position:fixed;z-index:40;width:1px;height:1px;pointer-events:none;contain:layout style;overflow:visible}
.yume-burst>span{position:absolute;left:-10px;top:-10px;width:20px;height:20px;color:var(--hotpink)}
.yume-burst>span:nth-child(even){color:var(--purple)}
.yume-burst>span:nth-child(3n){color:#72844a}
.yume-burst svg{width:100%;height:100%;filter:drop-shadow(1px 2px 1px #fffdf8)}
#note-result{position:relative}
.note-seal{position:absolute;right:-2px;top:12px;display:grid;place-items:center;width:38px;height:38px;border:1.5px solid var(--purple);border-radius:50%;color:var(--purple);transform:rotate(12deg);background:var(--yellow);pointer-events:none}
.note-seal svg{width:22px;height:22px}
#note-result label{padding-right:38px}
.dialog-close{transition:background 150ms ease,transform 150ms var(--ease)}
.dialog-close:hover{background:var(--pink)}
.dialog-close:active{transform:scale(.94)}
.swatch{transition:transform 150ms var(--ease)}
.swatch:active{transform:scale(.9)}
.language-list a{position:relative}
.collection{position:relative}
.scroll-ink{display:block;overflow:visible;pointer-events:none;flex:none}
.scroll-ink path{stroke-dasharray:1;stroke-dashoffset:0}
.scroll-ink.ink-waiting path{stroke-dashoffset:1;opacity:0}
.ink-heart{position:absolute;right:25%;top:32px;width:93px;height:81px;color:var(--hotpink);transform:rotate(12deg)}
.custom-sketch{display:flex;align-items:center;justify-content:space-between;gap:20px}
.custom-sketch .custom-scribble{flex:1;min-width:0}
.ink-arrow{width:144px;height:108px;color:var(--purple);transform:rotate(-9deg);margin-right:4px}
.custom-making{display:flex;align-items:center;gap:18px;margin-top:-12px}
.custom-making .custom-practical{flex:1;min-width:0;margin-bottom:0}
.knitting-sticker{flex:0 0 210px;width:210px;pointer-events:none;transform:rotate(-4deg);margin-right:-6px}
.knitting-work{position:relative;aspect-ratio:3/2;transform-origin:48% 90%}
.knitting-work img{position:relative;display:block;width:100%;height:auto;user-select:none}
.knitting-needles{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.knitting-needle{transform-box:view-box;transform-origin:75% 55%}
.motion-ready .knitting-work{animation:yume-yarn-bob 6s cubic-bezier(.45,0,.55,1) infinite;animation-play-state:paused}
.motion-ready .needle-left{animation:yume-knit-left 6s cubic-bezier(.45,0,.55,1) infinite;animation-play-state:paused}
.motion-ready .needle-right{animation:yume-knit-right 6s cubic-bezier(.45,0,.55,1) infinite;animation-play-state:paused}
.motion-on .knitting-sticker.in-view .knitting-work,.motion-on .knitting-sticker.in-view .knitting-needle{animation-play-state:running}
@keyframes yume-knit-left{
 0%,10%,30%,50%,70%,100%{transform:rotate(-4deg)}
 20%,40%,60%{transform:translateY(2px) rotate(7deg)}
}
@keyframes yume-knit-right{
 0%,10%,30%,50%,70%,100%{transform:rotate(4deg)}
 20%,40%,60%{transform:translateY(-2px) rotate(-7deg)}
}
@keyframes yume-yarn-bob{
 0%,10%,70%,100%{transform:translateY(0) rotate(0)}
 20%,40%,60%{transform:translateY(-2px) rotate(-1deg)}
 30%,50%{transform:translateY(0) rotate(1deg)}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 html:not([data-input=keyboard]) .button:hover>svg,html:not([data-input=keyboard]) .header-cta:hover>svg:not(.header-heart){transform:translateX(3px)}
 .button>svg,.header-cta>svg{transition:transform 180ms var(--ease)}
 .creature-pet:not(:disabled){cursor:pointer}
}
@media(max-width:800px){.ink-arrow{width:95px;height:80px}.ink-heart{width:66px;height:58px;top:18px;right:27%}}
@media(max-width:600px){
 .hero{min-height:782px}
 .hero .heart-one{bottom:135px}
 
 
 
 
 
 .pet-love{font-size:33px;right:0}
 .note-seal{width:32px;height:32px;top:14px}
 .ink-heart{width:53px;height:46px;top:12px;right:31px}
 .ink-arrow{width:103px;height:88px;transform:rotate(62deg);margin-right:15px}
 .custom-making{gap:10px;margin-top:0}
 .knitting-sticker{flex-basis:145px;width:145px;margin-right:-4px}
}
html[data-input=keyboard] .dialog-close,html[data-input=keyboard] .swatch,html[data-input=keyboard] .language-picker summary,html[data-input=keyboard] .header-cta{transition:none}
@media(prefers-reduced-motion:reduce){
 .motion-ready .creature-body{animation:none!important}
 .motion-ready .knitting-work,.motion-ready .knitting-needle{animation:none!important}
 .yume-burst{display:none}
 .scroll-ink.ink-waiting path{stroke-dashoffset:0;opacity:1}
}