feat: Improve details

- Prevent text selection for agreement step
- Extend mouse out time
- Hint toast is now part of intro step
- Agreement step can now be solved with keyboard
- Remove more event listeners when step is solved

source/screens/demo/examples/ui/index.njk

@@ -35,12 +35,12 @@ tags:
 			<div id="status">0%</div>
 		</div>
 	</div>
-	<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
-		<p>Hold
-			<kbd>space</kbd>
-			to skip.</p>
-	</div>
 	<div id="intro" class="step op_hide">
+		<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
+			<p>Hold
+				<kbd>space</kbd>
+				to skip.</p>
+		</div>
 		{{ ph.brand('brand') }}
 		<p>Powered by</p>
 		<ul class="tech-stack">
@@ -77,6 +77,7 @@ tags:
 
 		let introDelay = 6;
 		let hintDelay = 1;
+		let cycleDelay = 2;
 		let isAgree = false;
 		const steps = {
 			agreement: {
@@ -117,7 +118,7 @@ tags:
 		const loader = document.getElementById('loader');
 		const idle = {
 			element: document.getElementById('idle'),
-			delay: 2000,
+			delay: cycleDelay * 1000,
 			position: 0,
 			cycle() {
 				if (typeof this.intervalId === 'number') {