/* Peeks: v2 scene extras. Page-specific classes only (pe-*), plus lime-scoped overrides
   of the device glow/ripple so nothing on this dark page reads blue or purple. */
.cover-peeks .screen-glow { background: radial-gradient(60% 60% at 50% 50%, rgba(233,255,112,0.22), transparent 70%); }
.cover-peeks .ripple { border-color: #E9FF70; }
.cover-peeks .dev-phone { box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 2px 4px rgba(0,0,0,0.5), 0 40px 90px rgba(0,0,0,0.7), 0 0 110px rgba(233,255,112,0.10); }
.cover-peeks .dev-mac { background: #15151A; box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 2px 4px rgba(0,0,0,0.5), 0 40px 90px rgba(0,0,0,0.7), 0 0 110px rgba(233,255,112,0.10); }
.cover-peeks .dev-mac .dev-bar { background: linear-gradient(180deg, #2A2A27, #1E1E1B); border-bottom-color: rgba(255,255,255,0.08); }
.cover-peeks .dev-mac .dev-url { background: #111110; border-color: rgba(255,255,255,0.08); color: #9A9A90; }
.cover-peeks .cv-btn.ghost { border-color: rgba(255,255,255,0.18); }

/* coded transcript page (research) */
.pe-page { position: absolute; width: 330px; padding: 20px 76px 24px 24px; background: linear-gradient(180deg, #FFFEFA, #F4F1E8); color: #1E1B16;
  box-shadow: 2px 10px 18px rgba(0,0,0,0.45), 0 30px 40px rgba(0,0,0,0.25); will-change: transform; }
.pe-page h6 { margin: 0 0 10px; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #8A8478; display: flex; justify-content: space-between; gap: 8px; }
.pe-page p { margin: 0 0 9px; font-size: 12.5px; line-height: 1.5; color: #2A2721; }
.pe-page p b { font-weight: 700; color: #1E1B16; margin-right: 4px; }
.pe-hl { background-image: linear-gradient(180deg, transparent 12%, rgba(255,214,0,0.62) 12% 92%, transparent 92%); background-repeat: no-repeat; background-size: 0% 100%; padding: 0 3px; margin: 0 -3px; }
.pe-hl.org { background-image: linear-gradient(180deg, transparent 12%, rgba(255,107,0,0.5) 12% 92%, transparent 92%); }
.pe-code { position: absolute; right: 8px; font-family: 'Caveat', cursive; font-weight: 700; font-size: 20px; line-height: 1; color: #FF6B00; transform: rotate(-6deg); white-space: nowrap; }

/* swipe gesture legend (feed) */
.pe-g { position: absolute; display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 500; color: #8A8A82; white-space: nowrap; }
.pe-g i { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.16); display: grid; place-items: center; font-style: normal; color: #D8D8D0; font-size: 18px; flex: none; }
.pe-g.on { color: #F7F7F2; }
.pe-g.on i { border-color: #E9FF70; background: rgba(233,255,112,0.16); color: #E9FF70; box-shadow: 0 0 20px rgba(233,255,112,0.35); }
.pe-saved { position: absolute; left: 20px; top: 64px; z-index: 3; font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 24px; letter-spacing: 0.1em; text-transform: uppercase; color: #E9FF70; border: 3px solid #E9FF70; border-radius: 8px; padding: 6px 12px; transform: rotate(-14deg); opacity: 0; }

/* phone video block (both, bias): a plain frame so no fake-face pseudo elements appear */
.pe-video { position: relative; border-radius: 16px; overflow: hidden; background: #111110; }
.pe-vid { position: absolute; inset: -12px; background: #1A1A16 center 22%/cover no-repeat; }
.pe-video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%); z-index: 1; pointer-events: none; }
.pe-blur { position: absolute; inset: 0; z-index: 3; background: rgba(10,10,10,0.42); display: grid; place-items: center; text-align: center; color: #F7F7F2; font-size: 12.5px; line-height: 1.35; padding: 20px; }
.pe-lock { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.45); display: grid; place-items: center; font-size: 15px; margin: 0 auto 8px; background: rgba(0,0,0,0.35); }
.pe-scan { position: absolute; left: 0; right: 0; height: 54px; background: linear-gradient(180deg, transparent, rgba(233,255,112,0.22) 50%, transparent); opacity: 0; pointer-events: none; z-index: 2; }
.pe-field { height: 40px; padding: 0 14px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); font-family: 'DM Mono', monospace; font-size: 12px; color: #F7F7F2; white-space: nowrap; overflow: hidden; display: flex; align-items: center; }

/* daily set thumbs (browse) */
.pe-tb { position: absolute; left: 7px; top: 7px; z-index: 2; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 7px; border-radius: 6px; background: #E9FF70; color: #0A0A0A; opacity: 0; }
.pe-tb.pass { background: #2A2A24; color: #B8B8B0; }
.pk-card.pe-done { outline: 2px solid #E9FF70; outline-offset: -1px; }

/* guardrail switches (bias) */
.pe-tg { position: absolute; display: flex; gap: 18px; align-items: flex-start; width: 440px; }
.pe-sw { width: 52px; height: 30px; border-radius: 15px; background: #2A2A26; position: relative; flex: none; margin-top: 1px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.pe-sw::after { content: ''; position: absolute; left: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: #7A7A72; }
.pe-sw.on { background: #E9FF70; box-shadow: 0 0 22px rgba(233,255,112,0.4); }
.pe-sw.on::after { left: 26px; background: #0A0A0A; }
.pe-tg b { display: block; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 20px; line-height: 1.2; color: #F7F7F2; }
.pe-tg span { display: block; font-size: 13.5px; line-height: 1.4; color: #9A9A90; margin-top: 4px; }
.pf-c3 { background-position: 63% 20%; }