.interactive-ball-layout{display:grid;grid-template-columns:minmax(320px,.92fr) 1.08fr;align-items:center;gap:68px}.interactive-ball-stage{position:relative;max-width:560px;margin:auto}.interactive-ball-stage>img{display:block;width:100%;filter:drop-shadow(0 26px 24px rgba(0,0,0,0.4))}.hotspot{position:absolute;width:12%;aspect-ratio:1;border-radius:50%;border:3px solid rgba(255,255,255,.95);background:transparent;box-shadow:0 0 0 0 rgba(18,62,107,.25);cursor:pointer;transform:translate(-50%,-50%);transition:.2s}.hotspot:hover,.hotspot.active{box-shadow:0 0 0 12px rgba(18,62,107,.16);scale:1.08}.hotspot.follow{left:50%;top:25%}.hotspot.right{left:74%;top:50%}.hotspot.draw{left:50%;top:75%}.hotspot.left{left:26%;top:50%}.hotspot.center{left:50%;top:50%}.spin-intro{font-size:1.12rem;color:var(--dim)}.spin-controls{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0}.spin-controls button{border:1px solid var(--line);background:var(--navy3);color:var(--ivory);padding:11px 14px;font:700 .68rem Arial;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;border-color:var(--line)}.spin-controls button.active{background:var(--gold);color:#07182c;border-color:var(--gold)}.spin-panel{display:grid;grid-template-columns:12px 1fr;gap:20px;padding:25px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.spin-color{border-radius:12px;background:var(--green)}.spin-panel h3{font-size:2rem;margin:.2rem 0 .5rem}.spin-panel p{margin:.2rem 0 1rem;color:var(--dim)}.text-link{font:700 .72rem Arial;text-transform:uppercase;letter-spacing:.1em;text-decoration:none}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.process-grid article{background:var(--navy3);padding:30px;min-height:270px}.process-grid span{font:700 .72rem Arial;color:var(--blue2);letter-spacing:.12em}.daily{background:var(--navy2)}.daily-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.challenge-meta{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}.challenge-meta span{font:700 .66rem Arial;text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--line);padding:8px 10px;background:var(--navy3)}.mini-table{position:relative;aspect-ratio:2/1;background:#176044;border:18px solid #4f2d19;border-radius:12px;box-shadow:var(--shadow);overflow:hidden}.mini-pocket{position:absolute;width:30px;height:30px;background:#07130e;border-radius:50%;transform:translate(-50%,-50%)}.p1{left:0;top:0}.p2{left:50%;top:0}.p3{left:100%;top:0}.p4{left:0;top:100%}.p5{left:50%;top:100%}.p6{left:100%;top:100%}.mini-cue,.mini-object,.mini-target{position:absolute;width:28px;height:28px;border-radius:50%;transform:translate(-50%,-50%);z-index:3}.mini-cue{left:31%;top:68%;background:#fff;border:1px solid #d6dfe5}.mini-object{left:59%;top:42%;background:#e8c333;border:2px solid #fff}.mini-target{left:48%;top:50%;width:90px;height:70px;border:3px dashed rgba(255,255,255,.85);border-radius:50%;background:transparent}.mini-path{position:absolute;height:3px;background:rgba(255,255,255,.9);transform-origin:left center;z-index:2}.path-a{left:31%;top:68%;width:34%;transform:rotate(-28deg)}.path-b{left:59%;top:42%;width:43%;transform:rotate(-35deg)}
@media(max-width:900px){.interactive-ball-layout,.daily-grid{grid-template-columns:1fr}.process-grid{grid-template-columns:1fr 1fr}.interactive-ball-stage{max-width:430px}}
@media(max-width:620px){.process-grid{grid-template-columns:1fr}.interactive-ball-layout{gap:35px}.mini-table{border-width:12px}}

/* ── DARK THEME OVERRIDES ─────────────────────────── */
.legend-row { border-bottom-color:var(--line); }
.legend-row h4 { color:var(--ivory) !important; }
.legend-row p { color:var(--dim) !important; }
.contact-label,.control-readout,.spin-description { color:var(--ivory) !important; }
.contact-point { border-color:rgba(240,232,218,0.5) !important; }
.contact-point.active { outline-color:var(--gold) !important; }

/* ── DARK THEME OVERRIDES ── */
.spin-intro { color: var(--dim) !important; }
.spin-panel p { color: var(--dim) !important; }
.spin-panel h3 { color: var(--ivory) !important; }
.process-grid { background: var(--line); }
.section.daily, .daily { background: var(--navy2) !important; }
.challenge-meta span { 
  color: var(--ivory) !important; 
  border-color: var(--line) !important;
  background: var(--navy3) !important;
}