:root {
  color-scheme: light;
  --fb-paper: #f7f3eb;
  --fb-paper-bright: #fffdf8;
  --fb-ink: #18191b;
  --fb-muted: #706d75;
  --fb-purple: #8b3dff;
  --fb-purple-dark: #6f22e8;
  --fb-lilac: #d7c0ff;
  --fb-green: #c7f497;
  --fb-coral: #ff6b58;
  --fb-line: rgba(24, 25, 27, .16);
  --fb-soft-line: rgba(24, 25, 27, .09);
  --fb-radius: 28px;
  --fb-shadow: 0 24px 70px rgba(24, 25, 27, .10);
  --bg: var(--fb-paper);
  --panel: var(--fb-paper-bright);
  --panel2: #f1ebdf;
  --panel3: var(--fb-paper-bright);
  --text: var(--fb-ink);
  --muted: var(--fb-muted);
  --border: var(--fb-soft-line);
  --border2: var(--fb-line);
  --accent: var(--fb-purple);
  --accent2: #a56fff;
  --btn: rgba(255, 255, 255, .45);
  --btnHover: #fff;
  --btnActive: rgba(139, 61, 255, .13);
  --shadow: rgba(24, 25, 27, .12);
}

html { background: var(--fb-paper); }

body {
  min-height: 100%;
  background:
    radial-gradient(circle at 8% 18%, rgba(215, 192, 255, .28), transparent 24rem),
    radial-gradient(circle at 92% 72%, rgba(199, 244, 151, .22), transparent 26rem),
    var(--fb-paper);
  color: var(--fb-ink);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::selection { background: var(--fb-lilac); color: var(--fb-ink); }

a { text-underline-offset: .18em; }

/* Shared navigation */
header.container,
.appHeaderShell {
  position: relative;
  z-index: 50;
  width: 100%;
  max-width: none;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--fb-soft-line);
  background: rgba(247, 243, 235, .92);
  backdrop-filter: blur(18px);
}

.appHeaderShell { position: sticky; top: 0; }

header.container .site-nav,
.appHeaderShell .site-nav {
  width: min(1840px, 100%);
  min-height: 78px;
  margin: 0 auto;
  padding: 16px clamp(20px, 3vw, 54px);
}

.site-nav > a:first-child,
.appHeaderShell .site-nav > a:first-child {
  width: 42px;
  height: 42px;
  display: grid !important;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid var(--fb-line);
  border-radius: 50%;
  background: var(--fb-paper-bright);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), background .3s ease;
}

.site-nav > a:first-child:hover,
.appHeaderShell .site-nav > a:first-child:hover {
  background: var(--fb-lilac);
  transform: rotate(-8deg) scale(1.04);
}

.site-nav > a:first-child img,
.appHeaderShell .site-nav > a:first-child img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.nav-links,
.appHeaderShell .nav-links { gap: clamp(15px, 2vw, 28px); }

.nav-links a,
.appHeaderShell .nav-links a {
  position: relative;
  color: var(--fb-ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.nav-links a:not(.nav-app-btn)::after,
.appHeaderShell .nav-links a:not(.nav-app-btn)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--fb-purple);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .25s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after,
.appHeaderShell .nav-links a:hover::after,
.appHeaderShell .nav-links a.active::after { transform: scaleX(1); transform-origin: left; }

.nav-app-btn,
.appHeaderShell .nav-app-btn {
  min-height: 40px;
  padding: 0 18px !important;
  border: 1px solid var(--fb-ink);
  border-radius: 999px !important;
  background: var(--fb-ink) !important;
  color: #fff !important;
  box-shadow: 5px 5px 0 var(--fb-lilac);
  transition: transform .2s ease, box-shadow .2s ease !important;
}

.nav-app-btn:hover,
.appHeaderShell .nav-app-btn:hover {
  background: var(--fb-ink) !important;
  color: #fff !important;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--fb-lilac);
}

.nav-toggle,
.appHeaderShell .nav-toggle {
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fb-ink) !important;
  border-radius: 12px;
  background: transparent !important;
}

/* Shared editorial surfaces */
.prose {
  color: var(--fb-ink);
  font-size: 17px;
  line-height: 1.72;
}

