:root{--font-family: "Microsoft YaHei", "SimSun", "KaiTi", "STKaiti", "宋体", Arial, Helvetica, sans-serif;--font-size-base: 22px;--font-size-small: 20px;--font-size-medium: 22px;--font-size-large: 24px;--font-size-xl: 28px;--font-size-xxl: 36px;--font-size-title: 46px;--font-weight-normal: 500;--font-weight-bold: 600;--line-height: 1.8;--color-primary: #8b6914;--color-primary-dark: #6b4f0a;--color-primary-light: #6b5a4a;--color-text: #3a3a3a;--color-text-secondary: #6b5a4a;--color-text-tertiary: #8b7a6a;--color-bg: #fefaf0;--color-bg-light: #f5f0e0;--color-bg-lighter: #ede8d8;--color-bg-disabled: #e8e0d0;--color-border: #d4c4a8;--color-border-light: #e8dcc6;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 20px;--spacing-xxl: 30px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .1);--shadow-md: 0 2px 8px rgba(0, 0, 0, .15);--shadow-lg: 0 4px 12px rgba(0, 0, 0, .2);--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .8);--transition: all .3s ease}*{box-sizing:border-box}:root{font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height);font-weight:var(--font-weight-normal);color:var(--color-text);background-color:var(--color-bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;min-width:320px;min-height:100vh;width:100%;overflow-x:hidden;font-weight:var(--font-weight-normal);font-size:var(--font-size-base)}#root{width:100%;min-height:100vh}a{font-weight:var(--font-weight-bold);color:var(--color-primary);text-decoration:inherit}a:hover{color:var(--color-primary-dark)}button{border-radius:var(--radius-sm);border:2px solid var(--color-border);padding:.6em 1.2em;font-size:1em;font-weight:var(--font-weight-bold);font-family:inherit;background-color:var(--color-bg-light);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition)}button:hover{border-color:var(--color-primary);background-color:var(--color-bg-lighter);color:var(--color-text)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}button:disabled,button.disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.6);background:var(--color-bg-disabled)}h1{font-size:var(--font-size-title);line-height:1.1;font-weight:700;color:var(--color-primary)}h2{font-size:var(--font-size-xl);font-weight:700;color:var(--color-primary)}h3{font-size:var(--font-size-large);font-weight:700;color:var(--color-primary)}h4,h5{font-size:var(--font-size-medium);font-weight:700;color:var(--color-primary)}.card{background:linear-gradient(135deg,var(--color-bg) 0%,var(--color-bg-light) 100%);border:2px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-xl);margin:var(--spacing-xl) 0;box-shadow:var(--shadow-sm),var(--shadow-inset);position:relative;overflow:hidden;color:var(--color-text)}.text-primary{color:var(--color-primary)}.text-secondary{color:var(--color-text-secondary)}.text-tertiary{color:var(--color-text-tertiary)}.text-small{font-size:var(--font-size-small)}.text-medium{font-size:var(--font-size-medium)}.text-large{font-size:var(--font-size-large)}@media(max-width:768px){:root{--font-size-base: 20px;--font-size-title: 32px}}@media(prefers-color-scheme:light){:root{color:var(--color-text);background-color:var(--color-bg)}a:hover{color:var(--color-primary)}button{background-color:var(--color-bg-light);color:var(--color-text-secondary);border-color:var(--color-border)}}.gua-handbook{background:linear-gradient(135deg,var(--color-bg) 0%,var(--color-bg-light) 100%);border:2px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-xl);margin:var(--spacing-xl) 0;box-shadow:var(--shadow-sm),var(--shadow-inset);position:relative;overflow:hidden;color:var(--color-text)}.gua-handbook:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(139,105,20,.03) 0%,transparent 70%);pointer-events:none}.gua-handbook h3{margin:0 0 var(--spacing-md) 0;position:relative;z-index:1}.handbook-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--spacing-md)}.handbook-item{background:linear-gradient(135deg,var(--color-bg) 0%,var(--color-bg-light) 100%);border:2px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-md);display:flex;flex-direction:column;align-items:center;text-align:center;transition:var(--transition);min-height:140px;position:relative;box-shadow:0 2px 8px #00000014}.handbook-item:before{content:"☯";position:absolute;top:5px;right:5px;font-size:var(--font-size-large);opacity:.15;color:var(--color-primary);pointer-events:none}.handbook-item.unlocked{border-color:var(--color-primary);background:linear-gradient(135deg,var(--color-bg) 0%,var(--color-bg-lighter) 100%);box-shadow:var(--shadow-md),var(--shadow-inset)}.handbook-item.unlocked:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),var(--shadow-inset);border-color:var(--color-primary-dark)}.handbook-item.locked{background:linear-gradient(135deg,var(--color-bg-disabled) 0%,#d8d0c0 100%);opacity:.6;filter:grayscale(.6)}.gua-icon{font-size:var(--font-size-xxl);margin-bottom:var(--spacing-sm)}.gua-name{font-size:var(--font-size-large);margin-bottom:var(--spacing-xs)}.gua-phenomenon{font-size:var(--font-size-small);color:var(--color-text-secondary);margin-bottom:var(--spacing-sm);text-transform:capitalize}.gua-description{font-size:19px;color:var(--color-text-tertiary);line-height:1.4;margin-top:var(--spacing-sm)}.gua-yao-pattern{margin:var(--spacing-sm) 0;padding:var(--spacing-sm);background:#f5f0e6cc;border-radius:var(--radius-sm);width:100%;border:1px solid var(--color-border)}.yao-pattern-label{font-size:18px;color:var(--color-text-secondary);margin-bottom:var(--spacing-xs);text-align:center}.yao-pattern-container{display:flex;flex-direction:column;gap:var(--spacing-xs);align-items:center}.yao-pattern-item{display:flex;align-items:center;gap:var(--spacing-xs);width:100%;justify-content:center}.yao-pattern-position{font-size:18px;color:var(--color-text-tertiary);min-width:20px;text-align:right}.yao-symbol{font-size:18px;font-family:monospace;color:var(--color-primary);letter-spacing:0}.locked-icon{font-size:var(--font-size-xxl);margin-bottom:var(--spacing-sm);opacity:.5}.locked-text{font-size:var(--font-size-small);color:var(--color-text-tertiary)}.structure-section{margin-top:var(--spacing-xxl);padding-top:var(--spacing-xl);border-top:2px solid var(--color-border)}.structure-section h4{margin:0 0 var(--spacing-xl) 0}.structure-item{margin-bottom:var(--spacing-xl);padding:var(--spacing-md);background:linear-gradient(135deg,var(--color-bg) 0%,var(--color-bg-light) 100%);border-radius:var(--radius-md);border-left:4px solid var(--color-primary);box-shadow:0 2px 6px #00000014;position:relative;z-index:1}.structure-item h5{margin:0 0 var(--spacing-sm) 0}.structure-item p{margin:0 0 var(--spacing-sm) 0;font-size:21px;line-height:var(--line-height);text-align:left}.yao-symbol-inline{font-family:monospace;font-size:var(--font-size-medium);color:var(--color-primary);background:#8b69141a;padding:2px var(--spacing-xs);border-radius:3px;border:1px solid var(--color-border)}.structure-list{margin:var(--spacing-sm) 0 0 0;padding-left:var(--spacing-xl);font-size:21px;line-height:2}.structure-list li{margin-bottom:var(--spacing-xs)}.structure-list strong{color:var(--color-primary)}.hexagram-composer{background:linear-gradient(135deg,var(--color-bg) 0%,var(--color-bg-light) 100%);border:2px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-xl);margin:var(--spacing-xl) 0;box-shadow:var(--shadow-sm),var(--shadow-inset);position:relative;overflow:hidden;color:var(--color-text)}.hexagram-composer:before{content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(139,105,20,.03) 0%,transparent 70%);pointer-events:none}.hexagram-composer h3{margin:0 0 var(--spacing-xl) 0;text-align:center;position:relative;z-index:1}.hexagram-slots{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);margin:var(--spacing-xxl) 0}.gua-slot-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm)}.slot-label{font-size:var(--font-size-medium);color:var(--color-text-secondary);font-weight:var(--font-weight-bold);text-shadow:1px 1px 1px rgba(0,0,0,.05)}.gua-slot{min-width:120px;min-height:100px;border:2px dashed var(--color-border);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-bg) 0%,var(--color-bg-light) 100%);transition:var(--transition);position:relative}.gua-slot:before{content:"☯";position:absolute;font-size:40px;opacity:.08;color:var(--color-primary);pointer-events:none}.gua-slot.upper-slot.filled,.gua-slot.lower-slot.filled{border-style:solid;border-color:var(--color-primary);background:linear-gradient(135deg,var(--color-bg) 0%,var(--color-bg-lighter) 100%);box-shadow:var(--shadow-md),var(--shadow-inset)}.selected-gua{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);cursor:pointer;padding:var(--spacing-sm);position:relative;width:100%;height:100%}.remove-gua-btn{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;border:1px solid var(--color-border);background:var(--color-bg-light);color:var(--color-primary);font-size:var(--font-size-medium);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.remove-gua-btn:hover{background:var(--color-bg-lighter);border-color:var(--color-primary);transform:scale(1.1)}.gua-icon{font-size:var(--font-size-xxl)}.gua-name{font-size:var(--font-size-large);font-weight:700;color:var(--color-primary);text-shadow:1px 1px 1px rgba(0,0,0,.05)}.empty-slot{color:var(--color-text-tertiary);font-size:var(--font-size-small);text-align:center;line-height:1.4;cursor:pointer}.gua-slot.empty:hover{border-color:var(--color-primary);background:linear-gradient(135deg,var(--color-bg) 0%,var(--color-bg-lighter) 100%)}.slot-connector{font-size:28px;font-weight:700;color:var(--color-primary);margin-top:var(--spacing-xxl);opacity:.7;text-shadow:1px 1px 2px rgba(0,0,0,.1)}.available-guas-list{margin-bottom:var(--spacing-xxl);position:relative;z-index:1}.no-guas-hint{text-align:center;color:var(--color-text-secondary);padding:var(--spacing-xl);font-size:var(--font-size-medium);background:linear-gradient(135deg,var(--color-bg-light) 0%,var(--color-bg-lighter) 100%);border-radius:var(--radius-md);border:1px solid var(--color-border)}.list-label{font-size:var(--font-size-medium);color:var(--color-text-secondary);margin-bottom:var(--spacing-md);font-weight:var(--font-weight-bold);text-shadow:1px 1px 1px rgba(0,0,0,.05)}.guas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-sm);justify-items:stretch}.available-gua-item{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-md) var(--spacing-sm);background:linear-gradient(135deg,var(--color-bg) 0%,var(--color-bg-light) 100%);border:2px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);position:relative;min-width:0;box-shadow:0 1px 3px #00000014}.available-gua-item:before{content:"☯";position:absolute;top:2px;right:2px;font-size:var(--font-size-small);opacity:.15;color:var(--color-primary);pointer-events:none}.available-gua-item:hover:not(.used){border-color:var(--color-primary);background:linear-gradient(135deg,var(--color-bg) 0%,var(--color-bg-lighter) 100%);transform:translateY(-2px);box-shadow:var(--shadow-md)}.available-gua-item.selected{border-color:var(--color-primary);background:linear-gradient(135deg,var(--color-bg) 0%,var(--color-bg-lighter) 100%);box-shadow:var(--shadow-lg),var(--shadow-inset)}.available-gua-item.available{cursor:pointer}.available-gua-item.available:hover{border-color:var(--color-primary);background:linear-gradient(135deg,var(--color-bg) 0%,var(--color-bg-lighter) 100%);transform:translateY(-2px);box-shadow:var(--shadow-md)}.gua-icon-small{font-size:var(--font-size-xl)}.gua-name-small{font-size:var(--font-size-medium);font-weight:var(--font-weight-bold);color:var(--color-text-secondary);text-shadow:1px 1px 1px rgba(0,0,0,.05)}.usage-tag{position:absolute;top:-8px;right:-8px;background:var(--color-primary);color:var(--color-bg);font-size:18px;padding:2px var(--spacing-xs);border-radius:10px;font-weight:700;box-shadow:0 1px 3px #0003}.clear-button{margin-top:var(--spacing-md);font-size:var(--font-size-medium)}.hexagram-result{margin-top:var(--spacing-xxl)}.hexagram-result:before{content:"☯";position:absolute;top:10px;right:10px;font-size:80px;opacity:.08;color:var(--color-primary);pointer-events:none}.result-header{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.result-icon{font-size:var(--font-size-xl);font-weight:700;color:var(--color-primary);text-shadow:1px 1px 2px rgba(0,0,0,.1)}.result-title{font-size:var(--font-size-large);font-weight:700;color:var(--color-primary);text-shadow:1px 1px 2px rgba(0,0,0,.1)}.hexagram-display{text-align:center}.hexagram-number{font-size:var(--font-size-medium);color:var(--color-text-secondary);margin-bottom:var(--spacing-sm);position:relative;z-index:1}.hexagram-name-large{font-size:var(--font-size-xxl);margin-bottom:var(--spacing-md)}.hexagram-description{font-size:var(--font-size-small);line-height:var(--line-height);margin-bottom:var(--spacing-md);white-space:pre-line;position:relative;z-index:1}.hexagram-meaning{font-size:var(--font-size-medium);line-height:1.6;color:var(--color-text-secondary);font-style:italic;border-top:1px solid var(--color-border);padding-top:var(--spacing-md);margin-top:var(--spacing-md);position:relative;z-index:1}.hexagram-vernacular{margin-top:var(--spacing-lg);padding-top:var(--spacing-lg);border-top:1px solid var(--color-border)}.vernacular-title{font-size:var(--font-size-small);margin-bottom:var(--spacing-sm);position:relative;z-index:1}.vernacular-content{font-size:19px;line-height:var(--line-height);text-align:left;white-space:pre-line;position:relative;z-index:1}.level-display{background:linear-gradient(135deg,var(--color-bg-light) 0%,var(--color-bg) 100%);border:2px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-xl);margin:var(--spacing-xl) 0;box-shadow:var(--shadow-sm),var(--shadow-inset);position:relative;overflow:hidden;color:var(--color-text)}.level-display:before{content:"☯";position:absolute;top:10px;right:10px;font-size:60px;opacity:.08;color:var(--color-primary);pointer-events:none}.level-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md);gap:var(--spacing-md)}.level-number{font-size:var(--font-size-xl);font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.1);color:var(--color-primary)}.level-nav-button{min-width:100px;font-size:var(--font-size-medium)}.level-nav-button:hover:not(.disabled){transform:translateY(-1px);box-shadow:var(--shadow-md)}.target-hexagram{text-align:center}.target-label{font-size:var(--font-size-medium);color:var(--color-text-secondary);margin-bottom:var(--spacing-sm)}.target-name{font-size:var(--font-size-xxl);margin-bottom:var(--spacing-sm)}.target-hint{font-size:var(--font-size-small);color:var(--color-text-secondary);margin-top:var(--spacing-sm)}.taiji-container{display:inline-flex;align-items:center;justify-content:center}.taiji-symbol{animation:rotate-slow 20s linear infinite;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));display:block}@keyframes rotate-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.bagua-symbol{opacity:.1;position:absolute;pointer-events:none}.bagua-svg{width:100%;height:100%}.bagua-lines{opacity:.3}.bagua-background{position:fixed;width:400px;height:400px;opacity:.03;pointer-events:none;z-index:0;animation:rotate-very-slow 60s linear infinite}@keyframes rotate-very-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.bagua-background.top-left{top:-100px;left:-100px;animation:rotate-very-slow 60s linear infinite}.bagua-background.top-right{top:-100px;right:-100px;animation:rotate-very-slow 60s linear infinite reverse}.bagua-background.bottom-left{bottom:-100px;left:-100px;animation:rotate-very-slow 60s linear infinite reverse}.bagua-background.bottom-right{bottom:-100px;right:-100px;animation:rotate-very-slow 60s linear infinite}.app{min-height:100vh;background:var(--color-bg);background-image:radial-gradient(circle at 20% 20%,rgba(139,105,20,.03) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(139,105,20,.03) 0%,transparent 50%);padding:var(--spacing-xl);position:relative;overflow-x:hidden}.app-header{text-align:center;color:var(--color-text-secondary);margin-bottom:var(--spacing-xxl);position:relative;z-index:1;padding:var(--spacing-xl) 0;border-bottom:2px solid var(--color-border-light)}.header-content{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xl);flex-wrap:wrap}.header-taiji{opacity:.8;transition:opacity var(--transition)}.header-taiji:hover{opacity:1}.header-text{flex:1;min-width:200px}.app-header h1{margin:0 0 var(--spacing-sm) 0;letter-spacing:4px;position:relative}.app-header h1:before,.app-header h1:after{content:"☯";font-size:var(--font-size-xl);opacity:.6;margin:0 var(--spacing-sm);color:var(--color-primary)}.subtitle{margin:0;font-size:var(--font-size-small);color:var(--color-text-secondary);font-style:normal;letter-spacing:1px}.game-container{width:100%;max-width:100%;margin:0;padding:0 var(--spacing-xl);position:relative;z-index:1}.game-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-xl);margin-top:var(--spacing-xl);width:100%}.game-left,.game-right{display:flex;flex-direction:column}.app-footer{text-align:center;color:var(--color-text-tertiary);margin-top:var(--spacing-xl);font-size:var(--font-size-small);position:relative;z-index:1;padding:var(--spacing-xl) 0;border-top:2px solid var(--color-border-light)}@media(max-width:1024px){.game-content{grid-template-columns:1fr}}@media(max-width:768px){.app-header h1{font-size:var(--font-size-xl)}}