/* Fluence V2 — unified neo-brutalist Cella treatment.
 * Last stylesheet: visual overrides only, no DOM or playback geometry changes.
 * Existing original Cella SVG assets remain available; refined uniform black strokes
 * avoid scaling an exported vector stroke unevenly across responsive controls. */
:root {
  --neo-black:#070707;
  --neo-white:#fff;
  --neo-outline:1px solid #070707;
  --neo-shadow:2px 2px 0 #070707;
  --neo-radius:17px;
}
body:has(.fluence-v5),
body:has(.simple-onboarding) {
  background-color:#ede5f3!important;
  background-image:url("/cella-source-gradient.svg")!important;
  background-position:center!important;
  background-size:cover!important;
  background-attachment:fixed!important;
}
.fluence-v5 {
  --cella-ink:#070707;
  --cella-muted:#323232;
  --cella-stroke:#070707;
  --cella-stroke-soft:#070707;
  --cella-glass:#fff;
  --cella-glass-strong:#fff;
  --ig-ink:#070707;
  --ig-mute:#323232;
  --ig-line:#070707;
  --ig-paper:#fff;
  --ig-soft:#fff;
  color:var(--neo-black)!important;
  background:transparent!important;
}
.fluence-v5 .v4-main,
.fluence-v5 .v4-main:has(.ig-feed-page),
.fluence-v5 .v4-main:has(.ig-reels-page),
.fluence-v5 .v4-main:has(.ig-library-page),
.fluence-v5 .v4-main:has(.ig-profile-page),
.fluence-v5 .v4-main:has(.ig-detail-page),
.fluence-v5 .ig-feed-page.v5-feed-page {background:transparent!important}