.prose h1,
.landing-page h1,
.support-page h1,
.blog-index-page h1,
.not-found-page h1 {
  color: var(--fb-ink);
  font-size: clamp(48px, 7vw, 98px);
  font-weight: 900;
  line-height: .93;
  letter-spacing: -.065em;
}

.prose h2,
.landing-page h2 {
  margin-top: 2.25em;
  color: var(--fb-ink);
  font-weight: 850;
  letter-spacing: -.035em;
}

.prose h3 { color: var(--fb-ink); font-weight: 800; }
.prose p,
.prose li,
.color-gray { color: var(--fb-muted) !important; }
.color-brand { color: var(--fb-purple) !important; font-weight: 700; }

.btn,
.btn-brand,
.btn-soft,
.btn--primary,
.btn--secondary {
  border-radius: 999px;
  font-weight: 750;
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

.btn-brand,
.btn--primary {
  border-color: var(--fb-purple) !important;
  background: var(--fb-purple) !important;
  color: #fff !important;
  box-shadow: 4px 4px 0 var(--fb-ink);
}

.btn-brand:hover,
.btn-brand:focus,
.btn--primary:hover,
.btn--primary:focus-visible {
  border-color: var(--fb-purple-dark) !important;
  background: var(--fb-purple-dark) !important;
  color: #fff !important;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--fb-ink);
}

.btn-soft,
.btn--secondary {
  border-color: var(--fb-line) !important;
  background: rgba(255, 255, 255, .42) !important;
  color: var(--fb-ink) !important;
}

.btn-soft:hover,
.btn--secondary:hover {
  border-color: var(--fb-ink) !important;
  background: var(--fb-paper-bright) !important;
  color: var(--fb-ink) !important;
}

.callout,
.lp-card,
.blog-card,
.prose .callout {
  position: relative;
  border: 2px dashed rgba(24, 25, 27, .55) !important;
  border-radius: var(--fb-radius) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.callout::before,
.lp-card::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 12%;
  width: 38%;
  height: 13px;
  border-top: 3px solid var(--fb-purple);
  border-radius: 50%;
  transform: rotate(-1.5deg);
}

/* Legal and support */
.legal-page main,
.support-page main {
  padding: clamp(42px, 7vw, 96px) 20px !important;
}

.legal-page .prose,
.support-page .prose {
  width: min(920px, 100%);
  max-width: 920px;
}

.legal-page .prose::before,
.support-page .prose::before {
  content: "THE SMALL PRINT, MADE CLEAR";
  display: inline-flex;
  margin-bottom: 24px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--fb-lilac);
  color: var(--fb-ink);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
}

.support-page .prose::before { content: "REAL HELP FROM REAL PEOPLE"; background: var(--fb-green); }

.legal-page .prose > h2 {
  padding-top: 26px;
  border-top: 1px solid var(--fb-line);
}

.legal-page .prose > ul,
.legal-page .prose > ol {
  padding: 20px 22px 20px 42px;
  border-left: 4px solid var(--fb-lilac);
  border-radius: 0 18px 18px 0;
  background: rgba(255, 255, 255, .35);
}

.support-page form {
  position: relative;
  margin-top: 34px;
  padding: clamp(24px, 5vw, 46px);
  border: 2px dashed rgba(24, 25, 27, .55);
  border-radius: 34px;
  background: rgba(255, 255, 255, .35);
}

.form-control,
.support-page textarea,
.support-page input {
  border: 1px solid var(--fb-line) !important;
  border-radius: 18px !important;
  background: var(--fb-paper-bright) !important;
  color: var(--fb-ink) !important;
  box-shadow: none !important;
}

.form-control:focus,
.support-page textarea:focus,
.support-page input:focus {
  border-color: var(--fb-purple) !important;
  box-shadow: 0 0 0 4px rgba(139, 61, 255, .13) !important;
}

/* Landing pages */
.landing-layout,
.blog-layout { padding-top: clamp(20px, 4vw, 52px); }

.landing-page .landing-content { overflow: hidden; }

.landing-page .lp-hero {
  position: relative;
  padding-top: clamp(54px, 8vw, 120px);
  padding-bottom: clamp(54px, 8vw, 110px);
}

