.nn-player{background:#071c32;border-radius:22px;overflow:hidden;color:#eff8ff;box-shadow:0 20px 50px #102e4615}.nn-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 26px;border-bottom:1px solid #284258;font-weight:700;color:#acd0e5}.nn-status{font-size:12px;white-space:nowrap;background:#15394a;padding:7px 12px;border-radius:30px;color:#8fe7dc}.nn-caption{text-align:center;padding:26px 24px 0;min-height:110px}.nf-page .nn-caption h3{margin:0 0 8px;font-size:23px;font-weight:500;color:#7fdfd0}.nf-page .nn-caption p{font-size:15px;margin:0;color:#a9c5d7}.nn-scene{display:block;width:100%;max-width:980px;margin:auto;overflow:visible}.nn-neuron path{fill:none;stroke:#7ab6d4;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.nn-neuron .nn-cell{fill:#174b64;stroke:#85c9dc;stroke-width:2}.nn-nucleus{fill:#8bdddf}.nn-connection{fill:none;stroke:#54cbbc;stroke-width:3;stroke-linecap:round}.nn-impulse{fill:#c8fff2;filter:drop-shadow(0 0 5px #66ffd8)}.nn-training{opacity:0}.nn-scalp{fill:none;stroke:#708ca6;stroke-width:3}.nn-scene text{font-family:Manrope,system-ui,sans-serif;fill:#b5d0e3;font-size:17px}.nn-scene .nn-small{font-size:12px;letter-spacing:1px}.nn-sensor ellipse,.nn-sensor path{fill:#a8e2df;stroke:#e0fff9;stroke-width:2}.nn-wire{fill:none;stroke:#6c9db9;stroke-width:2}.nn-monitor{fill:#0b2c3c;stroke:#517f99;stroke-width:2}.nn-scene .nn-reward{fill:#63ffc0;font-size:25px;font-weight:800;filter:drop-shadow(0 0 7px #54ffad)}.nn-recorded{fill:#aef6eb}.nn-scene .nn-legend{font-size:14px;fill:#93b5c9}.nn-phases{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:16px 28px 24px;text-align:center;font-size:12px;color:#7394ab}.nn-phases span{padding-top:12px;border-top:2px solid #29475c}.nn-phases .is-active{color:#9cebdc;border-color:#60d8ba}.nn-progress{height:3px;background:#19364b}.nn-progress span{display:block;width:100%;height:100%;background:#64d9c2;transform-origin:left;transform:scaleX(0)}.nf-page .nn-note{font-size:12px;line-height:1.6;color:#617a8b;margin:14px 0 0}.nn-section{padding-top:24px}@media(max-width:600px){.nn-header{padding:16px;font-size:14px}.nn-status{font-size:10px;padding:6px 8px}.nn-caption{padding:20px 16px 0;min-height:135px}.nf-page .nn-caption h3{font-size:20px}.nf-page .nn-caption p{font-size:14px}.nn-phases{gap:8px;padding:10px 14px 18px;font-size:10px}.nn-scene{width:100%}}
.nn-grown-branch{fill:#56bbae}.nn-grown-twig{fill:#69cabb;opacity:.85}.nn-growing-tip{fill:#b2ffe6;filter:drop-shadow(0 0 5px #61edc1)}.nn-network-cells .nn-cell{fill:#21566b;stroke:#95dbdf;stroke-width:2}.nn-network-cells .nn-nucleus{fill:#a1e7e5}.nn-scene{max-width:1040px;margin-top:8px}

/* Match the established animation frame while keeping the entire network visible. */
@media(min-width:851px){.nn-player{height:var(--nn-player-height,490px);display:grid;grid-template-rows:auto auto minmax(0,1fr) auto 3px}.nn-caption{min-height:0;padding:18px 24px 8px}.nn-scene{width:100%;height:100%;min-height:0;max-width:none;margin:0;align-self:stretch}.nn-phases{padding:8px 28px 18px}.nn-header{min-height:65px}}
@media(max-width:850px){.nn-caption{min-height:0;padding-bottom:12px}.nn-scene{margin:0 auto}.nn-player{height:auto}}

/* Fluorescence-inspired neuron detail and fine growing arborizations. */
.nn-scene{background:radial-gradient(ellipse at center,#111e20 0%,#09191f 65%,#071c32 100%);border-radius:14px}.nn-grown-branch{fill:#82cd45;filter:drop-shadow(0 0 1.5px #5abc4266)}.nn-grown-twig{fill:#60b543;opacity:.8}.nn-arbor{fill:#55aa49;opacity:.7}.nn-arbor-tip{fill:#ee5f56;filter:url(#nn-soft)}.nn-contact{fill:#fb604f;filter:url(#nn-soft)}.nn-network-cells .nn-cell{fill:url(#nn-soma);stroke:#7dc348;stroke-width:.7;filter:url(#nn-cell-texture)}.nn-network-cells .nn-nucleus{fill:url(#nn-blue);filter:drop-shadow(0 0 3px #39bdf7)}.nn-granule{fill:#deff7d;opacity:.35;filter:url(#nn-soft)}.nn-growing-tip{fill:#cdf684;filter:drop-shadow(0 0 3px #82ec54)}.nn-impulse{fill:#f3ffd8;filter:drop-shadow(0 0 4px #d9ff8c)}

.nn-feedback-flow{display:grid;grid-template-columns:180px minmax(0,1fr) 180px;align-items:center;gap:14px;min-height:0;padding:0 24px;overflow:hidden}.nn-feedback-flow .nn-scene{width:100%;height:100%;min-height:0}.nn-feedback-box{opacity:0;text-align:center;border:1px solid #385c6e;border-radius:12px;padding:14px 12px;background:#102e40}.nn-feedback-box svg{display:block;width:120px;max-width:100%;margin:0 auto 5px}.nn-feedback-box strong{display:block;font-size:14px;color:#a2e8d8;line-height:1.4}.nf-page .nn-feedback-box p{font-size:12px;line-height:1.5;color:#cee0ea;margin:9px 0}.nn-feedback-box small{display:block;font-size:10px;line-height:1.5;color:#91adbd}.nn-reward-monitor{border:5px solid #527285;border-radius:8px;padding:22px 3px;background:#030f18}.nn-burst-reward{color:#63ff9b;font-size:21px;font-weight:800;opacity:.08}.nn-output.is-rewarding .nn-burst-reward{text-shadow:0 0 8px #61ff98,0 0 18px #49ed8e}.nn-output.is-rewarding .nn-reward-monitor{box-shadow:0 0 15px #52ef8b33}.nn-reward-stand{width:45%;height:10px;background:#527285;margin:0 auto 16px;border-radius:0 0 4px 4px}
@media(max-width:1050px) and (min-width:851px){.nn-feedback-flow{grid-template-columns:150px minmax(0,1fr) 150px;gap:8px;padding:0 16px}.nn-feedback-box{padding:10px 8px}}
@media(max-width:850px){.nn-feedback-flow{grid-template-columns:1fr 1fr;gap:12px;padding:6px 18px 16px}.nn-feedback-flow .nn-scene{grid-column:1/-1;grid-row:1;height:auto;max-height:360px}.nn-feedback-box{align-self:stretch}.nn-feedback-box svg{height:80px}.nn-reward-monitor{max-width:160px;margin:auto}.nn-reward-stand{max-width:80px}}

.nn-phases button{font:inherit;color:inherit;background:transparent;border:1px solid #385969;border-top:2px solid #385969;border-radius:7px;padding:9px 6px;cursor:pointer;line-height:1.4}.nn-phases button.is-active{background:#163e49;color:#b3f6de;border-color:#60d8ba}.nn-phases button:hover{background:#1a3c4d;color:#efffff}.nn-phases button:focus-visible{outline:2px solid #a1f4db;outline-offset:3px}.nn-input{position:relative;z-index:1}.nn-feedback-box .nn-external-sensor{position:absolute;right:-84px;top:34%;width:88px;height:60px;max-width:none;margin:0;overflow:visible;pointer-events:none}.nn-sensor-cable{fill:none;stroke:#9fc7cf;stroke-width:2.5}.nn-sensor-readout{fill:none;stroke:#9fffce;stroke-width:3;stroke-dasharray:3 8;opacity:0}.nn-sensor-contact{fill:#87bcb8;stroke:#d0efe8;stroke-width:1.5}.nn-sensor-halo{fill:#73ffb6;opacity:0}.is-recording .nn-sensor-halo{opacity:.35}.is-recording .nn-sensor-contact{fill:#c1ffe3;filter:drop-shadow(0 0 5px #6fffb5)}.is-recording .nn-sensor-readout{opacity:1;stroke-dashoffset:-6}@media(max-width:850px){.nn-feedback-box .nn-external-sensor{left:calc(50% - 44px);right:auto;top:-54px;transform:rotate(-90deg)}.nn-feedback-flow{row-gap:34px}}

/* Reuse the participant portrait from Neurofeedback in Action. */
.nn-feedback-box.nn-input{border:0;background:transparent;padding:0}.nn-person-portrait{position:relative;width:100%;max-width:180px;aspect-ratio:1;margin:0 auto 12px}.nn-person-portrait img{display:block;width:100%;height:100%;object-fit:contain;border-radius:13px}.nn-feedback-box .nn-person-portrait svg{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;pointer-events:none}.nn-person-signal{fill:none;stroke:#a4f4ff;stroke-width:1;stroke-linecap:round;stroke-dasharray:2 10;opacity:0}.nn-input.is-recording .nn-person-signal{opacity:1;filter:drop-shadow(0 0 1px #53dcff)}

/* Reserve enough vertical room for the participant and complete caption. */
@media(min-width:851px){.nn-player{height:auto;min-height:var(--nn-player-height,490px);grid-template-rows:auto auto minmax(320px,1fr) auto 3px}.nn-feedback-flow{padding-top:10px;padding-bottom:16px}.nn-feedback-box.nn-input{align-self:center}}

/* Keep fine neuron detail inexpensive to paint, especially during scrolling. */
.nn-player{contain:layout paint}.nn-grown-branch,.nn-grown-twig,.nn-arbor,.nn-arbor-tip,.nn-contact,.nn-granule,.nn-growing-tip,.nn-impulse,.nn-network-cells .nn-cell,.nn-network-cells .nn-nucleus{filter:none}.nn-grown-branch.nn-firing{fill:#baff75}