/* Navigation: desktop sidebar, bottom tab bar and the application topbar. */
.fluence-v5 .v4-topbar,
.fluence-v5 .v4-nav,
.fluence-v5 .v4-mobile-nav {
  background:var(--neo-black)!important;
  background-image:none!important;
  color:var(--neo-white)!important;
  border-color:var(--neo-black)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.fluence-v5 .v4-topbar {border-bottom:1px solid var(--neo-black)!important}
.fluence-v5 .v4-nav {border-right:1px solid var(--neo-black)!important}
.fluence-v5 .v4-mobile-nav {border:1px solid var(--neo-black)!important;border-radius:21px!important;box-shadow:2px 2px 0 var(--neo-black)!important}
.fluence-v5 :is(.v4-brand,.v4-brand strong,.v4-nav-item,.v4-level,.v5-level,.v5-level small) {
  color:#fff!important;
}
.fluence-v5 .v4-brand>span {background:#fff!important;color:#070707!important;border-radius:10px!important}
.fluence-v5 .v4-nav-item,
.fluence-v5 .v4-mobile-nav .v4-nav-item {
  background:transparent!important;
  background-image:none!important;
  color:#fff!important;
  border:1px solid transparent!important;
  border-radius:14px!important;
  box-shadow:none!important;
}
.fluence-v5 .v4-nav-item:hover:not(.active):not([aria-current="page"]) {
  background:#282828!important;
  color:#fff!important;
  border-color:#fff!important;
}
.fluence-v5 .v4-nav-item.active,
.fluence-v5 .v4-nav-item[aria-current="page"],
.fluence-v5 .v4-mobile-nav .v4-nav-item.active,
.fluence-v5 .v4-mobile-nav .v4-nav-item[aria-current="page"] {
  background:#fff!important;
  background-image:none!important;
  color:#070707!important;
  border-color:#fff!important;
  box-shadow:none!important;
}
.fluence-v5 .v4-nav-item.active :is(svg,i,span),
.fluence-v5 .v4-nav-item[aria-current="page"] :is(svg,i,span) {color:inherit!important}
.fluence-v5 .v4-search,
.fluence-v5 .v5-global-search,
.fluence-v5 .v5-level select,
.fluence-v5 .v5-settings-trigger,
.fluence-v5 .v5-mobile-settings-fab {
  background:#fff!important;
  background-image:none!important;
  border:1px solid #070707!important;
  border-radius:14px!important;
  color:#070707!important;
  box-shadow:none!important;
}
.fluence-v5 .v4-topbar .v4-search,
.fluence-v5 .v4-topbar .v5-global-search {border-color:#fff!important}
.fluence-v5 .v4-topbar .v5-level select {border-color:#fff!important}
.fluence-v5 .v5-global-search :is(input,button) {color:#070707!important}
.fluence-v5 .v5-mobile-settings-fab {box-shadow:2px 2px 0 #070707!important}

/* Primary white cards, solid 2px black strokes and sharp offset shadows. */
.fluence-v5 :is(
  .feed-card,.media-card,.native-media-card,.ig-post,.ig-collection-count,
  .ig-profile-language,.ig-profile-actions button,.ig-grid-empty,
  .vocab-stat,.vocab-list,.vocab-cta,.map-phase,.curriculum-now>div,
  .curriculum-hero,.curriculum-level-card,.curriculum-panel,.curriculum-summary-card,
  .curriculum-note,.reference-inventory,.reference-row,.evidence-row,.skill-reference,
  .search-result-card,.search-preview,
  .open-library-card,.open-library-status,.open-library-empty,
  .v5-explore-tile,.v5-library-owned,.inline-discussion,.lea-ribbon,
  .ig-review-empty,.social-practice-panel
) {
  background:#fff!important;
  background-color:#fff!important;
  background-image:none!important;
  color:#070707!important;
  border:var(--neo-outline)!important;
  border-radius:var(--neo-radius)!important;
  box-shadow:var(--neo-shadow)!important;
}
.fluence-v5 .ig-feed-page .feed-card,
.fluence-v5 .ig-feed-page .media-card,
.fluence-v5 .ig-feed-page .native-media-card,
.fluence-v5 .ig-reels-page .ig-post,
.fluence-v5 .ig-detail-page .ig-post {
  background:#fff!important;
  background-color:#fff!important;
  background-image:none!important;
  border:var(--neo-outline)!important;
  border-radius:var(--neo-radius)!important;
  box-shadow:var(--neo-shadow)!important;
}
/* Interior panels are fully opaque — only genuine media imagery remains visible. */
.fluence-v5 .ig-feed-page :is(.ig-feed-header,.ig-topic-tray,.ig-post-header),
.fluence-v5 :is(
  .ig-post-actions,.ig-reels-page .ig-post-actions,.ig-detail-page .ig-post-actions,
  .ig-reels-page .v5-media-copy,.ig-detail-page .v5-media-copy,
  .ig-feed-page .v5-media-copy,.vocab-list-head,.reference-inventory header,
  .search-preview-copy,.open-library-card-copy,.open-library-header,
  .open-library-footer,.social-practice-head,.v5-settings-head,.v5-settings-body,
  .v5-settings-body section,.global-buddy-head,.global-buddy-thread
) {background:#fff!important;background-color:#fff!important;color:#070707!important}
.fluence-v5 .ig-feed-page .ig-feed-header,
.fluence-v5 .ig-feed-page .ig-topic-tray {border-color:#070707!important;backdrop-filter:none!important}
.fluence-v5 .ig-feed-page .ig-feed-header {border-bottom:1px solid #070707!important}
.fluence-v5 .ig-feed-page .ig-topic-tray {border-bottom:1px solid #070707!important}
.fluence-v5 .ig-post-header {border-bottom:1px solid #070707!important}
.fluence-v5 .ig-section-heading {border-bottom:1px solid #070707!important}
.fluence-v5 :is(.ig-collection-count,.ig-profile-language,.ig-profile-actions button) {
  background:#fff!important;background-image:none!important;border:1px solid #070707!important;
}
.fluence-v5 .ig-library-page .ig-grid-tile {border:1px solid #070707!important;border-radius:12px!important}
.fluence-v5 .ig-grid-fallback {background:#fff url("/cella-source-gradient.svg") center/cover no-repeat!important;color:#070707!important}
.fluence-v5 .ig-profile-avatar {background:#fff!important;border:1.5px solid #070707!important}
.fluence-v5 .ig-reels-page .ig-post-actions,
.fluence-v5 .ig-detail-page .ig-post-actions,
.fluence-v5 .ig-feed-page .native-media-card>.media-actions.ig-post-actions,
.fluence-v5 .ig-feed-page .native-media-card>.v5-language-radar,
.fluence-v5 .ig-feed-page .native-media-card>.learning-language-radar {
  background:#fff!important;color:#070707!important;
}
.fluence-v5 .ig-feed-page .native-media-card>.fluence-subtitle-overlay,
.fluence-v5 .ig-feed-page .native-media-card>[data-fluence-subtitle-overlay] {
  background:#fff!important;color:#070707!important;
  border-top:1px solid #070707!important;
}
.fluence-v5 .ig-feed-page .native-media-stage--book,
.fluence-v5 .ig-feed-page .native-media-stage--audio {background:#fff!important}
.fluence-v5 .ig-feed-page .feed-card:not(.native-media-card) :is(h2,p,small) {color:#070707!important}
.fluence-v5 :is(.v5-language-radar,.learning-language-radar,.search-status,.open-library-card-copy) {color:#070707!important}

/* Controls: solid black primary, white secondary; never translucent or grey outlines. */
.fluence-v5 :is(
  .ig-library-filters button,.ig-profile-actions button,.ig-feed-language strong,
  .media-actions button,.ig-post-actions button,.review-ratings button,
  .review-reveal,.vocab-cta button,.inline-discussion button,
  .v5-explore-search button,.search-hub-form>button,.search-provider-tabs button,
  .search-preview-copy button,.open-library-tabs button,.open-library-form button,
  .open-library-actions button,.open-library-actions a,.open-library-footer button,
  .curriculum-tab,.v5-settings-action,.v5-settings-head button,
  .fluence-book-reader>header button,.v5-practice-action,.social-practice-actions button
) {
  background:#fff!important;
  background-image:none!important;
  color:#070707!important;
  border:1px solid #070707!important;
  border-radius:13px!important;
  box-shadow:none!important;
}
.fluence-v5 :is(
  .ig-library-filters button.is-active,.search-provider-tabs button.is-active,
  .open-library-tabs button.is-active,.curriculum-tab.is-active,
  .review-reveal,.discussion-send,.v5-settings-danger,
  .ig-feed-page .licensed-article-open
) {
  background:#070707!important;
  background-image:none!important;
  color:#fff!important;
  border:1px solid #070707!important;
  box-shadow:2px 2px 0 rgba(0,0,0,.18)!important;
}
.fluence-v5 .ig-feed-page .ig-post-actions button,
.fluence-v5 .ig-reels-page .ig-post-actions button,
.fluence-v5 .ig-detail-page .ig-post-actions button {border:1px solid transparent!important}
.fluence-v5 .ig-feed-page .ig-post-actions button:hover,
.fluence-v5 .ig-reels-page .ig-post-actions button:hover {background:#ededed!important;border-color:#070707!important}
.fluence-v5 .ig-feed-page .ig-post-actions button.is-active[data-social="like"] {color:#a31a64!important}
.fluence-v5 :is(
  .ig-feed-language strong,.native-vocab-chip,.learning-word-chip,
  .content-pill,.target-strip span,.stage-pill,.interest-pill,
  .curriculum-now span,.map-chapters span
) {background:#fff!important;background-image:none!important;color:#070707!important;border:1px solid #070707!important}
.fluence-v5 :is(
  input:not([type="checkbox"]):not([type="radio"]),textarea,select,
  .search-hub-form input,.open-library-form input,.v5-explore-search input,
  .reference-inventory input
) {
  background:#fff!important;background-image:none!important;
  border:1px solid #070707!important;border-radius:12px!important;
  color:#070707!important;box-shadow:none!important;
}
.fluence-v5 :is(input,textarea)::placeholder {color:#515151!important;opacity:1}
.fluence-v5 :is(.ig-section-heading h1,.ig-reels-heading strong,.curriculum-hero h1,.search-hub h1) {
  color:#070707!important;
  font-weight:850!important;
  letter-spacing:-.045em;
}

/* Settings, dialogs, Lya and secondary views. */
.fluence-v5 .v5-settings-dialog {
  background:#fff!important;color:#070707!important;
  border:1.5px solid #070707!important;
  border-radius:18px!important;box-shadow:4px 4px 0 #070707!important;
}
.fluence-v5 .v5-settings-dialog::backdrop {background:rgba(0,0,0,.63)!important}
.fluence-v5 .v5-settings-body section {border-bottom:1px solid #070707!important}
.fluence-v5 .fluence-book-reader {background:#fff!important;color:#070707!important}
.fluence-v5 .fluence-book-reader>header {
  background:#fff!important;color:#070707!important;
  border-bottom:1.5px solid #070707!important;
}
.fluence-v5 .fluence-book-reader article {background:#fff!important;color:#070707!important}
body:has(.fluence-v5) :is(.global-buddy-panel,.buddy-turn p,.global-buddy-compose) {
  background:#fff!important;color:#070707!important;
  border:1px solid #070707!important;
}
body:has(.fluence-v5) .global-buddy-panel {border-radius:18px!important;box-shadow:2px 2px 0 #070707!important}
body:has(.fluence-v5) .global-buddy-head {background:#070707!important;color:#fff!important}
body:has(.fluence-v5) .global-buddy-head :is(button,strong,small) {color:#fff!important}
body:has(.fluence-v5) .global-buddy-launcher,
body:has(.fluence-v5) .global-buddy-send {
  background:#070707!important;color:#fff!important;
  border:1px solid #070707!important;box-shadow:2px 2px 0 rgba(0,0,0,.18)!important;
}
body:has(.fluence-v5) .global-buddy-compose textarea {
  background:#fff!important;color:#070707!important;border:1px solid #070707!important;
}

/* Fast select onboarding (actual current first-run flow) and recovery/loading. */
body:has(.simple-onboarding) .topbar {
  background:#070707!important;color:#fff!important;
  border-bottom:1px solid #070707!important;
  backdrop-filter:none!important;
}
body:has(.simple-onboarding) .topbar .brand {color:#fff!important}
body:has(.simple-onboarding) .topbar .brand__mark {
  background:#fff!important;color:#070707!important;border:1px solid #fff!important;
}
body:has(.simple-onboarding) .topbar .prototype-chip {
  background:#fff!important;color:#070707!important;border:1px solid #fff!important;
}
.simple-onboarding {background:transparent!important;color:#070707!important}
.simple-onboarding :is(.simple-card,.simple-handoff,.advanced-panel) {
  background:#fff!important;background-image:none!important;color:#070707!important;
  border:1.5px solid #070707!important;border-radius:19px!important;
  box-shadow:2px 2px 0 #070707!important;
}
.simple-onboarding .simple-progress span {
  background:#fff!important;border:1px solid #070707!important;height:8px!important;
}
.simple-onboarding .simple-progress span.is-on {background:#070707!important}
.simple-onboarding .simple-copy :is(h1,small,p) {color:#070707!important}
.simple-onboarding .simple-copy h1 {font-weight:850!important;letter-spacing:-.05em}
.simple-onboarding :is(.choice-card,.interest-chip,.simple-back,.advanced-detail textarea) {
  background:#fff!important;color:#070707!important;border:1px solid #070707!important;
  border-radius:13px!important;box-shadow:2px 2px 0 #070707!important;
}
.simple-onboarding .choice-card span {color:#333!important}
.simple-onboarding :is(.choice-card.is-selected,.interest-chip.is-selected) {
  background:#070707!important;color:#fff!important;
  border-color:#070707!important;box-shadow:3px 3px 0 #9d83b5!important;
}
.simple-onboarding .choice-card.is-selected span {color:#fff!important}
.simple-onboarding .choice-card:hover:not(:disabled),
.simple-onboarding .interest-chip:hover:not(:disabled) {transform:translateY(-2px)}
.simple-onboarding .choice-card:disabled {opacity:.55;box-shadow:none!important;cursor:not-allowed}
.simple-onboarding .advanced-toggle {color:#070707!important}
.simple-onboarding .advanced-toggle span {color:#333!important}
.simple-onboarding .simple-footer {
  background:#fff!important;color:#070707!important;border-top:1.5px solid #070707!important;
}
.simple-onboarding .simple-next {
  background:#070707!important;color:#fff!important;
  border:1px solid #070707!important;border-radius:13px!important;
  box-shadow:3px 3px 0 #9d83b5!important;
}
.simple-onboarding .simple-next:disabled {opacity:.45!important;box-shadow:none!important}
.simple-onboarding .simple-handoff-mark {background:#070707!important;border:1px solid #070707!important}
.simple-onboarding .advanced-detail textarea {width:100%;max-width:100%}

/* Legibility and interaction safety. */
.fluence-v5 :is(button,input,textarea,select,a):focus-visible,
.simple-onboarding :is(button,input,textarea,select,a):focus-visible,
body:has(.fluence-v5) .global-buddy-panel :is(button,textarea):focus-visible {
  outline:3px solid #6c3ca4!important;
  outline-offset:3px!important;
}
@media(max-width:900px) {
  /* Retain edge-to-edge Instagram post layout and player dimensions. */
  .fluence-v5 .ig-feed-page .feed-card,
  .fluence-v5 .ig-feed-page .native-media-card,
  .fluence-v5 .ig-feed-page .media-card {
    border-left:0!important;border-right:0!important;
    border-top:0!important;border-bottom:1px solid #070707!important;
    border-radius:0!important;box-shadow:none!important;
  }
  .fluence-v5 .ig-feed-page .ig-feed-header,
  .fluence-v5 .ig-feed-page .ig-topic-tray {border-left:0!important;border-right:0!important}
  .fluence-v5 .v4-mobile-nav {background:#070707!important}
}
@media(prefers-reduced-motion:reduce) {
  .simple-onboarding .choice-card:hover {transform:none!important}
}

/* Fallback surfaces from the earlier onboarding flow share the same design language.
   They are not reactivated or used as alternate onboarding UX. */
body:has(.onboarding-shell) {
  background:#ede5f3 url("/cella-source-gradient.svg") center/cover fixed!important;
}
body:has(.onboarding-shell) .topbar {
  background:#070707!important;color:#fff!important;border-bottom:1px solid #070707!important;
}
body:has(.onboarding-shell) .topbar :is(.brand,.prototype-chip,.version) {color:#fff!important}
body:has(.onboarding-shell) .brand__mark {background:#fff!important;color:#070707!important}
.onboarding-shell {background:transparent!important;color:#070707!important}
.onboarding-shell :is(.onboarding-card,.outcome-card,.baseline-task,.info-box,.explain-box) {
  background:#fff!important;color:#070707!important;border:1px solid #070707!important;
  border-radius:16px!important;box-shadow:2px 2px 0 #070707!important;
}
.onboarding-shell :is(.large-input,.choice-chip,.secondary-btn,.ghost-btn) {
  background:#fff!important;color:#070707!important;border:1px solid #070707!important;
}
.onboarding-shell :is(.choice-chip.selected,.primary-btn,.onboarding-progress__item.is-active>span) {
  background:#070707!important;color:#fff!important;border:1px solid #070707!important;
}
.fluence-v5 :is(.v5-global-search>button,.open-library-actions a,.global-buddy-action button) {
  background:#070707!important;color:#fff!important;border:1px solid #070707!important;
}


/* Main application refinement (onboarding intentionally untouched).
 * Fix the actual DOM hierarchy: one lilac page canvas, one card outline,
 * and one search-field border, not stacked CSS frames. */
body:has(.fluence-v5) {
  background-color:#d8bfeb!important;
  background-image:
    radial-gradient(ellipse at 18% 8%,#ecdef8 0%,transparent 48%),
    radial-gradient(ellipse at 82% 73%,#c9a8e8 0%,transparent 58%),
    linear-gradient(135deg,#d8bce9 0%,#e4cff3 54%,#d4b5ec 100%)!important;
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
}
/* The old video-driven opaque canvas was concealing the CSS lilac surface. */
body:has(.fluence-v5) .fluence-ambient-canvas {opacity:0!important}
body:has(.fluence-v5) #app,
.fluence-v5,
.fluence-v5 .v4-shell,
.fluence-v5 .v4-main,
.fluence-v5 .v4-main:has(.ig-feed-page),
.fluence-v5 .v4-main:has(.ig-reels-page),
.fluence-v5 .v4-main:has(.ig-library-page),
.fluence-v5 .v4-main:has(.ig-profile-page),
.fluence-v5 .v4-main:has(.ig-detail-page),
.fluence-v5 .ig-feed-page.v5-feed-page {
  background:transparent!important;
  background-color:transparent!important;
}

/* Post cards: identical 20px radius, opaque white and refined 1px black outline.
 * Keep the player's sizing, overflow semantics and real video elements intact. */
.fluence-v5 .ig-feed-page .feed-stream.ig-post-stream {
  gap:16px!important;
  margin-top:16px!important;
}
.fluence-v5 .ig-feed-page :is(.feed-card,.media-card,.native-media-card),
.fluence-v5 .ig-reels-page .ig-post,
.fluence-v5 .ig-detail-page .ig-post,
.fluence-v5 .ig-review-focus .review-card {
  background:#fff!important;
  background-color:#fff!important;
  background-image:none!important;
  border:1px solid #070707!important;
  border-radius:20px!important;
  box-shadow:2px 2px 0 #070707!important;
  /* Clip white descendants to the rounded lower corners: the legacy feed CSS
     explicitly sets overflow:visible on posts. Keep player geometry intact. */
  overflow:hidden!important;
}
.fluence-v5 .ig-feed-page .ig-post-header {
  background:#fff!important;
  border-radius:18px 18px 0 0!important;
}
.fluence-v5 .ig-feed-page .ig-feed-header {
  background:#fff!important;
  border:1px solid #070707!important;
  border-radius:20px 20px 0 0!important;
  backdrop-filter:none!important;
}
.fluence-v5 .ig-feed-page .ig-topic-tray {
  background:#fff!important;
  border:1px solid #070707!important;
  border-top:0!important;
  border-radius:0 0 20px 20px!important;
  backdrop-filter:none!important;
}
.fluence-v5 .ig-feed-page .ig-feed-header + .ig-topic-tray {margin-top:0!important}
.fluence-v5 .ig-feed-page .native-media-card>.v5-media-copy,
.fluence-v5 .ig-feed-page .native-media-card>.media-actions.ig-post-actions,
.fluence-v5 .ig-feed-page .native-media-card>.v5-language-radar,
.fluence-v5 .ig-feed-page .native-media-card>.learning-language-radar {
  background:#fff!important;
  color:#070707!important;
}

/* Search has no decorative outer container or oversized empty-state card.
   Actual result cards and the single search input retain their outlines. */
.fluence-v5 .search-hub .search-empty {
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:12px 0!important;
  margin:0!important;
  color:#343434!important;
  text-align:left!important;
}
.fluence-v5 .search-hub .search-result-grid:empty {display:none!important}

/* Library search section: never a panel. The white-card :is() rule above
   includes element selectors with greater specificity; excluding .search-hub
   from that rule is essential. This explicit reset is defense in depth. */
.fluence-v5 .v5-library-page > .search-hub[data-search-hub-v2-root],
.fluence-v5 .search-hub {
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  outline:0!important;
  padding:0!important;
  overflow:visible!important;
}
/* Open catalogues: individual book/film cards sit directly on the lilac canvas.
   The browser section is layout only, not a white card behind another grid. */
.fluence-v5 .open-library-browser {
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  overflow:visible!important;
}
.fluence-v5 .open-library-browser :is(.open-library-header,.open-library-footer),
.fluence-v5 .open-library-browser .open-library-grid {
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}
/* Topbar search: one outer frame. Inner input has NO additional border or
   white background; the submit control is the only inset action. */
.fluence-v5 form.v4-search.v5-global-search {
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  height:44px!important;
  margin:0!important;
  padding:4px 5px 4px 13px!important;
  background:#fff!important;
  background-image:none!important;
  border:1px solid #070707!important;
  border-radius:15px!important;
  box-shadow:none!important;
  color:#070707!important;
}
.fluence-v5 form.v4-search.v5-global-search:focus-within {
  outline:3px solid #c0a0eb!important;
  outline-offset:2px!important;
}
.fluence-v5 form.v4-search.v5-global-search > .v5-search-icon {
  display:block;
  flex:0 0 19px;
  width:19px;
  height:19px;
  color:#070707!important;
  stroke:currentColor;
}
.fluence-v5 form.v4-search.v5-global-search > input[type="search"] {
  display:block!important;
  flex:1 1 auto!important;
  min-width:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  outline:none!important;
  box-shadow:none!important;
  background:transparent!important;
  background-image:none!important;
  color:#070707!important;
  font-size:13px!important;
  font-weight:500!important;
}
.fluence-v5 form.v4-search.v5-global-search > button[type="submit"] {
  flex:0 0 34px!important;
  display:grid!important;
  place-items:center!important;
  width:34px!important;
  height:32px!important;
  min-width:34px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:10px!important;
  background:#070707!important;
  background-image:none!important;
  color:#fff!important;
  box-shadow:none!important;
}
.fluence-v5 form.v4-search.v5-global-search > button[type="submit"]:hover {
  background:#343434!important;
}
/* Library search: likewise one frame around the input and its submit button. */
.fluence-v5 form.search-hub-form {
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:6px!important;
  background:#fff!important;
  border:1px solid #070707!important;
  border-radius:16px!important;
  box-shadow:2px 2px 0 #070707!important;
}
.fluence-v5 form.search-hub-form:focus-within {outline:3px solid #c0a0eb!important;outline-offset:2px!important}
.fluence-v5 form.search-hub-form > input[type="search"] {
  flex:1 1 auto!important;
  min-width:0!important;
  height:40px!important;
  padding:0 10px!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  outline:none!important;
  color:#070707!important;
}
.fluence-v5 form.search-hub-form > button[type="submit"] {
  flex:0 0 auto!important;
  align-self:stretch!important;
  min-height:40px!important;
  padding:0 16px!important;
  background:#070707!important;
  color:#fff!important;
  border:0!important;
  border-radius:11px!important;
  box-shadow:none!important;
}

@media(max-width:900px) {
  .fluence-v5 .ig-feed-page .feed-stream.ig-post-stream {
    box-sizing:border-box!important;
    width:100%!important;
    padding:0 14px 24px!important;
    margin-top:14px!important;
    gap:14px!important;
  }
  .fluence-v5 .ig-feed-page :is(.feed-card,.media-card,.native-media-card) {
    border:1px solid #070707!important;
    border-radius:20px!important;
    box-shadow:2px 2px 0 #070707!important;
  }
  .fluence-v5 .ig-feed-page :is(.ig-feed-header,.ig-topic-tray) {
    width:calc(100% - 28px)!important;
    margin-left:14px!important;
    margin-right:14px!important;
    box-sizing:border-box!important;
  }
  .fluence-v5 .ig-feed-page .ig-feed-header {border:1px solid #070707!important;border-radius:20px 20px 0 0!important}
  .fluence-v5 .ig-feed-page .ig-topic-tray {border:1px solid #070707!important;border-top:0!important;border-radius:0 0 20px 20px!important}
  .fluence-v5 form.v4-search.v5-global-search {height:40px!important;padding:3px 4px 3px 10px!important}
  .fluence-v5 form.v4-search.v5-global-search > button[type="submit"] {width:30px!important;min-width:30px!important;flex-basis:30px!important;height:28px!important}
  .fluence-v5 form.search-hub-form {background:#fff!important}
}


/* ===========================================================
   Editorial typography hierarchy (all screens and overlays)
   - Poppins: interface / paragraphs / navigation / controls
   - Abril Fatface: only large section headings
   - Newsreader: literary quotations
   - Space Grotesk: media, article and book titles
   Typography only: no feed/player sizing or interaction changes.
   =========================================================== */
html body #app,
html body #app *,
html body .global-buddy-panel,
html body .global-buddy-panel *,
html body .fluence-article-reader,
html body .fluence-article-reader * {
  font-family:'Poppins',sans-serif!important;
}

/* Large SECTION headings only. The Fluence wordmark, content titles and
   book reader title are intentionally excluded from Abril Fatface. */
html body #app :is(
  .ig-section-heading h1,
  .ig-reels-heading strong,
  .feed-header h1,
  .section-header h1,
  .curriculum-hero h1,
  .simple-copy h1,
  .onboarding-content h1,
  .open-library-header h2,
  .v5-library-owned-head h2
) {
  font-family:'Abril Fatface',serif!important;
  font-weight:400!important;
  font-style:normal!important;
}

/* Newsreader's text-seriffed shapes improve the reading rhythm of excerpts.
   The separate explicitly-targeted book blockquote below has the same face. */
html body #app :is(
  blockquote,
  .book-hook-quote blockquote,
  .native-book-quote blockquote
),
html body .fluence-article-reader blockquote {
  font-family:'Newsreader',Georgia,serif!important;
  font-weight:400!important;
  font-style:normal!important;
}

/* One strong editorial typeface across content titles, including dynamically
   injected cards. The explicit old Instagram inherit!important rule loses to
   the fully-scoped selector below. */
html body #app .fluence-v5 :is(
  .ig-feed-page .native-media-card>.v5-media-copy h2,
  .ig-reels-page .ig-post .v5-media-copy h2,
  .ig-detail-page .ig-post .v5-media-copy h2,
  .native-book-cover h3,
  .native-book-quote>strong,
  .ig-article-fallback strong,
  .ig-tile-overlay strong,
  .v5-explore-tile strong,
  .search-result-card strong,
  .search-preview-copy h2,
  .open-library-card h3,
  .fluence-book-reader>header h1
),
html body .fluence-article-reader .article-reader-shell h1 {
  font-family:'Space Grotesk',sans-serif!important;
  font-weight:700!important;
  font-style:normal!important;
  letter-spacing:-.035em;
}

/* Simple interface components always remain Poppins, including buttons in
   quote stages and the controls on the reader overlay. */
html body #app :is(button,input,textarea,select,option),
html body .fluence-article-reader :is(button,input,textarea,select) {
  font-family:'Poppins',sans-serif!important;
}
html body #app .fluence-v5 .ig-wordmark {
  font-family:'Poppins',sans-serif!important;
  font-weight:800!important;
  font-style:normal!important;
  letter-spacing:-.045em!important;
}

/* Book excerpt: one author in the post header, one title in the excerpt,
   one prominent quote and one left-aligned reading CTA. No duplicate copy. */
html body #app .fluence-v5 .ig-feed-page .native-media-card .native-media-stage--book,
html body #app .fluence-v5 .ig-reels-page .native-media-card .native-media-stage--book,
html body #app .fluence-v5 .ig-detail-page .native-media-card .native-media-stage--book {
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:22px!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:clamp(22px,4.5vw,34px)!important;
  background:#fff!important;
  color:#070707!important;
}
html body #app .fluence-v5 .native-media-stage--book .native-book-quote {
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  margin:0!important;
  padding:0!important;
  background:#fff!important;
  color:#070707!important;
  gap:0!important;
}
html body #app .fluence-v5 .native-media-stage--book .native-book-quote blockquote {
  width:100%!important;
  max-width:28ch!important;
  margin:0!important;
  padding:0!important;
  font-family:'Newsreader',Georgia,serif!important;
  font-size:clamp(26px,3.6vw,35px)!important;
  font-weight:400!important;
  line-height:1.25!important;
  letter-spacing:-.015em!important;
  color:#111!important;
  overflow-wrap:break-word;
  text-wrap:pretty;
}
html body #app .fluence-v5 .native-media-stage--book .native-book-quote strong {
  display:block!important;
  max-width:100%!important;
  margin-top:20px!important;
  padding-top:13px!important;
  border-top:1px solid #070707!important;
  color:#343434!important;
  font-family:'Space Grotesk',sans-serif!important;
  font-size:13px!important;
  font-weight:600!important;
  line-height:1.5!important;
  letter-spacing:.005em!important;
}
html body #app .fluence-v5 .native-media-stage--book > button[data-open-book] {
  display:inline-flex!important;
  align-self:flex-start!important;
  justify-content:center!important;
  align-items:center!important;
  width:auto!important;
  min-height:42px!important;
  margin:0!important;
  padding:10px 19px!important;
  border:1px solid #070707!important;
  border-radius:14px!important;
  background:#070707!important;
  color:#fff!important;
  box-shadow:none!important;
  font-family:'Poppins',sans-serif!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1.3!important;
}
html body #app .fluence-v5 .native-media-stage--book > button[data-open-book]:hover {
  background:#2c2c2c!important;
}
html body #app .fluence-v5 .native-media-stage--book .native-book-cover {
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:8px!important;
  width:100%!important;
  height:auto!important;
  min-height:170px!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:22px!important;
  background:#f6f0fc!important;
  border:1px solid #070707!important;
  border-radius:16px!important;
  color:#070707!important;
}
html body #app .fluence-v5 .native-media-stage--book .native-book-cover h3 {
  margin:0!important;
  font-family:'Space Grotesk',sans-serif!important;
  font-size:clamp(27px,4vw,34px)!important;
  font-weight:400!important;
  line-height:1.2!important;
}
html body #app .fluence-v5 .native-media-stage--book .native-book-cover :is(span,p) {
  margin:0!important;
  font-family:'Poppins',sans-serif!important;
  font-size:12px!important;
  font-weight:500!important;
  line-height:1.5!important;
  color:#353535!important;
}
@media(max-width:600px) {
  html body #app .fluence-v5 .native-media-stage--book .native-book-quote blockquote {
    font-size:clamp(24px,6.5vw,29px)!important;
    line-height:1.26!important;
  }
  html body #app .fluence-v5 :is(.ig-wordmark,.ig-reels-heading strong) {
    font-size:clamp(25px,6vw,30px)!important;
  }
}