.landing-page .lp-hero::before {
  content: "FAST, PRIVATE, BROWSER-BASED";
  position: absolute;
  top: 16px;
  left: 12px;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--fb-lilac);
  color: var(--fb-ink);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .06em;
}

.landing-page .lp-hero h1 { max-width: 830px; }
.landing-page .lp-hero h2 { max-width: 680px; margin-top: 24px; color: var(--fb-muted); font-weight: 500; line-height: 1.35; }

.landing-page .hero-bullets li {
  margin: 10px 0;
  color: var(--fb-ink);
  font-weight: 650;
}

.landing-page .lp-card {
  padding: clamp(22px, 4vw, 38px) !important;
  transform: rotate(1deg);
}

.landing-page .lp-cover {
  overflow: hidden;
  border: 1px solid var(--fb-line);
  border-radius: 22px;
  background: var(--fb-lilac);
}

.landing-page main section:not(.lp-hero) {
  padding-top: clamp(48px, 7vw, 92px);
  padding-bottom: clamp(48px, 7vw, 92px);
}

.landing-page main section:not(.lp-hero) + section { border-top: 1px solid var(--fb-soft-line); }

.landing-page .faq details {
  margin-bottom: 12px;
  padding: 4px 18px;
  border: 1px solid var(--fb-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .36);
}

.landing-page .faq summary { padding: 16px 0; color: var(--fb-ink); font-weight: 750; }

/* Blog index */
.blog-index-page .blog-content { padding-top: clamp(30px, 6vw, 82px); padding-bottom: 90px; }
.blog-index-page .prose { max-width: 1180px; }
.blog-index-page .prose > h1::before {
  content: "BLUR NOTES";
  display: block;
  width: max-content;
  margin-bottom: 22px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--fb-green);
  font-size: 11px;
  line-height: 1;
  letter-spacing: .08em;
}

.blog-index-page .blog-card {
  height: 100%;
  overflow: hidden;
  border-style: solid !important;
  border-width: 1px !important;
  background: rgba(255, 255, 255, .42) !important;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), background .35s ease;
}

