fix(练习): 优化移动端布局和样式

- 调整底部固定区域布局，输入框和辅助信息分层显示
- 压缩矩阵格子间距和内边距，适配小屏幕
- 辅助信息区域限高并可滚动，只显示前2个裁剪因素
- 减小字体大小和组件尺寸，提升移动端体验
- 修复表头吸顶位置偏移

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>

src/pages/ProcessPracticePage.tsx

@@ -297,38 +297,46 @@ export default function ProcessPracticePage() {
         </div>
       </div>
 
-      {/* 矩阵区域 */}
-      <div className="max-w-7xl mx-auto py-8">
-        <PracticeMatrix
-          cellSequence={cellSequence}
-          answeredCells={answeredCells}
-          currentCellId={currentCellId}
-          showAnswerForCell={showAnswerForCell}
-          onLongPress={handleLongPress}
-          onLongPressEnd={handleLongPressEnd}
-          onCellClick={handleCellClick}
-          getCellTabIndex={getCellTabIndex}
-        />
+      {/* 主内容区域 */}
+      <div className="pb-80">
+        {/* 矩阵区域 */}
+        <div className="max-w-7xl mx-auto py-4">
+          <PracticeMatrix
+            cellSequence={cellSequence}
+            answeredCells={answeredCells}
+            currentCellId={currentCellId}
+            showAnswerForCell={showAnswerForCell}
+            onLongPress={handleLongPress}
+            onLongPressEnd={handleLongPressEnd}
+            onCellClick={handleCellClick}
+            getCellTabIndex={getCellTabIndex}
+          />
+        </div>
       </div>
 
-      {/* 输入区域（固定在屏幕中下部） */}
-      <div className="fixed bottom-32 left-0 right-0 z-10">
-        <InputArea
-          userInput={userInput}
-          charStatuses={charStatuses}
-          isComposing={isComposing}
-          inputLocked={inputLocked}
-          lastErrorTimestamp={lastErrorTimestamp}
-          onInputChange={handleInputChange}
-          onCompositionStart={handleCompositionStart}
-          onCompositionEnd={handleCompositionEnd}
-          onPaste={handlePaste}
-        />
-      </div>
+      {/* 底部固定区域 */}
+      <div className="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 z-10">
+        <div className="max-w-7xl mx-auto">
+          {/* 输入区域 */}
+          <div className="py-4 border-b border-gray-200 dark:border-gray-700">
+            <InputArea
+              userInput={userInput}
+              charStatuses={charStatuses}
+              isComposing={isComposing}
+              inputLocked={inputLocked}
+              lastErrorTimestamp={lastErrorTimestamp}
+              onInputChange={handleInputChange}
+              onCompositionStart={handleCompositionStart}
+              onCompositionEnd={handleCompositionEnd}
+              onPaste={handlePaste}
+            />
+          </div>
 
-      {/* 辅助信息区域（固定在底部） */}
-      <div className="fixed bottom-0 left-0 right-0 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 py-4 z-10">
-        <HintInfo currentCell={currentCell} />
+          {/* 辅助信息区域 */}
+          <div className="py-3 px-4 max-h-32 overflow-y-auto">
+            <HintInfo currentCell={currentCell} />
+          </div>
+        </div>
       </div>
 
       {/* 无障碍通告区域 */}