@import "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&family=Noto+Serif+TC:wght@400;600;700;900&family=Outfit:wght@300;400;500;600;700&display=swap";html,body{background-color:#120f0d;width:100%;margin:0;padding:0}#root{text-align:left;width:100%;max-width:1440px;margin:0 auto;padding:0}:root{--primary-cinnabar:#8c1d18;--primary-cinnabar-hover:#751713;--primary-cinnabar-light:#faf0ee;--secondary-gold:#c89d46;--secondary-gold-light:#f7efcb;--secondary-gold-dark:#9a7426;--accent-jade:#2e6f40;--accent-jade-light:#ebf4ee;--accent-terracotta:#d86b49;--accent-ink-blue:#1d3557;--bg-parchment:#fdfbf7;--bg-card:#fff;--bg-card-alt:#f8f4ec;--bg-header:#211b18;--text-primary:#23201d;--text-secondary:#5c554e;--text-muted:#8c847b;--text-gold:#d4a359;--border-gold:#c89d4666;--border-subtle:#8c1d181f;--border-card:#23201d14;--shadow-sm:0 2px 8px #23201d0f;--shadow-md:0 6px 18px #23201d17;--shadow-lg:0 12px 32px #23201d1f;--shadow-gold:0 4px 20px #c89d4640;--shadow-cinnabar:0 6px 20px #8c1d1840;--font-serif:"Noto Serif SC", "Noto Serif TC", "STKaiti", "KaiTi", serif;--font-sans:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-full:9999px;--transition-fast:.2s ease;--transition-normal:.3s cubic-bezier(.4, 0, .2, 1);--transition-bounce:.4s cubic-bezier(.34, 1.56, .64, 1)}*{box-sizing:border-box;margin:0;padding:0}#root{width:100%;max-width:1440px;min-height:100vh;margin:0 auto;box-shadow:0 0 50px #00000026}body{font-family:var(--font-sans);color:var(--text-primary);background-color:#120f0d;min-height:100vh;line-height:1.6}.chinese-text{font-family:var(--font-serif)}.container{width:100%;max-width:100%;margin:0 auto;padding:0 2rem}.desktop-only{display:flex}.mobile-only{display:none}@media (width<=768px){.container{padding:0 1rem}.desktop-only{display:none!important}.mobile-only{display:flex!important}}.cultural-card{background:var(--bg-card);border:1px solid var(--border-gold);border-radius:var(--radius-md);box-shadow:var(--shadow-md);transition:transform var(--transition-normal), box-shadow var(--transition-normal);position:relative;overflow:hidden}.cultural-card:before{content:"";background:linear-gradient(90deg, var(--primary-cinnabar), var(--secondary-gold), var(--accent-jade));height:4px;position:absolute;top:0;left:0;right:0}.cultural-card:hover{box-shadow:var(--shadow-lg)}.stamp-seal{background:var(--primary-cinnabar);color:var(--secondary-gold-light);border:2px solid var(--secondary-gold);font-family:var(--font-serif);-webkit-user-select:none;user-select:none;border-radius:6px;justify-content:center;align-items:center;font-weight:700;display:inline-flex;box-shadow:0 2px 6px #8c1d184d}.btn-primary{background:linear-gradient(135deg, var(--primary-cinnabar) 0%, #a4231c 100%);color:#fff;border:1px solid var(--secondary-gold);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-cinnabar);align-items:center;gap:.5rem;padding:.65rem 1.4rem;font-size:.95rem;font-weight:600;display:inline-flex}.btn-primary:hover{background:linear-gradient(135deg,#a4231c 0%,#b82921 100%);transform:translateY(-2px);box-shadow:0 8px 24px #8c1d1859}.btn-secondary{background:var(--bg-card-alt);color:var(--text-primary);border:1px solid var(--border-gold);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-normal);align-items:center;gap:.5rem;padding:.65rem 1.4rem;font-size:.95rem;font-weight:600;display:inline-flex}.btn-secondary:hover{background:var(--secondary-gold-light);border-color:var(--secondary-gold);color:var(--secondary-gold-dark)}.btn-pill{border-radius:var(--radius-full);border:1px solid var(--border-card);background:var(--bg-card);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);padding:.4rem 1rem;font-size:.88rem;font-weight:500}.btn-pill.active{background:var(--primary-cinnabar);color:#fff;border-color:var(--secondary-gold);box-shadow:0 2px 8px #8c1d1840}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.flip-card{perspective:1000px;cursor:pointer;min-height:280px}.flip-card-inner{text-align:center;width:100%;height:100%;min-height:280px;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1);position:relative}.flip-card.flipped .flip-card-inner{transform:rotateY(180deg)}.flip-card-front,.flip-card-back{backface-visibility:hidden;border-radius:var(--radius-md);flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:1.8rem;display:flex;position:absolute}.flip-card-front{background:var(--bg-card);border:1.5px solid var(--secondary-gold);box-shadow:var(--shadow-md)}.flip-card-back{border:2px solid var(--secondary-gold);box-shadow:var(--shadow-lg);background:linear-gradient(145deg,#fffdf9 0%,#f6eedf 100%);transform:rotateY(180deg)}.tone-badge{border-radius:var(--radius-sm);text-transform:uppercase;padding:.2rem .6rem;font-size:.8rem;font-weight:700;display:inline-block}.tone-1{color:#1e6091;background:#e6f0fa;border:1px solid #b8d4ea}.tone-2{color:#2e6f40;background:#ebf4ee;border:1px solid #b7ddc2}.tone-3{color:#d86b49;background:#fef3e7;border:1px solid #f6d1b9}.tone-4{color:#8c1d18;background:#faf0ee;border:1px solid #f0c4c1}.tone-5{color:#6b2d5c;background:#f3eefa;border:1px solid #ddb8d4}.tone-6{color:#9a7426;background:#fff8eb;border:1px solid #e6d0a3}@keyframes pulseGlow{0%,to{box-shadow:0 0 12px #c89d464d}50%{box-shadow:0 0 24px #c89d4699}}.glow-animation{animation:3s ease-in-out infinite pulseGlow}