@charset "UTF-8";

* { box-sizing: border-box; }
a { text-decoration: none; }

body.pp-f-homepage.pp-f-guest-page {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  color: var(--pp-text);
  background: var(--pp-page-bg);
}

.pp-f-container-fluid { width: 100%; padding: 24px 0; }
.pp-f-page-width-normal { max-width: 1080px; margin: 0 auto; padding: 0 18px; }
.pp-f-learn-content-desc-wrap { padding: 18px 0 28px; text-align: center; }

h1 {
  margin: 8px 0 10px;
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1.12;
  letter-spacing: .01em;
}

.pp-f-learn-content-sub-header { margin: 0 auto 18px; max-width: 860px; }
.pp-f-learn-content-sub-header h2 {
  margin: 0;
  font-size: clamp(15px, 2.2vw, 20px);
  line-height: 1.45;
  font-weight: 500;
  color: var(--pp-muted);
}

.pp-f-feature-block {
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--pp-divider);
}

.pp-f-topic-block { padding: 10px 0 18px; }
.pp-f-topic-block--last { padding-bottom: 0; }

.pp-f-topic-block__content-wrapper {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;

  padding: 18px;
  border-radius: 18px;

  background: var(--pp-card-bg);
  border: 1px solid var(--pp-border);
  box-shadow: var(--pp-card-shadow);
  backdrop-filter: blur(10px);
}

.pp-f-topic-block__content-wrapper:hover {
  box-shadow: var(--pp-card-shadow-hover);
  border-color: var(--pp-border-strong);
}

.pp-f-topic-block__text-wrapper {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.pp-f-way-block-header {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 750;
}

.pp-f-topic-block__description { margin: 0; }
.pp-f-topic-block__description p {
  margin: 0;
  color: var(--pp-muted);
  line-height: 1.55;
}

.pp-f-preserve-newlines { white-space: normal; }
.pp-f-preserve-newlines\; { white-space: normal; } /* for class="pp-f-preserve-newlines;" */

/* Links */
a { color: var(--pp-link); }
a:hover { color: var(--pp-link-hover); }

/* CTA area */
.pp-f-topic-block__cta-wrapper { flex: 0 0 auto; }

.pp-f-guest-cta {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Folder "View" button */
.pp-f-act-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 18px;
  border-radius: 999px;

  background: var(--pp-btn-bg);
  color: #fff;

  font-weight: 650;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: var(--pp-btn-shadow);
}

.pp-f-act-primary:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--pp-btn-shadow-hover);
  filter: brightness(1.03);
}

/* Album thumbnail wrapper (only albums have pp-f-album-thumb) */
.pp-f-album-thumb {
  position: relative;
  display: block;

  width: 100%;
  max-width: 285px;
  height: 225px;

  border-radius: 16px;
  overflow: hidden;

  background: var(--pp-thumb-bg);
  border: 1px solid var(--pp-thumb-border);
  box-shadow: var(--pp-thumb-shadow);
}

.pp-f-album-thumb:hover {
  transform: translateY(-1px);
  box-shadow: var(--pp-thumb-shadow-hover);
}

.pp-f-album-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: var(--pp-thumb-overlay);
  opacity: var(--pp-thumb-overlay-opacity);
}

/* Album preview image (no crop, fixed area) */
.pp-f-demo-img {
  position: relative;
  z-index: 1;

  display: block;
  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center;

  border-radius: 0;
  background: var(--pp-thumb-frame-bg);
}

