.lock-preview{--enter-delay:.3s;--ease-out:cubic-bezier(.16, 1, .3, 1);--spring:cubic-bezier(.34, 1.5, .64, 1);width:min(100%,430px);position:relative;container-type:inline-size}.lock-preview-art{position:relative}.lock-device{clip-path:inset(-12cqi -6cqi 0);width:74cqi;height:112cqi;margin-inline:auto;position:relative}.lock-frame{aspect-ratio:71.5/146.6;background:#0d0f0e;border-radius:11.5cqi;padding:2.3cqi;position:absolute;inset:0 0 auto;box-shadow:0 0 0 .55cqi #57534d,0 0 0 .8cqi #2a2926,0 0 0 .95cqi #9d978c66,0 4cqi 7cqi -2cqi #183e3240}.lock-frame:before,.lock-frame:after{content:"";background:linear-gradient(90deg,#3a3834,#6d6961);border-radius:.5cqi;width:.9cqi;position:absolute}.lock-frame:before{height:6cqi;top:22cqi;left:-1.6cqi;box-shadow:0 10cqi #4d4a45,0 21cqi #4d4a45}.lock-frame:after{height:15cqi;top:33cqi;right:-1.6cqi}.lock-screen{isolation:isolate;color:#183a2c;border-radius:9.4cqi;height:100%;position:relative;overflow:hidden}.lock-wallpaper{z-index:-1;transition:transform 1.6s var(--ease-out);position:absolute;inset:0}.lock-wallpaper-art{background-blend-mode:normal, multiply, multiply, normal;background:radial-gradient(110% 42% at 30% 6%,#fdf9e6 10%,#fdf9e600 70%),radial-gradient(70% 45% at 88% 64%,#3a7559 0%,#3a755900 72%),url(/branding/landing-ribbons.webp) 40% 60%/auto 105% no-repeat,linear-gradient(172deg,#f4f2df 0%,#c6d8c0 32%,#7ea993 62%,#9fc2a9 100%);animation:22s ease-in-out infinite alternate paused lock-drift;position:absolute;inset:-8%}.lock-wallpaper-art:after{content:"";mix-blend-mode:soft-light;background:url(/branding/landing-ribbons.webp) 40% 60%/auto 105% no-repeat;position:absolute;inset:0}.lock-preview[data-running=true] .lock-wallpaper-art{animation-play-state:running}.lock-island{background:#050605;border-radius:4cqi;width:21cqi;height:6.2cqi;position:absolute;top:2.2cqi;left:50%;translate:-50%}.lock-status{color:#183a2c;width:11cqi;height:auto;position:absolute;top:3.9cqi;right:5.2cqi}.lock-clock{top:14cqi;text-align:center;transition:opacity .7s .15s ease, transform 1s .15s var(--ease-out);position:absolute;inset-inline:0}.lock-clock p{margin:0}.lock-date{font-family:var(--font-manrope), var(--font-noto-thai), sans-serif;color:#1d3f31;font-size:3.7cqi;font-weight:600;line-height:1.4}.lock-time{font-family:var(--font-manrope), sans-serif;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:#173a2b;font-size:20cqi;font-weight:600;line-height:1.02}.lock-widget{-webkit-backdrop-filter:blur(10px)saturate(1.3);color:#fff;width:50cqi;height:15.5cqi;transition:opacity .7s .35s ease, transform 1s .35s var(--ease-out);background:#22503d47;border-radius:4.4cqi;align-items:center;padding-inline:3.6cqi;display:grid;position:absolute;top:44cqi;left:50%;translate:-50%;box-shadow:inset 0 0 0 .2cqi #ffffff2e}.lock-widget .lock-word{gap:2.6cqi}.lock-widget .lock-hanzi{text-shadow:0 .3cqi 1.2cqi #1b3d2f33;font-size:8.6cqi;font-weight:600}.lock-widget .lock-word[data-length="2"] .lock-hanzi{font-size:7cqi}.lock-widget .lock-pinyin{font-size:3.4cqi;font-weight:600}.lock-widget .lock-meaning{opacity:.86;font-size:3.2cqi}.lock-sleep{z-index:2;opacity:0;pointer-events:none;background:#050605;transition:opacity .8s cubic-bezier(.2,.7,.2,1);position:absolute;inset:0}.lock-callout{z-index:1;-webkit-backdrop-filter:blur(12px);width:90cqi;height:34cqi;transition:opacity .7s .55s ease, transform 1.1s .55s var(--spring);background:linear-gradient(165deg,#fdfcf3f5 0%,#f1f3e6eb 100%);border-radius:9cqi;align-items:center;margin:-3cqi auto 0;padding-inline:6cqi;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 0 0 .35cqi #ffffffb3,0 0 0 .3cqi #f4e3b0,0 0 5cqi .6cqi #f1d99a8c,0 3.5cqi 7cqi -2cqi #183e3238}.lock-callout .lock-word{justify-content:center;gap:6.5cqi}.lock-callout .lock-hanzi{color:#163628;font-size:21cqi;font-weight:600}.lock-callout .lock-word[data-length="2"] .lock-hanzi{font-size:15.5cqi}.lock-callout .lock-pinyin{color:#163628;font-size:7.4cqi;font-weight:600}.lock-callout .lock-meaning{color:#7b847e;font-size:6.8cqi}.lock-callout-sheen{z-index:1;pointer-events:none;animation:lock-sheen 1.3s .1s var(--ease-out);background:linear-gradient(100deg,#fff0 30%,#ffffffb8 50%,#fff0 70%);position:absolute;inset:0;translate:-110%}.lock-word{opacity:0;visibility:hidden;grid-area:1/1;align-items:center;min-width:0;display:flex}.lock-word[data-state=current],.lock-word[data-state=previous]{opacity:1;visibility:visible}.lock-hanzi{letter-spacing:-.02em;flex-shrink:0;font-family:PingFang SC,Hiragino Sans GB,Noto Sans SC,Microsoft YaHei,sans-serif;line-height:1;display:flex}.lock-hanzi>span{display:inline-block}.lock-reading{min-width:0;font-family:var(--font-manrope), var(--font-noto-thai), sans-serif;white-space:nowrap;flex-direction:column;line-height:1.32;display:flex}.lock-pinyin,.lock-meaning{display:block}.lock-meaning:lang(th){font-family:var(--font-noto-thai), sans-serif;line-height:1.5}.lock-word[data-state=current] :is(.lock-hanzi>span,.lock-pinyin,.lock-meaning){animation-name:lock-rise;animation-duration:.9s;animation-timing-function:var(--ease-out);animation-fill-mode:both}.lock-word[data-state=current] .lock-hanzi>span{animation-delay:calc(var(--enter-delay) + var(--i) * 80ms)}.lock-word[data-state=current] .lock-pinyin{animation-delay:calc(var(--enter-delay) + .14s)}.lock-word[data-state=current] .lock-meaning{animation-delay:calc(var(--enter-delay) + .22s)}.lock-word[data-state=previous]{animation:.38s cubic-bezier(.5,0,.75,0) both lock-leave}.lock-preview[data-first] .lock-widget{--enter-delay:.45s}.lock-preview[data-first] .lock-callout{--enter-delay:.8s}.lock-preview[data-first] .lock-callout-sheen{animation-delay:1s}.lock-preview[data-awake=false] :is(.lock-sleep,.lock-wallpaper,.lock-clock,.lock-widget,.lock-callout){transition:none}.lock-preview[data-awake=false] .lock-sleep{opacity:1}.lock-preview[data-awake=false] .lock-wallpaper{transform:scale(1.12)}.lock-preview[data-awake=false] :is(.lock-clock,.lock-widget){opacity:0;transform:translateY(2.5cqi)scale(.96)}.lock-preview[data-awake=false] .lock-callout{opacity:0;transform:translateY(9cqi)scale(.92)}.lock-motion-toggle{width:44px;height:44px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:50%;place-items:center;transition:background-color .16s,color .16s;display:grid;position:absolute;top:0;right:0}.lock-motion-toggle:hover{color:var(--ink);background:#d7e1cf}.lock-motion-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@keyframes lock-rise{0%{opacity:0;filter:blur(5px);transform:translateY(32%)}to{opacity:1;filter:blur();transform:none}}@keyframes lock-leave{to{opacity:0;filter:blur(5px);transform:translateY(-14%)}}@keyframes lock-sheen{0%{translate:-110%}to{translate:110%}}@keyframes lock-drift{0%{transform:translate(-3%,-1.5%)scale(1.02)}to{transform:translate(3%,1.5%)scale(1.08)}}@media (prefers-reduced-motion:reduce){.lock-wallpaper-art,.lock-callout-sheen{animation:none}@keyframes lock-rise{0%{opacity:0}to{opacity:1}}@keyframes lock-leave{to{opacity:0}}}