/* Ref Nav pop-up page (popup.php): features, Open Source steps, and the "Try it now!" box. The panel itself is refnav/refnav.css. */
.rn-feats{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;margin:0 0 10px}
.rn-feat{display:flex;gap:13px;align-items:flex-start;padding:14px 16px;border-radius:12px;background:var(--pp-card);
  border:1px solid color-mix(in srgb,var(--a) 20%,transparent)}
.rn-feat h4{margin:1px 0 4px}
.rn-feat p{margin:0;font-size:14px;line-height:1.5;color:var(--pp-mut)}
.rn-feat-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;
  background:color-mix(in srgb,var(--a) 16%,transparent);color:var(--pp-acc)}
.rn-feat-ic svg{width:19px;height:19px;fill:currentColor}

/* Open Source */
.rn-os li{line-height:1.55}
.rn-os code{font:500 .88em/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:1px 6px;border-radius:5px;background:var(--pp-chip)}
.rn-code{margin:10px 0 4px;padding:12px 14px;border-radius:10px;overflow-x:auto;background:var(--pp-chip);box-shadow:inset 0 0 0 1px var(--pp-line);
  font:500 12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--pp-ink)}
.rn-code code{padding:0;background:none;font:inherit}

/* Try it now! */
.rn-try{margin:30px 0 8px;text-align:center}
.rn-try h3{margin:0 0 16px}

/* the rotating four-colour border (Jesse / Chester, codepen.io/Chester/pen/QPoyjN), around both buttons */
.rn-rainbow{position:relative;z-index:0;display:inline-flex;gap:18px;align-items:center;justify-content:center;
  padding:26px 34px;border-radius:12px;overflow:hidden}
.rn-rainbow::before{content:"";position:absolute;z-index:-2;left:-50%;top:-50%;width:200%;height:200%;
  background-color:#399953;background-repeat:no-repeat;
  background-size:50% 50%,50% 50%;background-position:0 0,100% 0,100% 100%,0 100%;
  background-image:linear-gradient(#399953,#399953),linear-gradient(#fbb300,#fbb300),linear-gradient(#d53e33,#d53e33),linear-gradient(#377af5,#377af5);
  animation:rnRotate 4s linear infinite}
.rn-rainbow::after{content:"";position:absolute;z-index:-1;left:6px;top:6px;width:calc(100% - 12px);height:calc(100% - 12px);
  background:var(--pp-bg);border-radius:7px}
@keyframes rnRotate{100%{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.rn-rainbow::before{animation-duration:12s}}

/* the two demo buttons: the inline trigger, sized up */
.rn-rainbow .rn-try-btn{--rn-acc:var(--pp-acc);font-size:22px;padding:12px 22px;gap:10px;border-radius:10px;min-width:118px;justify-content:center}
.rn-rainbow .rn-try-btn svg{width:26px;height:26px}
.rn-rainbow .rn-try-btn:hover{transform:translateY(-2px)}
.rn-count{font-variant-numeric:tabular-nums}
@media (max-width:480px){.rn-rainbow{gap:12px;padding:20px 22px}.rn-rainbow .rn-try-btn{font-size:19px;min-width:96px;padding:10px 16px}}