.blog-index-page .row > div:nth-child(3n + 1) .blog-card { transform: rotate(-.8deg); }
.blog-index-page .row > div:nth-child(3n + 2) .blog-card { transform: translateY(18px) rotate(.7deg); }
.blog-index-page .blog-card:hover { z-index: 2; background: var(--fb-paper-bright) !important; transform: translateY(-8px) rotate(0) !important; }
.blog-index-page .blog-card__media { display: block; margin: 10px; overflow: hidden; border-radius: 20px; }
.blog-index-page .blog-card__img { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.blog-index-page .blog-card:hover .blog-card__img { transform: scale(1.045); }
.blog-index-page .blog-card__body { padding: 22px 24px 28px; }
.blog-index-page .blog-card__title { color: var(--fb-ink); text-decoration: none; }

/* Standalone editor */
.app-page { overflow-x: hidden; overflow-y: auto; }
.app-page .app { min-height: 100dvh; }
.app-page .editor-layout { padding: 18px 14px 24px; }
.app-page .app-inline-shell {
  height: calc(100dvh - 114px);
  min-height: 620px;
  overflow: hidden;
  border: 1px solid var(--fb-line);
  border-radius: 30px;
  background: rgba(255, 253, 248, .68);
  box-shadow: var(--fb-shadow);
}

.app-page .main { grid-template-columns: 344px minmax(0, 1fr); }
.app-page .panel {
  border-right: 1px solid var(--fb-line);
  background: rgba(255, 253, 248, .92);
}

.app-page .panel__scroll { padding: 16px; }
.app-page .panel__section {
  border-color: var(--fb-line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .38);
}
.app-page .panel__section__noBorder { background: transparent; }

.app-page .tabs { padding: 4px; border: 1px solid var(--fb-line); border-radius: 16px; background: #fff; }
.app-page .tab { color: var(--fb-ink); border-radius: 12px; }
.app-page .tab--active { background: var(--fb-lilac); color: var(--fb-purple-dark); }

.app-page .subhead,
.app-page .field__label,
.app-page .panel__title { color: var(--fb-ink); }
.app-page .muted,
.app-page .downloadHint,
.app-page .emptyCard__sub,
.app-page .emptyCard__hint { color: var(--fb-muted); }

.app-page .num,
.app-page .select,
.app-page .selectLike,
.app-page .prettySelectBtn,
.app-page .textInput,
.app-page .cp__hex,
.app-page .miniPopover {
  border-color: var(--fb-line);
  background: #fff;
  color: var(--fb-ink);
}

.app-page input[type="range"] { accent-color: var(--fb-purple); }
.app-page .btn { min-height: 38px; }
.app-page .btn--selected { border-color: var(--fb-purple); background: rgba(215, 192, 255, .42) !important; }

.app-page .carouselWrap { background: linear-gradient(180deg, transparent, rgba(215, 192, 255, .15)); }
.app-page #carouselPrev.carouselBtn,
.app-page #shapeCarouselPrev.carouselBtn { background: linear-gradient(90deg, var(--fb-paper-bright) 12%, transparent); color: var(--fb-ink); }
.app-page #carouselNext.carouselBtn,
.app-page #shapeCarouselNext.carouselBtn { background: linear-gradient(270deg, var(--fb-paper-bright) 12%, transparent); color: var(--fb-ink); }
.app-page .effectName,
.app-page .shapeName { color: var(--fb-muted); }

.app-page .stage { padding: 12px; background: var(--fb-paper); }
.app-page .viewport {
  border: 1px solid var(--fb-line);
  border-radius: 22px;
  background-color: #f6f1e8;
  background-image: repeating-conic-gradient(#eee7dc 0 25%, #faf7f1 0 50%);
  background-size: 24px 24px;
}

.app-page .previewQualityPill {
  border-color: rgba(24, 25, 27, .15);
  background: rgba(255, 253, 248, .92);
  color: var(--fb-ink);
  box-shadow: 0 10px 28px rgba(24, 25, 27, .12);
}

.app-page .sidebarModal,
.app-page .prettySelectMenu,
.app-page .colorPopover,
.app-page .loadingOverlay__content {
  border-color: var(--fb-line);
  background: var(--fb-paper-bright);
  color: var(--fb-ink);
  box-shadow: var(--fb-shadow);
}

.app-page .prettySelectItem { color: var(--fb-ink); }
.app-page .prettySelectItem:hover { background: rgba(215, 192, 255, .26); }
.app-page .prettySelectItem[aria-selected="true"] { background: var(--fb-lilac); color: var(--fb-ink); }

.app-page .emptyCard {
  width: min(520px, calc(100vw - 36px));
  padding: clamp(28px, 5vw, 52px);
  border: 2px dashed rgba(24, 25, 27, .55);
  border-radius: 36px;
  background: rgba(255, 253, 248, .52);
  color: var(--fb-ink);
  box-shadow: none;
}

.app-page .emptyCard::before {
  content: "DROP, BLUR, DONE";
  display: inline-flex;
  margin-bottom: 18px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--fb-green);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
}

.app-page .betaPill { background: var(--fb-lilac); color: var(--fb-ink); }
.app-page .globalDropOverlay { background: rgba(139, 61, 255, .94); backdrop-filter: blur(16px); }

/* Download pages */
.download-page { min-height: 100dvh; }
.download-page .app { min-height: 100dvh; height: auto; }
.download-page .downloadMain { flex: 1; }
.download-page .download-layout { padding: clamp(20px, 4vw, 54px) 14px 72px; }
.download-page .download-content {
  max-width: 1080px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--fb-ink);
  box-shadow: none;
}

.download-page .download-card { position: relative; width: min(900px, 100%); }
.download-page .download-card::before {
  content: none;
  display: none;
}

.download-page .download-back { min-height: 42px; padding: 0 16px; }
.download-page .download-preview {
  min-height: 300px;
  margin-top: 22px;
  padding: clamp(12px, 2vw, 22px);
  border: 2px dashed rgba(24, 25, 27, .44);
  border-radius: 30px;
  background-color: #f8f4ed;
  background-image: repeating-conic-gradient(#eee7dc 0 25%, #faf7f1 0 50%);
  background-size: 24px 24px;
}

.download-page .download-preview__image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(62vh, 720px);
  border: 0;
  border-radius: 20px;
}

.download-page .download-status { color: var(--fb-muted); font-weight: 700; }
.download-page .download-progress,
.download-page .uploadProgressBar { accent-color: var(--fb-purple); }
.download-page .download-actions { gap: 12px; }
.download-page .download-action { min-height: 48px; padding: 0 22px; }
.download-page .emptyCard { border-color: var(--fb-line); background: transparent; color: var(--fb-ink); box-shadow: none; }


/* 404 */
.not-found-page .hero { min-height: calc(100dvh - 280px); }
.not-found-page .hero .prose::before {
  content: "404, BUT MAKE IT USEFUL";
  display: inline-flex;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--fb-coral);
  color: #fff;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
}
.not-found-page .bg-light-brown {
  border: 2px dashed rgba(24, 25, 27, .52);
  border-radius: 30px !important;
  background: transparent !important;
}

