:root{--font-family:"Inter", system-ui, Avenir, Helvetica, Arial, sans-serif;--bg-top:#16161b;--bg-bottom:#0f0f13;--text-primary:#f0f0f0;--text-secondary:#ffffffb3;--accent-gold:#d4af37;--glass-bg:#19191e99;--glass-border:#ffffff0d}*,:before,:after{box-sizing:border-box}body{font-family:var(--font-family);background:linear-gradient(135deg, var(--bg-top), var(--bg-bottom));color:var(--text-primary);justify-content:center;align-items:center;min-height:100vh;margin:0;padding:0;display:flex}#root{box-sizing:border-box;width:100%;max-width:1400px;margin:0 auto;padding:2rem}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:16px;padding:2rem;box-shadow:0 8px 32px #0000005e}.input-field{border:1px solid var(--glass-border);width:100%;color:var(--text-primary);box-sizing:border-box;background:#0003;border-radius:8px;margin-bottom:1rem;padding:.75rem 1rem;font-size:1rem}.input-field:focus{border-color:var(--accent-gold);outline:none}.btn-primary{width:100%;color:var(--accent-gold);border:1px solid var(--accent-gold);cursor:pointer;background:#d4af371a;border-radius:8px;padding:.75rem;font-size:1rem;transition:all .2s}.btn-primary:hover{background:#d4af3733;box-shadow:0 0 10px #d4af3733}.coin-container{perspective:1000px;justify-content:center;gap:1rem;margin:2rem 0;display:flex}.coin{color:#111;width:60px;height:60px;transform-style:preserve-3d;background:linear-gradient(135deg,#d4af37,#997a00);border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;font-weight:700;transition:transform 1.5s cubic-bezier(.175,.885,.32,1.275);display:flex;box-shadow:0 4px 8px #00000080}.coin.flipping{animation:1.5s ease-out flip}.coin-yang{background:linear-gradient(135deg,#d4af37,#997a00)}.coin-yin{background:linear-gradient(135deg,#9b9b9b,#555)}@keyframes flip{0%{transform:rotateY(0)translateY(0)}50%{transform:rotateY(1080deg)translateY(-100px)}to{transform:rotateY(2160deg)translateY(0)}}.hexagram-line{justify-content:center;gap:.5rem;width:200px;margin:.5rem 0;display:flex;position:relative}.line-segment{background-color:var(--text-primary);border-radius:4px;height:20px}.line-yang{width:200px}.line-yin{width:96px}.hexagram-container{flex-direction:column-reverse;justify-content:flex-start;height:190px;margin-top:2rem;display:flex}.action-buttons{flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:1.5rem;display:flex}.btn-secondary{color:var(--text-secondary);border:1px solid var(--glass-border);cursor:pointer;background:#ffffff0d;border-radius:8px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.9rem;transition:all .2s;display:flex}.btn-secondary:hover{color:var(--text-primary);background:#ffffff1a}.pulse-playing{animation:2s ease-in-out infinite pulse-glow}@keyframes pulse-glow{0%{box-shadow:0 0 #d4af3766}70%{border-color:var(--accent-gold);box-shadow:0 0 0 10px #d4af3700}to{box-shadow:0 0 #d4af3700}}.audio-controls{border-top:1px solid var(--glass-border);text-align:center;margin-top:2rem;padding-top:1.5rem}.three-column-layout{grid-template-columns:minmax(200px,1fr) minmax(300px,2.5fr) minmax(200px,1fr);align-items:start;gap:2rem;display:grid}.three-column-layout>div{word-wrap:break-word;overflow-wrap:break-word;min-width:0}@media (width<=1024px){.three-column-layout{grid-template-columns:1fr}}.markdown-content p{margin-bottom:1rem}.markdown-content ul{margin-bottom:1rem;padding-left:1.5rem}.markdown-content li{margin-bottom:.5rem}.markdown-content h3,.markdown-content h4{color:var(--accent-gold);margin-top:1.5rem;margin-bottom:.75rem}