/* the canopy receiver picture: live LED, ping ripples, and the data-log pop-up (receiver-ping.js) */
.rx-box,figure.pic.rx-live .rx-box,figure.beat-pic.rx-live .rx-box{position:relative;display:block;cursor:pointer;outline:none;border-radius:inherit;overflow:hidden}
figure.pic.rx-live .rx-box:focus-visible,figure.beat-pic.rx-live .rx-box:focus-visible{box-shadow:0 0 0 3px #ffd66b}
.rx-box > img,figure.pic.rx-live .rx-box img,figure.beat-pic.rx-live .rx-box img{display:block;width:100%;height:auto}
.rx-led{position:absolute;width:1.4%;padding-top:1.4%;border-radius:50%;background:#7fdc8f;box-shadow:0 0 3px 1px rgba(92,255,122,.5),0 0 8px 3px rgba(92,255,122,.18);animation:rxBlink 2.8s ease-in-out infinite;transform:translate(-50%,-50%);pointer-events:none}
.rx-led.fast{animation-duration:.5s}
@keyframes rxBlink{0%,100%{opacity:1}50%{opacity:.15}}
.rx-rip{position:absolute;width:0;height:0;pointer-events:none}
.rx-rip b{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border:2px solid rgba(255,214,107,.95);border-radius:50%;opacity:0;transform:scale(1)}
.rx-rip.go b{animation:rxRip 1.5s ease-out forwards}
.rx-rip.go b:nth-child(2){animation-delay:.3s}.rx-rip.go b:nth-child(3){animation-delay:.6s}
@keyframes rxRip{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(28)}}
.rx-hint{position:absolute;left:12px;bottom:12px;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.62);color:#ffd66b;font:800 11px/1 'Archivo',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;pointer-events:none;backdrop-filter:blur(6px)}
figure.pic.rx-live .rx-box:hover .rx-hint,figure.beat-pic.rx-live .rx-box:hover .rx-hint{background:rgba(0,0,0,.8)}
/* pop-up */
.rx-pop{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(6,10,8,.72);backdrop-filter:blur(6px)}
.rx-pop.on{display:flex}
body.rx-open{overflow:hidden}
.rx-sheet{width:min(720px,100%);max-height:min(82vh,760px);display:flex;flex-direction:column;background:#0f1512;color:#e9f0ea;border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden;font-family:'Archivo',system-ui,sans-serif;animation:rxIn .25s ease-out}
@keyframes rxIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.rx-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px 10px}
.rx-head b{display:block;font-size:15px;letter-spacing:.08em}
.rx-head small{display:block;margin-top:4px;color:rgba(233,240,234,.6);font-size:12px}
.rx-on{color:#5cff7a;font-weight:800;letter-spacing:.08em}
.rx-on::before{content:"";display:inline-block;width:7px;height:7px;margin:0 6px 1px 0;border-radius:50%;background:#5cff7a;box-shadow:0 0 8px #5cff7a;animation:rxBlink 1.6s infinite}
.rx-x{appearance:none;border:0;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:24px;line-height:1;cursor:pointer;flex:none}
.rx-x:hover{background:rgba(255,255,255,.2)}
.rx-stats{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 12px}
.rx-stats span{flex:1 1 90px;position:relative;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.06);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(233,240,234,.6)}
.rx-stats b{display:block;font-size:18px;color:#fff;letter-spacing:0;margin-bottom:2px}
.rx-stats .rx-tw{cursor:pointer}
.rx-stats .rx-tw em{display:none;position:absolute;right:8px;top:8px;font:800 9px/1 'Archivo',sans-serif;color:#5cff7a;font-style:normal;letter-spacing:.1em}
.rx-stats .rx-tw em{display:block;color:rgba(233,240,234,.4)}.rx-stats .rx-tw.live em{color:#5cff7a}
.rx-log{list-style:none;margin:0;padding:6px 10px 10px;overflow:auto;flex:1 1 auto;min-height:220px;background:#090d0b;font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;border-top:1px solid rgba(255,255,255,.08)}
.rx-log li{display:grid;grid-template-columns:64px 34px 1fr;gap:8px;padding:4px 6px;border-radius:6px;animation:rxLine .3s ease-out}
@keyframes rxLine{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.rx-log time{color:rgba(233,240,234,.45)}
.rx-log i{font-style:normal;font-weight:800;letter-spacing:.08em;color:#5cff7a}
.rx-log .d-out i{color:#ffd66b}
.rx-log .k-fam span{color:#bfe8ff}.rx-log .k-ppl span{color:#dcd4ff}.rx-log .k-animal span{color:#ffd0a6}.rx-log .k-wx span{color:#c9f7d2}.rx-log .k-pwr span{color:rgba(233,240,234,.7)}.rx-log .k-node span{color:rgba(233,240,234,.85)}.rx-log .d-out span{color:#ffe9b3}
.rx-foot{padding:8px 18px 12px;font-size:11px;color:rgba(233,240,234,.45);letter-spacing:.04em}
@media (max-width:620px){.rx-pop{padding:0;align-items:flex-end}.rx-sheet{max-height:86vh;border-radius:18px 18px 0 0}.rx-log li{grid-template-columns:58px 30px 1fr;font-size:12px}}
/* the 03 · Trees beat: the whole scene, edge to edge on a phone — you're looking at the real tree, forest around it */
figure.beat-pic.rx-live{background:#0f1512!important}
figure.beat-pic.rx-live .rx-box img{max-height:none!important;object-fit:contain}
@media (max-width:640px){figure.beat-pic.rx-live{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-radius:0!important;border-left:0!important;border-right:0!important}}