/* Footer */
.footer {
  position: relative;
  margin-top: 40px;
  padding: 66px 0 28px !important;
  border-radius: 40px 40px 0 0;
  background: var(--fb-ink) !important;
  color: #fff;
  overflow: hidden;
}

.footer::before {
  content: "FRAME BLUR";
  position: absolute;
  right: -10px;
  bottom: -35px;
  color: rgba(255, 255, 255, .045);
  font-size: clamp(80px, 15vw, 220px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.08em;
  pointer-events: none;
}

.footer a { position: relative; color: #fff !important; font-weight: 650; }
.footer .color-gray { color: rgba(255, 255, 255, .62) !important; }

/* Motion */
@media (prefers-reduced-motion: no-preference) {
  .landing-page main section,
  .blog-index-page .blog-card,
  .legal-page .prose > *,
  .support-page .prose > * {
    animation: fb-rise both cubic-bezier(.16, 1, .3, 1);
    animation-timeline: view();
    animation-range: entry 5% cover 24%;
  }
}

@keyframes fb-rise {
  from { opacity: 0; transform: translateY(34px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 991px) {
  .landing-page .lp-card { margin-top: 20px; transform: none; }
  .app-page { overflow: auto; }
  .app-page .app-inline-shell { height: auto; min-height: calc(100dvh - 110px); }
  .app-page .main { grid-template-columns: 1fr; }
  .app-page .panel { max-height: 48dvh; border-right: 0; border-bottom: 1px solid var(--fb-line); }
  .app-page .stage { min-height: 52dvh; }
}

@media (max-width: 768px) {
  header.container .site-nav,
  .appHeaderShell .site-nav { min-height: 70px; padding: 13px 16px; }

  .nav-links[data-open="true"],
  .appHeaderShell .nav-links[data-open="true"] {
    top: 60px;
    right: 14px;
    width: min(310px, calc(100vw - 28px));
    padding: 12px;
    border: 1px solid var(--fb-line);
    border-radius: 22px;
    background: var(--fb-paper-bright);
    box-shadow: var(--fb-shadow);
  }

  .nav-links[data-open="true"] a,
  .appHeaderShell .nav-links[data-open="true"] a { padding: 13px 12px; border-radius: 14px; }

  .app-page .editor-layout { padding-inline: 0; }
  .app-page .app-inline-shell { border-radius: 0; border-inline: 0; box-shadow: none; }
  .app-page .stage { padding: 8px; }
  .app-page .viewport { border-radius: 18px; }

  .download-page .download-layout { padding-inline: 0; }
  .download-page .download-content { padding: 18px 12px 28px; border-inline: 0; border-radius: 0; box-shadow: none; }
  .download-page .download-preview { min-height: 220px; border-radius: 22px; }
  .download-page .download-actions { width: 100%; }

  .blog-index-page .row > div .blog-card { transform: none !important; }
  .footer { border-radius: 28px 28px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* Canva preview generation overlay */
.canva-download-page .download-preview { position: relative; isolation: isolate; }
.download-preview-loading {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  border-radius: inherit;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 14px;
  font-weight: 750;
  text-align: center;
  backdrop-filter: blur(3px);
}
.download-preview-loading[hidden] { display: none !important; }
.download-preview-loading__spinner {
  color: #fff;
  transform-origin: center;
  animation: spin .85s linear infinite;
}
.download-preview-loading[data-preview-state="error"] { background: rgba(0, 0, 0, .72); }