Tolan/tutorial-7.html

<html lang="zh-CN" style="--oss-chatbot-bg-url: url(&quot;https://www.lyrria.com/img/chatbot-bg.svg&quot;); --vw: 4.14px; --vh: 7.5px;"><head><style data-rc-order="prependQueue" data-css-hash="m68k60" data-token-hash="i21gez">.anticon{display:inline-flex;align-items:center;color:inherit;font-style:normal;line-height:0;text-align:center;text-transform:none;vertical-align:-0.125em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.anticon >*{line-height:1;}.anticon svg{display:inline-block;}.anticon .anticon .anticon-icon{display:block;}</style><style class="vjs-styles-defaults">
      .video-js {
        width: 300px;
        height: 150px;
      }

      .vjs-fluid:not(.vjs-audio-only-mode) {
        padding-top: 56.25%
      }
    </style>
    <meta charset="UTF-8">
    <link rel="icon" type="image/svg+xml" href="/Lumi-cap.ico">
    <!-- 全终端适配 viewport 配置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <!-- iOS Safari 优化 -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- Android Chrome 优化 -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="#667eea">
    <!-- 禁止格式检测 -->
    <meta name="format-detection" content="telephone=no, email=no, address=no">
    
    <!-- 分享相关meta标签（默认值，SharePage组件会动态更新） -->
    <meta property="og:title" content="Lumi (by Lyrria, Early Access)">
    <meta property="og:description" content="Your adventure begins now.">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Lumi">
    <meta property="og:image" content="https://www.lyrria.com/img/Lumi-cap.png">
    <meta itemprop="name" content="Lumi (by Lyrria, Early Access)">
    <meta itemprop="description" content="Your adventure begins now.">
    <meta itemprop="image" content="https://www.lyrria.com/img/Lumi-cap.png">
    <meta name="description" content="Your adventure begins now.">
    
    <title>Lumi</title>
    <script type="module" crossorigin="" src="/assets/index-mbsDbGZ5.js"></script>
    <link rel="stylesheet" crossorigin="" href="/assets/index-sD1xzaQP.css">
  <link rel="preload" as="image" href="https://www.lyrria.com/img/01-Default.gif"><link rel="preload" as="image" href="https://www.lyrria.com/img/chatbot-bg.svg"><link rel="preload" as="image" href="https://www.lyrria.com/img/stool.png"></head>
  <body>
    <div id="root"><div class="w-full h-full overflow-hidden" style="position: relative; width: 100%; min-height: 100dvh;"><img src="https://www.lyrria.com/img/init2.png" alt="Trees" class="chatbot-trees absolute pointer-events-none" style="width: 100%; height: 100%; top: 0px; left: 0px; object-fit: cover; z-index: 1;"><div style="position: absolute; inset: 0px; background-color: rgba(0, 0, 0, 0.6); z-index: 2; pointer-events: none;"></div><div style="position: absolute; top: min(calc(115 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(13.497652582159624 * var(--vh, 1vh))); left: min(calc(24 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(2.8169014084507045 * var(--vh, 1vh))); width: min(calc(70 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(8.215962441314554 * var(--vh, 1vh))); height: min(calc(54 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(6.338028169014084 * var(--vh, 1vh))); background-color: rgba(0, 0, 0, 0.4); border-radius: min(calc(8 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(0.9389671361502347 * var(--vh, 1vh))); box-sizing: border-box; z-index: 1;"><div style="position: absolute; top: min(calc(6 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(0.7042253521126761 * var(--vh, 1vh))); left: 50%; transform: translateX(-50%); width: min(calc(58 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(6.807511737089202 * var(--vh, 1vh))); height: min(calc(14 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(1.643192488262911 * var(--vh, 1vh))); display: flex; align-items: center; justify-content: space-between;"><img src="https://www.lyrria.com/img/Heart.png" alt="heart" style="width: min(calc(14 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(1.643192488262911 * var(--vh, 1vh))); height: min(calc(14 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(1.643192488262911 * var(--vh, 1vh))); object-fit: contain;"><img src="https://www.lyrria.com/img/Heart.png" alt="heart" style="width: min(calc(14 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(1.643192488262911 * var(--vh, 1vh))); height: min(calc(14 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(1.643192488262911 * var(--vh, 1vh))); object-fit: contain;"><img src="https://www.lyrria.com/img/Heart.png" alt="heart" style="width: min(calc(14 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(1.643192488262911 * var(--vh, 1vh))); height: min(calc(14 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(1.643192488262911 * var(--vh, 1vh))); object-fit: contain;"></div><div style="position: absolute; top: min(calc(24 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(2.8169014084507045 * var(--vh, 1vh))); left: 50%; transform: translateX(-50%); width: min(calc(55 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(6.455399061032864 * var(--vh, 1vh)));"><img src="https://www.lyrria.com/img/conversion-energy-stone-count.png" alt="Energy Stone" style="width: 100%; height: 100%; object-fit: contain; display: block;"><span style="position: absolute; top: 50%; left: 70%; transform: translate(-50%, -50%); font-size: min(calc(10 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(1.1737089201877933 * var(--vh, 1vh))); color: rgb(0, 0, 0); font-weight: 500; white-space: nowrap;">999+</span></div></div><div class="chatbot-anima-zone-avatar absolute" style="width: min(calc(238 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(27.93427230046948 * var(--vh, 1vh))); height: min(calc(238 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(27.93427230046948 * var(--vh, 1vh))); top: min(calc(292 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(34.27230046948357 * var(--vh, 1vh))); left: 50%; transform: translateX(-50%); opacity: 1; z-index: 1;"><img src="https://www.lyrria.com/img/01-Default.gif" alt="a11y.avatar" draggable="false" style="position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: contain; pointer-events: none;"></div><div class="absolute" style="top: calc(min(calc(292 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(34.27230046948357 * var(--vh, 1vh))) + min(calc(191 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(22.417840375586852 * var(--vh, 1vh)))); left: 50%; transform: translateX(-50%); width: min(calc(64 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(7.511737089201878 * var(--vh, 1vh))); height: min(calc(14 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(1.643192488262911 * var(--vh, 1vh))); z-index: 1;"><img src="https://www.lyrria.com/img/yp.png" alt="Yp" class="w-full h-full object-contain" draggable="false" style="width: 100%; height: 100%;"></div><div class="chatbot-progress-container absolute" style="width: min(calc(312 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(36.61971830985916 * var(--vh, 1vh))); height: min(calc(98 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(11.502347417840376 * var(--vh, 1vh))); top: min(calc(622 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(73.00469483568075 * var(--vh, 1vh))); left: 50%; transform: translateX(-50%); z-index: 1; display: flex; align-items: center; justify-content: space-between;"><div class="absolute" style="left: 0px; top: 50%; transform: translateY(-50%); height: min(calc(98 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(11.502347417840376 * var(--vh, 1vh))); display: flex; align-items: center; justify-content: center;"><div style="width: min(calc(48 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(5.633802816901409 * var(--vh, 1vh))); height: min(calc(47 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(5.516431924882629 * var(--vh, 1vh)));"></div></div><div class="absolute flex items-center justify-center" style="left: 50%; top: 50%; transform: translate(-50%, -50%);"><div class="chatbot-record-button touch-manipulation flex items-center justify-center cursor-default" style="width: min(calc(84 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(9.859154929577464 * var(--vh, 1vh))); height: min(calc(82 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(9.624413145539906 * var(--vh, 1vh))); overflow: visible; position: relative;"><img src="https://www.lyrria.com/img/luyin-default.png" alt="Record" class="pointer-events-none w-full h-full object-contain" draggable="false"></div></div><div class="absolute" style="right: 0px; top: 50%; transform: translateY(-50%); height: min(calc(98 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(11.502347417840376 * var(--vh, 1vh))); display: flex; align-items: center; justify-content: center;"><button type="button" class="touch-manipulation cursor-default border-0 bg-transparent p-0 flex items-center justify-center" aria-label="Subtitle off" style="width: min(calc(48 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(5.633802816901409 * var(--vh, 1vh))); height: min(calc(47 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(5.516431924882629 * var(--vh, 1vh)));"><img src="https://www.lyrria.com/img/cc-close-icon.png" alt="Subtitle off" class="pointer-events-none w-full h-full object-contain" draggable="false"></button></div></div><div class="absolute" style="top: min(calc(622 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(73.00469483568075 * var(--vh, 1vh))); left: 50%; transform: translateX(-50%); width: min(calc(312 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(36.61971830985916 * var(--vh, 1vh))); height: min(calc(98 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(11.502347417840376 * var(--vh, 1vh))); z-index: 6;"><div class="absolute" style="left: 0px; top: 50%; transform: translateY(-50%); height: min(calc(98 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(11.502347417840376 * var(--vh, 1vh))); display: flex; align-items: center; justify-content: center;"><button type="button" class="touch-manipulation cursor-pointer border-0 bg-transparent p-0" aria-label="Menu" style="width: min(calc(48 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(5.633802816901409 * var(--vh, 1vh))); height: min(calc(47 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(5.516431924882629 * var(--vh, 1vh))); display: flex; align-items: center; justify-content: center;"><img src="https://www.lyrria.com/img/setting-icon.png" alt="Menu" class="pointer-events-none w-full h-full object-contain" draggable="false"></button></div><div class="fixed inset-0 z-30" aria-hidden="true" style="inset: 0px;"></div><div class="absolute z-40 flex flex-col rounded-lg" style="left: 0px; bottom: 100%; margin-bottom: min(calc(2 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(0.2347417840375587 * var(--vh, 1vh))); width: min(calc(126 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(14.788732394366196 * var(--vh, 1vh))); height: min(calc(166 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(19.483568075117372 * var(--vh, 1vh))); background-color: rgba(0, 0, 0, 0.4); padding: min(calc(8 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(0.9389671361502347 * var(--vh, 1vh))); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: min(calc(8 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(0.9389671361502347 * var(--vh, 1vh))); box-sizing: border-box;"><button type="button" class="touch-manipulation border-0 bg-transparent p-0 flex flex-col items-center justify-center gap-0" style="cursor: pointer; opacity: 1;"><div style="position: relative; width: min(calc(48 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(5.633802816901409 * var(--vh, 1vh))); height: min(calc(48 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(5.633802816901409 * var(--vh, 1vh))); border: medium; flex-shrink: 0;"><img src="https://www.lyrria.com/img/profile-icon.png" alt="" class="w-full h-full object-cover" draggable="false" style="width: min(calc(48 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(5.633802816901409 * var(--vh, 1vh))); height: min(calc(48 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(5.633802816901409 * var(--vh, 1vh))); border-radius: min(calc(20 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(2.3474178403755865 * var(--vh, 1vh)));"></div><span style="font-size: 12px; line-height: 16px; color: rgb(245, 243, 240); opacity: 1; margin-top: min(calc(4 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(0.4694835680751174 * var(--vh, 1vh)));">Profile</span></button><button type="button" class="touch-manipulation border-0 bg-transparent p-0 flex flex-col items-center justify-center gap-0" disabled="" style="cursor: default; opacity: 1;"><div style="position: relative; width: min(calc(48 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(5.633802816901409 * var(--vh, 1vh))); height: min(calc(48 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(5.633802816901409 * var(--vh, 1vh))); border: medium; flex-shrink: 0;"><img src="https://www.lyrria.com/img/shop-icon.png" alt="" class="w-full h-full object-cover" draggable="false" style="width: min(calc(48 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(5.633802816901409 * var(--vh, 1vh))); height: min(calc(48 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(5.633802816901409 * var(--vh, 1vh))); border-radius: min(calc(20 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(2.3474178403755865 * var(--vh, 1vh)));"><img src="https://www.lyrria.com/img/func-Lock.png" alt="" class="absolute pointer-events-none" draggable="false" style="width: min(calc(12 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(1.4084507042253522 * var(--vh, 1vh))); height: min(calc(12 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(1.4084507042253522 * var(--vh, 1vh))); top: 0px; right: 0px; z-index: 1;"></div><span style="font-size: 12px; line-height: 16px; color: rgb(245, 243, 240); opacity: 0.6; margin-top: min(calc(4 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(0.4694835680751174 * var(--vh, 1vh)));">Shop</span></button><button type="button" class="touch-manipulation border-0 bg-transparent p-0 flex flex-col items-center justify-center gap-0" disabled="" style="cursor: default; opacity: 1;"><div style="position: relative; width: min(calc(48 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(5.633802816901409 * var(--vh, 1vh))); height: min(calc(48 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(5.633802816901409 * var(--vh, 1vh))); border: medium; flex-shrink: 0;"><img src="https://www.lyrria.com/img/world-icon.png" alt="" class="w-full h-full object-cover" draggable="false" style="width: min(calc(48 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(5.633802816901409 * var(--vh, 1vh))); height: min(calc(48 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(5.633802816901409 * var(--vh, 1vh))); border-radius: min(calc(20 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(2.3474178403755865 * var(--vh, 1vh)));"><img src="https://www.lyrria.com/img/func-Lock.png" alt="" class="absolute pointer-events-none" draggable="false" style="width: min(calc(12 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(1.4084507042253522 * var(--vh, 1vh))); height: min(calc(12 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(1.4084507042253522 * var(--vh, 1vh))); top: 0px; right: 0px; z-index: 1;"></div><span style="font-size: 12px; line-height: 16px; color: rgb(245, 243, 240); opacity: 0.6; margin-top: min(calc(4 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(0.4694835680751174 * var(--vh, 1vh)));">World</span></button><button type="button" class="touch-manipulation border-0 bg-transparent p-0 flex flex-col items-center justify-center gap-0" disabled="" style="cursor: default; opacity: 1;"><div style="position: relative; width: min(calc(48 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(5.633802816901409 * var(--vh, 1vh))); height: min(calc(48 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(5.633802816901409 * var(--vh, 1vh))); border: medium; flex-shrink: 0;"><img src="https://www.lyrria.com/img/diary-icon.png" alt="" class="w-full h-full object-cover" draggable="false" style="width: min(calc(48 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(5.633802816901409 * var(--vh, 1vh))); height: min(calc(48 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(5.633802816901409 * var(--vh, 1vh))); border-radius: min(calc(20 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(2.3474178403755865 * var(--vh, 1vh)));"><img src="https://www.lyrria.com/img/func-Lock.png" alt="" class="absolute pointer-events-none" draggable="false" style="width: min(calc(12 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(1.4084507042253522 * var(--vh, 1vh))); height: min(calc(12 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(1.4084507042253522 * var(--vh, 1vh))); top: 0px; right: 0px; z-index: 1;"></div><span style="font-size: 12px; line-height: 16px; color: rgb(245, 243, 240); opacity: 0.6; margin-top: min(calc(4 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(0.4694835680751174 * var(--vh, 1vh)));">Journal</span></button></div><button type="button" class="absolute z-40 touch-manipulation border-0 bg-transparent p-0 cursor-pointer" style="bottom: calc(100% + min(calc(173 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(20.305164319248824 * var(--vh, 1vh)))); left: calc(-min(calc(20 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(2.3474178403755865 * var(--vh, 1vh)))); height: min(calc(75 * min(var(--vw, 1vw) * 100, 600PX) / 393), calc(8.80281690140845 * var(--vh, 1vh)));"><img src="https://www.lyrria.com/img/t7-en-union.png" alt="" draggable="false" style="width: 100%; height: 100%; object-fit: contain; display: block;"></button></div></div></div>
  


</body></html>