/* Responsive layout for CTA column */
@media (min-width: 768px) {
  .pp-f-topic-block__cta-wrapper {
    flex: 0 0 285px;
    width: 285px;
    max-width: 285px;
    display: flex;
    justify-content: center;
  }

  .pp-f-guest-cta {
    width: 100%;
    max-width: 285px;
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .pp-f-topic-block__content-wrapper {
    flex-direction: column;
    align-items: stretch;
  }

  .pp-f-topic-block__cta-wrapper {
    width: 100%;
    display: block;
  }

  .pp-f-guest-cta {
    width: min(285px, 100%);
    margin: 0 auto;
  }
}

/* =========================
   Theme tokens (variables)
   ========================= */

/* Default theme (aurora) */
body.pp-f-homepage.pp-f-guest-page {
  --pp-text: #0f172a;
  --pp-muted: rgba(15, 23, 42, .72);

  --pp-link: #2563eb;
  --pp-link-hover: #1d4ed8;

  --pp-divider: rgba(15, 23, 42, .10);
  --pp-border: rgba(15, 23, 42, .10);
  --pp-border-strong: rgba(15, 23, 42, .16);

  --pp-card-bg: rgba(255,255,255,.75);
  --pp-card-shadow: 0 18px 50px rgba(15,23,42,.10);
  --pp-card-shadow-hover: 0 22px 60px rgba(15,23,42,.14);

  --pp-btn-bg: linear-gradient(135deg, #4f46e5, #06b6d4);
  --pp-btn-shadow: 0 10px 30px rgba(79,70,229,.25);
  --pp-btn-shadow-hover: 0 14px 40px rgba(79,70,229,.30);

  --pp-thumb-frame-bg: rgba(255, 255, 255, .90);
  --pp-thumb-border: rgba(255,255,255,.45);
  --pp-thumb-shadow: 0 18px 55px rgba(15,23,42,.18);
  --pp-thumb-shadow-hover: 0 24px 70px rgba(15,23,42,.22);

  --pp-thumb-bg:
          radial-gradient(260px 150px at 18% 18%, rgba(79, 70, 229, .55), transparent 60%),
          radial-gradient(260px 150px at 85% 20%, rgba(6, 182, 212, .40), transparent 58%),
          radial-gradient(240px 140px at 55% 110%, rgba(244, 63, 94, .22), transparent 60%),
          linear-gradient(180deg, rgba(15, 23, 42, .10), rgba(15, 23, 42, .03));

  --pp-thumb-overlay:
          radial-gradient(120px 90px at 30% 22%, rgba(255,255,255,.35), transparent 60%),
          radial-gradient(140px 110px at 78% 35%, rgba(255,255,255,.22), transparent 62%),
          linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));

  --pp-thumb-overlay-opacity: .85;

  --pp-page-bg:
          radial-gradient(900px 500px at 20% 0%, rgba(99,102,241,.18), transparent 60%),
          radial-gradient(800px 450px at 90% 10%, rgba(34,211,238,.14), transparent 55%),
          linear-gradient(180deg, #f8fafc, #eef2ff);
}

/* Theme 1: noir (dark, premium) */
body.pp-f-homepage.pp-f-guest-page.pp-f-theme-noir {
  --pp-text: #e5e7eb;
  --pp-muted: rgba(229, 231, 235, .78);

  --pp-link: #93c5fd;
  --pp-link-hover: #bfdbfe;

  --pp-divider: rgba(148, 163, 184, .22);
  --pp-border: rgba(148, 163, 184, .22);
  --pp-border-strong: rgba(148, 163, 184, .30);

  --pp-card-bg: rgba(2, 6, 23, .55);
  --pp-card-shadow: 0 18px 55px rgba(0,0,0,.35);
  --pp-card-shadow-hover: 0 24px 70px rgba(0,0,0,.45);

  --pp-btn-bg: linear-gradient(135deg, #a78bfa, #22d3ee);
  --pp-btn-shadow: 0 10px 30px rgba(167,139,250,.20);
  --pp-btn-shadow-hover: 0 14px 40px rgba(34,211,238,.22);

  --pp-thumb-frame-bg: rgba(2, 6, 23, .35);
  --pp-thumb-border: rgba(148,163,184,.22);

  --pp-thumb-bg:
          radial-gradient(260px 150px at 18% 18%, rgba(167, 139, 250, .35), transparent 62%),
          radial-gradient(260px 150px at 85% 25%, rgba(34, 211, 238, .28), transparent 60%),
          linear-gradient(180deg, rgba(2, 6, 23, .85), rgba(2, 6, 23, .45));

  --pp-thumb-overlay:
          radial-gradient(160px 120px at 35% 25%, rgba(255,255,255,.10), transparent 60%),
          linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));

  --pp-thumb-overlay-opacity: .85;

  --pp-page-bg:
          radial-gradient(900px 500px at 18% 0%, rgba(167,139,250,.10), transparent 60%),
          radial-gradient(800px 450px at 88% 10%, rgba(34,211,238,.08), transparent 55%),
          linear-gradient(180deg, #020617, #0b1220);
}

/* Theme 2: sunset (warm, bold) */
body.pp-f-homepage.pp-f-guest-page.pp-f-theme-sunset {
  --pp-text: #2a0f14;
  --pp-muted: rgba(42, 15, 20, .70);

  --pp-link: #c2410c;
  --pp-link-hover: #9a3412;

  --pp-divider: rgba(42, 15, 20, .12);
  --pp-border: rgba(42, 15, 20, .12);
  --pp-border-strong: rgba(42, 15, 20, .18);

  --pp-card-bg: rgba(255,255,255,.78);

  --pp-btn-bg: linear-gradient(135deg, #f97316, #ef4444);
  --pp-btn-shadow: 0 10px 30px rgba(239,68,68,.18);
  --pp-btn-shadow-hover: 0 14px 40px rgba(249,115,22,.22);

  --pp-thumb-bg:
          radial-gradient(260px 150px at 20% 18%, rgba(249, 115, 22, .55), transparent 60%),
          radial-gradient(260px 150px at 84% 22%, rgba(236, 72, 153, .35), transparent 60%),
          radial-gradient(260px 150px at 55% 115%, rgba(59, 130, 246, .18), transparent 62%),
          linear-gradient(180deg, rgba(42, 15, 20, .10), rgba(42, 15, 20, .03));

  --pp-page-bg:
          radial-gradient(900px 520px at 20% 0%, rgba(249,115,22,.18), transparent 60%),
          radial-gradient(820px 470px at 90% 10%, rgba(236,72,153,.14), transparent 55%),
          linear-gradient(180deg, #fff7ed, #ffe4e6);
}

/* Theme 3: mint (fresh, clean, modern) */
body.pp-f-homepage.pp-f-guest-page.pp-f-theme-mint {
  --pp-text: #052e2b;
  --pp-muted: rgba(5, 46, 43, .72);

  --pp-link: #0f766e;
  --pp-link-hover: #115e59;

  --pp-divider: rgba(5, 46, 43, .12);
  --pp-border: rgba(5, 46, 43, .12);
  --pp-border-strong: rgba(5, 46, 43, .18);

  --pp-card-bg: rgba(255,255,255,.78);

  --pp-btn-bg: linear-gradient(135deg, #14b8a6, #22c55e);
  --pp-btn-shadow: 0 10px 30px rgba(20,184,166,.18);
  --pp-btn-shadow-hover: 0 14px 40px rgba(34,197,94,.18);

  --pp-thumb-bg:
          radial-gradient(260px 150px at 20% 18%, rgba(20, 184, 166, .55), transparent 62%),
          radial-gradient(260px 150px at 84% 22%, rgba(34, 197, 94, .35), transparent 62%),
          linear-gradient(180deg, rgba(5, 46, 43, .08), rgba(5, 46, 43, .02));

  --pp-page-bg:
          radial-gradient(900px 520px at 20% 0%, rgba(20,184,166,.18), transparent 60%),
          radial-gradient(820px 470px at 90% 10%, rgba(34,197,94,.12), transparent 55%),
          linear-gradient(180deg, #f0fdfa, #ecfeff);
}

/* Theme 4: paper (minimal, "design system") */
body.pp-f-homepage.pp-f-guest-page.pp-f-theme-paper {
  --pp-text: #111827;
  --pp-muted: rgba(17, 24, 39, .70);

  --pp-link: #111827;
  --pp-link-hover: #000000;

  --pp-divider: rgba(17, 24, 39, .10);
  --pp-border: rgba(17, 24, 39, .10);
  --pp-border-strong: rgba(17, 24, 39, .16);

  --pp-card-bg: rgba(255,255,255,.88);
  --pp-card-shadow: 0 14px 40px rgba(17,24,39,.08);
  --pp-card-shadow-hover: 0 18px 55px rgba(17,24,39,.12);

  --pp-btn-bg: linear-gradient(135deg, #111827, #374151);
  --pp-btn-shadow: 0 10px 30px rgba(17,24,39,.18);
  --pp-btn-shadow-hover: 0 14px 40px rgba(17,24,39,.22);

  --pp-thumb-bg:
          radial-gradient(260px 150px at 20% 18%, rgba(17, 24, 39, .10), transparent 62%),
          radial-gradient(260px 150px at 84% 22%, rgba(17, 24, 39, .06), transparent 62%),
          linear-gradient(180deg, rgba(17, 24, 39, .06), rgba(17, 24, 39, .02));

  --pp-thumb-overlay:
          linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));

  --pp-thumb-overlay-opacity: .70;

  --pp-page-bg:
          radial-gradient(900px 520px at 20% 0%, rgba(17,24,39,.06), transparent 60%),
          radial-gradient(820px 470px at 90% 10%, rgba(17,24,39,.05), transparent 55%),
          linear-gradient(180deg, #ffffff, #f3f4f6);
}

/* Theme 5: cyber (neon, punchy) */
body.pp-f-homepage.pp-f-guest-page.pp-f-theme-cyber {
  --pp-text: #071018;
  --pp-muted: rgba(7, 16, 24, .72);

  --pp-link: #0ea5e9;
  --pp-link-hover: #0284c7;

  --pp-divider: rgba(7, 16, 24, .12);
  --pp-border: rgba(7, 16, 24, .12);
  --pp-border-strong: rgba(7, 16, 24, .18);

  --pp-card-bg: rgba(255,255,255,.76);

  --pp-btn-bg: linear-gradient(135deg, #06b6d4, #a3e635);
  --pp-btn-shadow: 0 10px 30px rgba(6,182,212,.20);
  --pp-btn-shadow-hover: 0 14px 40px rgba(163,230,53,.18);

  --pp-thumb-bg:
          radial-gradient(260px 150px at 18% 18%, rgba(6, 182, 212, .60), transparent 60%),
          radial-gradient(260px 150px at 85% 22%, rgba(163, 230, 53, .35), transparent 60%),
          radial-gradient(240px 140px at 55% 115%, rgba(217, 70, 239, .18), transparent 62%),
          linear-gradient(180deg, rgba(7, 16, 24, .10), rgba(7, 16, 24, .03));

  --pp-page-bg:
          radial-gradient(900px 520px at 20% 0%, rgba(6,182,212,.18), transparent 60%),
          radial-gradient(820px 470px at 90% 10%, rgba(163,230,53,.14), transparent 55%),
          linear-gradient(180deg, #ecfeff, #f7fee7);
}

.pp-f-album-thumb .pp-f-demo-img {
  background: transparent;
}