/* ---- Penny, the website's tour guide (Oct 30, 2026) -------------------------------------
   The same Penny as in the program: a gold coin with a pink bow. She waits in the corner,
   says hello, and on request walks (or rolls) over to things and points at them.
   Her faces, bob, blink, hop, roll and flips are the program's own CSS; the bubble and the
   ring use this site's colors and fonts from style.css. Everything here is added by penny.js. */
:root{--penny-ring:#E2A72A;--penny-ring-glow:rgba(244,190,58,.45);--penny-label:#9A6A0C}
@media (prefers-color-scheme:dark){:root{--penny-label:#F4BE3A}}

/* ---- Penny herself ---- */
#penny{--pw:88px;position:fixed;left:0;top:0;z-index:9000;width:var(--pw);height:calc(var(--pw) * 140 / 132);
  margin:0;padding:0;border:0;background:none;cursor:pointer;display:block;opacity:0;
  transform:translate3d(-300px,-300px,0);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#penny.ready{opacity:1}
@media (max-width:600px){#penny{--pw:60px}}
#penny .p-roll,#penny .p-dir{display:block;width:100%;height:100%}
#penny .p-dir{perspective:400px}
#penny .penny-svg{width:100%;height:100%;filter:drop-shadow(0 4px 6px rgba(20,40,60,.18))}
#penny:focus{outline:none}
#penny:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:50%}
#penny.p-enter .p-roll{animation:pEnter .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes pEnter{from{opacity:0;transform:translateY(30px) scale(.4)}to{opacity:1;transform:none}}
/* "Not now": she tucks into a small round button in the corner */
#penny.tucked{width:52px;height:52px;border-radius:50%;background:var(--surface);border:2px solid var(--penny-ring);
  box-shadow:0 6px 18px rgba(20,40,60,.22)}
#penny.tucked .p-dir{display:flex;align-items:center;justify-content:center}
#penny.tucked .penny-svg{width:78%;height:78%;filter:none}
@media (max-width:600px){#penny.tucked{width:46px;height:46px}}

/* ---- the program's Penny animations ---- */
.penny-svg{display:block;overflow:visible}
.penny-svg .p-bob{animation:pBob 2.6s ease-in-out infinite;transform-origin:60px 110px}
.penny-svg .p-eyes{animation:pBlink 4.2s infinite;transform-origin:60px 55px}
.penny-svg .p-arm{transform-origin:96px 70px;transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.penny-svg .p-foot{transition:transform .2s}
.penny-walk .penny-svg .p-bob{animation:pHop .32s ease-in-out infinite}
.penny-walk .penny-svg .p-foot.l{animation:pStep .32s ease-in-out infinite}
.penny-walk .penny-svg .p-foot.r{animation:pStep .32s ease-in-out infinite reverse}
.penny-wave .penny-svg .p-arm{animation:pWave .5s ease-in-out 3}
@keyframes pBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes pHop{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(3deg)}}
@keyframes pStep{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes pBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes pWave{0%,100%{transform:rotate(-70deg)}50%{transform:rotate(-30deg)}}
.penny-cheer .penny-svg .p-bob{animation:pCheer .5s ease-in-out 2}
@keyframes pCheer{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-16px) scale(1.06)}}
/* her faces: one shows at a time, set by data-face on #penny */
.penny-svg .pf{display:none}
.penny-svg .pf-happy{display:inline}
[data-face] .penny-svg .pf-happy{display:none}
[data-face="happy"] .penny-svg .pf-happy,[data-face="laugh"] .penny-svg .pf-laugh,[data-face="sad"] .penny-svg .pf-sad,
[data-face="surprised"] .penny-svg .pf-surprised,[data-face="think"] .penny-svg .pf-think,[data-face="love"] .penny-svg .pf-love,
[data-face="sleep"] .penny-svg .pf-sleep,[data-face="wink"] .penny-svg .pf-wink,[data-face="cool"] .penny-svg .pf-cool{display:inline}
.penny-svg .p-zzz text{animation:pZ 2.4s ease-in-out infinite;opacity:0}
.penny-svg .p-zzz text:nth-child(2){animation-delay:.6s}.penny-svg .p-zzz text:nth-child(3){animation-delay:1.2s}
@keyframes pZ{0%{opacity:0;transform:translate(0,6px)}30%{opacity:1}100%{opacity:0;transform:translate(6px,-8px)}}
[data-face="sleep"] .penny-svg .p-bob{animation:pBreathe 3.2s ease-in-out infinite}
@keyframes pBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03,.98)}}
[data-face="laugh"] .penny-svg .p-bob{animation:pShake .18s ease-in-out infinite}
@keyframes pShake{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(-2px)}}
/* rolling like a coin on a long trip; little antics when nobody's busy */
.penny-rolling .penny-svg .p-foot,.penny-rolling .penny-svg .p-arm,.penny-rolling .penny-svg .p-arm2{opacity:0}
.penny-rolling .penny-svg .p-bob{animation:none}
.penny-svg .p-foot,.penny-svg .p-arm,.penny-svg .p-arm2{transition:opacity .2s,transform .45s cubic-bezier(.3,1.4,.5,1)}
.penny-flip .penny-svg{animation:pFlip .9s ease-in-out}
@keyframes pFlip{0%{transform:translateY(0) rotateY(0)}50%{transform:translateY(-26px) rotateY(540deg)}100%{transform:translateY(0) rotateY(1080deg)}}
.penny-look .penny-svg .pf-happy .p-eyes{animation:pLook 2.2s ease-in-out}
@keyframes pLook{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}60%{transform:translateX(5px)}}
.penny-spin .penny-svg{animation:pSpin .7s ease-in-out}
@keyframes pSpin{to{transform:rotate(360deg)}}

