\u590f\u81f3 \u00b7 \u663c\u957f\u591c\u77ed \u76db\u590f\u4f0a\u59cb<\/title>\n<meta name=\"description\" content=\"\u590f\u81f3\u2014\u2014\u4e8c\u5341\u56db\u8282\u6c14\u4e4b\u7b2c\u5341\u4e2a\uff0c\u592a\u9633\u76f4\u5c04\u5317\u56de\u5f52\u7ebf\uff0c\u767d\u663c\u6700\u957f\u7684\u4e00\u5929\u3002\u4e86\u89e3\u590f\u81f3\u4e09\u5019\u3001\u4f20\u7edf\u4e60\u4fd7\u3001\u6d88\u590f\u7f8e\u98df\u4e0e\u7ecf\u5178\u8bd7\u8bcd\u3002\">\n<meta name=\"keywords\" content=\"\u590f\u81f3, \u4e8c\u5341\u56db\u8282\u6c14, \u590f\u81f3\u4e09\u5019, \u590f\u81f3\u4e60\u4fd7, \u6d88\u590f\u7f8e\u98df, \u590f\u81f3\u8bd7\u8bcd, \u663c\u957f\u591c\u77ed\">\n<meta name=\"author\" content=\"Hermes Agent\">\n<meta property=\"og:title\" content=\"\u590f\u81f3 \u00b7 \u663c\u957f\u591c\u77ed \u76db\u590f\u4f0a\u59cb\">\n<meta property=\"og:description\" content=\"\u590f\u81f3\u2014\u2014\u592a\u9633\u76f4\u5c04\u5317\u56de\u5f52\u7ebf\uff0c\u767d\u663c\u6700\u957f\u7684\u4e00\u5929\u3002\u8749\u9e23\u8377\u5f00\uff0c\u76db\u590f\u4f0a\u59cb\u3002\">\n<meta property=\"og:type\" content=\"website\">\n<meta property=\"og:locale\" content=\"zh_CN\">\n<meta name=\"theme-color\" content=\"#0c0a3e\">\n<style>\n *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\n\n :root {\n --pink: #ec4899;\n --pink-dark: #db2777;\n --blue: #38bdf8;\n --blue-dark: #0ea5e9;\n --blue-night: #0c0a3e;\n --green-lotus: #22c55e;\n --gold: #facc15;\n --gold-dark: #ca8a04;\n --cream: #fdf2f8;\n --text: #1c1917;\n --text-light: #57534e;\n --text-on-dark: #e0e7ff;\n --bg: #0e0a3e;\n --card-bg: rgba(14,10,62,0.88);\n --card-border: rgba(236,72,153,0.15);\n --ease-out: cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n\n ::selection {\n background: rgba(236,72,153,0.3);\n color: #fff;\n }\n\n html { scroll-behavior: smooth; }\n\n body {\n font-family: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', Georgia, serif;\n color: var(--text);\n background: var(--bg);\n min-height: 100vh;\n overflow-x: hidden;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n }\n\n \/* ===== SKIP LINK ===== *\/\n .skip-link {\n position: absolute;\n top: -999px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 10001;\n background: var(--gold);\n color: #000;\n padding: 8px 20px;\n border-radius: 0 0 8px 8px;\n font-size: 0.9rem;\n font-weight: 600;\n text-decoration: none;\n }\n .skip-link:focus {\n top: 0;\n }\n\n \/* ===== SCROLL PROGRESS BAR ===== *\/\n #progress-bar {\n position: fixed;\n top: 0; left: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--pink), var(--blue), var(--gold));\n z-index: 10000;\n width: 0%;\n transition: width 0.1s linear;\n }\n\n \/* ===== PARTICLE BACKGROUND CANVAS ===== *\/\n #particle-canvas {\n position: fixed;\n top: 0; left: 0;\n width: 100vw;\n height: 100vh;\n z-index: 0;\n pointer-events: none;\n opacity: 0.35;\n }\n\n \/* ===== BACK TO TOP ===== *\/\n #back-to-top {\n position: fixed;\n bottom: 30px;\n right: 30px;\n width: 52px;\n height: 52px;\n min-width: 44px;\n min-height: 44px;\n border-radius: 50%;\n background: linear-gradient(135deg, var(--pink), var(--pink-dark));\n color: #fff;\n border: 2px solid var(--gold);\n font-size: 24px;\n cursor: pointer;\n z-index: 9999;\n opacity: 0;\n transform: translateY(20px) scale(0.8);\n transition: all 0.4s var(--ease-out);\n box-shadow: 0 4px 16px rgba(236,72,153,0.4);\n display: flex;\n align-items: center;\n justify-content: center;\n touch-action: manipulation;\n }\n #back-to-top.visible {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n #back-to-top:hover {\n transform: translateY(-3px) scale(1.1);\n box-shadow: 0 6px 24px rgba(236,72,153,0.6);\n }\n #back-to-top:focus-visible {\n outline: 3px solid var(--gold);\n outline-offset: 3px;\n }\n\n \/* ===== LAYOUT ===== *\/\n .wrapper {\n position: relative;\n z-index: 1;\n max-width: 1000px;\n margin: 0 auto;\n padding: 40px 20px 80px;\n }\n\n \/* ===== HERO ===== *\/\n .hero {\n text-align: center;\n padding: 100px 20px 80px;\n position: relative;\n min-height: 60vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n .hero-sun {\n width: 100px;\n height: 100px;\n margin-bottom: 20px;\n position: relative;\n }\n .hero-sun .sun-circle {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background: radial-gradient(circle, #fef08a, var(--gold), rgba(250,204,21,0.3));\n box-shadow: 0 0 60px rgba(250,204,21,0.4), 0 0 120px rgba(250,204,21,0.15);\n animation: sun-pulse 3s ease-in-out infinite;\n }\n @keyframes sun-pulse {\n 0%, 100% { transform: scale(1); box-shadow: 0 0 60px rgba(250,204,21,0.4); }\n 50% { transform: scale(1.05); box-shadow: 0 0 80px rgba(250,204,21,0.6); }\n }\n .hero-sun .sun-rays {\n position: absolute;\n top: 50%; left: 50%;\n width: 140px; height: 140px;\n margin: -70px 0 0 -70px;\n border-radius: 50%;\n border: 2px solid rgba(250,204,21,0.15);\n animation: rays-spin 12s linear infinite;\n pointer-events: none;\n }\n .hero-sun .sun-rays:nth-child(2) {\n width: 180px; height: 180px;\n margin: -90px 0 0 -90px;\n animation-duration: 18s;\n animation-direction: reverse;\n border-color: rgba(250,204,21,0.08);\n }\n @keyframes rays-spin {\n from { transform: translate(-50%, -50%) rotate(0deg); }\n to { transform: translate(-50%, -50%) rotate(360deg); }\n }\n\n .hero h1 {\n font-size: clamp(2.8rem, 9vw, 5rem);\n color: transparent;\n background: linear-gradient(135deg, var(--pink), var(--gold), var(--blue));\n background-clip: text;\n -webkit-background-clip: text;\n text-shadow: none;\n letter-spacing: 0.15em;\n line-height: 1.3;\n margin-bottom: 10px;\n }\n .hero .subtitle {\n font-size: clamp(1rem, 2.5vw, 1.3rem);\n color: var(--blue);\n margin-top: 12px;\n letter-spacing: 0.25em;\n text-shadow: 0 0 20px rgba(56,189,248,0.2);\n }\n .hero .date-badge {\n display: inline-block;\n margin-top: 22px;\n padding: 8px 32px;\n background: linear-gradient(135deg, rgba(236,72,153,0.15), rgba(56,189,248,0.1));\n border: 1px solid rgba(250,204,21,0.2);\n border-radius: 24px;\n color: var(--text-on-dark);\n font-size: 0.9rem;\n letter-spacing: 0.15em;\n backdrop-filter: blur(4px);\n }\n\n \/* Summer icons decoration *\/\n .summer-deco {\n display: flex;\n justify-content: center;\n gap: 14px;\n font-size: 28px;\n margin-bottom: 18px;\n animation: float-deco 4s ease-in-out infinite;\n }\n @keyframes float-deco {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-5px); }\n }\n\n \/* ===== SECTION ===== *\/\n section {\n margin: 60px 0;\n padding: 44px 40px;\n background: var(--card-bg);\n backdrop-filter: blur(12px);\n border-radius: 20px;\n border: 1px solid var(--card-border);\n box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(236,72,153,0.05) inset;\n transition: transform 0.3s ease;\n }\n section:hover { transform: translateY(-2px); }\n\n .section-title {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 1.6rem;\n color: var(--pink);\n margin-bottom: 28px;\n padding-bottom: 14px;\n border-bottom: 2px solid rgba(236,72,153,0.25);\n }\n .section-title .emoji { font-size: 1.5rem; }\n\n .section-desc {\n color: var(--text-on-dark);\n font-size: 0.95rem;\n line-height: 1.8;\n margin-bottom: 24px;\n opacity: 0.85;\n }\n\n \/* ===== MEANING GRID (4 cards) ===== *\/\n .meaning-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));\n gap: 20px;\n margin-top: 10px;\n }\n .meaning-card {\n padding: 28px 20px;\n background: linear-gradient(135deg, rgba(236,72,153,0.08), rgba(14,10,62,0.4));\n border-radius: 14px;\n border: 1px solid rgba(236,72,153,0.15);\n text-align: center;\n transition: all 0.3s ease;\n }\n .meaning-card:hover {\n border-color: var(--blue);\n transform: translateY(-4px);\n box-shadow: 0 8px 24px rgba(56,189,248,0.15);\n }\n .meaning-card .icon { font-size: 36px; display: block; margin-bottom: 10px; }\n .meaning-card .label {\n font-size: 0.8rem;\n color: var(--pink);\n letter-spacing: 0.1em;\n margin-bottom: 6px;\n text-transform: uppercase;\n }\n .meaning-card .value {\n font-size: 1.1rem;\n color: var(--text-on-dark);\n font-weight: 600;\n line-height: 1.5;\n }\n\n \/* ===== \u4e09\u5019 TIMELINE ===== *\/\n .hou-timeline {\n display: flex;\n justify-content: center;\n gap: 0;\n margin-top: 16px;\n }\n .hou-step {\n flex: 1;\n text-align: center;\n position: relative;\n padding: 28px 12px;\n }\n .hou-step:not(:last-child)::after {\n content: '\u2192';\n position: absolute;\n right: -12px;\n top: 50%; transform: translateY(-50%);\n font-size: 1.5rem;\n color: var(--pink);\n opacity: 0.5;\n }\n .hou-step .day {\n display: inline-flex;\n align-items: center; justify-content: center;\n width: 48px; height: 48px;\n border-radius: 50%;\n background: linear-gradient(135deg, var(--pink), var(--pink-dark));\n color: #fff;\n font-size: 0.95rem;\n font-weight: 700;\n margin: 0 auto 12px;\n }\n .hou-step .phenomenon { font-size: 1.4rem; display: block; margin-bottom: 6px; }\n .hou-step .desc { font-size: 0.85rem; color: var(--text-on-dark); opacity: 0.7; }\n\n \/* ===== CUSTOMS GRID (6 cards) ===== *\/\n .customs-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: 16px;\n margin-top: 10px;\n }\n .custom-card {\n padding: 28px 14px 22px;\n text-align: center;\n background: linear-gradient(135deg, rgba(56,189,248,0.06), rgba(14,10,62,0.3));\n border-radius: 16px;\n border: 1px solid rgba(56,189,248,0.1);\n transition: all 0.3s ease;\n min-height: 150px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n .custom-card:hover {\n background: linear-gradient(135deg, rgba(56,189,248,0.14), rgba(236,72,153,0.06));\n border-color: var(--pink);\n transform: translateY(-6px);\n box-shadow: 0 12px 28px rgba(56,189,248,0.15);\n }\n .custom-card .icon { font-size: 36px; display: block; margin-bottom: 8px; }\n .custom-card .name {\n font-size: 0.95rem;\n color: var(--text-on-dark);\n font-weight: 600;\n margin-bottom: 4px;\n }\n .custom-card .brief {\n font-size: 0.72rem;\n color: var(--text-on-dark);\n margin-top: 4px;\n line-height: 1.5;\n opacity: 0.65;\n }\n\n \/* ===== FOOD GRID (6 cards) ===== *\/\n .food-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));\n gap: 18px;\n margin-top: 10px;\n }\n .food-card {\n padding: 26px 14px 20px;\n text-align: center;\n border-radius: 50% 50% 40% 40% \/ 60% 60% 30% 30%;\n background: linear-gradient(180deg, rgba(236,72,153,0.08), rgba(14,10,62,0.3));\n border: 1px solid rgba(236,72,153,0.08);\n transition: all 0.3s ease;\n min-height: 160px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n .food-card:hover {\n background: linear-gradient(180deg, rgba(236,72,153,0.2), rgba(56,189,248,0.06));\n border-color: rgba(250,204,21,0.2);\n transform: translateY(-5px) scale(1.03);\n box-shadow: 0 12px 28px rgba(236,72,153,0.12);\n }\n .food-card .icon { font-size: 38px; display: block; margin-bottom: 8px; }\n .food-card .name { font-size: 1rem; color: var(--text-on-dark); font-weight: 600; }\n .food-card .note {\n font-size: 0.7rem;\n color: var(--gold-dark);\n margin-top: 6px;\n line-height: 1.4;\n }\n\n \/* ===== TILT CARD EFFECTS ===== *\/\n .tilt-card {\n perspective: 1000px;\n transition: transform 0.4s var(--ease-out);\n position: relative;\n overflow: hidden;\n cursor: default;\n }\n .tilt-card::after {\n content: '';\n position: absolute;\n top: -100%;\n left: -100%;\n width: 300%;\n height: 300%;\n background: linear-gradient(\n 135deg,\n transparent 30%,\n rgba(255,255,255,0.06) 45%,\n rgba(255,255,255,0.1) 50%,\n rgba(255,255,255,0.06) 55%,\n transparent 70%\n );\n transform: translateX(-100%) translateY(-100%) rotate(45deg);\n transition: transform 0.8s ease;\n pointer-events: none;\n }\n .tilt-card:hover::after {\n transform: translateX(100%) translateY(100%) rotate(45deg);\n }\n .tilt-card:hover .card-icon {\n transform: scale(1.25) rotate(-5deg);\n }\n .card-icon {\n display: block;\n transition: transform 0.4s var(--ease-out);\n }\n\n \/* ===== POEM BOX ===== *\/\n .poem-box {\n margin-top: 24px;\n padding: 32px 28px;\n background: linear-gradient(135deg, rgba(56,189,248,0.05), rgba(14,10,62,0.4));\n border-radius: 16px;\n border: 1px solid rgba(56,189,248,0.1);\n text-align: center;\n position: relative;\n }\n .poem-box::before {\n content: '\\201C';\n position: absolute;\n top: 10px; left: 20px;\n font-size: 60px;\n color: var(--pink);\n opacity: 0.12;\n line-height: 1;\n font-family: Georgia, serif;\n }\n .poem-box .poem-title {\n font-size: 1.15rem;\n color: var(--gold);\n font-weight: 600;\n margin-bottom: 4px;\n }\n .poem-box .poem-author {\n font-size: 0.8rem;\n color: var(--pink);\n margin-bottom: 16px;\n }\n .poem-box .poem-text {\n font-size: 1.1rem;\n line-height: 2.2;\n color: var(--text-on-dark);\n white-space: pre-line;\n letter-spacing: 0.05em;\n }\n\n \/* ===== PROVERB LIST ===== *\/\n .proverb-list { margin-top: 10px; }\n .proverb-item {\n padding: 14px 20px;\n border-left: 3px solid var(--pink);\n margin-bottom: 12px;\n background: rgba(236,72,153,0.04);\n border-radius: 0 10px 10px 0;\n }\n .proverb-item .line { font-size: 1rem; color: var(--text-on-dark); }\n .proverb-item .meaning {\n font-size: 0.8rem;\n color: rgba(224,231,255,0.6);\n margin-top: 4px;\n }\n\n \/* ===== CTA FOOTER ===== *\/\n .cta-footer {\n text-align: center;\n margin-top: 60px;\n padding: 50px 30px 40px;\n background: linear-gradient(135deg, rgba(236,72,153,0.08), rgba(56,189,248,0.05));\n border-radius: 24px;\n border: 1px solid rgba(250,204,21,0.1);\n position: relative;\n }\n .cta-footer h2 {\n font-size: clamp(2rem, 5vw, 3.2rem);\n background: linear-gradient(135deg, var(--pink), var(--gold), var(--blue));\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n letter-spacing: 0.2em;\n margin-bottom: 12px;\n }\n .cta-footer p {\n color: var(--text-on-dark);\n opacity: 0.7;\n font-size: 0.9rem;\n margin-bottom: 24px;\n }\n .cta-btn {\n display: inline-block;\n padding: 14px 44px;\n background: linear-gradient(135deg, var(--pink), var(--pink-dark));\n color: #fff;\n font-size: 1.1rem;\n font-weight: 600;\n border: none;\n border-radius: 50px;\n cursor: pointer;\n text-decoration: none;\n letter-spacing: 0.1em;\n box-shadow: 0 4px 20px rgba(236,72,153,0.4);\n transition: all 0.3s ease;\n min-width: 44px;\n min-height: 44px;\n touch-action: manipulation;\n animation: pulse-btn 2s ease-in-out infinite;\n }\n .cta-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 8px 32px rgba(236,72,153,0.5);\n animation: none;\n }\n .cta-btn:focus-visible {\n outline: 3px solid var(--gold);\n outline-offset: 3px;\n }\n\n @keyframes pulse-btn {\n 0%, 100% { box-shadow: 0 4px 20px rgba(236,72,153,0.4); }\n 50% { box-shadow: 0 4px 36px rgba(236,72,153,0.65); }\n }\n\n .footer-note {\n text-align: center;\n margin-top: 30px;\n padding: 20px 0;\n color: rgba(224,231,255,0.2);\n font-size: 0.75rem;\n letter-spacing: 0.05em;\n }\n .footer-note::before {\n content: '';\n display: block;\n width: 60%;\n margin: 0 auto 16px;\n height: 1px;\n background: linear-gradient(90deg, transparent, rgba(236,72,153,0.15), transparent);\n }\n\n \/* ===== LOTUS FLOWER SVG ===== *\/\n .lotus-row {\n display: flex;\n justify-content: center;\n gap: 24px;\n margin-bottom: 20px;\n font-size: 32px;\n animation: float-lotus 5s ease-in-out infinite;\n }\n @keyframes float-lotus {\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 25% { transform: translateY(-4px) rotate(1deg); }\n 75% { transform: translateY(-2px) rotate(-1deg); }\n }\n\n \/* ===== RESPONSIVE ===== *\/\n @media (max-width: 1024px) {\n .wrapper { padding: 30px 16px 60px; }\n section { padding: 36px 28px; }\n }\n\n @media (max-width: 768px) {\n .wrapper { padding: 20px 14px 50px; }\n section { padding: 28px 20px; margin: 40px 0; }\n .hero { padding: 70px 16px 60px; min-height: auto; }\n .section-title { font-size: 1.35rem; }\n .meaning-grid { grid-template-columns: repeat(2, 1fr); }\n .customs-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }\n .food-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }\n .hou-timeline { flex-direction: column; gap: 0; }\n .hou-step:not(:last-child)::after {\n content: '\u2193';\n right: auto;\n bottom: -4px;\n top: auto;\n left: 50%; transform: translateX(-50%);\n }\n #back-to-top { bottom: 18px; right: 18px; width: 48px; height: 48px; font-size: 20px; }\n }\n\n @media (max-width: 480px) {\n .wrapper { padding: 14px 10px 40px; }\n section { padding: 22px 16px; margin: 30px 0; border-radius: 14px; }\n .hero { padding: 50px 12px 40px; }\n .section-title { font-size: 1.15rem; margin-bottom: 20px; }\n .meaning-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }\n .customs-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }\n .food-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }\n .hero-sun { width: 70px; height: 70px; }\n .origin-card { padding: 20px 14px; }\n .custom-card { padding: 22px 10px 18px; min-height: 130px; }\n .food-card { padding: 20px 10px 16px; min-height: 140px; }\n .poem-box { padding: 24px 18px; }\n .poem-box .poem-text { font-size: 1rem; }\n .cta-footer { padding: 36px 18px 30px; }\n .cta-btn { padding: 12px 30px; font-size: 1rem; }\n #back-to-top { bottom: 14px; right: 14px; width: 44px; height: 44px; font-size: 18px; }\n }\n\n @media (max-width: 360px) {\n .meaning-grid { grid-template-columns: 1fr 1fr; gap: 8px; }\n .customs-grid { grid-template-columns: 1fr 1fr; gap: 8px; }\n .food-grid { grid-template-columns: 1fr 1fr; gap: 8px; }\n .meaning-card .value { font-size: 0.95rem; }\n .custom-card .icon { font-size: 28px; }\n .food-card .icon { font-size: 30px; }\n section { padding: 18px 12px; }\n }\n\n @media (orientation: landscape) and (max-height: 500px) {\n .hero { padding: 40px 16px 30px; min-height: auto; }\n .hero h1 { font-size: 2.2rem; }\n }\n\n @media print {\n #progress-bar, #back-to-top, #particle-canvas { display: none; }\n body { background: #fff; color: #000; }\n section { background: #fdf2f8; border: 1px solid #ccc; break-inside: avoid; page-break-inside: avoid; }\n .hero h1 { -webkit-text-fill-color: #ec4899; color: #ec4899; }\n .section-title { color: #db2777; border-bottom-color: #db2777; }\n .meaning-card .value, .custom-card .name, .food-card .name, .poem-box .poem-text { color: #333; }\n .custom-card .brief { color: #555; }\n .wrapper { max-width: 100%; }\n .cta-footer { background: #fdf2f8; }\n .cta-btn { animation: none; }\n }\n\n @media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n html { scroll-behavior: auto; }\n }\n :focus-visible {\n outline: 3px solid var(--gold);\n outline-offset: 3px;\n }\n [role=\"button\"]:focus-visible,\n button:focus-visible,\n a:focus-visible {\n outline: 3px solid var(--gold);\n outline-offset: 3px;\n }\n .sr-only {\n position: absolute;\n width: 1px; height: 1px;\n padding: 0; margin: -1px;\n overflow: hidden;\n clip: rect(0,0,0,0);\n border: 0;\n }\n<\/style>\n<\/head>\n<body>\n\n<a class=\"skip-link\" href=\"#meaning\">\u8df3\u8f6c\u5230\u6b63\u6587<\/a>\n\n\n<div id=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"\u9875\u9762\u9605\u8bfb\u8fdb\u5ea6\"><\/div>\n\n\n<button id=\"back-to-top\" aria-label=\"\u56de\u5230\u9876\u90e8\" title=\"\u56de\u5230\u9876\u90e8\">\u2b06<\/button>\n\n\n<canvas id=\"particle-canvas\" aria-hidden=\"true\"><\/canvas>\n\n<div class=\"wrapper\">\n\n \n <header class=\"hero\" id=\"hero\" aria-label=\"\u590f\u81f3\u9875\u9762\u5934\u90e8\">\n <div class=\"lotus-row\" aria-hidden=\"true\">\n <span>\ud83c\udf3a<\/span><span>\ud83e\udeb7<\/span><span>\ud83c\udf3b<\/span><span>\ud83e\udeb7<\/span><span>\ud83c\udf3a<\/span>\n <\/div>\n <div class=\"hero-sun\" aria-hidden=\"true\">\n <div class=\"sun-circle\"><\/div>\n <div class=\"sun-rays\"><\/div>\n <div class=\"sun-rays\"><\/div>\n <\/div>\n <h1>\u590f \u81f3<\/h1>\n <p class=\"subtitle\">\u2600\ufe0f \u663c\u957f\u591c\u77ed \u00b7 \u76db\u590f\u4f0a\u59cb<\/p>\n <span class=\"date-badge\" role=\"text\">\ud83d\udcc5 6\u670821\u65e5 \u00b7 \u4e8c\u5341\u56db\u8282\u6c14\u00b7\u7b2c10\u4e2a<\/span>\n <\/header>\n\n \n <section id=\"meaning\" aria-labelledby=\"meaning-title\">\n <h2 id=\"meaning-title\" class=\"section-title\"><span class=\"emoji\" aria-hidden=\"true\">\u2600\ufe0f<\/span> \u590f\u81f3\u542b\u4e49<\/h2>\n <p class=\"section-desc\">\u590f\u81f3\uff0c\u53e4\u65f6\u53c8\u79f0\"\u590f\u8282\"\"\u590f\u81f3\u8282\"\uff0c\u662f\u4e8c\u5341\u56db\u8282\u6c14\u4e4b\u7b2c\u5341\u4e2a\u8282\u6c14\u3002\u592a\u9633\u5230\u8fbe\u9ec4\u7ecf90\u00b0\uff0c\u76f4\u5c04\u5317\u56de\u5f52\u7ebf\uff0c\u5317\u534a\u7403\u767d\u663c\u8fbe\u5230\u6700\u957f\u3002\u6b64\u540e\u592a\u9633\u5357\u8fd4\uff0c\u767d\u663c\u6e10\u77ed\u2014\u2014\u6545\u6709\"\u5403\u8fc7\u590f\u81f3\u9762\uff0c\u4e00\u5929\u77ed\u4e00\u7ebf\"\u4e4b\u8bf4\u3002<\/p>\n <div class=\"meaning-grid\">\n <div class=\"meaning-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\u2600\ufe0f<\/span>\n <div class=\"label\">\u5929\u6587\u7279\u5f81<\/div>\n <div class=\"value\">\u592a\u9633\u76f4\u5c04\u5317\u56de\u5f52\u7ebf<br>\u767d\u663c\u6700\u957f<\/div>\n <\/div>\n <div class=\"meaning-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83d\udcc5<\/span>\n <div class=\"label\">\u8282\u6c14\u65f6\u95f4<\/div>\n <div class=\"value\">\u6bcf\u5e746\u670821-22\u65e5<br>2026\u5e746\u670821\u65e5<\/div>\n <\/div>\n <div class=\"meaning-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83c\udf27\ufe0f<\/span>\n <div class=\"label\">\u6c14\u5019\u7279\u5f81<\/div>\n <div class=\"value\">\u9ad8\u6e29\u591a\u96e8<br>\u6885\u96e8\u65f6\u8282<\/div>\n <\/div>\n <div class=\"meaning-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83c\udf3e<\/span>\n <div class=\"label\">\u519c\u4e8b\u6d3b\u52a8<\/div>\n <div class=\"value\">\u590f\u6536\u590f\u79cd<br>\u7530\u95f4\u7ba1\u7406<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"sanhou\" aria-labelledby=\"sanhou-title\">\n <h2 id=\"sanhou-title\" class=\"section-title\"><span class=\"emoji\" aria-hidden=\"true\">\ud83e\udd8c<\/span> \u590f\u81f3\u4e09\u5019<\/h2>\n <p class=\"section-desc\">\u53e4\u4eba\u5c06\u590f\u81f3\u5206\u4e3a\u4e09\u5019\uff0c\u4ee5\u81ea\u7136\u7269\u5019\u7684\u53d8\u5316\u63cf\u7ed8\u76db\u590f\u7684\u5230\u6765\u3002<\/p>\n <div class=\"hou-timeline\">\n <div class=\"hou-step tilt-card\" aria-label=\"\u521d\u5019\uff1a\u9e7f\u89d2\u89e3\">\n <div class=\"day\" aria-hidden=\"true\">\u521d\u5019<\/div>\n <span class=\"phenomenon\" aria-hidden=\"true\">\ud83e\udd8c \u9e7f\u89d2\u89e3<\/span>\n <p class=\"desc\">\u9633\u6027\u7684\u9e7f\u89d2<br>\u5f00\u59cb\u8131\u843d<\/p>\n <\/div>\n <div class=\"hou-step tilt-card\" aria-label=\"\u4e8c\u5019\uff1a\u8749\u59cb\u9e23\">\n <div class=\"day\" aria-hidden=\"true\">\u4e8c\u5019<\/div>\n <span class=\"phenomenon\" aria-hidden=\"true\">\ud83e\udd97 \u8749\u59cb\u9e23<\/span>\n <p class=\"desc\">\u77e5\u4e86\u9f13\u7ffc<br>\u9e23\u58f0\u5165\u590f<\/p>\n <\/div>\n <div class=\"hou-step tilt-card\" aria-label=\"\u4e09\u5019\uff1a\u534a\u590f\u751f\">\n <div class=\"day\" aria-hidden=\"true\">\u4e09\u5019<\/div>\n <span class=\"phenomenon\" aria-hidden=\"true\">\ud83c\udf3f \u534a\u590f\u751f<\/span>\n <p class=\"desc\">\u559c\u9634\u836f\u8349<br>\u534a\u590f\u840c\u53d1<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"customs\" aria-labelledby=\"customs-title\">\n <h2 id=\"customs-title\" class=\"section-title\"><span class=\"emoji\" aria-hidden=\"true\">\ud83c\udf90<\/span> \u590f\u81f3\u516d\u4fd7<\/h2>\n <p class=\"section-desc\">\u590f\u81f3\u81ea\u53e4\u4ee5\u6765\u5c31\u662f\u91cd\u8981\u7684\u8282\u65e5\uff0c\u6c11\u95f4\u6709\u4e30\u5bcc\u591a\u5f69\u7684\u4e60\u4fd7\u6d3b\u52a8\u3002<\/p>\n <div class=\"customs-grid\">\n <div class=\"custom-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83c\udf5c<\/span>\n <div class=\"name\">\u5403\u590f\u81f3\u9762<\/div>\n <p class=\"brief\">\u65b0\u9ea6\u5c1d\u65b0<br>\u6d88\u590f\u907f\u4f0f<\/p>\n <\/div>\n <div class=\"custom-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83e\udeb7<\/span>\n <div class=\"name\">\u8d4f\u8377\u82b1<\/div>\n <p class=\"brief\">\u516d\u6708\u8377\u82b1\u5f00<br>\u6ee1\u6c60\u6e05\u9999<\/p>\n <\/div>\n <div class=\"custom-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83d\udc1f<\/span>\n <div class=\"name\">\u796d\u7530\u516c<\/div>\n <p class=\"brief\">\u796d\u7940\u7948\u798f<br>\u7948\u6c42\u4e30\u6536<\/p>\n <\/div>\n <div class=\"custom-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83c\udf90<\/span>\n <div class=\"name\">\u6302\u590f\u5e03<\/div>\n <p class=\"brief\">\u6302\u82ce\u9ebb\u590f\u5e03<br>\u9a71\u6691\u7eb3\u51c9<\/p>\n <\/div>\n <div class=\"custom-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83c\udfd4\ufe0f<\/span>\n <div class=\"name\">\u907f\u6691\u7eb3\u51c9<\/div>\n <p class=\"brief\">\u5bfb\u5c71\u6797\u5e7d\u5904<br>\u6d88\u590f\u907f\u6691<\/p>\n <\/div>\n <div class=\"custom-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83c\udf19<\/span>\n <div class=\"name\">\u6d4b\u65e5\u5f71<\/div>\n <p class=\"brief\">\u7acb\u7aff\u6d4b\u5f71<br>\u4ee5\u5b9a\u8282\u6c14<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"foods\" aria-labelledby=\"foods-title\">\n <h2 id=\"foods-title\" class=\"section-title\"><span class=\"emoji\" aria-hidden=\"true\">\ud83c\udf49<\/span> \u6d88\u590f\u516d\u98df<\/h2>\n <p class=\"section-desc\">\u590f\u81f3\u65f6\u8282\uff0c\u5404\u5730\u6709\u72ec\u7279\u7684\u6d88\u590f\u996e\u98df\u4e60\u4fd7\uff0c\u6e05\u723d\u89e3\u6691\u3002<\/p>\n <div class=\"food-grid\">\n <div class=\"food-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83c\udf5c<\/span>\n <div class=\"name\">\u590f\u81f3\u9762<\/div>\n <p class=\"note\">\u65b0\u9ea6\u64c0\u9762<br>\u6d88\u590f\u5c1d\u65b0<\/p>\n <\/div>\n <div class=\"food-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83c\udf49<\/span>\n <div class=\"name\">\u897f\u74dc<\/div>\n <p class=\"note\">\u6d88\u6691\u89e3\u6e34<br>\u76db\u590f\u4e4b\u679c<\/p>\n <\/div>\n <div class=\"food-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83e\udd5f<\/span>\n <div class=\"name\">\u9984\u9968<\/div>\n <p class=\"note\">\u590f\u81f3\u5403\u9984\u9968<br>\u4e0d\u75b0\u590f<\/p>\n <\/div>\n <div class=\"food-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83e\udd64<\/span>\n <div class=\"name\">\u9178\u6885\u6c64<\/div>\n <p class=\"note\">\u751f\u6d25\u6b62\u6e34<br>\u6d88\u6691\u826f\u996e<\/p>\n <\/div>\n <div class=\"food-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83e\udd52<\/span>\n <div class=\"name\">\u82e6\u74dc<\/div>\n <p class=\"note\">\u6e05\u70ed\u53bb\u706b<br>\u590f\u81f3\u98df\u82e6<\/p>\n <\/div>\n <div class=\"food-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83c\udf75<\/span>\n <div class=\"name\">\u8377\u53f6\u8336<\/div>\n <p class=\"note\">\u6e05\u6691\u5229\u6e7f<br>\u8377\u53f6\u98d8\u9999<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"poem\" aria-labelledby=\"poem-title\">\n <h2 id=\"poem-title\" class=\"section-title\"><span class=\"emoji\" aria-hidden=\"true\">\ud83d\udcdc<\/span> \u519c\u8c1a\u4e0e\u8bd7<\/h2>\n\n <div class=\"proverb-list\">\n <div class=\"proverb-item\">\n <p class=\"line\" role=\"text\">\ud83c\udf3e \u590f\u81f3\u4e0d\u9504\u6839\uff0c\u8349\u7c7d\u6ee1\u5730\u6eda<\/p>\n <p class=\"meaning\">\u590f\u81f3\u65f6\u8282\u5fc5\u987b\u9504\u8349\uff0c\u5426\u5219\u6742\u8349\u75af\u957f\u6ee1\u5730<\/p>\n <\/div>\n <div class=\"proverb-item\">\n <p class=\"line\" role=\"text\">\ud83c\udf3e \u590f\u81f3\u4e1c\u5357\u98ce\uff0c\u5f53\u65e5\u96e8\u8499\u8499<\/p>\n <p class=\"meaning\">\u590f\u81f3\u522e\u4e1c\u5357\u98ce\uff0c\u9884\u793a\u7740\u5f53\u5929\u5c31\u8981\u4e0b\u96e8<\/p>\n <\/div>\n <div class=\"proverb-item\">\n <p class=\"line\" role=\"text\">\ud83c\udf3e \u590f\u81f3\u4e00\u573a\u96e8\uff0c\u4e00\u6ef4\u503c\u5343\u91d1<\/p>\n <p class=\"meaning\">\u590f\u81f3\u7684\u96e8\u6c34\u5bf9\u519c\u4f5c\u7269\u751f\u957f\u6781\u4e3a\u73cd\u8d35<\/p>\n <\/div>\n <div class=\"proverb-item\">\n <p class=\"line\" role=\"text\">\ud83c\udf3e \u590f\u81f3\u65e0\u96e8\u4e09\u4f0f\u70ed\uff0c\u590f\u81f3\u6709\u96e8\u4e5d\u51ac\u5bd2<\/p>\n <p class=\"meaning\">\u590f\u81f3\u7684\u5929\u6c14\u53ef\u4ee5\u9884\u793a\u540e\u7eed\u7684\u6c14\u5019<\/p>\n <\/div>\n <\/div>\n\n <div class=\"poem-box\">\n <div class=\"poem-title\">\u300a\u7af9\u679d\u8bcd\u300b<\/div>\n <div class=\"poem-author\">\u2014\u2014 \u5510 \u00b7 \u5218\u79b9\u9521<\/div>\n <div class=\"poem-text\" role=\"article\" aria-label=\"\u53e4\u8bd7\u300a\u7af9\u679d\u8bcd\u300b\u5168\u6587\">\n \u6768\u67f3\u9752\u9752\u6c5f\u6c34\u5e73\uff0c\u95fb\u90ce\u6c5f\u4e0a\u8e0f\u6b4c\u58f0\u3002<br>\n \u4e1c\u8fb9\u65e5\u51fa\u897f\u8fb9\u96e8\uff0c\u9053\u662f\u65e0\u6674\u5374\u6709\u6674\u3002\n <\/div>\n <\/div>\n <div class=\"poem-box\" style=\"margin-top:16px;\">\n <div class=\"poem-title\">\u300a\u590f\u81f3\u907f\u6691\u5317\u6c60\u300b<\/div>\n <div class=\"poem-author\">\u2014\u2014 \u5510 \u00b7 \u97e6\u5e94\u7269<\/div>\n <div class=\"poem-text\" role=\"article\" aria-label=\"\u53e4\u8bd7\u300a\u590f\u81f3\u907f\u6691\u5317\u6c60\u300b\u8282\u9009\">\n \u663c\u6677\u5df2\u4e91\u6781\uff0c\u5bb5\u6f0f\u81ea\u6b64\u957f\u3002<br>\n \u672a\u53ca\u65bd\u653f\u6559\uff0c\u6240\u5fe7\u53d8\u708e\u51c9\u3002\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"health\" aria-labelledby=\"health-title\">\n <h2 id=\"health-title\" class=\"section-title\"><span class=\"emoji\" aria-hidden=\"true\">\ud83d\udc9a<\/span> \u590f\u81f3\u517b\u751f<\/h2>\n <p class=\"section-desc\">\u590f\u81f3\u65f6\u8282\uff0c\u9633\u6c14\u65fa\u76db\uff0c\u517b\u751f\u91cd\u5728\"\u517b\u5fc3\"\u3002<\/p>\n <div class=\"meaning-grid\">\n <div class=\"meaning-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83d\ude34<\/span>\n <div class=\"label\">\u8d77\u5c45<\/div>\n <div class=\"value\">\u665a\u7761\u65e9\u8d77<br>\u5348\u95f4\u5c0f\u61a9<\/div>\n <\/div>\n <div class=\"meaning-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83e\udd57<\/span>\n <div class=\"label\">\u996e\u98df<\/div>\n <div class=\"value\">\u6e05\u6de1\u5c11\u6cb9<br>\u591a\u5403\u82e6\u5473<\/div>\n <\/div>\n <div class=\"meaning-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83e\uddd8<\/span>\n <div class=\"label\">\u60c5\u5fd7<\/div>\n <div class=\"value\">\u9759\u5fc3\u517b\u6c14<br>\u5fc3\u5e73\u6c14\u548c<\/div>\n <\/div>\n <div class=\"meaning-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83d\udca7<\/span>\n <div class=\"label\">\u9632\u6691<\/div>\n <div class=\"value\">\u8865\u5145\u6c34\u5206<br>\u9632\u6691\u964d\u6e29<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <footer class=\"cta-footer\" role=\"contentinfo\">\n <h2>\u2600\ufe0f \u590f\u81f3\u5b89\u5eb7<\/h2>\n <p>\u613f\u4f60\u5728\u8fd9\u4e2a\u76db\u590f\uff0c\u5fc3\u6709\u6e05\u51c9\uff0c\u5411\u9633\u800c\u751f\u3002<\/p>\n <button class=\"cta-btn\" onclick=\"window.scrollTo({top:0,behavior:'smooth'});return false;\" aria-label=\"\u56de\u5230\u9875\u9996\">\n \u590f\u81f3\u5b89\u5eb7 \ud83e\udeb7\n <\/button>\n <\/footer>\n\n <div class=\"footer-note\">\n \u4e8c\u5341\u56db\u8282\u6c14 \u00b7 \u7b2c\u5341\u4e2a \u00b7 \u592a\u9633\u5230\u8fbe\u9ec4\u7ecf90\u00b0<br>\n \u2600\ufe0f \u663c\u6700\u957f \u00b7 \ud83e\udeb7 \u8377\u82b1\u5f00 \u00b7 \ud83c\udf3f \u76db\u590f\u59cb\n <\/div>\n\n<\/div>\n\n<script>\n(() => {\n 'use strict';\n\n const progressBar = document.getElementById('progress-bar');\n const backBtn = document.getElementById('back-to-top');\n const canvas = document.getElementById('particle-canvas');\n const ctx = canvas.getContext('2d');\n\n \/\/ ===== SCROLL PROGRESS BAR =====\n const updateProgress = () => {\n const scrollTop = window.scrollY;\n const docHeight = document.documentElement.scrollHeight - window.innerHeight;\n const progress = docHeight > 0 ? Math.min(scrollTop \/ docHeight * 100, 100) : 0;\n progressBar.style.width = progress + '%';\n progressBar.setAttribute('aria-valuenow', Math.round(progress));\n };\n window.addEventListener('scroll', updateProgress, { passive: true });\n window.addEventListener('resize', updateProgress, { passive: true });\n updateProgress();\n\n \/\/ ===== BACK TO TOP =====\n const toggleBackBtn = () => {\n backBtn.classList.toggle('visible', window.scrollY > 300);\n };\n window.addEventListener('scroll', toggleBackBtn, { passive: true });\n toggleBackBtn();\n backBtn.addEventListener('click', () => {\n window.scrollTo({ top: 0, behavior: 'smooth' });\n });\n\n \/\/ ===== PARTICLE BACKGROUND (only when motion OK) =====\n const motionOk = !window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n let animId = null;\n\n if (motionOk && canvas && ctx) {\n let W, H;\n const particles = [];\n\n class Particle {\n constructor() { this.reset(); }\n\n reset() {\n this.x = Math.random() * W;\n this.y = Math.random() * H;\n this.size = 1 + Math.random() * 3;\n this.speedX = (Math.random() - 0.5) * 0.3;\n this.speedY = (Math.random() - 0.5) * 0.3;\n this.alpha = 0.2 + Math.random() * 0.5;\n this.hue = Math.random() > 0.5 ? 330 + Math.random() * 20 : 200 + Math.random() * 30;\n }\n\n update() {\n this.x += this.speedX;\n this.y += this.speedY;\n if (this.x < 0 || this.x > W) this.speedX *= -1;\n if (this.y < 0 || this.y > H) this.speedY *= -1;\n }\n\n draw() {\n ctx.beginPath();\n ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\n ctx.fillStyle = `hsla(${this.hue}, 70%, 70%, ${this.alpha})`;\n ctx.fill();\n }\n }\n\n const resize = () => {\n W = canvas.width = window.innerWidth;\n H = canvas.height = window.innerHeight;\n };\n\n const initParticles = () => {\n particles.length = 0;\n const count = Math.min(Math.floor(W * H \/ 12000), 60);\n for (let i = 0; i < count; i++) {\n particles.push(new Particle());\n }\n };\n\n const animate = () => {\n ctx.clearRect(0, 0, W, H);\n for (let i = 0; i < particles.length; i++) {\n for (let j = i + 1; j < particles.length; j++) {\n const dx = particles[i].x - particles[j].x;\n const dy = particles[i].y - particles[j].y;\n const dist = Math.sqrt(dx * dx + dy * dy);\n if (dist < 120) {\n ctx.beginPath();\n ctx.moveTo(particles[i].x, particles[i].y);\n ctx.lineTo(particles[j].x, particles[j].y);\n ctx.strokeStyle = `rgba(236, 72, 153, ${0.04 * (1 - dist \/ 120)})`;\n ctx.lineWidth = 0.5;\n ctx.stroke();\n }\n }\n }\n for (const p of particles) {\n p.update();\n p.draw();\n }\n animId = requestAnimationFrame(animate);\n };\n\n window.addEventListener('resize', () => { resize(); initParticles(); });\n resize();\n initParticles();\n animate();\n }\n\n \/\/ ===== 3D TILT EFFECT =====\n if (motionOk) {\n const tiltCards = document.querySelectorAll('.tilt-card');\n for (const card of tiltCards) {\n card.addEventListener('mousemove', (e) => {\n const rect = card.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n const cx = rect.width \/ 2;\n const cy = rect.height \/ 2;\n const rx = ((y - cy) \/ cy) * -8;\n const ry = ((x - cx) \/ cx) * 8;\n card.style.transform = `perspective(800px) rotateX(${rx}deg) rotateY(${ry}deg) scale3d(1.02,1.02,1.02)`;\n });\n card.addEventListener('mouseleave', () => {\n card.style.transform = 'perspective(800px) rotateX(0) rotateY(0) scale3d(1,1,1)';\n });\n }\n }\n})();\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"\u590f\u81f3 \u00b7 \u663c\u957f\u591c\u77ed \u76db\u590f\u4f0a\u59cb \u8df3\u8f6c\u5230\u6b63\u6587 \u2b06 \ud83c\udf3a\ud83e\udeb7\ud83c\udf3b\ud83e\udeb7\ud83c\udf3a \u590f \u81f3 \u2600\ufe0f \u663c\u957f\u591c\u77ed \u00b7 \u76db\u590f\u4f0a\u59cb \ud83d\udcc5 6\u670821\u65e5 […]","protected":false},"author":1,"featured_media":2217,"comment_status":"closed","ping_status":"open","sticky":false,"template":"wp-custom-template-2","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-2025","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-10"],"_links":{"self":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/2025","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/comments?post=2025"}],"version-history":[{"count":2,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/2025\/revisions"}],"predecessor-version":[{"id":2218,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/2025\/revisions\/2218"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/media\/2217"}],"wp:attachment":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/media?parent=2025"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/categories?post=2025"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/tags?post=2025"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2025,"date":"2026-06-21T00:01:00","date_gmt":"2026-06-20T16:01:00","guid":{"rendered":"https:\/\/www.365ycs.com\/?p=2025"},"modified":"2026-06-21T01:25:04","modified_gmt":"2026-06-20T17:25:04","slug":"%e5%a4%8f%e8%87%b3-%c2%b7-%e6%98%bc%e9%95%bf%e5%a4%9c%e7%9f%ad-%e7%9b%9b%e5%a4%8f%e4%bc%8a%e5%a7%8b-3","status":"publish","type":"post","link":"https:\/\/www.365ycs.com\/index.php\/2026\/06\/21\/%e5%a4%8f%e8%87%b3-%c2%b7-%e6%98%bc%e9%95%bf%e5%a4%9c%e7%9f%ad-%e7%9b%9b%e5%a4%8f%e4%bc%8a%e5%a7%8b-3\/","title":{"rendered":"\u590f\u81f3 \u00b7 \u663c\u957f\u591c\u77ed \u76db\u590f\u4f0a\u59cb"},"content":{"rendered":"\n\n\n\n\n\n\u590f\u81f3 \u00b7 \u663c\u957f\u591c\u77ed \u76db\u590f\u4f0a\u59cb<\/title>\n<meta name=\"description\" content=\"\u590f\u81f3\u2014\u2014\u4e8c\u5341\u56db\u8282\u6c14\u4e4b\u7b2c\u5341\u4e2a\uff0c\u592a\u9633\u76f4\u5c04\u5317\u56de\u5f52\u7ebf\uff0c\u767d\u663c\u6700\u957f\u7684\u4e00\u5929\u3002\u4e86\u89e3\u590f\u81f3\u4e09\u5019\u3001\u4f20\u7edf\u4e60\u4fd7\u3001\u6d88\u590f\u7f8e\u98df\u4e0e\u7ecf\u5178\u8bd7\u8bcd\u3002\">\n<meta name=\"keywords\" content=\"\u590f\u81f3, \u4e8c\u5341\u56db\u8282\u6c14, \u590f\u81f3\u4e09\u5019, \u590f\u81f3\u4e60\u4fd7, \u6d88\u590f\u7f8e\u98df, \u590f\u81f3\u8bd7\u8bcd, \u663c\u957f\u591c\u77ed\">\n<meta name=\"author\" content=\"Hermes Agent\">\n<meta property=\"og:title\" content=\"\u590f\u81f3 \u00b7 \u663c\u957f\u591c\u77ed \u76db\u590f\u4f0a\u59cb\">\n<meta property=\"og:description\" content=\"\u590f\u81f3\u2014\u2014\u592a\u9633\u76f4\u5c04\u5317\u56de\u5f52\u7ebf\uff0c\u767d\u663c\u6700\u957f\u7684\u4e00\u5929\u3002\u8749\u9e23\u8377\u5f00\uff0c\u76db\u590f\u4f0a\u59cb\u3002\">\n<meta property=\"og:type\" content=\"website\">\n<meta property=\"og:locale\" content=\"zh_CN\">\n<meta name=\"theme-color\" content=\"#0c0a3e\">\n<style>\n *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\n\n :root {\n --pink: #ec4899;\n --pink-dark: #db2777;\n --blue: #38bdf8;\n --blue-dark: #0ea5e9;\n --blue-night: #0c0a3e;\n --green-lotus: #22c55e;\n --gold: #facc15;\n --gold-dark: #ca8a04;\n --cream: #fdf2f8;\n --text: #1c1917;\n --text-light: #57534e;\n --text-on-dark: #e0e7ff;\n --bg: #0e0a3e;\n --card-bg: rgba(14,10,62,0.88);\n --card-border: rgba(236,72,153,0.15);\n --ease-out: cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n\n ::selection {\n background: rgba(236,72,153,0.3);\n color: #fff;\n }\n\n html { scroll-behavior: smooth; }\n\n body {\n font-family: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', Georgia, serif;\n color: var(--text);\n background: var(--bg);\n min-height: 100vh;\n overflow-x: hidden;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n }\n\n \/* ===== SKIP LINK ===== *\/\n .skip-link {\n position: absolute;\n top: -999px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 10001;\n background: var(--gold);\n color: #000;\n padding: 8px 20px;\n border-radius: 0 0 8px 8px;\n font-size: 0.9rem;\n font-weight: 600;\n text-decoration: none;\n }\n .skip-link:focus {\n top: 0;\n }\n\n \/* ===== SCROLL PROGRESS BAR ===== *\/\n #progress-bar {\n position: fixed;\n top: 0; left: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--pink), var(--blue), var(--gold));\n z-index: 10000;\n width: 0%;\n transition: width 0.1s linear;\n }\n\n \/* ===== PARTICLE BACKGROUND CANVAS ===== *\/\n #particle-canvas {\n position: fixed;\n top: 0; left: 0;\n width: 100vw;\n height: 100vh;\n z-index: 0;\n pointer-events: none;\n opacity: 0.35;\n }\n\n \/* ===== BACK TO TOP ===== *\/\n #back-to-top {\n position: fixed;\n bottom: 30px;\n right: 30px;\n width: 52px;\n height: 52px;\n min-width: 44px;\n min-height: 44px;\n border-radius: 50%;\n background: linear-gradient(135deg, var(--pink), var(--pink-dark));\n color: #fff;\n border: 2px solid var(--gold);\n font-size: 24px;\n cursor: pointer;\n z-index: 9999;\n opacity: 0;\n transform: translateY(20px) scale(0.8);\n transition: all 0.4s var(--ease-out);\n box-shadow: 0 4px 16px rgba(236,72,153,0.4);\n display: flex;\n align-items: center;\n justify-content: center;\n touch-action: manipulation;\n }\n #back-to-top.visible {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n #back-to-top:hover {\n transform: translateY(-3px) scale(1.1);\n box-shadow: 0 6px 24px rgba(236,72,153,0.6);\n }\n #back-to-top:focus-visible {\n outline: 3px solid var(--gold);\n outline-offset: 3px;\n }\n\n \/* ===== LAYOUT ===== *\/\n .wrapper {\n position: relative;\n z-index: 1;\n max-width: 1000px;\n margin: 0 auto;\n padding: 40px 20px 80px;\n }\n\n \/* ===== HERO ===== *\/\n .hero {\n text-align: center;\n padding: 100px 20px 80px;\n position: relative;\n min-height: 60vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n .hero-sun {\n width: 100px;\n height: 100px;\n margin-bottom: 20px;\n position: relative;\n }\n .hero-sun .sun-circle {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background: radial-gradient(circle, #fef08a, var(--gold), rgba(250,204,21,0.3));\n box-shadow: 0 0 60px rgba(250,204,21,0.4), 0 0 120px rgba(250,204,21,0.15);\n animation: sun-pulse 3s ease-in-out infinite;\n }\n @keyframes sun-pulse {\n 0%, 100% { transform: scale(1); box-shadow: 0 0 60px rgba(250,204,21,0.4); }\n 50% { transform: scale(1.05); box-shadow: 0 0 80px rgba(250,204,21,0.6); }\n }\n .hero-sun .sun-rays {\n position: absolute;\n top: 50%; left: 50%;\n width: 140px; height: 140px;\n margin: -70px 0 0 -70px;\n border-radius: 50%;\n border: 2px solid rgba(250,204,21,0.15);\n animation: rays-spin 12s linear infinite;\n pointer-events: none;\n }\n .hero-sun .sun-rays:nth-child(2) {\n width: 180px; height: 180px;\n margin: -90px 0 0 -90px;\n animation-duration: 18s;\n animation-direction: reverse;\n border-color: rgba(250,204,21,0.08);\n }\n @keyframes rays-spin {\n from { transform: translate(-50%, -50%) rotate(0deg); }\n to { transform: translate(-50%, -50%) rotate(360deg); }\n }\n\n .hero h1 {\n font-size: clamp(2.8rem, 9vw, 5rem);\n color: transparent;\n background: linear-gradient(135deg, var(--pink), var(--gold), var(--blue));\n background-clip: text;\n -webkit-background-clip: text;\n text-shadow: none;\n letter-spacing: 0.15em;\n line-height: 1.3;\n margin-bottom: 10px;\n }\n .hero .subtitle {\n font-size: clamp(1rem, 2.5vw, 1.3rem);\n color: var(--blue);\n margin-top: 12px;\n letter-spacing: 0.25em;\n text-shadow: 0 0 20px rgba(56,189,248,0.2);\n }\n .hero .date-badge {\n display: inline-block;\n margin-top: 22px;\n padding: 8px 32px;\n background: linear-gradient(135deg, rgba(236,72,153,0.15), rgba(56,189,248,0.1));\n border: 1px solid rgba(250,204,21,0.2);\n border-radius: 24px;\n color: var(--text-on-dark);\n font-size: 0.9rem;\n letter-spacing: 0.15em;\n backdrop-filter: blur(4px);\n }\n\n \/* Summer icons decoration *\/\n .summer-deco {\n display: flex;\n justify-content: center;\n gap: 14px;\n font-size: 28px;\n margin-bottom: 18px;\n animation: float-deco 4s ease-in-out infinite;\n }\n @keyframes float-deco {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-5px); }\n }\n\n \/* ===== SECTION ===== *\/\n section {\n margin: 60px 0;\n padding: 44px 40px;\n background: var(--card-bg);\n backdrop-filter: blur(12px);\n border-radius: 20px;\n border: 1px solid var(--card-border);\n box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(236,72,153,0.05) inset;\n transition: transform 0.3s ease;\n }\n section:hover { transform: translateY(-2px); }\n\n .section-title {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 1.6rem;\n color: var(--pink);\n margin-bottom: 28px;\n padding-bottom: 14px;\n border-bottom: 2px solid rgba(236,72,153,0.25);\n }\n .section-title .emoji { font-size: 1.5rem; }\n\n .section-desc {\n color: var(--text-on-dark);\n font-size: 0.95rem;\n line-height: 1.8;\n margin-bottom: 24px;\n opacity: 0.85;\n }\n\n \/* ===== MEANING GRID (4 cards) ===== *\/\n .meaning-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));\n gap: 20px;\n margin-top: 10px;\n }\n .meaning-card {\n padding: 28px 20px;\n background: linear-gradient(135deg, rgba(236,72,153,0.08), rgba(14,10,62,0.4));\n border-radius: 14px;\n border: 1px solid rgba(236,72,153,0.15);\n text-align: center;\n transition: all 0.3s ease;\n }\n .meaning-card:hover {\n border-color: var(--blue);\n transform: translateY(-4px);\n box-shadow: 0 8px 24px rgba(56,189,248,0.15);\n }\n .meaning-card .icon { font-size: 36px; display: block; margin-bottom: 10px; }\n .meaning-card .label {\n font-size: 0.8rem;\n color: var(--pink);\n letter-spacing: 0.1em;\n margin-bottom: 6px;\n text-transform: uppercase;\n }\n .meaning-card .value {\n font-size: 1.1rem;\n color: var(--text-on-dark);\n font-weight: 600;\n line-height: 1.5;\n }\n\n \/* ===== \u4e09\u5019 TIMELINE ===== *\/\n .hou-timeline {\n display: flex;\n justify-content: center;\n gap: 0;\n margin-top: 16px;\n }\n .hou-step {\n flex: 1;\n text-align: center;\n position: relative;\n padding: 28px 12px;\n }\n .hou-step:not(:last-child)::after {\n content: '\u2192';\n position: absolute;\n right: -12px;\n top: 50%; transform: translateY(-50%);\n font-size: 1.5rem;\n color: var(--pink);\n opacity: 0.5;\n }\n .hou-step .day {\n display: inline-flex;\n align-items: center; justify-content: center;\n width: 48px; height: 48px;\n border-radius: 50%;\n background: linear-gradient(135deg, var(--pink), var(--pink-dark));\n color: #fff;\n font-size: 0.95rem;\n font-weight: 700;\n margin: 0 auto 12px;\n }\n .hou-step .phenomenon { font-size: 1.4rem; display: block; margin-bottom: 6px; }\n .hou-step .desc { font-size: 0.85rem; color: var(--text-on-dark); opacity: 0.7; }\n\n \/* ===== CUSTOMS GRID (6 cards) ===== *\/\n .customs-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: 16px;\n margin-top: 10px;\n }\n .custom-card {\n padding: 28px 14px 22px;\n text-align: center;\n background: linear-gradient(135deg, rgba(56,189,248,0.06), rgba(14,10,62,0.3));\n border-radius: 16px;\n border: 1px solid rgba(56,189,248,0.1);\n transition: all 0.3s ease;\n min-height: 150px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n .custom-card:hover {\n background: linear-gradient(135deg, rgba(56,189,248,0.14), rgba(236,72,153,0.06));\n border-color: var(--pink);\n transform: translateY(-6px);\n box-shadow: 0 12px 28px rgba(56,189,248,0.15);\n }\n .custom-card .icon { font-size: 36px; display: block; margin-bottom: 8px; }\n .custom-card .name {\n font-size: 0.95rem;\n color: var(--text-on-dark);\n font-weight: 600;\n margin-bottom: 4px;\n }\n .custom-card .brief {\n font-size: 0.72rem;\n color: var(--text-on-dark);\n margin-top: 4px;\n line-height: 1.5;\n opacity: 0.65;\n }\n\n \/* ===== FOOD GRID (6 cards) ===== *\/\n .food-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));\n gap: 18px;\n margin-top: 10px;\n }\n .food-card {\n padding: 26px 14px 20px;\n text-align: center;\n border-radius: 50% 50% 40% 40% \/ 60% 60% 30% 30%;\n background: linear-gradient(180deg, rgba(236,72,153,0.08), rgba(14,10,62,0.3));\n border: 1px solid rgba(236,72,153,0.08);\n transition: all 0.3s ease;\n min-height: 160px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n .food-card:hover {\n background: linear-gradient(180deg, rgba(236,72,153,0.2), rgba(56,189,248,0.06));\n border-color: rgba(250,204,21,0.2);\n transform: translateY(-5px) scale(1.03);\n box-shadow: 0 12px 28px rgba(236,72,153,0.12);\n }\n .food-card .icon { font-size: 38px; display: block; margin-bottom: 8px; }\n .food-card .name { font-size: 1rem; color: var(--text-on-dark); font-weight: 600; }\n .food-card .note {\n font-size: 0.7rem;\n color: var(--gold-dark);\n margin-top: 6px;\n line-height: 1.4;\n }\n\n \/* ===== TILT CARD EFFECTS ===== *\/\n .tilt-card {\n perspective: 1000px;\n transition: transform 0.4s var(--ease-out);\n position: relative;\n overflow: hidden;\n cursor: default;\n }\n .tilt-card::after {\n content: '';\n position: absolute;\n top: -100%;\n left: -100%;\n width: 300%;\n height: 300%;\n background: linear-gradient(\n 135deg,\n transparent 30%,\n rgba(255,255,255,0.06) 45%,\n rgba(255,255,255,0.1) 50%,\n rgba(255,255,255,0.06) 55%,\n transparent 70%\n );\n transform: translateX(-100%) translateY(-100%) rotate(45deg);\n transition: transform 0.8s ease;\n pointer-events: none;\n }\n .tilt-card:hover::after {\n transform: translateX(100%) translateY(100%) rotate(45deg);\n }\n .tilt-card:hover .card-icon {\n transform: scale(1.25) rotate(-5deg);\n }\n .card-icon {\n display: block;\n transition: transform 0.4s var(--ease-out);\n }\n\n \/* ===== POEM BOX ===== *\/\n .poem-box {\n margin-top: 24px;\n padding: 32px 28px;\n background: linear-gradient(135deg, rgba(56,189,248,0.05), rgba(14,10,62,0.4));\n border-radius: 16px;\n border: 1px solid rgba(56,189,248,0.1);\n text-align: center;\n position: relative;\n }\n .poem-box::before {\n content: '\\201C';\n position: absolute;\n top: 10px; left: 20px;\n font-size: 60px;\n color: var(--pink);\n opacity: 0.12;\n line-height: 1;\n font-family: Georgia, serif;\n }\n .poem-box .poem-title {\n font-size: 1.15rem;\n color: var(--gold);\n font-weight: 600;\n margin-bottom: 4px;\n }\n .poem-box .poem-author {\n font-size: 0.8rem;\n color: var(--pink);\n margin-bottom: 16px;\n }\n .poem-box .poem-text {\n font-size: 1.1rem;\n line-height: 2.2;\n color: var(--text-on-dark);\n white-space: pre-line;\n letter-spacing: 0.05em;\n }\n\n \/* ===== PROVERB LIST ===== *\/\n .proverb-list { margin-top: 10px; }\n .proverb-item {\n padding: 14px 20px;\n border-left: 3px solid var(--pink);\n margin-bottom: 12px;\n background: rgba(236,72,153,0.04);\n border-radius: 0 10px 10px 0;\n }\n .proverb-item .line { font-size: 1rem; color: var(--text-on-dark); }\n .proverb-item .meaning {\n font-size: 0.8rem;\n color: rgba(224,231,255,0.6);\n margin-top: 4px;\n }\n\n \/* ===== CTA FOOTER ===== *\/\n .cta-footer {\n text-align: center;\n margin-top: 60px;\n padding: 50px 30px 40px;\n background: linear-gradient(135deg, rgba(236,72,153,0.08), rgba(56,189,248,0.05));\n border-radius: 24px;\n border: 1px solid rgba(250,204,21,0.1);\n position: relative;\n }\n .cta-footer h2 {\n font-size: clamp(2rem, 5vw, 3.2rem);\n background: linear-gradient(135deg, var(--pink), var(--gold), var(--blue));\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n letter-spacing: 0.2em;\n margin-bottom: 12px;\n }\n .cta-footer p {\n color: var(--text-on-dark);\n opacity: 0.7;\n font-size: 0.9rem;\n margin-bottom: 24px;\n }\n .cta-btn {\n display: inline-block;\n padding: 14px 44px;\n background: linear-gradient(135deg, var(--pink), var(--pink-dark));\n color: #fff;\n font-size: 1.1rem;\n font-weight: 600;\n border: none;\n border-radius: 50px;\n cursor: pointer;\n text-decoration: none;\n letter-spacing: 0.1em;\n box-shadow: 0 4px 20px rgba(236,72,153,0.4);\n transition: all 0.3s ease;\n min-width: 44px;\n min-height: 44px;\n touch-action: manipulation;\n animation: pulse-btn 2s ease-in-out infinite;\n }\n .cta-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 8px 32px rgba(236,72,153,0.5);\n animation: none;\n }\n .cta-btn:focus-visible {\n outline: 3px solid var(--gold);\n outline-offset: 3px;\n }\n\n @keyframes pulse-btn {\n 0%, 100% { box-shadow: 0 4px 20px rgba(236,72,153,0.4); }\n 50% { box-shadow: 0 4px 36px rgba(236,72,153,0.65); }\n }\n\n .footer-note {\n text-align: center;\n margin-top: 30px;\n padding: 20px 0;\n color: rgba(224,231,255,0.2);\n font-size: 0.75rem;\n letter-spacing: 0.05em;\n }\n .footer-note::before {\n content: '';\n display: block;\n width: 60%;\n margin: 0 auto 16px;\n height: 1px;\n background: linear-gradient(90deg, transparent, rgba(236,72,153,0.15), transparent);\n }\n\n \/* ===== LOTUS FLOWER SVG ===== *\/\n .lotus-row {\n display: flex;\n justify-content: center;\n gap: 24px;\n margin-bottom: 20px;\n font-size: 32px;\n animation: float-lotus 5s ease-in-out infinite;\n }\n @keyframes float-lotus {\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 25% { transform: translateY(-4px) rotate(1deg); }\n 75% { transform: translateY(-2px) rotate(-1deg); }\n }\n\n \/* ===== RESPONSIVE ===== *\/\n @media (max-width: 1024px) {\n .wrapper { padding: 30px 16px 60px; }\n section { padding: 36px 28px; }\n }\n\n @media (max-width: 768px) {\n .wrapper { padding: 20px 14px 50px; }\n section { padding: 28px 20px; margin: 40px 0; }\n .hero { padding: 70px 16px 60px; min-height: auto; }\n .section-title { font-size: 1.35rem; }\n .meaning-grid { grid-template-columns: repeat(2, 1fr); }\n .customs-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }\n .food-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }\n .hou-timeline { flex-direction: column; gap: 0; }\n .hou-step:not(:last-child)::after {\n content: '\u2193';\n right: auto;\n bottom: -4px;\n top: auto;\n left: 50%; transform: translateX(-50%);\n }\n #back-to-top { bottom: 18px; right: 18px; width: 48px; height: 48px; font-size: 20px; }\n }\n\n @media (max-width: 480px) {\n .wrapper { padding: 14px 10px 40px; }\n section { padding: 22px 16px; margin: 30px 0; border-radius: 14px; }\n .hero { padding: 50px 12px 40px; }\n .section-title { font-size: 1.15rem; margin-bottom: 20px; }\n .meaning-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }\n .customs-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }\n .food-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }\n .hero-sun { width: 70px; height: 70px; }\n .origin-card { padding: 20px 14px; }\n .custom-card { padding: 22px 10px 18px; min-height: 130px; }\n .food-card { padding: 20px 10px 16px; min-height: 140px; }\n .poem-box { padding: 24px 18px; }\n .poem-box .poem-text { font-size: 1rem; }\n .cta-footer { padding: 36px 18px 30px; }\n .cta-btn { padding: 12px 30px; font-size: 1rem; }\n #back-to-top { bottom: 14px; right: 14px; width: 44px; height: 44px; font-size: 18px; }\n }\n\n @media (max-width: 360px) {\n .meaning-grid { grid-template-columns: 1fr 1fr; gap: 8px; }\n .customs-grid { grid-template-columns: 1fr 1fr; gap: 8px; }\n .food-grid { grid-template-columns: 1fr 1fr; gap: 8px; }\n .meaning-card .value { font-size: 0.95rem; }\n .custom-card .icon { font-size: 28px; }\n .food-card .icon { font-size: 30px; }\n section { padding: 18px 12px; }\n }\n\n @media (orientation: landscape) and (max-height: 500px) {\n .hero { padding: 40px 16px 30px; min-height: auto; }\n .hero h1 { font-size: 2.2rem; }\n }\n\n @media print {\n #progress-bar, #back-to-top, #particle-canvas { display: none; }\n body { background: #fff; color: #000; }\n section { background: #fdf2f8; border: 1px solid #ccc; break-inside: avoid; page-break-inside: avoid; }\n .hero h1 { -webkit-text-fill-color: #ec4899; color: #ec4899; }\n .section-title { color: #db2777; border-bottom-color: #db2777; }\n .meaning-card .value, .custom-card .name, .food-card .name, .poem-box .poem-text { color: #333; }\n .custom-card .brief { color: #555; }\n .wrapper { max-width: 100%; }\n .cta-footer { background: #fdf2f8; }\n .cta-btn { animation: none; }\n }\n\n @media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n html { scroll-behavior: auto; }\n }\n :focus-visible {\n outline: 3px solid var(--gold);\n outline-offset: 3px;\n }\n [role=\"button\"]:focus-visible,\n button:focus-visible,\n a:focus-visible {\n outline: 3px solid var(--gold);\n outline-offset: 3px;\n }\n .sr-only {\n position: absolute;\n width: 1px; height: 1px;\n padding: 0; margin: -1px;\n overflow: hidden;\n clip: rect(0,0,0,0);\n border: 0;\n }\n<\/style>\n<\/head>\n<body>\n\n<a class=\"skip-link\" href=\"#meaning\">\u8df3\u8f6c\u5230\u6b63\u6587<\/a>\n\n\n<div id=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"\u9875\u9762\u9605\u8bfb\u8fdb\u5ea6\"><\/div>\n\n\n<button id=\"back-to-top\" aria-label=\"\u56de\u5230\u9876\u90e8\" title=\"\u56de\u5230\u9876\u90e8\">\u2b06<\/button>\n\n\n<canvas id=\"particle-canvas\" aria-hidden=\"true\"><\/canvas>\n\n<div class=\"wrapper\">\n\n \n <header class=\"hero\" id=\"hero\" aria-label=\"\u590f\u81f3\u9875\u9762\u5934\u90e8\">\n <div class=\"lotus-row\" aria-hidden=\"true\">\n <span>\ud83c\udf3a<\/span><span>\ud83e\udeb7<\/span><span>\ud83c\udf3b<\/span><span>\ud83e\udeb7<\/span><span>\ud83c\udf3a<\/span>\n <\/div>\n <div class=\"hero-sun\" aria-hidden=\"true\">\n <div class=\"sun-circle\"><\/div>\n <div class=\"sun-rays\"><\/div>\n <div class=\"sun-rays\"><\/div>\n <\/div>\n <h1>\u590f \u81f3<\/h1>\n <p class=\"subtitle\">\u2600\ufe0f \u663c\u957f\u591c\u77ed \u00b7 \u76db\u590f\u4f0a\u59cb<\/p>\n <span class=\"date-badge\" role=\"text\">\ud83d\udcc5 6\u670821\u65e5 \u00b7 \u4e8c\u5341\u56db\u8282\u6c14\u00b7\u7b2c10\u4e2a<\/span>\n <\/header>\n\n \n <section id=\"meaning\" aria-labelledby=\"meaning-title\">\n <h2 id=\"meaning-title\" class=\"section-title\"><span class=\"emoji\" aria-hidden=\"true\">\u2600\ufe0f<\/span> \u590f\u81f3\u542b\u4e49<\/h2>\n <p class=\"section-desc\">\u590f\u81f3\uff0c\u53e4\u65f6\u53c8\u79f0\"\u590f\u8282\"\"\u590f\u81f3\u8282\"\uff0c\u662f\u4e8c\u5341\u56db\u8282\u6c14\u4e4b\u7b2c\u5341\u4e2a\u8282\u6c14\u3002\u592a\u9633\u5230\u8fbe\u9ec4\u7ecf90\u00b0\uff0c\u76f4\u5c04\u5317\u56de\u5f52\u7ebf\uff0c\u5317\u534a\u7403\u767d\u663c\u8fbe\u5230\u6700\u957f\u3002\u6b64\u540e\u592a\u9633\u5357\u8fd4\uff0c\u767d\u663c\u6e10\u77ed\u2014\u2014\u6545\u6709\"\u5403\u8fc7\u590f\u81f3\u9762\uff0c\u4e00\u5929\u77ed\u4e00\u7ebf\"\u4e4b\u8bf4\u3002<\/p>\n <div class=\"meaning-grid\">\n <div class=\"meaning-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\u2600\ufe0f<\/span>\n <div class=\"label\">\u5929\u6587\u7279\u5f81<\/div>\n <div class=\"value\">\u592a\u9633\u76f4\u5c04\u5317\u56de\u5f52\u7ebf<br>\u767d\u663c\u6700\u957f<\/div>\n <\/div>\n <div class=\"meaning-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83d\udcc5<\/span>\n <div class=\"label\">\u8282\u6c14\u65f6\u95f4<\/div>\n <div class=\"value\">\u6bcf\u5e746\u670821-22\u65e5<br>2026\u5e746\u670821\u65e5<\/div>\n <\/div>\n <div class=\"meaning-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83c\udf27\ufe0f<\/span>\n <div class=\"label\">\u6c14\u5019\u7279\u5f81<\/div>\n <div class=\"value\">\u9ad8\u6e29\u591a\u96e8<br>\u6885\u96e8\u65f6\u8282<\/div>\n <\/div>\n <div class=\"meaning-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83c\udf3e<\/span>\n <div class=\"label\">\u519c\u4e8b\u6d3b\u52a8<\/div>\n <div class=\"value\">\u590f\u6536\u590f\u79cd<br>\u7530\u95f4\u7ba1\u7406<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"sanhou\" aria-labelledby=\"sanhou-title\">\n <h2 id=\"sanhou-title\" class=\"section-title\"><span class=\"emoji\" aria-hidden=\"true\">\ud83e\udd8c<\/span> \u590f\u81f3\u4e09\u5019<\/h2>\n <p class=\"section-desc\">\u53e4\u4eba\u5c06\u590f\u81f3\u5206\u4e3a\u4e09\u5019\uff0c\u4ee5\u81ea\u7136\u7269\u5019\u7684\u53d8\u5316\u63cf\u7ed8\u76db\u590f\u7684\u5230\u6765\u3002<\/p>\n <div class=\"hou-timeline\">\n <div class=\"hou-step tilt-card\" aria-label=\"\u521d\u5019\uff1a\u9e7f\u89d2\u89e3\">\n <div class=\"day\" aria-hidden=\"true\">\u521d\u5019<\/div>\n <span class=\"phenomenon\" aria-hidden=\"true\">\ud83e\udd8c \u9e7f\u89d2\u89e3<\/span>\n <p class=\"desc\">\u9633\u6027\u7684\u9e7f\u89d2<br>\u5f00\u59cb\u8131\u843d<\/p>\n <\/div>\n <div class=\"hou-step tilt-card\" aria-label=\"\u4e8c\u5019\uff1a\u8749\u59cb\u9e23\">\n <div class=\"day\" aria-hidden=\"true\">\u4e8c\u5019<\/div>\n <span class=\"phenomenon\" aria-hidden=\"true\">\ud83e\udd97 \u8749\u59cb\u9e23<\/span>\n <p class=\"desc\">\u77e5\u4e86\u9f13\u7ffc<br>\u9e23\u58f0\u5165\u590f<\/p>\n <\/div>\n <div class=\"hou-step tilt-card\" aria-label=\"\u4e09\u5019\uff1a\u534a\u590f\u751f\">\n <div class=\"day\" aria-hidden=\"true\">\u4e09\u5019<\/div>\n <span class=\"phenomenon\" aria-hidden=\"true\">\ud83c\udf3f \u534a\u590f\u751f<\/span>\n <p class=\"desc\">\u559c\u9634\u836f\u8349<br>\u534a\u590f\u840c\u53d1<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"customs\" aria-labelledby=\"customs-title\">\n <h2 id=\"customs-title\" class=\"section-title\"><span class=\"emoji\" aria-hidden=\"true\">\ud83c\udf90<\/span> \u590f\u81f3\u516d\u4fd7<\/h2>\n <p class=\"section-desc\">\u590f\u81f3\u81ea\u53e4\u4ee5\u6765\u5c31\u662f\u91cd\u8981\u7684\u8282\u65e5\uff0c\u6c11\u95f4\u6709\u4e30\u5bcc\u591a\u5f69\u7684\u4e60\u4fd7\u6d3b\u52a8\u3002<\/p>\n <div class=\"customs-grid\">\n <div class=\"custom-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83c\udf5c<\/span>\n <div class=\"name\">\u5403\u590f\u81f3\u9762<\/div>\n <p class=\"brief\">\u65b0\u9ea6\u5c1d\u65b0<br>\u6d88\u590f\u907f\u4f0f<\/p>\n <\/div>\n <div class=\"custom-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83e\udeb7<\/span>\n <div class=\"name\">\u8d4f\u8377\u82b1<\/div>\n <p class=\"brief\">\u516d\u6708\u8377\u82b1\u5f00<br>\u6ee1\u6c60\u6e05\u9999<\/p>\n <\/div>\n <div class=\"custom-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83d\udc1f<\/span>\n <div class=\"name\">\u796d\u7530\u516c<\/div>\n <p class=\"brief\">\u796d\u7940\u7948\u798f<br>\u7948\u6c42\u4e30\u6536<\/p>\n <\/div>\n <div class=\"custom-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83c\udf90<\/span>\n <div class=\"name\">\u6302\u590f\u5e03<\/div>\n <p class=\"brief\">\u6302\u82ce\u9ebb\u590f\u5e03<br>\u9a71\u6691\u7eb3\u51c9<\/p>\n <\/div>\n <div class=\"custom-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83c\udfd4\ufe0f<\/span>\n <div class=\"name\">\u907f\u6691\u7eb3\u51c9<\/div>\n <p class=\"brief\">\u5bfb\u5c71\u6797\u5e7d\u5904<br>\u6d88\u590f\u907f\u6691<\/p>\n <\/div>\n <div class=\"custom-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83c\udf19<\/span>\n <div class=\"name\">\u6d4b\u65e5\u5f71<\/div>\n <p class=\"brief\">\u7acb\u7aff\u6d4b\u5f71<br>\u4ee5\u5b9a\u8282\u6c14<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"foods\" aria-labelledby=\"foods-title\">\n <h2 id=\"foods-title\" class=\"section-title\"><span class=\"emoji\" aria-hidden=\"true\">\ud83c\udf49<\/span> \u6d88\u590f\u516d\u98df<\/h2>\n <p class=\"section-desc\">\u590f\u81f3\u65f6\u8282\uff0c\u5404\u5730\u6709\u72ec\u7279\u7684\u6d88\u590f\u996e\u98df\u4e60\u4fd7\uff0c\u6e05\u723d\u89e3\u6691\u3002<\/p>\n <div class=\"food-grid\">\n <div class=\"food-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83c\udf5c<\/span>\n <div class=\"name\">\u590f\u81f3\u9762<\/div>\n <p class=\"note\">\u65b0\u9ea6\u64c0\u9762<br>\u6d88\u590f\u5c1d\u65b0<\/p>\n <\/div>\n <div class=\"food-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83c\udf49<\/span>\n <div class=\"name\">\u897f\u74dc<\/div>\n <p class=\"note\">\u6d88\u6691\u89e3\u6e34<br>\u76db\u590f\u4e4b\u679c<\/p>\n <\/div>\n <div class=\"food-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83e\udd5f<\/span>\n <div class=\"name\">\u9984\u9968<\/div>\n <p class=\"note\">\u590f\u81f3\u5403\u9984\u9968<br>\u4e0d\u75b0\u590f<\/p>\n <\/div>\n <div class=\"food-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83e\udd64<\/span>\n <div class=\"name\">\u9178\u6885\u6c64<\/div>\n <p class=\"note\">\u751f\u6d25\u6b62\u6e34<br>\u6d88\u6691\u826f\u996e<\/p>\n <\/div>\n <div class=\"food-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83e\udd52<\/span>\n <div class=\"name\">\u82e6\u74dc<\/div>\n <p class=\"note\">\u6e05\u70ed\u53bb\u706b<br>\u590f\u81f3\u98df\u82e6<\/p>\n <\/div>\n <div class=\"food-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83c\udf75<\/span>\n <div class=\"name\">\u8377\u53f6\u8336<\/div>\n <p class=\"note\">\u6e05\u6691\u5229\u6e7f<br>\u8377\u53f6\u98d8\u9999<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"poem\" aria-labelledby=\"poem-title\">\n <h2 id=\"poem-title\" class=\"section-title\"><span class=\"emoji\" aria-hidden=\"true\">\ud83d\udcdc<\/span> \u519c\u8c1a\u4e0e\u8bd7<\/h2>\n\n <div class=\"proverb-list\">\n <div class=\"proverb-item\">\n <p class=\"line\" role=\"text\">\ud83c\udf3e \u590f\u81f3\u4e0d\u9504\u6839\uff0c\u8349\u7c7d\u6ee1\u5730\u6eda<\/p>\n <p class=\"meaning\">\u590f\u81f3\u65f6\u8282\u5fc5\u987b\u9504\u8349\uff0c\u5426\u5219\u6742\u8349\u75af\u957f\u6ee1\u5730<\/p>\n <\/div>\n <div class=\"proverb-item\">\n <p class=\"line\" role=\"text\">\ud83c\udf3e \u590f\u81f3\u4e1c\u5357\u98ce\uff0c\u5f53\u65e5\u96e8\u8499\u8499<\/p>\n <p class=\"meaning\">\u590f\u81f3\u522e\u4e1c\u5357\u98ce\uff0c\u9884\u793a\u7740\u5f53\u5929\u5c31\u8981\u4e0b\u96e8<\/p>\n <\/div>\n <div class=\"proverb-item\">\n <p class=\"line\" role=\"text\">\ud83c\udf3e \u590f\u81f3\u4e00\u573a\u96e8\uff0c\u4e00\u6ef4\u503c\u5343\u91d1<\/p>\n <p class=\"meaning\">\u590f\u81f3\u7684\u96e8\u6c34\u5bf9\u519c\u4f5c\u7269\u751f\u957f\u6781\u4e3a\u73cd\u8d35<\/p>\n <\/div>\n <div class=\"proverb-item\">\n <p class=\"line\" role=\"text\">\ud83c\udf3e \u590f\u81f3\u65e0\u96e8\u4e09\u4f0f\u70ed\uff0c\u590f\u81f3\u6709\u96e8\u4e5d\u51ac\u5bd2<\/p>\n <p class=\"meaning\">\u590f\u81f3\u7684\u5929\u6c14\u53ef\u4ee5\u9884\u793a\u540e\u7eed\u7684\u6c14\u5019<\/p>\n <\/div>\n <\/div>\n\n <div class=\"poem-box\">\n <div class=\"poem-title\">\u300a\u7af9\u679d\u8bcd\u300b<\/div>\n <div class=\"poem-author\">\u2014\u2014 \u5510 \u00b7 \u5218\u79b9\u9521<\/div>\n <div class=\"poem-text\" role=\"article\" aria-label=\"\u53e4\u8bd7\u300a\u7af9\u679d\u8bcd\u300b\u5168\u6587\">\n \u6768\u67f3\u9752\u9752\u6c5f\u6c34\u5e73\uff0c\u95fb\u90ce\u6c5f\u4e0a\u8e0f\u6b4c\u58f0\u3002<br>\n \u4e1c\u8fb9\u65e5\u51fa\u897f\u8fb9\u96e8\uff0c\u9053\u662f\u65e0\u6674\u5374\u6709\u6674\u3002\n <\/div>\n <\/div>\n <div class=\"poem-box\" style=\"margin-top:16px;\">\n <div class=\"poem-title\">\u300a\u590f\u81f3\u907f\u6691\u5317\u6c60\u300b<\/div>\n <div class=\"poem-author\">\u2014\u2014 \u5510 \u00b7 \u97e6\u5e94\u7269<\/div>\n <div class=\"poem-text\" role=\"article\" aria-label=\"\u53e4\u8bd7\u300a\u590f\u81f3\u907f\u6691\u5317\u6c60\u300b\u8282\u9009\">\n \u663c\u6677\u5df2\u4e91\u6781\uff0c\u5bb5\u6f0f\u81ea\u6b64\u957f\u3002<br>\n \u672a\u53ca\u65bd\u653f\u6559\uff0c\u6240\u5fe7\u53d8\u708e\u51c9\u3002\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"health\" aria-labelledby=\"health-title\">\n <h2 id=\"health-title\" class=\"section-title\"><span class=\"emoji\" aria-hidden=\"true\">\ud83d\udc9a<\/span> \u590f\u81f3\u517b\u751f<\/h2>\n <p class=\"section-desc\">\u590f\u81f3\u65f6\u8282\uff0c\u9633\u6c14\u65fa\u76db\uff0c\u517b\u751f\u91cd\u5728\"\u517b\u5fc3\"\u3002<\/p>\n <div class=\"meaning-grid\">\n <div class=\"meaning-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83d\ude34<\/span>\n <div class=\"label\">\u8d77\u5c45<\/div>\n <div class=\"value\">\u665a\u7761\u65e9\u8d77<br>\u5348\u95f4\u5c0f\u61a9<\/div>\n <\/div>\n <div class=\"meaning-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83e\udd57<\/span>\n <div class=\"label\">\u996e\u98df<\/div>\n <div class=\"value\">\u6e05\u6de1\u5c11\u6cb9<br>\u591a\u5403\u82e6\u5473<\/div>\n <\/div>\n <div class=\"meaning-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83e\uddd8<\/span>\n <div class=\"label\">\u60c5\u5fd7<\/div>\n <div class=\"value\">\u9759\u5fc3\u517b\u6c14<br>\u5fc3\u5e73\u6c14\u548c<\/div>\n <\/div>\n <div class=\"meaning-card tilt-card\">\n <span class=\"icon card-icon\" aria-hidden=\"true\">\ud83d\udca7<\/span>\n <div class=\"label\">\u9632\u6691<\/div>\n <div class=\"value\">\u8865\u5145\u6c34\u5206<br>\u9632\u6691\u964d\u6e29<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <footer class=\"cta-footer\" role=\"contentinfo\">\n <h2>\u2600\ufe0f \u590f\u81f3\u5b89\u5eb7<\/h2>\n <p>\u613f\u4f60\u5728\u8fd9\u4e2a\u76db\u590f\uff0c\u5fc3\u6709\u6e05\u51c9\uff0c\u5411\u9633\u800c\u751f\u3002<\/p>\n <button class=\"cta-btn\" onclick=\"window.scrollTo({top:0,behavior:'smooth'});return false;\" aria-label=\"\u56de\u5230\u9875\u9996\">\n \u590f\u81f3\u5b89\u5eb7 \ud83e\udeb7\n <\/button>\n <\/footer>\n\n <div class=\"footer-note\">\n \u4e8c\u5341\u56db\u8282\u6c14 \u00b7 \u7b2c\u5341\u4e2a \u00b7 \u592a\u9633\u5230\u8fbe\u9ec4\u7ecf90\u00b0<br>\n \u2600\ufe0f \u663c\u6700\u957f \u00b7 \ud83e\udeb7 \u8377\u82b1\u5f00 \u00b7 \ud83c\udf3f \u76db\u590f\u59cb\n <\/div>\n\n<\/div>\n\n<script>\n(() => {\n 'use strict';\n\n const progressBar = document.getElementById('progress-bar');\n const backBtn = document.getElementById('back-to-top');\n const canvas = document.getElementById('particle-canvas');\n const ctx = canvas.getContext('2d');\n\n \/\/ ===== SCROLL PROGRESS BAR =====\n const updateProgress = () => {\n const scrollTop = window.scrollY;\n const docHeight = document.documentElement.scrollHeight - window.innerHeight;\n const progress = docHeight > 0 ? Math.min(scrollTop \/ docHeight * 100, 100) : 0;\n progressBar.style.width = progress + '%';\n progressBar.setAttribute('aria-valuenow', Math.round(progress));\n };\n window.addEventListener('scroll', updateProgress, { passive: true });\n window.addEventListener('resize', updateProgress, { passive: true });\n updateProgress();\n\n \/\/ ===== BACK TO TOP =====\n const toggleBackBtn = () => {\n backBtn.classList.toggle('visible', window.scrollY > 300);\n };\n window.addEventListener('scroll', toggleBackBtn, { passive: true });\n toggleBackBtn();\n backBtn.addEventListener('click', () => {\n window.scrollTo({ top: 0, behavior: 'smooth' });\n });\n\n \/\/ ===== PARTICLE BACKGROUND (only when motion OK) =====\n const motionOk = !window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n let animId = null;\n\n if (motionOk && canvas && ctx) {\n let W, H;\n const particles = [];\n\n class Particle {\n constructor() { this.reset(); }\n\n reset() {\n this.x = Math.random() * W;\n this.y = Math.random() * H;\n this.size = 1 + Math.random() * 3;\n this.speedX = (Math.random() - 0.5) * 0.3;\n this.speedY = (Math.random() - 0.5) * 0.3;\n this.alpha = 0.2 + Math.random() * 0.5;\n this.hue = Math.random() > 0.5 ? 330 + Math.random() * 20 : 200 + Math.random() * 30;\n }\n\n update() {\n this.x += this.speedX;\n this.y += this.speedY;\n if (this.x < 0 || this.x > W) this.speedX *= -1;\n if (this.y < 0 || this.y > H) this.speedY *= -1;\n }\n\n draw() {\n ctx.beginPath();\n ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\n ctx.fillStyle = `hsla(${this.hue}, 70%, 70%, ${this.alpha})`;\n ctx.fill();\n }\n }\n\n const resize = () => {\n W = canvas.width = window.innerWidth;\n H = canvas.height = window.innerHeight;\n };\n\n const initParticles = () => {\n particles.length = 0;\n const count = Math.min(Math.floor(W * H \/ 12000), 60);\n for (let i = 0; i < count; i++) {\n particles.push(new Particle());\n }\n };\n\n const animate = () => {\n ctx.clearRect(0, 0, W, H);\n for (let i = 0; i < particles.length; i++) {\n for (let j = i + 1; j < particles.length; j++) {\n const dx = particles[i].x - particles[j].x;\n const dy = particles[i].y - particles[j].y;\n const dist = Math.sqrt(dx * dx + dy * dy);\n if (dist < 120) {\n ctx.beginPath();\n ctx.moveTo(particles[i].x, particles[i].y);\n ctx.lineTo(particles[j].x, particles[j].y);\n ctx.strokeStyle = `rgba(236, 72, 153, ${0.04 * (1 - dist \/ 120)})`;\n ctx.lineWidth = 0.5;\n ctx.stroke();\n }\n }\n }\n for (const p of particles) {\n p.update();\n p.draw();\n }\n animId = requestAnimationFrame(animate);\n };\n\n window.addEventListener('resize', () => { resize(); initParticles(); });\n resize();\n initParticles();\n animate();\n }\n\n \/\/ ===== 3D TILT EFFECT =====\n if (motionOk) {\n const tiltCards = document.querySelectorAll('.tilt-card');\n for (const card of tiltCards) {\n card.addEventListener('mousemove', (e) => {\n const rect = card.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n const cx = rect.width \/ 2;\n const cy = rect.height \/ 2;\n const rx = ((y - cy) \/ cy) * -8;\n const ry = ((x - cx) \/ cx) * 8;\n card.style.transform = `perspective(800px) rotateX(${rx}deg) rotateY(${ry}deg) scale3d(1.02,1.02,1.02)`;\n });\n card.addEventListener('mouseleave', () => {\n card.style.transform = 'perspective(800px) rotateX(0) rotateY(0) scale3d(1,1,1)';\n });\n }\n }\n})();\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"\u590f\u81f3 \u00b7 \u663c\u957f\u591c\u77ed \u76db\u590f\u4f0a\u59cb \u8df3\u8f6c\u5230\u6b63\u6587 \u2b06 \ud83c\udf3a\ud83e\udeb7\ud83c\udf3b\ud83e\udeb7\ud83c\udf3a \u590f \u81f3 \u2600\ufe0f \u663c\u957f\u591c\u77ed \u00b7 \u76db\u590f\u4f0a\u59cb \ud83d\udcc5 6\u670821\u65e5 […]","protected":false},"author":1,"featured_media":2217,"comment_status":"closed","ping_status":"open","sticky":false,"template":"wp-custom-template-2","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-2025","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-10"],"_links":{"self":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/2025","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/comments?post=2025"}],"version-history":[{"count":2,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/2025\/revisions"}],"predecessor-version":[{"id":2218,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/2025\/revisions\/2218"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/media\/2217"}],"wp:attachment":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/media?parent=2025"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/categories?post=2025"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/tags?post=2025"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}