:root{--bg-color: #f5f5f7;--text-color: #1d1d1f;--accent-color: #007aff;--line-yang-color: #333;--line-yin-color: #333;--line-moving-color: #e00}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:var(--bg-color);color:var(--text-color);margin:0;padding:20px;display:flex;justify-content:center}.container{max-width:800px;width:100%;background:#fff;padding:30px;border-radius:12px;box-shadow:0 4px 12px #0000001a}header{text-align:center;margin-bottom:30px}.date-info{font-size:.9em;color:#666;margin-top:10px}.controls{text-align:center;margin-bottom:30px}button{background-color:var(--accent-color);color:#fff;border:none;padding:10px 20px;border-radius:8px;font-size:16px;cursor:pointer;transition:background-color .2s}button:hover{background-color:#0056b3}.divination-area{display:flex;justify-content:space-around;flex-wrap:wrap}.hexagram-container{width:45%;min-width:300px;margin-bottom:20px;text-align:center}.hexagram-lines{display:flex;flex-direction:column-reverse;gap:10px;margin:20px 0;align-items:center}.line-row{display:flex;align-items:center;height:30px;width:100%;justify-content:center}.line-info-left{width:120px;font-size:12px;text-align:right;padding-right:10px;color:#666}.line-graphic{flex-grow:1;display:flex;justify-content:center;position:relative}.yang-line{width:100%;height:8px;background-color:var(--line-yang-color)}.yin-line{width:100%;height:8px;display:flex;justify-content:space-between}.yin-line:before,.yin-line:after{content:"";width:42%;height:100%;background-color:var(--line-yin-color);display:block}.moving .yang-line{background-color:var(--line-moving-color)}.moving .yin-line:before,.moving .yin-line:after{background-color:var(--line-moving-color)}.moving-indicator{position:absolute;right:-20px;color:var(--line-moving-color);font-weight:700}.line-info-right{width:120px;font-size:12px;padding-left:10px;color:#555;display:flex;gap:5px}.hexagram-info{text-align:center;margin-top:10px;font-weight:700}.coin-container{position:relative;width:300px;height:150px;margin:0 auto 20px}.coin{position:absolute;width:50px;height:50px;border-radius:50%;background-color:gold;border:4px solid #d4af37;display:flex;align-items:center;justify-content:center;font-weight:700;color:#b58900;font-size:24px;box-shadow:0 4px 6px #0003;transition:transform .3s ease-out,top .3s ease-out,left .3s ease-out}.coin.yin{background-color:#e0e0e0;border-color:#999;color:#666}.coin.yang{background-color:gold;border-color:#d4af37;color:#b58900}@keyframes spin{0%{transform:rotateY(0) translateY(0)}25%{transform:rotateY(90deg) translateY(-20px)}50%{transform:rotateY(180deg) translateY(0)}75%{transform:rotateY(270deg) translateY(-20px)}to{transform:rotateY(360deg) translateY(0)}}.coin.spinning{animation:spin .6s infinite linear}.coin.yang.spinning{background-image:linear-gradient(45deg,gold,#fff,gold)}.coin.yin.spinning{background-image:linear-gradient(45deg,#e0e0e0,#fff,#e0e0e0);border-color:#999;color:#666}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#0006;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.modal-content{background-color:#fffffff2;margin:10% auto;padding:30px;border:1px solid #888;width:80%;max-width:600px;border-radius:12px;box-shadow:0 4px 16px #0003;position:relative;animation:modalFadeIn .3s}@keyframes modalFadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.close-btn{color:#aaa;float:right;font-size:28px;font-weight:700;cursor:pointer}.close-btn:hover,.close-btn:focus{color:#000;text-decoration:none;cursor:pointer}#modal-title{margin-top:0;color:#1d1d1f;border-bottom:2px solid #eee;padding-bottom:10px}#modal-body{line-height:1.6;color:#333;font-size:16px;white-space:pre-wrap}