/* ---- her speech bubble ---- */
#pennyBubble{position:fixed;left:0;top:0;z-index:9002;width:300px;max-width:calc(100vw - 16px);box-sizing:border-box;
  background:var(--surface,#fff);color:var(--ink,#15201E);border:2px solid var(--penny-ring);border-radius:14px;
  padding:11px 14px 12px;box-shadow:0 14px 34px rgba(20,40,60,.22);font-family:var(--sans,system-ui,sans-serif);
  text-align:left;opacity:0;visibility:hidden;transform:scale(.9);transform-origin:var(--ox,50%) var(--oy,100%);
  transition:opacity .16s,transform .16s,visibility 0s linear .16s}
#pennyBubble.on{opacity:1;visibility:visible;transform:none;
  transition:opacity .18s,transform .26s cubic-bezier(.3,1.6,.5,1),visibility 0s}
@media (max-width:600px){#pennyBubble{width:262px;padding:10px 12px 11px}}
#pennyBubble .pb-name{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 3px;
  font-family:var(--mono,monospace);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--penny-label)}
#pennyBubble .pb-count{letter-spacing:.06em;color:var(--muted)}
#pennyBubble .pb-text{margin:0;font-size:15.5px;line-height:1.45;color:var(--ink);overflow-wrap:break-word}
@media (max-width:600px){#pennyBubble .pb-text{font-size:15px}}
#pennyBubble .pb-btns{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
#pennyBubble .pb-btns:empty{display:none}
#pennyBubble .pb-btns button,#pennyBubble .pb-btns a{font:inherit;font-weight:700;font-size:14px;line-height:1.2;padding:7px 12px;
  border-radius:9px;border:1px solid var(--accent);background:var(--accent);color:var(--surface);cursor:pointer;text-decoration:none}
#pennyBubble .pb-btns a:hover,#pennyBubble .pb-btns button:hover{filter:brightness(1.1);border-bottom-color:var(--accent)}
#pennyBubble .pb-btns .ghost{background:var(--surface);color:var(--accent)}
#pennyBubble .pb-btns .plain{background:var(--sunk);border-color:var(--line);color:var(--ink)}
#pennyBubble .pb-btns .stop{margin-left:auto}
#pennyBubble .pb-btns [disabled]{opacity:.45;cursor:default;filter:none}
#pennyBubble .pb-btns button:focus-visible,#pennyBubble .pb-btns a:focus-visible{outline:2px solid var(--penny-ring);outline-offset:2px}
/* the little tail that points back at Penny */
#pennyBubble .pb-tail{position:absolute;width:14px;height:14px;background:var(--surface,#fff);border:2px solid var(--penny-ring);
  transform:rotate(45deg);border-top-color:transparent;border-left-color:transparent}
#pennyBubble.tail-b .pb-tail{bottom:-9px;left:var(--tail,50%);margin-left:-7px}
#pennyBubble.tail-t .pb-tail{top:-9px;left:var(--tail,50%);margin-left:-7px;transform:rotate(225deg)}
#pennyBubble.tail-l .pb-tail{left:-9px;top:var(--tail,50%);margin-top:-7px;transform:rotate(135deg)}
#pennyBubble.tail-r .pb-tail{right:-9px;top:var(--tail,50%);margin-top:-7px;transform:rotate(-45deg)}

/* ---- the pulsing ring around whatever she points at ---- */
#pennyRing{position:fixed;left:0;top:0;z-index:8999;pointer-events:none;border:3px solid var(--penny-ring);border-radius:12px;
  opacity:0;transition:opacity .2s;box-shadow:0 0 0 3px var(--penny-ring-glow)}
#pennyRing.on{opacity:1;animation:pRingPulse 1.4s ease-in-out infinite}
@keyframes pRingPulse{0%,100%{box-shadow:0 0 0 2px var(--penny-ring-glow)}50%{box-shadow:0 0 0 11px rgba(244,190,58,0)}}

@media (prefers-reduced-motion:reduce){
  .penny-svg *,.penny-svg,#penny .p-roll{animation:none!important}
  #penny,#penny .p-roll{transition:none!important}
  #pennyBubble,#pennyBubble.on{transition:none}
  #pennyRing.on{animation:none}
}
@media print{#penny,#pennyBubble,#pennyRing{display:none!important}}