html{touch-action:manipulation;-webkit-tap-highlight-color:transparent}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none}button:active{transform:scale(.98)}.no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@keyframes pulse-ring{0%{transform:scale(1);opacity:1}to{transform:scale(1.5);opacity:0}}.recording-pulse:before{content:"";position:absolute;inset:0;border-radius:50%;background:#f9731666;animation:pulse-ring 1.5s ease-out infinite}@keyframes volume-bounce{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}.volume-bar{animation:volume-bounce .5s ease-in-out infinite}.gradient-text{background:linear-gradient(135deg,#f97316,#ea580c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.card-shadow{box-shadow:0 4px 20px #00000014}.waveform-container{display:flex;align-items:center;justify-content:center;gap:3px;height:60px}.waveform-bar{width:4px;background:linear-gradient(to top,#f97316,#fb923c);border-radius:2px;transition:height .1s ease}input:focus,textarea:focus{outline:none;box-shadow:0 0 0 3px #f973161a}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#9ca3af}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.animate-bounce{animation:bounce 1s ease-in-out infinite}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .3s ease-out forwards}.wechat-tip{display:none}@media (hover: none) and (pointer: coarse){.wechat-tip{display:block}}@supports (padding-bottom: env(safe-area-inset-bottom)){.safe-area-bottom{padding-bottom:env(safe-area-inset-bottom)}}@media (max-width: 375px){html{font-size:14px}}@media (min-width: 414px){html{font-size:16px}}@tailwind base;@tailwind components;@tailwind utilities;@layer base{*{@apply box-border;}html{@apply antialiased;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth;font-family:"Source Han Serif SC","Noto Serif SC",PingFang SC,STSong,Songti SC,SimSun,NSimSun,serif}body{@apply m-0 p-0 min-h-screen;background-color:#f5f0e6;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E"),linear-gradient(135deg,#f5f0e6,#e8e0d0);background-attachment:fixed;font-family:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none;color:#3d2c1f}#root{@apply min-h-screen;}::selection{background-color:#b8545033;color:#b85450}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f5f0e6}::-webkit-scrollbar-thumb{background:#d4c4b0;border-radius:4px;border:2px solid #F5F0E6}::-webkit-scrollbar-thumb:hover{background:#b85450}}@layer components{.btn-primary{@apply relative px-8 py-4 rounded-full font-bold text-lg text-white transition-all duration-200 overflow-hidden;background:linear-gradient(180deg,#d4a574,#8b5a2b);box-shadow:0 4px #5c4033,0 6px 12px #00000040,inset 0 1px #ffffff4d;border:2px solid #6B4423;text-shadow:0 1px 2px rgba(0,0,0,.3)}.btn-primary:hover{background:linear-gradient(180deg,#d9aa79,#956135);transform:translateY(1px);box-shadow:0 3px #5c4033,0 4px 8px #00000040,inset 0 1px #ffffff4d}.btn-primary:active{transform:translateY(4px);box-shadow:0 0 #5c4033,inset 0 2px 4px #0000004d}.btn-primary:disabled{@apply cursor-not-allowed;background:linear-gradient(180deg,#d4c4b0,#b8a898);box-shadow:0 2px #9b9080,0 2px 4px #0000001a;border-color:#a09080;text-shadow:none;color:#fdf6e3}.btn-secondary{@apply px-6 py-3 rounded-xl font-medium transition-all;background:#fdf6e3;border:2px solid #C9B8A0;color:#5c4033;box-shadow:inset 0 1px #fffc}.btn-secondary:hover{background:#f5f0e6;border-color:#b85450;color:#b85450}.btn-secondary:active{background:#e8e0d0;transform:translateY(1px)}.card{@apply rounded-2xl p-6 relative overflow-hidden;background:#fdf6e3;border:1px solid #E8E0D0;box-shadow:0 2px 4px #0000000d,0 8px 24px #00000014,inset 0 1px #fffc}.input-field{@apply w-full px-4 py-3.5 rounded-lg outline-none transition-all text-base;background:#fdf6e3;border:2px solid #C9B8A0;color:#3d2c1f;box-shadow:inset 0 2px 4px #0000000d}.input-field::placeholder{color:#a09080;font-style:italic}.input-field:focus{border-color:#b85450;box-shadow:0 0 0 3px #b854501a,inset 0 2px 4px #0000000d}}@layer utilities{.text-gradient{@apply bg-clip-text text-transparent;background-image:linear-gradient(135deg,#b85450,#d4a574,#8b5a2b)}.shadow-vintage{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f,inset 0 1px #fff9}.shadow-vintage-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d,inset 0 1px #ffffff80}.shadow-inner-vintage{box-shadow:inset 0 2px 4px #0000000f}.safe-area-bottom{padding-bottom:env(safe-area-inset-bottom,0)}.safe-area-top{padding-top:env(safe-area-inset-top,0)}.font-serif-vintage{font-family:"Source Han Serif SC",PingFang SC,SimSun,serif}.font-handwriting{font-family:KaiTi,STKaiti,楷体,cursive}.text-vintage-red{color:#b85450}.text-vintage-brown{color:#3d2c1f}.text-vintage-warm{color:#8b5a2b}.text-vintage-muted{color:#a09080}.bg-paper{background-color:#fdf6e3}.bg-paper-dark{background-color:#f5f0e6}.bg-paper-darker{background-color:#e8e0d0}.border-vintage{border-color:#c9b8a0}.border-vintage-red{border-color:#b85450}.cursor-vintage{animation:blink 1s step-end infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(2deg)}}.animate-float{animation:float 3s ease-in-out infinite}}