:root{--brand-accent:#4c641f;--brand-secondary:#35605a;--brand-tint:#f4f7e6;--brand-soft:#d6e2b0;--brand-highlight:#94b652;--brand-ink:#2c371e;--accent:#4c641f;--second:#35605a;--tint:#f4f7e6;--ink:#2c371e;--brand:#4c641f;--accent-end:#35605a;--paper:#f4f7e6;--app-accent:#4c641f;--app-secondary:#35605a;--app-paper:#f4f7e6;--app-ink:#2c371e;--bs-primary:#4c641f}

/* App identity and shared portfolio. Static, responsive, and readable without JavaScript. */
body{color:var(--brand-ink)}
body .masthead{background:linear-gradient(125deg,var(--brand-tint) 4%,var(--brand-soft) 100%)}
body .detail-section{background:var(--brand-tint)}
body .bg-gradient-primary-to-secondary{background:linear-gradient(115deg,var(--brand-accent),var(--brand-secondary))!important}
body .art-orb,body .masthead-device-mockup:before,body .hero-screen:before,body .hero-art:before,body .hero-media:before,body .camp-figure:before,body .app-art:before{background:linear-gradient(130deg,var(--brand-highlight),var(--brand-accent))}
body #mainNav,body nav.navbar,body .site-header,body>nav.nav,body header.site{border-top:4px solid var(--brand-accent)}
body .navbar-brand,body a.brand{display:inline-flex;align-items:center;gap:12px;max-width:100%;line-height:1.25;vertical-align:middle}
body .navbar-brand img.app-brand-icon,body .brand img.app-brand-icon{display:block;flex:0 0 42px;width:42px;height:42px;margin:0;border-radius:11px;object-fit:cover;border:1px solid #0000000f;box-shadow:0 3px 10px #0000000c}
body .app-identity{display:flex;align-items:center;gap:16px;margin:0 0 24px;text-align:left;color:var(--brand-ink)}
body .app-identity img{width:72px;height:72px;flex:0 0 72px;object-fit:cover;border-radius:19px;border:1px solid #00000010;box-shadow:0 6px 20px #00000012}
body .app-identity span{min-width:0}body .app-identity small{display:block;text-transform:uppercase;letter-spacing:.12em;font:700 .65rem/1.6 system-ui,sans-serif;color:var(--brand-accent)}
body .app-identity strong{display:block;font:700 1.05rem/1.4 system-ui,sans-serif;max-width:28rem}
body .pondd-about{background:var(--brand-tint);color:var(--brand-ink)}
body .pondd-character-stage{border-color:var(--brand-secondary);background:radial-gradient(ellipse at 50% 88%,var(--brand-secondary) 0,var(--brand-ink) 48%,#15161d 85%)}
body .pondd-character-stage:focus-visible,body .pondd-character-pause:focus-visible{outline-color:var(--brand-accent)}
body .app-family{background:linear-gradient(165deg,var(--brand-tint),#fff 80%);padding:80px 24px;max-width:none;margin:0;color:var(--brand-ink);border-top:1px solid var(--brand-soft);text-align:left}
body .app-family-inner{max-width:1140px;margin:auto;padding:0;width:100%}
body .app-family-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px}
body .app-family-kicker{font:750 .72rem/1.5 system-ui,sans-serif;color:var(--brand-accent);letter-spacing:.13em;text-transform:uppercase;margin:0 0 12px}
body .app-family h2{font-size:clamp(2rem,3.5vw,3rem);line-height:1.13;letter-spacing:-.035em;color:var(--brand-ink);margin:0 0 14px}
body .app-family-intro{max-width:570px;color:#4c5664;line-height:1.65;margin:0;font-size:1rem}
body .app-family-directory{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:12px 18px;border:1px solid var(--brand-accent);border-radius:999px;color:var(--brand-accent);font-size:.86rem;font-weight:700;text-decoration:none;background:#fff;min-height:44px}
body .app-family-directory:hover{background:var(--brand-accent);color:#fff}
body .app-family-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0;margin:0}
body .app-family-item{margin:0;padding:20px;border:1px solid #1d2d431c;border-radius:18px;background:#fff;min-width:0;box-shadow:0 4px 18px #15243e04}
body .app-family-item.is-current{border-color:var(--brand-accent);box-shadow:inset 0 3px 0 var(--brand-accent)}
body .app-family-card-top{display:flex;align-items:center;gap:13px;margin:0 0 14px}
body .app-family-card-top img{display:block;width:52px;height:52px;flex:0 0 52px;object-fit:cover;border-radius:13px;border:1px solid #0000000a;margin:0}
body .app-family-card-top>div{min-width:0}
body .app-family h3{color:var(--brand-ink);font:750 1rem/1.35 system-ui,sans-serif;letter-spacing:-.015em;margin:0 0 4px}
body .app-family-meta{color:var(--brand-accent);font:600 .72rem/1.45 system-ui,sans-serif;margin:0}
body .app-family-summary{color:#4c5664;font-size:.84rem;line-height:1.6;margin:0 0 15px}
body .app-family-links{display:flex;flex-wrap:wrap;gap:4px 17px;margin:0}
body .app-family-links a{display:inline-flex;align-items:center;min-height:36px;color:var(--brand-accent);font:700 .8rem/1.3 system-ui,sans-serif;text-decoration:underline;text-underline-offset:4px}
body .app-family a:focus-visible{outline:3px solid var(--brand-accent);outline-offset:4px}
body .app-family-note{color:#59616b;font-size:.78rem;line-height:1.5;margin:24px 0 0}
@media(min-width:1250px){body .app-family-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:800px){body .app-family{padding:56px 20px}body .app-family-heading{display:block}body .app-family-directory{margin-top:22px}body .app-family-list{grid-template-columns:repeat(2,minmax(0,1fr))}body .app-identity{gap:13px}body .app-identity img{width:60px;height:60px;flex-basis:60px;border-radius:16px}}
@media(max-width:520px){body .app-family-list{grid-template-columns:1fr}body .app-family-item{padding:18px}body .app-family h2{font-size:2rem}body .app-identity strong{font-size:.95rem}body .navbar-brand img.app-brand-icon,body .brand img.app-brand-icon{flex-basis:36px;width:36px;height:36px;border-radius:9px}}
@media(prefers-reduced-motion:reduce){body .app-family *{transition:none!important;animation:none!important}}