*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#0f0f1a;color:#e0e0e0;min-height:100vh;display:flex;justify-content:center}#app{max-width:1200px;width:100%;padding:24px 16px}header{text-align:center;margin-bottom:24px}h1{font-size:1.6rem;color:#fff;margin-bottom:4px}.subtitle{font-size:.85rem;color:#888}.layout{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}.how-it-works{background:#1a1a2e;border:1px solid #2a2a3e;border-radius:8px;padding:20px 24px;font-size:.85rem;line-height:1.6;color:#aaa;max-height:calc(100vh - 80px);overflow-y:auto;position:sticky;top:24px}.how-it-works h2{color:#fff;font-size:1.1rem;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #2a2a3e}.how-it-works h3{color:#c4b5fd;margin:16px 0 6px;font-size:.9rem}.how-it-works h3:first-of-type{margin-top:0}.how-it-works ul,.how-it-works ol{margin-left:20px}.how-it-works li{margin-bottom:4px}.play-area{display:flex;flex-direction:column;gap:16px;align-items:stretch}.mode-toggle{display:flex;background:#12121f;border:1px solid #2a2a3e;border-radius:8px;padding:4px;gap:4px}.mode-btn{flex:1;background:transparent;color:#888;border:none;padding:8px 16px;border-radius:6px;font-size:.9rem;cursor:pointer;transition:all .15s}.mode-btn:hover{color:#fff;background:#ffffff0a}.mode-btn.active{background:#7c3aed;color:#fff}.gen-selector{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}.gen-label{color:#888;font-size:.8rem;margin-right:6px;width:100%;text-align:center}.gen-btn{background:#1a1a2e;border:1px solid #333;color:#aaa;padding:6px 10px;border-radius:6px;cursor:pointer;font-size:.85rem;display:flex;flex-direction:column;align-items:center;gap:2px;transition:all .2s;min-width:56px}.gen-btn:hover{border-color:#666;color:#fff}.gen-btn.active{border-color:#7c3aed;background:#1e1040;color:#c4b5fd}.gen-name{font-size:.6rem;opacity:.7}.gen-arrow{color:#444;font-size:.75rem}.board-container{width:100%;aspect-ratio:1 / 1;max-width:360px;align-self:center}#board{width:100%;height:100%}.stats-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px}.stat{background:#1a1a2e;border:1px solid #2a2a3e;border-radius:8px;padding:8px 12px}.stat-label{display:block;font-size:.65rem;color:#666;text-transform:uppercase;letter-spacing:.05em}.stat-value{display:block;font-size:1.1rem;color:#fff;font-weight:600;margin-top:2px}.controls{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}button{background:#7c3aed;color:#fff;border:none;padding:10px 24px;border-radius:8px;font-size:.9rem;cursor:pointer;transition:background .2s}button:hover{background:#6d28d9}button:disabled{background:#333;color:#666;cursor:not-allowed}#reset-btn{background:#2a2a3e}#reset-btn:hover{background:#3a3a4e}.speed-control{display:flex;align-items:center;gap:8px;font-size:.8rem;color:#888}.speed-control input{width:80px;accent-color:#7c3aed}.play-area[data-mode=manual] .ai-only{display:none}.training-viz-details{margin:10px 0 6px;border-top:1px solid #2a2a3e;padding-top:10px}.training-viz-details summary{cursor:pointer;color:#c4b5fd;font-size:.85rem;list-style:none;-webkit-user-select:none;user-select:none}.training-viz-details summary::-webkit-details-marker{display:none}.training-viz-details summary:before{content:"▸";display:inline-block;margin-right:6px;transition:transform .15s;color:#888}.training-viz-details[open] summary:before{transform:rotate(90deg)}.training-viz{margin-top:12px;padding:14px;background:#12121f;border:1px solid #2a2a3e;border-radius:8px;display:grid;gap:10px;justify-items:center}.tv-meta{display:flex;justify-content:space-between;width:100%;font-size:.75rem;color:#aaa}.tv-label{color:#666}.tv-readout-gen,.tv-readout-marbles{color:#c4b5fd;font-weight:600}.tv-chart{width:100%;height:200px;overflow:visible}.tv-chart .tv-curve{fill:none;stroke:#7c3aed;stroke-width:2;stroke-linecap:round}.tv-chart .tv-opt-line{stroke:#fbbf24;stroke-width:1;stroke-dasharray:3 3;opacity:.6}.tv-chart .tv-opt-label{fill:#fbbf24;font-size:9px;opacity:.9}.tv-chart .tv-axis-label{fill:#666;font-size:9px}.tv-chart .tv-gen-marker{fill:#1a1a2e;stroke:#7c3aed;stroke-width:1.5;transition:fill .2s,stroke .2s,r .2s}.tv-chart .tv-gen-marker.hit{fill:#c084fc;stroke:#e9d5ff}.tv-chart .tv-tick{stroke:#444;stroke-width:1}.tv-chart .tv-gen-label{fill:#888;font-size:9px}.tv-chart .tv-cursor{fill:#fbbf24;stroke:#fef3c7;stroke-width:1.5;filter:drop-shadow(0 0 4px rgba(251,191,36,.8))}.tv-chart .tv-cursor.settled{animation:tv-settled 1.4s ease-in-out infinite}@keyframes tv-settled{0%,to{filter:drop-shadow(0 0 3px rgba(251,191,36,.6))}50%{filter:drop-shadow(0 0 9px rgba(251,191,36,1))}}.tv-legend{font-size:.7rem;color:#666;text-align:center}.training-stats{background:#12121f;border:1px solid #2a2a3e;border-radius:8px;padding:10px 14px;margin:10px 0}.training-stat-row{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.04)}.training-stat-row:last-child{border-bottom:none}.training-stat-row span:first-child{color:#888}.training-stat-row span:last-child{color:#c4b5fd;font-weight:500}.hole{fill:#1a1a2e;stroke:#333;stroke-width:1}.marble{fill:#8b5cf6;stroke:#a78bfa;stroke-width:1;transition:opacity .3s;cursor:default}.marble.selected{fill:#c084fc;stroke:#e9d5ff;stroke-width:2;filter:drop-shadow(0 0 6px rgba(192,132,252,.6))}.marble.jumpable{stroke:#fbbf24;stroke-width:2;filter:drop-shadow(0 0 5px rgba(251,191,36,.7));animation:jumpable-pulse 1.4s ease-in-out infinite}@keyframes jumpable-pulse{0%,to{filter:drop-shadow(0 0 3px rgba(251,191,36,.5))}50%{filter:drop-shadow(0 0 8px rgba(251,191,36,.9))}}.hole.target-hole{fill:#2a2a4e;stroke:#7c3aed;stroke-width:2;stroke-dasharray:4 3}.marble.removing{opacity:0}.marble.jumping{transition:cx .3s ease-in-out,cy .3s ease-in-out}@media (max-width: 900px){.layout{grid-template-columns:1fr;gap:20px}.play-area{order:-1}.how-it-works{position:static;max-height:none;overflow-y:visible}}