@charset "UTF-8";*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;font-family:楷体,STKaiti,华文楷体,serif;background-color:#f5f0e6;color:#3a3a3a;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;touch-action:manipulation}#app{width:100%;height:100%}.btn{display:inline-block;padding:12px 32px;font-size:18px;border:1px solid #8a7a6a;background:linear-gradient(180deg,#2c2c2c,#1a1a1a);color:#faf6ed;cursor:pointer;border-radius:2px;transition:all .3s ease;font-family:inherit;white-space:nowrap;letter-spacing:2px;box-shadow:0 2px 8px #00000026}.btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000040;background:linear-gradient(180deg,#3a3a3a,#2c2c2c)}.btn:active{transform:translateY(0)}@media (max-width: 768px){.btn{padding:10px 24px;font-size:16px;min-height:44px;min-width:44px}}.page-container{width:100%;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;overflow:hidden}.story-text{font-size:18px;line-height:2;text-align:justify;padding:20px 40px;max-width:800px;background:#faf6edf2;border:1px solid #c4b8a8;border-radius:2px;box-shadow:0 4px 20px #0000001a,inset 0 0 60px #00000005}@media (max-width: 768px){.story-text{font-size:16px;line-height:1.8;padding:15px 20px;max-width:95%}}.chapter-title{font-size:36px;color:#2c2c2c;text-align:center;margin-bottom:30px;font-weight:400;letter-spacing:8px}.chapter-title:before,.chapter-title:after{content:"◇";margin:0 20px;color:#8a7a6a;font-size:.6em;vertical-align:middle}@media (max-width: 768px){.chapter-title{font-size:24px;margin-bottom:20px;letter-spacing:4px}.chapter-title:before,.chapter-title:after{margin:0 10px}}.question-panel{background:#faf6edfa;border:1px solid #c4b8a8;border-radius:2px;padding:30px;max-width:700px;width:90%;box-shadow:0 8px 30px #0000001f,inset 0 0 80px #00000005}@media (max-width: 768px){.question-panel{padding:20px 15px;width:95%;max-width:100%}}.question-text{font-size:20px;color:#3a3a3a;margin-bottom:20px;line-height:1.8}@media (max-width: 768px){.question-text{font-size:18px;margin-bottom:15px;line-height:1.6}}.hint{font-size:14px;color:#666;background:#e8e0d080;padding:10px 15px;border-radius:2px;border-left:3px solid #8a7a6a;margin-top:15px}.next-btn{position:absolute;bottom:30px;right:40px;padding:15px 40px;font-size:20px}@media (max-width: 768px){.next-btn{bottom:15px;right:15px;padding:12px 24px;font-size:16px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .6s ease forwards}@keyframes slideInUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.slide-up{animation:slideInUp .5s ease forwards}.input-field{width:100%;padding:12px 15px;font-size:18px;border:1px solid #c4b8a8;border-radius:2px;font-family:inherit;background:#fffc;transition:all .3s;color:#3a3a3a}.input-field:focus{outline:none;border-color:#2c2c2c;box-shadow:0 0 0 2px #2c2c2c1a}.input-field::placeholder{color:#c4b8a8}@media (max-width: 768px){.input-field{padding:10px 12px;font-size:16px;-webkit-text-size-adjust:100%}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.feedback{padding:10px 20px;border-radius:2px;text-align:center;font-size:18px;margin-top:15px}.feedback.correct{background:#e8f5e9cc;color:#2e7d32;border:1px solid #a5d6a7}.feedback.wrong{background:#ffebeecc;color:#c62828;border:1px solid #ef9a9a;animation:shake .5s ease}.full-bg{position:absolute;top:0;left:50%;transform:translate(-50%);width:100%;height:auto;min-height:100%;object-fit:cover;z-index:0;pointer-events:none}