/* NarraSpace Launch CSS — 2026-09-19
   Consolidated from the exact active production cascade.
   Public visual repair rules that used to be injected/re-appended by JS are now static here.
   Database/API/admin behavior is intentionally untouched. */


/* ===== ACTIVE SOURCE: assets/narraspace-public-v37.css ===== */
/* NarraSpace Production Public CSS v26 | 2026-08-25
   Static Tailwind-compatible utilities + current production styles in source order. */
/* NarraSpace P11B v23 — static Tailwind 3 compatibility layer.
   Replaces the Tailwind Play CDN runtime. Utility audit: NarraSpace uses only
   basic display/flex/gap/size/accessibility helpers; they are reproduced below. */
*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}
::before,
::after { --tw-content: ""; }
html,
:host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}
body { margin: 0; line-height: inherit; }
hr { height: 0; color: inherit; border-top-width: 1px; }
abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }
h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b,strong { font-weight: bolder; }
code,kbd,samp,pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-size: 1em;
}
small { font-size: 80%; }
sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
button,input,optgroup,select,textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button,select { text-transform: none; }
button,input:where([type="button"]),input:where([type="reset"]),input:where([type="submit"]) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
:-moz-focusring { outline: auto; }
:-moz-ui-invalid { box-shadow: none; }
progress { vertical-align: baseline; }
::-webkit-inner-spin-button,::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
summary { display: list-item; }
blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre { margin: 0; }
fieldset { margin: 0; padding: 0; }
legend { padding: 0; }
ol,ul,menu { list-style: none; margin: 0; padding: 0; }
dialog { padding: 0; }
textarea { resize: vertical; }
input::placeholder,textarea::placeholder { opacity: 1; color: #9ca3af; }
button,[role="button"] { cursor: pointer; }
:disabled { cursor: default; }
img,svg,video,canvas,audio,iframe,embed,object { display: block; vertical-align: middle; }
img,video { max-width: 100%; height: auto; }
[hidden] { display: none; }

/* Audited Tailwind utilities used by NarraSpace. */
.block{display:block}
.fixed{position:fixed}
.flex{display:flex}
.flex-wrap{flex-wrap:wrap}
.grid{display:grid}
.hidden{display:none}
.inline-block{display:inline-block}
.inline-flex{display:inline-flex}
.justify-center{justify-content:center}
.visible{visibility:visible}
.rounded{border-radius:.25rem}
.resize{resize:both}
.scroll-smooth{scroll-behavior:smooth}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.gap-4{gap:1rem}
.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-full{height:100%}
.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}


* { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { min-height: 100%; font-family: var(--body-font, 'Plus Jakarta Sans', sans-serif); }

    :root {
      --green-1: #008a00;
      --green-2: #007a00;
      --mustard: #f4c430;
      --dark: #1a1a1a;
      --light: #f5faf2;
      --white: #ffffff;
      --soft-green: #e8f0e3;
      --border: #c9d9c1;
      --blue: #0ea5e9;
      --logo-size: 40px;
      --hero-wide-logo-width: 260px;
      --hero-logo-size: 72px;
      --navbar-height: 80px;
      --logo-radius: 10px;
      --logo-bg: #008a00;
      --hero-min-height: calc(100vh - var(--navbar-height));
      --preview-topbar-bg: #36573a;
      --preview-topbar-text: #fffdf4;
      --preview-title-text: #fffdf4;
      --preview-title-size: 1rem;
      --preview-title-weight: 900;
      --preview-title-font: var(--heading-font);
      --preview-action-bg: #fff7d6;
      --preview-action-text: #26311f;
      --preview-toolbar-bg: #f4ecd6;
      --preview-toolbar-text: #46543d;
      --preview-info-bg: #fffaf0;
      --preview-info-text: #405934;
      --preview-icon-bg: #fff7d6;
      --preview-icon-text: #26311f;
      --preview-surface-bg: #f7f4eb;
      --preview-viewer-bg: #f3eddf;
      --preview-info-weight: 700;
      --hero-text-align: center;
      --hero-title-weight: 800;
      --hero-justify: center;
      --hero-logo-margin: auto;
      --about-text-align: left;
      --about-title-weight: 800;
      --about-body-weight: 600;
      --about-justify: flex-start;
      --library-text-align: center;
      --library-justify: center;
      --library-title-weight: 800;
      --impact-board-bg: #355539;
      --impact-card-bg: rgba(255,255,255,0.14);
      --impact-accent-color: #f4c430;
      --about-panel-bg: #ffffff;
      --about-graphic-image: none;
      --about-graphic-overlay: 0.72;
      --why-card-bg: #ffffff;
      --why-accent-color: #f4c430;
      --library-bg: #f5faf2;
      --library-card-bg: #fffdf7;
      --library-text: #36573a;
      --library-muted: #5f6d57;
      --library-accent: #f4c430;
      --library-button-bg: #36573a;
      --library-button-text: #fffaf0;
      --library-feature-bg: #36573a;
      --library-feature-text: #fffaf0;
      --body-font: 'Plus Jakarta Sans', sans-serif;
      --heading-font: 'Poppins', sans-serif;
      --about-title-color: #1d3a24;
      --about-text-color: #5a6854;
      --about-button-bg: #ffffff;
      --about-button-text: #36573a;
      --motion-soft: cubic-bezier(0.2, 0.82, 0.22, 1);
      --motion-pop: cubic-bezier(0.18, 0.88, 0.28, 1.2);
    }

    html, body { font-family: var(--body-font); }
    html { scroll-behavior: smooth; scroll-padding-top: calc(var(--navbar-height) + 18px); }
    body { background: linear-gradient(180deg, var(--light) 0%, #f0f8ec 100%); color: var(--dark); -webkit-tap-highlight-color: transparent; overscroll-behavior-y: auto; }
    #home,

    #latest-spotlight,

    #saved-shelf,

    #recent-shelf,

    #stories,

    #about,

    #links,

    #contact,

    #discovery-studio{
      scroll-margin-top: calc(var(--navbar-height) + 18px);
    }
    body.modal-open { overflow: hidden; overscroll-behavior: none; }
    body.app-loading { overflow: hidden; }
    body.app-loading #app {
      opacity: 0;
      pointer-events: none;
    }
    #app {
      transition: opacity 0.28s ease;
      transform: none !important;
      filter: none !important;
    }
    .app-loader {
      position: fixed;
      inset: 0;
      background:
        radial-gradient(circle at top, rgba(255,255,255,0.18), transparent 32%),
        linear-gradient(180deg, #f6fbf1 0%, #edf7e6 100%);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 120;
      padding: 24px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .loader-media-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: none;
      z-index: 0;
      pointer-events: none;
    }
    .loader-media-video.show {
      display: block;
    }
    body.app-loading .app-loader {
      display: flex;
    }
    body.loader-booting .app-loader-card {
      opacity: 0;
      transform: translateY(10px) scale(0.98);
    }
    body.loader-booting .app-loader::after {
      content: '';
      width: 42px;
      height: 42px;
      border-radius: 999px;
      border: 3px solid rgba(54, 87, 58, 0.18);
      border-top-color: rgba(54, 87, 58, 0.82);
      animation: bootSpin 0.9s linear infinite;
      position: absolute;
      z-index: 1;
    }
    .app-loader.force-visible {
      display: flex;
    }
    .app-loader-card {
      width: min(100%, 420px);
      background: rgba(255,255,255,0.9);
      border: 1px solid rgba(54, 87, 58, 0.12);
      border-radius: 24px;
      padding: 30px;
      text-align: center;
      box-shadow: 0 28px 70px rgba(43, 64, 38, 0.14);
      backdrop-filter: blur(14px);
      position: relative;
      overflow: hidden;
      z-index: 1;
      transition: opacity 0.24s ease, transform 0.24s ease, background 0.24s ease, border-color 0.24s ease;
    }
    .app-loader-card::before {
      content: '';
      position: absolute;
      left: 22px;
      right: 22px;
      bottom: 0;
      height: 4px;
      border-radius: 999px 999px 0 0;
      background: linear-gradient(90deg, transparent, rgba(244,196,48,0.72), transparent);
      animation: loaderLine 2.2s ease-in-out infinite;
      pointer-events: none;
    }
    .app-loader-mark {
      min-width: 72px;
      width: fit-content;
      height: 72px;
      margin: 0 auto 16px;
      padding: 0 18px;
      border-radius: 20px;
      display: grid;
      place-items: center;
      background: #36573a;
      color: #fffaf0;
      font-size: 1.15rem;
      font-weight: 900;
      box-shadow: 0 14px 28px rgba(43, 64, 38, 0.12);
      position: relative;
      isolation: isolate;
    }
    .app-loader-mark.has-image {
      width: 86px;
      padding: 10px;
      background: rgba(255,255,255,0.82);
    }
    .app-loader-mark img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      pointer-events: none;
      user-select: none;
    }
    .app-loader-mark::before {
      content: none;
    }
    .app-loader-mark::after {
      content: none;
    }
    .app-loader-title {
      color: #24432b;
      font-size: 1.25rem;
      font-weight: 900;
      margin-bottom: 8px;
    }
    .app-loader-text {
      color: #62715b;
      font-weight: 700;
      line-height: 1.6;
    }
    .app-loader-dots {
      display: inline-flex;
      gap: 8px;
      margin-top: 18px;
    }
    .app-loader-dots span {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #6e8d72;
      animation: loaderPulse 1s ease-in-out infinite;
    }
    .app-loader-dots span:nth-child(2) { animation-delay: 0.15s; }
    .app-loader-dots span:nth-child(3) { animation-delay: 0.3s; }
    .app-loader.loader-variant-minimal .app-loader-card::before,
    .loader-preview-surface.loader-variant-minimal .app-loader-card::before,
    .app-loader.loader-variant-minimal .app-loader-mark::before,
    .loader-preview-surface.loader-variant-minimal .app-loader-mark::before,
    .app-loader.loader-variant-minimal .app-loader-mark::after,
    .loader-preview-surface.loader-variant-minimal .app-loader-mark::after,
    .app-loader.loader-variant-minimal .app-loader-dots,
    .loader-preview-surface.loader-variant-minimal .app-loader-dots {
      display: none;
    }
    .app-loader.loader-variant-badge .app-loader-mark,
    .loader-preview-surface.loader-variant-badge .app-loader-mark {
      border-radius: 999px;
      animation: loaderBadgeBreathe 1.8s ease-in-out infinite;
    }
    .app-loader.loader-variant-badge .app-loader-card::before,
    .loader-preview-surface.loader-variant-badge .app-loader-card::before,
    .app-loader.loader-variant-badge .app-loader-dots,
    .loader-preview-surface.loader-variant-badge .app-loader-dots,
    .app-loader.loader-variant-badge .app-loader-mark::after,
    .loader-preview-surface.loader-variant-badge .app-loader-mark::after {
      display: none;
    }
    .app-loader.loader-variant-dots .app-loader-card::before,
    .loader-preview-surface.loader-variant-dots .app-loader-card::before,
    .app-loader.loader-variant-dots .app-loader-mark::before,
    .loader-preview-surface.loader-variant-dots .app-loader-mark::before,
    .app-loader.loader-variant-dots .app-loader-mark::after,
    .loader-preview-surface.loader-variant-dots .app-loader-mark::after {
      display: none;
    }
    .app-loader.loader-variant-dots .app-loader-dots span,
    .loader-preview-surface.loader-variant-dots .app-loader-dots span {
      width: 12px;
      height: 12px;
      animation: loaderDotJump 0.82s ease-in-out infinite;
    }
    .app-loader.loader-variant-page .app-loader-card,
    .loader-preview-surface.loader-variant-page .app-loader-card {
      animation: loaderPageTurn 1.9s ease-in-out infinite;
    }
    .loader-preview-surface.loader-preview-replay .app-loader-card,
    .app-loader.force-visible .app-loader-card {
      animation-duration: 0.9s;
    }
    .loader-preview-surface {
      min-height: 320px;
      border-radius: 28px;
      padding: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at top, rgba(255,255,255,0.18), transparent 32%),
        linear-gradient(180deg, #f6fbf1 0%, #edf7e6 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.68);
    }
    .loader-preview-card {
      margin: 0;
      width: min(100%, 420px);
    }
    input[type="color"] {
      width: 48px;
      min-width: 48px;
      height: 38px;
      padding: 3px;
      border-radius: 10px;
      cursor: pointer;
      vertical-align: middle;
    }
    input[type="color"]::-webkit-color-swatch-wrapper {
      padding: 0;
    }
    input[type="color"]::-webkit-color-swatch {
      border: 0;
      border-radius: 7px;
    }
    input[type="color"]::-moz-color-swatch {
      border: 0;
      border-radius: 7px;
    }
    .form-group:has(input[type="color"]) {
      align-content: start;
    }
    .form-group:has(input[type="color"]) label {
      margin-bottom: 6px;
    }
    .form-grid:has(input[type="color"]) {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
      gap: 10px 14px;
      align-items: start;
    }
    .btn-loading-spinner {
      width: 16px;
      height: 16px;
      border-radius: 999px;
      border: 2px solid currentColor;
      border-right-color: transparent;
      display: inline-block;
      animation: busySpin 0.78s linear infinite;
    }
    button.is-busy,
    .btn-primary.is-busy,
    .btn-secondary.is-busy {
      cursor: wait;
      opacity: 0.82;
      transform: none !important;
    }
    .loader-preview-footnote {
      margin-top: 14px;
      color: #64715c;
      font-size: 0.9rem;
      font-weight: 700;
      line-height: 1.55;
    }
    .loader-controls-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 16px;
      margin-top: 18px;
    }
    .mini-note {
      color: #64715c;
      font-size: 0.88rem;
      font-weight: 600;
      line-height: 1.55;
    }
    .loader-upload-card {
      border: 1px dashed #c5d8bd;
      border-radius: 16px;
      padding: 16px;
      background: #fbfef8;
    }
    .loader-upload-card input[type="file"] {
      width: 100%;
    }
    .loader-image-status {
      margin-top: 10px;
      color: #5f6e57;
      font-size: 0.9rem;
      font-weight: 700;
      line-height: 1.5;
    }
    h1, h2, h3 { font-family: var(--heading-font); font-weight: 800; }
    a { text-decoration: none; color: inherit; }

    .navbar {
      background: var(--white);
      border-bottom: 3px solid var(--green-1);
      box-shadow: 0 4px 15px rgba(0, 138, 0, 0.08);
      position: sticky;
      top: 0;
      z-index: 50;
    }

    .navbar-inner {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: var(--navbar-height);
      gap: 18px;
    }

    .navbar-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--green-1);
      white-space: nowrap;
    }

    .navbar-brand-icon {
      width: var(--logo-size);
      height: var(--logo-size);
      background: var(--logo-bg);
      border-radius: var(--logo-radius);
      display: grid;
      place-items: center;
      color: var(--white);
      font-size: 1.3rem;
      overflow: hidden;
    }

    .nav-links { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
    .nav-link, .admin-link {
      color: var(--dark);
      font-weight: 700;
      font-size: 0.93rem;
      border: 0;
      background: transparent;
      cursor: pointer;
      font-family: inherit;
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 2px;
      touch-action: manipulation;
    }
    .nav-link { position: relative; border-radius: 999px; padding-inline: 8px; }
    .nav-link svg { width: 16px; height: 16px; flex: 0 0 auto; }
    .nav-link span { white-space: nowrap; }
    .nav-link::after {
      content: '';
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: 2px;
      height: 3px;
      border-radius: 999px;
      background: var(--mustard);
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 0.22s ease;
    }
    .nav-link:hover, .admin-link:hover { color: var(--green-1); }
    .nav-link:hover::after,
    .nav-link.active::after { transform: scaleX(1); }
    .nav-link.active {
      color: var(--green-1);
      background: color-mix(in srgb, var(--soft-green) 72%, transparent 28%);
    }
    .admin-link { color: var(--green-1); }

    .hero {
      min-height: var(--hero-min-height);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      position: relative;
      overflow: hidden;
      padding: 72px 24px;
      background: linear-gradient(135deg, var(--green-1) 0%, var(--green-2) 100%);
      background-size: cover;
      background-position: center;
    }

    .hero::before,
    .hero::after {
      content: '';
      position: absolute;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.06);
      animation: floatBg 9s ease-in-out infinite;
    }

    .hero::before { width: 560px; height: 560px; top: -260px; left: -140px; }
    .hero::after { width: 390px; height: 390px; right: -90px; bottom: -160px; animation-direction: reverse; }

    .hero-container {
      width: 100%;
      max-width: 920px;
      position: relative;
      z-index: 1;
      text-align: var(--hero-text-align);
    }

    .hero-icon {
      width: var(--hero-logo-size);
      height: var(--hero-logo-size);
      margin: 0 var(--hero-logo-margin) 20px;
      display: grid;
      place-items: center;
      font-size: calc(var(--hero-logo-size) * 0.62);
      animation: bounceIcon 3s ease-in-out infinite;
      overflow: hidden;
    }
    .hero-icon.wide-logo {
      width: min(var(--hero-wide-logo-width), 86vw);
      height: auto;
      min-height: calc(var(--hero-logo-size) * 0.58);
      max-height: calc(var(--hero-logo-size) * 1.18);
      animation: bannerLogoFloat 4.4s ease-in-out infinite;
    }
    .hero-icon.wide-logo img {
      object-fit: contain;
    }
    .hero h1 { font-size: clamp(2.1rem, 6vw, 3.7rem); line-height: 1.15; margin-bottom: 12px; color: var(--white); font-weight: var(--hero-title-weight); }
    .hero-division { font-size: 1.25rem; font-weight: 700; color: rgba(255,255,255,0.95); margin-bottom: 16px; }
    .hero p { font-size: 1.08rem; color: rgba(255,255,255,0.92); line-height: 1.8; max-width: 760px; margin: 0 var(--hero-logo-margin) 36px; }

    .notice-panel {
      background: rgba(255,255,255,0.15);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 12px;
      padding: 22px;
      margin: 0 auto 30px;
      max-width: 760px;
    }
    .btn-primary, .btn-secondary, .btn-danger, .btn-light {
      border: 0;
      border-radius: 8px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-family: inherit;
      font-weight: 800;
      transition: transform 0.25s, box-shadow 0.25s, background 0.25s, color 0.25s;
      min-height: 44px;
      max-width: 100%;
      line-height: 1.2;
      text-align: center;
      white-space: normal;
      overflow-wrap: anywhere;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    button,
    a,
    input,
    select,
    textarea {
      touch-action: manipulation;
    }
    button i,
    .btn-primary i,
    .btn-secondary i,
    .btn-danger i,
    .btn-light i {
      flex: 0 0 auto;
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--green-1), var(--green-2));
      color: var(--white);
      padding: 14px 28px;
      box-shadow: 0 8px 20px rgba(0, 138, 0, 0.22);
    }

    .btn-light {
      background: var(--white);
      color: var(--green-1);
      padding: 15px 34px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    }

    .btn-secondary {
      background: var(--white);
      color: var(--green-1);
      padding: 13px 24px;
      border: 2px solid var(--green-1);
    }

    .btn-danger {
      background: #ef4444;
      color: var(--white);
      padding: 10px 14px;
      font-size: 0.9rem;
    }

    .btn-primary:hover, .btn-secondary:hover, .btn-light:hover, .btn-danger:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(0, 138, 0, 0.25);
    }
    .btn-primary:active,
    .btn-secondary:active,
    .btn-light:active,
    .btn-danger:active,
    .notice-nav-btn:active,
    .filter-btn:active {
      transform: translateY(1px) scale(0.98);
    }
    .admin-view button.admin-click-feedback,
    .modal button.admin-click-feedback {
      outline: 3px solid rgba(244, 196, 48, 0.45);
      transform: translateY(-1px) scale(0.985);
    }
    .btn-primary:focus-visible,
    .btn-secondary:focus-visible,
    .btn-light:focus-visible,
    .btn-danger:focus-visible,
    .notice-nav-btn:focus-visible,
    .filter-btn:focus-visible,
    .page-btn:focus-visible,
    .doc-action:focus-visible,
    .admin-nav-btn:focus-visible,
    .settings-tab-btn:focus-visible,
    .upload-type-btn:focus-visible,
    .upload-step-btn:focus-visible {
      outline: 3px solid rgba(244, 196, 48, 0.58);
      outline-offset: 2px;
    }
    button:disabled,
    .btn-secondary:disabled,
    .btn-primary:disabled,
    .btn-danger:disabled,
    .btn-light:disabled {
      opacity: 0.55;
      cursor: not-allowed;
      transform: none !important;
      box-shadow: none !important;
    }

    .section { max-width: 1400px; margin: 0 auto; padding: 78px 24px; }
    .section-title {
      font-size: clamp(1.9rem, 5vw, 2.75rem);
      margin-bottom: 14px;
      color: var(--green-1);
      text-align: center;
    }
    .section-subtitle {
      color: #626262;
      font-weight: 600;
      text-align: center;
      margin-bottom: 44px;
    }
    body:not(.admin-mode) .section-scroll-highlight .section-title,
    body:not(.admin-mode) .section-scroll-highlight h2 {
      animation: navTargetPulse 0.82s var(--motion-soft) both;
    }
    body:not(.admin-mode) .section-scroll-highlight {
      position: relative;
    }
    body:not(.admin-mode) .section-scroll-highlight::after {
      content: '';
      position: absolute;
      inset: 18px 18px auto 18px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--mustard) 72%, transparent), transparent);
      opacity: 0;
      pointer-events: none;
      animation: sectionArrivalLine 0.9s var(--motion-soft) both;
    }
    @keyframes navTargetPulse {
      0% { filter: brightness(0.96); transform: translateY(8px) scale(0.992); }
      52% { filter: brightness(1.08); color: color-mix(in srgb, var(--green-1) 82%, var(--mustard) 18%); transform: translateY(-1px) scale(1.002); }
      100% { filter: brightness(1); transform: translateY(0) scale(1); }
    }
    @keyframes sectionArrivalLine {
      0% { opacity: 0; transform: scaleX(0.35); }
      38% { opacity: 0.78; transform: scaleX(1); }
      100% { opacity: 0; transform: scaleX(1); }
    }
    body.nav-gliding {
      scroll-behavior: auto;
    }
    .navbar.nav-glide-active {
      box-shadow: 0 12px 30px rgba(35, 65, 39, 0.14);
    }
    @media (min-width: 821px) {
      body:not(.admin-mode) .nav-glide-target {
        animation: desktopSectionSlideIn 0.78s var(--motion-soft) both;
      }
    }
    @keyframes desktopSectionSlideIn {
      0% { opacity: 0.7; transform: translateY(18px); }
      65% { opacity: 1; transform: translateY(-2px); }
      100% { opacity: 1; transform: translateY(0); }
    }


    .feature-grid, .content-grid, .portal-grid {
      display: grid;
      gap: 24px;
    }
    .feature-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .content-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
    #stories-container.content-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); align-items: stretch; }
    .portal-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

    .feature-card, .content-card, .contact-form, .admin-panel {
      background: var(--white);
      border: 2px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 138, 0, 0.08);
    }

    .feature-card, .content-card { padding: 28px; position: relative; overflow: hidden; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
    body:not(.admin-mode) .btn-primary,
    body:not(.admin-mode) .btn-secondary,
    body:not(.admin-mode) .btn-light,
    body:not(.admin-mode) .filter-btn,
    body:not(.admin-mode) .nav-link,
    body:not(.admin-mode) .content-card,
    body:not(.admin-mode) .feature-card,
    body:not(.admin-mode) .portal-card {
      transition-timing-function: var(--motion-soft);
    }
    body:not(.admin-mode) .btn-primary:active,
    body:not(.admin-mode) .btn-secondary:active,
    body:not(.admin-mode) .btn-light:active,
    body:not(.admin-mode) .filter-btn:active,
    body:not(.admin-mode) .content-card:active,
    body:not(.admin-mode) .portal-card:active {
      transform: translateY(1px) scale(0.985);
    }
    @media (hover: hover) and (pointer: fine) {
      body:not(.admin-mode) .content-card:hover,
      body:not(.admin-mode) .feature-card:hover,
      body:not(.admin-mode) .portal-card:hover {
        transform: translateY(-6px) scale(1.006);
      }
      body:not(.admin-mode) .nav-link:hover {
        transform: translateY(-1px);
      }
    }
    body:not(.admin-mode) .nav-link:active {
      transform: translateY(1px) scale(0.98);
    }
    body:not(.admin-mode) .story-type-btn,
    body:not(.admin-mode) .filter-btn,
    body:not(.admin-mode) .notice-nav-btn {
      transition: transform 0.18s var(--motion-soft), box-shadow 0.18s var(--motion-soft), background 0.18s var(--motion-soft), color 0.18s var(--motion-soft);
    }
    body:not(.admin-mode) .story-type-btn:active,
    body:not(.admin-mode) .notice-nav-btn:active {
      transform: scale(0.96);
    }
    .feature-card::before, .content-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;
      background: linear-gradient(90deg, var(--green-1), var(--green-2));
    }
    .feature-card:hover, .content-card:hover { transform: translateY(-8px); box-shadow: 0 16px 36px rgba(0, 138, 0, 0.16); border-color: var(--green-1); }
    .feature-card::after,
    .content-card::after,
    .impact-card::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.36) 44%, transparent 58%);
      transform: translateX(-120%);
      transition: transform 0.65s ease;
    }
    .feature-card:hover::after,
    .content-card:hover::after,
    .impact-card:hover::after {
      transform: translateX(120%);
    }
    .feature-card,
    .content-card,
    .impact-card,
    .portal-card,
    .notice-slide,
    .showcase-slide {
      animation: cardSoftRise 0.58s ease both;
      animation-delay: calc(var(--card-index, 0) * 40ms);
    }
    .feature-card:nth-child(2),
    .content-card:nth-child(2),
    .impact-card:nth-child(2),
    .portal-card:nth-child(2) { --card-index: 1; }
    .feature-card:nth-child(3),
    .content-card:nth-child(3),
    .impact-card:nth-child(3),
    .portal-card:nth-child(3) { --card-index: 2; }
    .feature-card:nth-child(4),
    .content-card:nth-child(4),
    .impact-card:nth-child(4),
    .portal-card:nth-child(4) { --card-index: 3; }
    .feature-card:nth-child(n+5),
    .content-card:nth-child(n+5),
    .portal-card:nth-child(n+5) { --card-index: 4; }
    .content-card {
      cursor: pointer;
      border-width: 1px;
      box-shadow: 0 1px 2px rgba(29, 62, 35, 0.05), 0 18px 42px rgba(29, 62, 35, 0.07);
    }
    body.app-ready #app {
      animation: pageReadyFade 0.42s ease both;
    }
    @keyframes pageReadyFade {
      from { opacity: 0.72; }
      to { opacity: 1; }
    }
    @keyframes cardSoftRise {
      from { opacity: 0; transform: translateY(14px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @media (max-width: 560px) {
      body:not(.admin-mode) .section-pill {
        min-height: 34px;
        padding: 8px 12px;
        font-size: 0.72rem;
      }
      body:not(.admin-mode) .section-pill i {
        width: 13px;
        height: 13px;
      }
      body:not(.admin-mode) .impact-board {
        padding: 14px;
      }
      body:not(.admin-mode) .impact-grid {
        gap: 8px;
      }
      body:not(.admin-mode) .impact-card {
        min-height: 132px;
        padding: 12px;
        border-radius: 16px;
      }
      body:not(.admin-mode) .impact-number {
        font-size: clamp(1.75rem, 9vw, 2.4rem);
      }
      body:not(.admin-mode) .impact-label,
      body:not(.admin-mode) .impact-note,
      body:not(.admin-mode) .impact-mini {
        font-size: 0.72rem;
        line-height: 1.35;
      }
      body:not(.admin-mode) .why-choose-grid {
        gap: 12px;
      }
      body:not(.admin-mode) .why-choose-card {
        min-height: 0;
        padding: 16px;
        gap: 10px;
        border-radius: 16px;
      }
      body:not(.admin-mode) .why-choose-card .feature-icon {
        width: 42px;
        height: 42px;
      }
      body:not(.admin-mode) .why-choose-card .feature-title {
        font-size: 0.96rem;
        line-height: 1.2;
      }
      body:not(.admin-mode) .why-choose-card .feature-desc {
        font-size: 0.82rem;
        line-height: 1.45;
      }
      body:not(.admin-mode) .discovery-grid {
        gap: 10px;
      }
      body:not(.admin-mode) .discovery-card {
        min-height: 150px;
        padding: 14px;
        border-radius: 14px;
      }
      body:not(.admin-mode) .discovery-icon {
        width: 38px;
        height: 38px;
      }
      body:not(.admin-mode) .discovery-count {
        min-width: 54px;
        padding: 8px 10px;
      }
      body:not(.admin-mode) .discovery-count strong {
        font-size: 1.5rem;
      }
      body:not(.admin-mode) .discovery-count span,
      body:not(.admin-mode) .discovery-label,
      body:not(.admin-mode) .discovery-body-copy,
      body:not(.admin-mode) .discovery-meta {
        font-size: 0.72rem;
        line-height: 1.35;
      }
      body:not(.admin-mode) .discovery-title {
        font-size: 0.94rem;
        line-height: 1.2;
      }
      body:not(.admin-mode) .discovery-tags {
        display: none;
      }
      body:not(.admin-mode) .discovery-action {
        min-height: 36px;
        padding: 8px 11px;
        font-size: 0.74rem;
      }
      body:not(.admin-mode) .spotlight-feature-card {
        border-radius: 14px;
      }
      body:not(.admin-mode) .spotlight-cover-art {
        min-height: 152px;
        aspect-ratio: 4 / 3;
      }
      body:not(.admin-mode) .spotlight-feature-copy {
        padding: 12px 12px 10px;
      }
      body:not(.admin-mode) .spotlight-pill,
      body:not(.admin-mode) .spotlight-kicker,
      body:not(.admin-mode) .spotlight-meta,
      body:not(.admin-mode) .spotlight-summary,
      body:not(.admin-mode) .spotlight-cta {
        font-size: 0.78rem;
      }
      body:not(.admin-mode) .spotlight-feature-card .spotlight-title {
        font-size: 0.94rem;
      }
      body:not(.admin-mode) .saved-shelf-shell,
      body:not(.admin-mode) .recent-shelf-shell {
        padding: 14px;
        border-radius: 16px;
      }
      #recent-shelf-grid .recent-shelf-card.storybook-card {
        display: grid !important;
        grid-template-columns: 84px minmax(0, 1fr) !important;
        min-height: 124px !important;
        aspect-ratio: auto !important;
        border-radius: 14px !important;
      }
      #recent-shelf-grid .recent-shelf-card .story-cover {
        position: relative;
        inset: auto;
        margin: 9px 0 9px 9px !important;
        height: 106px !important;
        min-height: 106px !important;
        max-height: 106px !important;
        border-radius: 10px !important;
      }
      #recent-shelf-grid .recent-shelf-card .story-body {
        position: relative;
        inset: auto;
        min-height: 0 !important;
        padding: 10px 10px 10px 8px !important;
      }
      #recent-shelf-grid .recent-shelf-card .story-title {
        font-size: 0.82rem !important;
        margin-bottom: 4px !important;
      }
      #recent-shelf-grid .recent-shelf-card .story-author,
      #recent-shelf-grid .recent-shelf-card .storybook-meta-row {
        font-size: 0.6rem !important;
      }
      #recent-shelf-grid .recent-shelf-card .read-more {
        width: 30px;
        min-width: 30px;
        min-height: 30px;
      }
      body:not(.admin-mode) .portal-grid {
        gap: 12px;
      }
      body:not(.admin-mode) .portal-card {
        padding: 16px;
        border-radius: 16px;
      }
      body:not(.admin-mode) .portal-card > div {
        grid-template-columns: 44px 1fr;
        gap: 12px;
      }
      body:not(.admin-mode) .portal-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        font-size: 1rem;
      }
      body:not(.admin-mode) .portal-title {
        font-size: 0.96rem;
        line-height: 1.2;
      }
      body:not(.admin-mode) .portal-desc {
        font-size: 0.8rem;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      body:not(.admin-mode) .contact-section-head {
        margin-bottom: 16px;
        text-align: left;
      }
      body:not(.admin-mode) .contact-intro {
        padding: 18px 16px;
        gap: 14px;
      }
      body:not(.admin-mode) .contact-intro h3 {
        font-size: 1.1rem;
        line-height: 1.25;
        margin: 10px 0 8px;
      }
      body:not(.admin-mode) .contact-intro p {
        font-size: 0.86rem;
        line-height: 1.55;
      }
      body:not(.admin-mode) .contact-intro-list {
        gap: 8px;
      }
      body:not(.admin-mode) .contact-intro-item {
        font-size: 0.72rem;
      }
      body:not(.admin-mode) .contact-intro-item i {
        width: 28px;
        height: 28px;
        padding: 6px;
      }
      body:not(.admin-mode) .contact-form {
        padding: 18px 14px;
      }
      body:not(.admin-mode) .contact-form-heading {
        gap: 8px;
        margin-bottom: 14px;
      }
      body:not(.admin-mode) .contact-form-heading h3 {
        font-size: 1rem;
      }
      body:not(.admin-mode) .contact-form-heading p {
        font-size: 0.8rem;
        line-height: 1.45;
      }
      body:not(.admin-mode) .contact-purpose-choices {
        gap: 8px;
      }
      body:not(.admin-mode) .contact-purpose-choice {
        min-height: 52px;
        grid-template-columns: 28px minmax(0, 1fr);
        padding: 10px 12px;
      }
      body:not(.admin-mode) .contact-purpose-choice i {
        width: 28px;
        height: 28px;
        padding: 6px;
      }
      body:not(.admin-mode) .contact-purpose-choice span {
        font-size: 0.78rem;
      }
      body:not(.admin-mode) .music-archive-section {
        margin: 10px 10px 34px;
        padding: 24px 12px 32px;
      }
      body:not(.admin-mode) .music-section-head {
        gap: 12px;
        margin-bottom: 14px;
      }
      body:not(.admin-mode) .music-feature {
        border-radius: 14px;
      }
      body:not(.admin-mode) .music-feature-art {
        min-height: 170px;
      }
      body:not(.admin-mode) .music-feature-copy {
        padding: 16px;
      }
      body:not(.admin-mode) .music-feature-copy h3 {
        font-size: 1.05rem;
      }
      body:not(.admin-mode) .music-feature-copy p,
      body:not(.admin-mode) .music-feature-credit {
        font-size: 0.82rem;
        line-height: 1.45;
      }
      body:not(.admin-mode) .music-feature-actions {
        gap: 8px;
        margin-top: 14px;
      }
      body:not(.admin-mode) .music-play-action,
      body:not(.admin-mode) .music-open-action {
        min-height: 38px;
        padding: 9px 12px;
        font-size: 0.76rem;
      }
      body:not(.admin-mode) .music-card {
        width: 68vw;
        flex-basis: 68vw;
        max-width: 210px;
      }
    }
    /* Supporting sections stay quieter than the main archive shelves. */
    .compact-shelf-card {
      display: grid;
      grid-template-columns: 84px minmax(0, 1fr) 34px;
      gap: 10px;
      align-items: center;
      min-height: 112px;
      padding: 10px;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,249,243,0.98));
      box-shadow: 0 10px 24px rgba(43,64,38,0.06);
    }
    .compact-shelf-thumb {
      width: 84px;
      height: 92px;
      overflow: hidden;
      border-radius: 12px;
      background: #dfe8d9;
    }
    .compact-shelf-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .compact-shelf-thumb-placeholder {
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      color: #fff6ce;
      font-size: 1.8rem;
      background: linear-gradient(145deg, color-mix(in srgb, var(--green-1) 88%, #26311f 12%), #1f3424);
    }
    .compact-shelf-copy {
      min-width: 0;
      display: grid;
      gap: 4px;
      align-content: center;
    }
    .compact-shelf-kicker {
      color: #7b8843;
      font-size: 0.65rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .compact-shelf-title {
      color: #243b2a;
      font-family: var(--heading-font);
      font-size: 0.94rem;
      font-weight: 800;
      line-height: 1.16;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .compact-shelf-meta,
    .compact-shelf-submeta {
      color: #66725d;
      font-size: 0.72rem;
      font-weight: 700;
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .compact-shelf-open {
      width: 34px;
      min-width: 34px;
      min-height: 34px;
      padding: 0;
      font-size: 0;
      pointer-events: none;
    }
    body:not(.admin-mode) #music .music-feature { border: 1px solid rgba(241, 210, 123, 0.28); box-shadow: 0 18px 42px rgba(20, 28, 22, 0.18); }
    body:not(.admin-mode) #music .music-feature-labels,
    body:not(.admin-mode) #music .music-label-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 8px; }
    body:not(.admin-mode) #music .music-label-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 5px 8px; border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; background: rgba(255,255,255,0.08); color: #f6e8ba; font-size: 0.66rem; font-weight: 850; line-height: 1; max-width: 100%; }
    body:not(.admin-mode) #music .music-label-chip i { width: 12px; height: 12px; flex: 0 0 auto; }
    body:not(.admin-mode) #music .music-card .music-label-row { margin: 10px 0 0; gap: 5px; }
    body:not(.admin-mode) #music .music-card .music-label-chip { min-height: 22px; padding: 4px 7px; border-color: rgba(255,255,255,0.11); background: rgba(255,255,255,0.06); color: #dce5d8; font-size: 0.58rem; max-width: 100%; }
    body:not(.admin-mode) #music .music-card .music-label-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    @media (max-width: 1180px) {
      body:not(.admin-mode) #recent-shelf,
      body:not(.admin-mode) #archive-gateways,
      body:not(.admin-mode) #discovery-studio,
      body:not(.admin-mode) #latest-spotlight,
      body:not(.admin-mode) #about,
      body:not(.admin-mode) #contact {
        padding-top: 40px;
        padding-bottom: 40px;
      }
      body:not(.admin-mode) #archive-gateways-title,
      body:not(.admin-mode) #latest-spotlight .section-title,
      body:not(.admin-mode) #discovery-studio .section-title,
      body:not(.admin-mode) #recent-shelf .section-title,
      body:not(.admin-mode) #contact .section-title,
      body:not(.admin-mode) #why-title {
        font-size: clamp(1.4rem, 3.1vw, 2rem);
      }
      body:not(.admin-mode) #archive-gateways .archive-gateway-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }
      body:not(.admin-mode) #archive-gateways .archive-gateway {
        min-height: 120px;
        padding: 16px;
      }
      body:not(.admin-mode) #discovery-studio .discovery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      body:not(.admin-mode) #latest-spotlight .spotlight-feature-card {
        min-height: 0;
      }
      body:not(.admin-mode) #latest-spotlight .spotlight-cover-art {
        min-height: 190px;
      }
      body:not(.admin-mode) #contact .contact-intake {
        grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
      }
      body:not(.admin-mode) #contact .contact-intro {
        padding: 24px;
      }
      body:not(.admin-mode) #contact .contact-form {
        padding: 24px;
      }
    }

    @media (max-width: 820px) {
      body:not(.admin-mode) #recent-shelf,
      body:not(.admin-mode) #archive-gateways,
      body:not(.admin-mode) #discovery-studio,
      body:not(.admin-mode) #latest-spotlight,
      body:not(.admin-mode) #about,
      body:not(.admin-mode) #contact {
        padding-top: 30px;
        padding-bottom: 30px;
      }
      body:not(.admin-mode) #recent-shelf .recent-shelf-shell,
      body:not(.admin-mode) #archive-gateways .archive-portal,
      body:not(.admin-mode) #contact .contact-intake,
      body:not(.admin-mode) #about .about-lower-band,
      body:not(.admin-mode) #latest-spotlight .spotlight-feature-card {
        border-radius: 16px;
      }
      body:not(.admin-mode) #archive-gateways .archive-portal {
        padding: 18px;
        margin-bottom: 12px;
      }
      body:not(.admin-mode) #archive-gateways .archive-gateway-grid {
        grid-template-columns: 1fr;
      }
      body:not(.admin-mode) #archive-gateways .archive-gateway {
        min-height: 92px;
        grid-template-columns: 42px minmax(0,1fr) 20px;
        padding: 14px;
      }
      body:not(.admin-mode) #recent-shelf-grid.saved-shelf-grid {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding: 2px 2px 6px;
        scroll-snap-type: x proximity;
      }
      body:not(.admin-mode) #recent-shelf-grid.saved-shelf-grid > * {
        flex: 0 0 min(72vw, 248px);
        scroll-snap-align: start;
      }
      body:not(.admin-mode) #discovery-studio .discovery-head,
      body:not(.admin-mode) #latest-spotlight .spotlight-topbar,
      body:not(.admin-mode) #contact .contact-section-head {
        margin-bottom: 12px;
      }
      body:not(.admin-mode) #discovery-studio .discovery-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 10px;
        overflow: visible;
        padding: 0;
      }
      body:not(.admin-mode) #discovery-studio .discovery-card {
        min-height: 134px;
        padding: 12px;
        box-shadow: 0 10px 20px rgba(43,64,38,0.05);
      }
      body:not(.admin-mode) #discovery-studio .library-lane-note {
        display: none;
      }
      body:not(.admin-mode) #latest-spotlight .spotlight-topbar {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        align-items: start;
      }
      body:not(.admin-mode) #latest-spotlight .spotlight-feature-card {
        grid-template-columns: 1fr;
        min-height: 0;
      }
      body:not(.admin-mode) #latest-spotlight .spotlight-cover-art {
        min-height: 168px;
        aspect-ratio: 16 / 10;
      }
      body:not(.admin-mode) #latest-spotlight .spotlight-feature-copy {
        padding: 12px;
      }
      body:not(.admin-mode) #latest-spotlight .spotlight-side-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      body:not(.admin-mode) #about .why-choose-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 10px;
      }
      body:not(.admin-mode) #about .why-choose-card {
        min-height: 0;
        padding: 14px;
        gap: 8px;
      }
      body:not(.admin-mode) #about .why-choose-card .feature-icon {
        width: 40px;
        height: 40px;
      }
      body:not(.admin-mode) #contact .contact-intake {
        grid-template-columns: 1fr;
      }
      body:not(.admin-mode) #contact .contact-intro {
        padding: 18px;
        gap: 12px;
      }
      body:not(.admin-mode) #contact .contact-intro-list {
        grid-template-columns: repeat(3, minmax(0,1fr));
        gap: 8px;
      }
      body:not(.admin-mode) #contact .contact-intro-item {
        grid-template-columns: 1fr;
        gap: 6px;
        align-items: start;
        font-size: 0.72rem;
      }
      body:not(.admin-mode) #contact .contact-form {
        padding: 18px;
      }
    }

    @media (max-width: 560px) {
      body:not(.admin-mode) #recent-shelf .saved-shelf-heading {
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        align-items: center;
        gap: 8px;
      }
      body:not(.admin-mode) #recent-shelf .saved-shelf-heading .btn-secondary {
        width: auto;
        min-height: 34px;
        padding: 8px 12px;
        justify-content: center;
      }
      body:not(.admin-mode) #recent-shelf .saved-shelf-note,
      body:not(.admin-mode) #latest-spotlight .section-subtitle,
      body:not(.admin-mode) #contact .section-subtitle,
      body:not(.admin-mode) #discovery-studio .section-subtitle,
      body:not(.admin-mode) #why-subtitle {
        display: none;
      }
      body:not(.admin-mode) #discovery-studio .discovery-grid {
        grid-template-columns: 1fr 1fr;
      }
      body:not(.admin-mode) #discovery-studio .discovery-card {
        min-height: 122px;
        padding: 11px;
      }
      body:not(.admin-mode) #discovery-studio .discovery-count {
        min-width: 48px;
        padding: 7px 8px;
      }
      body:not(.admin-mode) #discovery-studio .discovery-count strong {
        font-size: 1.25rem;
      }
      body:not(.admin-mode) #latest-spotlight .spotlight-topbar {
        grid-template-columns: 1fr;
      }
      body:not(.admin-mode) #latest-spotlight .spotlight-carousel-actions {
        justify-content: flex-start;
      }
      body:not(.admin-mode) #latest-spotlight .spotlight-cover-art {
        min-height: 146px;
      }
      body:not(.admin-mode) #about .why-choose-grid {
        grid-template-columns: 1fr;
      }
      body:not(.admin-mode) #about .why-choose-card {
        padding: 12px 14px;
      }
      body:not(.admin-mode) #contact .contact-intro-list {
        grid-template-columns: 1fr;
      }
      body:not(.admin-mode) #contact .contact-purpose-choices {
        grid-template-columns: 1fr;
      }
      body:not(.admin-mode) #archive-gateways .archive-enter-action {
        width: 100%;
        justify-content: center;
      }
      body:not(.admin-mode) #archive-gateways .archive-gateway strong {
        font-size: 0.92rem;
      }
      body:not(.admin-mode) #archive-gateways .archive-gateway small {
        font-size: 0.74rem;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      body.app-ready #app,

      .content-card,

      .story-cover img,

      .feature-card,

      .impact-card,

      .portal-card,

      .notice-slide,

      .showcase-slide{
        animation: none !important;
        transition: none !important;
      }
    }
    .story-card{
      border-color: rgba(45, 75, 48, 0.12);
      border-radius: 8px;
    }
    .story-card::before{ display: none; }
    .story-card {
      padding: 0;
      display: grid;
      grid-template-columns: 132px minmax(0, 1fr);
      min-height: 260px;
      height: 100%;
      background: #fffaf0;
      overflow: hidden;
    }
    .story-card:hover {
      transform: translateY(-6px);
      border-color: rgba(45, 75, 48, 0.22);
      box-shadow: 0 22px 46px rgba(29, 62, 35, 0.13);
    }
    .story-card:focus-visible,

    .discovery-action:focus-visible,

    .page-btn:focus-visible{
      outline: 3px solid color-mix(in srgb, var(--mustard) 80%, white 20%);
      outline-offset: 4px;
    }
    .story-card:hover .story-cover img{
      transform: scale(1.035);
    }
    .story-cover {
      margin: 18px 0 18px 18px;
      height: calc(100% - 36px);
      min-height: 208px;
      max-height: 242px;
      border-radius: 8px 4px 4px 8px;
      background: #eaf2da;
      border: 1px solid rgba(64, 89, 52, 0.12);
      overflow: hidden;
      position: relative;
      box-shadow: -7px 8px 0 #36573a, 0 12px 28px rgba(41, 70, 45, 0.15);
    }
    .story-cover::after {
      content: '';
      position: absolute;
      inset: 0 auto 0 0;
      width: 12px;
      background: rgba(38,49,31,0.12);
    }
    .story-cover img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.35s ease;
    }
    .resource-badge-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 9px;
    }
    .resource-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      width: fit-content;
      border-radius: 999px;
      padding: 5px 9px;
      font-size: 0.69rem;
      line-height: 1;
      font-weight: 900;
      text-transform: uppercase;
      color: #30442d;
      background: rgba(255,255,255,0.72);
      border: 1px solid rgba(64, 89, 52, 0.12);
    }
    .resource-badge.featured { background: #fff0b8; color: #4b4500; border-color: #ead074; }
    .resource-badge.new { background: #e8f6df; color: #30572f; border-color: #bdddb1; }
    .resource-badge.popular { background: #f7e7d2; color: #614426; border-color: #e6caa5; }
    .resource-badge.type { background: #eef1e9; color: #405934; }
    .story-cover-placeholder{
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      font-size: 2.6rem;
      color: #36573a;
      font-weight: 900;
    }
    .story-body {
      padding: 22px 22px 20px 26px;
      display: flex;
      flex-direction: column;
      min-width: 0;
      overflow: hidden;
    }
    .story-kicker{
      color: #5a713f;
      font-size: 0.76rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0;
      margin-bottom: 9px;
    }
    .story-title {
      font-size: 1.08rem;
      line-height: 1.28;
      margin-bottom: 10px;
      color: #1f2d1d;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .story-desc {
      color: #4c5942;
      line-height: 1.62;
      font-weight: 600;
      margin-bottom: 16px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .story-footer{
      margin-top: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .story-author{
      color: #6b745f;
      font-size: 0.86rem;
      font-weight: 800;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .cover-image {
      width: 100%;
      aspect-ratio: 16 / 10;
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 16px;
      background: var(--soft-green);
      border: 1px solid var(--border);
    }
    .cover-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .feature-icon {
      width: 50px;
      height: 50px;
      background: linear-gradient(135deg, var(--green-1), var(--green-2));
      border-radius: 10px;
      display: grid;
      place-items: center;
      color: var(--white);
      margin-bottom: 16px;
    }

    .feature-title, .card-title { font-weight: 800; color: var(--dark); }
    .feature-title { font-size: 1.15rem; margin-bottom: 10px; }
    .feature-desc, .card-desc { color: #555; font-weight: 500; line-height: 1.6; }
    .card-title { font-size: 1.12rem; margin: 10px 0 8px; }
    .card-author{ color: #777; font-size: 0.88rem; font-weight: 600; margin-bottom: 12px; }
    .emoji { font-size: 2.8rem; display: inline-block; margin-bottom: 12px; }

    .category-badge {
      display: inline-block;
      background: linear-gradient(135deg, var(--green-1), var(--green-2));
      color: var(--white);
      padding: 6px 14px;
      border-radius: 999px;
      font-size: 0.8rem;
      font-weight: 800;
      margin-bottom: 8px;
    }

    .read-more { color: var(--green-1); font-weight: 800; font-size: 0.92rem; display: inline-flex; align-items: center; gap: 6px; }
    .story-card .read-more{
      color: #2f5f39;
      background: rgba(255, 255, 255, 0.72);
      border: 1px solid rgba(64, 89, 52, 0.12);
      border-radius: 999px;
      padding: 8px 11px;
    }
    .credit-line {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .stats {
      background: linear-gradient(135deg, var(--green-1), var(--green-2));
      border-radius: 12px;
      padding: 58px 32px;
      color: var(--white);
    }
    .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 30px; text-align: center; }
    .stat-number { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 900; }
    .stat-label { font-weight: 700; margin-top: 4px; opacity: 0.95; }

    .about-story-shell {
      display: grid;
      gap: 24px;
    }
    .impact-highlight-section {
      padding-top: 26px;
      padding-bottom: 26px;
    }
    .impact-feature-shell {
      display: grid;
      gap: 16px;
    }
    .impact-feature-head {
      display: grid;
      gap: 8px;
      justify-items: center;
      text-align: center;
      max-width: 760px;
      margin: 0 auto;
    }
    .impact-feature-head p {
      margin: 0;
      color: #64715c;
      font-weight: 600;
      line-height: 1.7;
    }
    .about-main-card {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      padding: 30px;
      border-radius: 28px;
      border: 1px solid rgba(54, 87, 58, 0.12);
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--about-panel-bg) 78%, transparent 22%), color-mix(in srgb, var(--about-panel-bg) 86%, transparent 14%)),
        var(--about-graphic-image),
        linear-gradient(180deg, color-mix(in srgb, var(--about-panel-bg) 96%, white 4%), color-mix(in srgb, var(--about-panel-bg) 88%, var(--light) 12%));
      background-size: cover, cover, cover;
      background-position: center, center, center;
      box-shadow: 0 24px 54px rgba(36, 67, 43, 0.09);
      position: relative;
      overflow: hidden;
    }
    .about-main-card::before {
      content: '';
      position: absolute;
      right: -130px;
      bottom: -180px;
      width: 380px;
      height: 380px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--why-accent-color) 26%, transparent 74%);
      opacity: 0.42;
      pointer-events: none;
    }
    .about-main-card::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 5px;
      background: linear-gradient(90deg, var(--green-1), var(--why-accent-color), color-mix(in srgb, var(--green-1) 66%, white 34%));
      opacity: 0.88;
      pointer-events: none;
    }
    .about-copy-band {
      display: grid;
      gap: 16px;
      align-content: center;
      text-align: var(--about-text-align);
      position: relative;
      z-index: 1;
    }
    .about-meta-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid rgba(54, 87, 58, 0.12);
      background: rgba(255, 250, 240, 0.92);
      color: #36573a;
      font-size: 0.8rem;
      font-weight: 900;
      box-shadow: 0 10px 24px rgba(43, 64, 38, 0.06);
    }
    .about-main-card h2 {
      margin: 0;
      text-align: var(--about-text-align);
      color: var(--about-title-color);
      font-weight: var(--about-title-weight);
    }
    .about-main-card p {
      margin: 0;
      max-width: 700px;
      text-align: var(--about-text-align);
      color: var(--about-text-color);
      line-height: 1.75;
      font-weight: var(--about-body-weight);
    }
    .about-main-card.is-dark h2,
    .about-main-card.is-dark p {
      text-shadow: 0 2px 12px rgba(0,0,0,0.22);
    }
    .about-main-card.is-dark .about-meta-pill {
      background: rgba(255, 250, 240, 0.94);
      color: #24432b;
    }
    .about-cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 8px;
      justify-content: var(--about-justify);
    }
    .about-main-card .btn-light {
      background: var(--about-button-bg);
      color: var(--about-button-text);
    }
    .impact-board {
      display: grid;
      gap: 16px;
      padding: 22px;
      border-radius: 24px;
      border: 1px solid rgba(54, 87, 58, 0.12);
      background:
        linear-gradient(160deg, var(--impact-board-bg), color-mix(in srgb, var(--impact-board-bg) 76%, var(--impact-accent-color) 24%));
      color: #fffaf0;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 42px rgba(33, 52, 35, 0.18);
    }
    .impact-board.is-emphasis {
      position: relative;
      overflow: hidden;
      padding: 28px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 24px 52px rgba(33, 52, 35, 0.22);
    }
    .impact-board.is-emphasis::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.18) 44%, transparent 72%),
        linear-gradient(180deg, transparent 72%, color-mix(in srgb, var(--impact-accent-color) 20%, transparent 80%));
      transform: translateX(-100%);
      animation: spotlightShimmer 8.6s ease-in-out infinite;
      pointer-events: none;
    }
    .impact-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.12);
      color: rgba(255,250,240,0.92);
      font-size: 0.78rem;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .impact-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }
    .impact-card {
      display: grid;
      gap: 10px;
      align-content: start;
      min-height: 190px;
      padding: 20px;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.16);
      background: var(--impact-card-bg);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
      backdrop-filter: blur(8px);
      transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
      position: relative;
      overflow: hidden;
    }
    .impact-card::after {
      content: '';
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 0;
      height: 3px;
      border-radius: 999px 999px 0 0;
      background: var(--impact-accent-color);
      opacity: 0.68;
      transform: scaleX(0.45);
      transform-origin: left;
      transition: transform 0.24s ease, opacity 0.24s ease;
    }
    .impact-card:hover {
      transform: translateY(-4px);
      background: rgba(255,255,255,0.16);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .impact-card:hover::after {
      transform: scaleX(1);
      opacity: 0.95;
    }
    .impact-icon {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: color-mix(in srgb, var(--impact-accent-color) 24%, transparent 76%);
      color: #fffaf0;
      box-shadow: none;
    }
    .impact-mini {
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: rgba(255,250,240,0.72);
      font-weight: 900;
    }
    .impact-number {
      font-size: clamp(2.2rem, 5vw, 3.4rem);
      line-height: 1;
      font-weight: 900;
      color: #fffef8;
      margin-top: 2px;
    }
    .impact-number.count-live {
      animation: countPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .impact-label {
      font-size: 1rem;
      font-weight: 800;
      color: #fffef8;
    }
    .impact-note {
      color: rgba(255,250,240,0.78);
      font-size: 0.86rem;
      font-weight: 700;
      line-height: 1.55;
    }
    .about-lower-band {
      display: grid;
      gap: 18px;
      padding: 4px 6px 0;
    }
    .about-lower-head {
      display: grid;
      gap: 10px;
      justify-items: center;
      text-align: center;
      max-width: 760px;
      margin: 0 auto;
    }
    .about-lower-title {
      margin: 0;
      font-family: var(--heading-font);
      font-size: clamp(1.75rem, 4.5vw, 2.45rem);
      color: #233b24;
      line-height: 1.16;
    }
    .about-lower-copy {
      color: #62715d;
      font-weight: 600;
      line-height: 1.7;
      margin: 0;
    }
    .content-views {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #5d6d55;
      font-size: 0.8rem;
      font-weight: 800;
      margin-top: 10px;
    }
    .content-views i {
      width: 14px;
      height: 14px;
    }
    .why-choose-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
      gap: 18px;
    }
    .why-choose-card {
      position: relative;
      overflow: hidden;
      display: grid;
      gap: 14px;
      min-height: 214px;
      padding: 22px;
      border-radius: 20px;
      border: 1px solid rgba(54, 87, 58, 0.12);
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--why-card-bg) 96%, white 4%), color-mix(in srgb, var(--why-card-bg) 88%, var(--light) 12%));
      box-shadow: 0 18px 36px rgba(36, 67, 43, 0.08);
      transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
      animation: cardGlideIn 0.64s ease both;
    }
    .why-choose-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.26), transparent 52%);
      pointer-events: none;
    }
    .why-choose-card::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 4px;
      background: linear-gradient(90deg, rgba(54,87,58,0.95), var(--why-accent-color));
    }
    .why-choose-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 24px 44px rgba(36, 67, 43, 0.12);
      border-color: rgba(54, 87, 58, 0.22);
    }
    .why-choose-card .feature-icon {
      background: linear-gradient(135deg, var(--green-1), color-mix(in srgb, var(--green-1) 62%, var(--why-accent-color) 38%));
      box-shadow: none;
      animation: none;
    }
    .why-choose-card.is-dark,
    .why-choose-card.is-dark .feature-title,
    .why-choose-card.is-dark .feature-desc {
      color: #fffaf0;
    }
    .why-choose-card.is-dark .feature-icon {
      background: rgba(255,255,255,0.16);
      border: 1px solid rgba(255,255,255,0.16);
    }
    .why-choose-card:nth-child(2) { animation-delay: 0.08s; }
    .why-choose-card:nth-child(3) { animation-delay: 0.16s; }
    .why-choose-card:nth-child(4) { animation-delay: 0.24s; }
    .why-choose-card:nth-child(5) { animation-delay: 0.32s; }
    .why-choose-card:nth-child(6) { animation-delay: 0.4s; }
    @keyframes gentleLift {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }
    @keyframes cardGlideIn {
      from { opacity: 0; transform: translateY(18px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .discovery-studio {
      display: grid;
      gap: 18px;
      padding-top: 30px;
      padding-bottom: 30px;
      color: var(--library-text);
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--library-bg) 92%, white 8%), color-mix(in srgb, var(--library-bg) 84%, var(--light) 16%));
      background-size: cover;
      background-position: center;
      border-top: 1px solid color-mix(in srgb, var(--library-accent) 18%, transparent 82%);
      border-bottom: 1px solid color-mix(in srgb, var(--library-accent) 18%, transparent 82%);
      max-width: none;
      margin-inline: 0;
      padding-inline: max(24px, calc((100vw - 1400px) / 2 + 24px));
    }
    .discovery-head {
      display: grid;
      gap: 8px;
      justify-items: var(--library-justify);
      text-align: var(--library-text-align);
    }
    .discovery-kicker-band {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 14px;
      border-radius: 999px;
      background: rgba(255, 250, 240, 0.92);
      border: 1px solid rgba(54, 87, 58, 0.12);
      color: #36573a;
      font-size: 0.84rem;
      font-weight: 900;
      box-shadow: 0 10px 26px rgba(43, 64, 38, 0.06);
    }
    .discovery-studio.library-plain {
      background: transparent;
      border-color: transparent;
      max-width: 1400px;
      margin: 0 auto;
      padding-inline: 24px;
    }
    .discovery-studio.library-surface {
      background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--library-accent) 22%, transparent 78%), transparent 32%),
        linear-gradient(180deg, color-mix(in srgb, var(--library-bg) 92%, white 8%), color-mix(in srgb, var(--library-bg) 78%, var(--light) 22%));
    }
    .discovery-studio.library-banner {
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--library-bg) 88%, transparent 12%), color-mix(in srgb, var(--library-bg) 70%, transparent 30%));
    }
    .discovery-studio.has-graphic {
      background-image:
        linear-gradient(135deg, color-mix(in srgb, var(--library-bg) 86%, transparent 14%), color-mix(in srgb, var(--library-bg) 74%, transparent 26%)),
        var(--library-graphic-image);
      background-repeat: no-repeat, no-repeat;
      background-size: cover, cover;
      background-position: center, center;
    }
    .discovery-studio.compact-lanes .discovery-body-copy,
    .discovery-studio.compact-lanes .discovery-tags {
      display: none;
    }
    .discovery-studio.compact-lanes .discovery-card {
      min-height: 164px;
    }
    .discovery-studio.counts-hidden .discovery-count {
      display: none;
    }
    .discovery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
      gap: 14px;
    }
    .discovery-card {
      position: relative;
      overflow: hidden;
      border-radius: 16px;
      border: 1px solid rgba(54, 87, 58, 0.12);
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--library-card-bg) 96%, white 4%), color-mix(in srgb, var(--library-card-bg) 88%, var(--light) 12%));
      padding: 18px;
      display: grid;
      gap: 12px;
      min-height: 190px;
      box-shadow: 0 14px 28px rgba(43, 64, 38, 0.07);
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
      animation: cardGlideIn 0.72s ease both;
    }
    .discovery-card:nth-child(2) { animation-delay: 0.06s; }
    .discovery-card:nth-child(3) { animation-delay: 0.12s; }
    .discovery-card:nth-child(4) { animation-delay: 0.18s; }
    .discovery-card:nth-child(5) { animation-delay: 0.24s; }
    .discovery-card:nth-child(6) { animation-delay: 0.3s; }
    .discovery-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(140deg, rgba(255,255,255,0.34), transparent 42%);
      pointer-events: none;
    }
    .discovery-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 22px 38px rgba(43, 64, 38, 0.11);
      border-color: rgba(54, 87, 58, 0.24);
    }
    .discovery-card.is-featured {
      background: linear-gradient(160deg, var(--library-feature-bg), color-mix(in srgb, var(--library-feature-bg) 86%, white 14%));
      color: var(--library-feature-text);
      border-color: rgba(255, 250, 240, 0.12);
    }
    .discovery-card.is-warm {
      background: linear-gradient(160deg, color-mix(in srgb, var(--library-accent) 16%, var(--library-card-bg) 84%), var(--library-card-bg));
      border-color: rgba(173, 137, 32, 0.2);
    }
    .discovery-card.is-featured .discovery-title,
    .discovery-card.is-featured .discovery-meta,
    .discovery-card.is-featured .discovery-body-copy {
      color: #fffaf0;
    }
    .discovery-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
    }
    .discovery-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: color-mix(in srgb, var(--library-accent) 18%, white 82%);
      color: var(--library-text);
      box-shadow: inset 0 -2px 0 rgba(54, 87, 58, 0.1);
      flex: 0 0 auto;
    }
    .discovery-card.is-featured .discovery-icon {
      background: rgba(255, 247, 214, 0.18);
      color: #fffaf0;
    }
    .discovery-count {
      min-width: 62px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.8);
      border: 1px solid rgba(54, 87, 58, 0.1);
      color: var(--library-text);
      text-align: center;
      font-weight: 900;
      line-height: 1;
    }
    .discovery-count strong {
      display: block;
      font-size: 1.2rem;
    }
    .discovery-count span {
      display: block;
      margin-top: 4px;
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--library-muted);
    }
    .discovery-card.is-featured .discovery-count {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.16);
      color: #fffaf0;
    }
    .discovery-card.is-featured .discovery-count span { color: rgba(255,250,240,0.72); }
    .discovery-copy {
      display: grid;
      gap: 7px;
      align-content: start;
    }
    .discovery-label {
      font-size: 0.76rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--library-muted);
      font-weight: 900;
    }
    .discovery-card.is-featured .discovery-label { color: rgba(255,250,240,0.8); }
    .discovery-title {
      font-size: 1rem;
      line-height: 1.28;
      font-weight: 900;
      color: color-mix(in srgb, var(--library-text) 88%, black 12%);
    }
    .discovery-meta {
      color: var(--library-muted);
      font-weight: 700;
      line-height: 1.5;
      font-size: 0.88rem;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .discovery-body-copy {
      color: var(--library-muted);
      font-size: 0.85rem;
      font-weight: 800;
      line-height: 1.5;
    }
    .discovery-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: auto;
    }
    .discovery-tag {
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,0.72);
      border: 1px solid rgba(54, 87, 58, 0.1);
      color: var(--library-text);
      font-size: 0.74rem;
      font-weight: 900;
    }
    .discovery-card.is-featured .discovery-tag {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.16);
      color: #fffaf0;
    }
    .discovery-action {
      margin-top: 6px;
      width: fit-content;
      border: 0;
      border-radius: 999px;
      padding: 9px 13px;
      background: var(--library-button-bg);
      color: var(--library-button-text);
      font-family: inherit;
      font-weight: 900;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      box-shadow: 0 12px 24px rgba(43, 64, 38, 0.14);
    }
    .discovery-card.is-featured .discovery-action {
      background: var(--library-accent);
      color: color-mix(in srgb, var(--library-button-bg) 72%, black 28%);
    }
    .library-lane-note {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      margin: 0 auto;
      color: var(--library-muted);
      font-size: 0.86rem;
      font-weight: 800;
      text-align: center;
    }
    .content-shelf-controls {
      display: grid;
      gap: 16px;
      margin-bottom: 26px;
    }
    .shelf-search-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
    }
    .shelf-search-shell {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      border: 1px solid #d9e4d1;
      border-radius: 999px;
      padding: 8px 10px 8px 14px;
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 12px 28px rgba(43, 64, 38, 0.06);
    }
    .shelf-search-shell i { color: #6c785f; }
    .shelf-search-shell input {
      border: 0;
      padding: 6px 0;
      background: transparent;
      min-width: 0;
    }
    .shelf-search-shell input:focus { border: 0; }
    .shelf-search-clear {
      border: 0;
      background: #f3f7ef;
      color: #36573a;
      font-weight: 800;
      font-family: inherit;
      border-radius: 999px;
      padding: 8px 12px;
      cursor: pointer;
    }
    .shelf-search-meta {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      color: #5f6d57;
      font-size: 0.9rem;
      font-weight: 800;
      white-space: normal;
      text-align: right;
    }
    .shelf-summary-main {
      color: #415039;
      font-weight: 900;
    }
    .shelf-insights {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .shelf-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.88);
      border: 1px solid rgba(54, 87, 58, 0.1);
      color: #3f5542;
      box-shadow: 0 10px 22px rgba(43, 64, 38, 0.05);
    }
    .shelf-pill strong {
      font-size: 0.95rem;
      font-weight: 900;
      color: #27432d;
    }
    .shelf-pill span {
      font-size: 0.78rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: #687560;
    }
    .story-type-toggle,
    .filter-tabs {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .filter-tabs { margin-bottom: 0; }
    .story-type-btn,
    .filter-btn {
      padding: 10px 22px;
      border: 2px solid var(--border);
      background: var(--white);
      color: var(--dark);
      border-radius: 8px;
      font-weight: 800;
      cursor: pointer;
      font-family: inherit;
      min-height: 44px;
      line-height: 1.15;
      touch-action: manipulation;
    }
    .story-type-btn:hover,
    .story-type-btn.active,
    .filter-btn:hover,
    .filter-btn.active { background: linear-gradient(135deg, var(--green-1), var(--green-2)); color: var(--white); border-color: transparent; }
    .shelf-pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 28px;
    }
    .page-btn {
      border: 1px solid #d8e1d0;
      background: #ffffff;
      color: #36573a;
      border-radius: 999px;
      padding: 9px 14px;
      font-weight: 800;
      font-family: inherit;
      cursor: pointer;
      min-width: 44px;
      min-height: 44px;
      transition: 0.2s ease;
      touch-action: manipulation;
    }
    .page-btn:hover:not(:disabled) {
      transform: translateY(-1px);
      border-color: var(--green-1);
      box-shadow: 0 10px 18px rgba(43, 64, 38, 0.09);
    }
    .page-btn.active {
      background: #36573a;
      color: #fffaf0;
      border-color: #36573a;
    }
    .page-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    .page-status {
      color: #66725d;
      font-size: 0.86rem;
      font-weight: 800;
      padding: 0 6px;
    }

    .portal-card {
      background: linear-gradient(135deg, var(--green-1), var(--green-2));
      border-radius: 12px;
      padding: 22px;
      color: var(--white);
      text-align: left;
      transition: transform 0.25s, box-shadow 0.25s;
      box-shadow: 0 8px 20px rgba(0, 138, 0, 0.2);
      cursor: pointer;
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: 14px;
      align-items: start;
    }
    .portal-card:hover { transform: translateY(-7px); box-shadow: 0 16px 38px rgba(0, 138, 0, 0.3); }
    .portal-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      background: rgba(255, 250, 240, 0.18);
      border: 1px solid rgba(255, 250, 240, 0.24);
      display: grid;
      place-items: center;
      font-size: 1.2rem;
      font-weight: 900;
      overflow: hidden;
      text-transform: uppercase;
    }
    .portal-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .portal-title { font-size: 1.08rem; font-weight: 800; margin-bottom: 8px; }
    .portal-desc { font-size: 0.9rem; opacity: 0.95; }
    .contact-details {
      display: none;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
      max-width: 780px;
      margin: 0 auto 24px;
    }
    .contact-detail-card {
      background: #fffaf0;
      border: 1px solid #ded3b4;
      border-radius: 10px;
      padding: 14px;
      color: #405934;
      font-weight: 800;
      text-align: center;
    }
    .credit-line {
      color: #66725d;
      font-size: 0.82rem;
      font-weight: 800;
      line-height: 1.45;
      margin-top: 6px;
    }

    .contact-intake {
      max-width: 1040px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(240px, 0.78fr) minmax(0, 1.4fr);
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--feedback-accent, #36573a) 24%, #ffffff 76%);
      border-radius: 12px;
      background: var(--feedback-panel-bg, #ffffff);
      color: var(--feedback-text, #26311f);
      font-family: var(--feedback-font, var(--body-font));
      box-shadow: 0 20px 44px rgba(43, 64, 38, 0.1);
    }
    .contact-section-head {
      max-width: 760px;
      margin: 0 auto 30px;
      text-align: center;
    }
    .section-pill {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 7px 11px;
      border: 1px solid color-mix(in srgb, var(--feedback-accent, #36573a) 22%, #ffffff 78%);
      border-radius: 999px;
      background: color-mix(in srgb, var(--feedback-panel-bg, #fff) 92%, var(--feedback-accent, #36573a) 8%);
      color: var(--feedback-accent, #36573a);
      font-size: 0.78rem;
      font-weight: 900;
      line-height: 1;
    }
    .section-pill i { width: 15px; height: 15px; }
    .contact-section-head .section-title { margin-bottom: 8px; }
    .contact-section-head .section-subtitle { margin-bottom: 0; }
    .contact-intro {
      padding: 34px;
      background: var(--feedback-accent, #36573a);
      color: #fffdf4;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 28px;
    }
    .contact-intro h3 { font-size: 1.75rem; margin: 14px 0 10px; }
    .contact-intro p { color: rgba(255,255,255,0.82); line-height: 1.7; }
    .contact-intro-list { display: grid; gap: 12px; }
    .contact-intro-item {
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 10px;
      align-items: center;
      font-size: 0.9rem;
      font-weight: 800;
    }
    .contact-intro-item i {
      width: 34px;
      height: 34px;
      padding: 8px;
      border-radius: 8px;
      background: rgba(255,255,255,0.12);
    }
    .contact-response-note {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 12px 13px;
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 8px;
      background: rgba(255,255,255,0.09);
      color: rgba(255,255,255,0.9);
      font-size: 0.82rem;
      font-weight: 800;
      line-height: 1.45;
    }
    .contact-response-note i { width: 18px; height: 18px; flex: 0 0 auto; }
    .contact-form { padding: 34px; max-width: none; margin: 0; background: var(--feedback-panel-bg, #ffffff); }
    .contact-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
    .contact-form .form-span-2 { grid-column: 1 / -1; }
    .contact-form-heading {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 20px;
    }
    .contact-form-heading h3 { margin: 0 0 5px; font-size: 1.25rem; }
    .contact-form-heading p { color: #66725d; font-weight: 650; font-size: 0.88rem; line-height: 1.5; }
    .contact-form-step {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 7px 10px;
      background: color-mix(in srgb, var(--feedback-accent, #36573a) 10%, #fff 90%);
      color: var(--feedback-accent, #36573a);
      font-size: 0.76rem;
      font-weight: 900;
    }
    .contact-purpose-label { margin-bottom: 10px; }
    .contact-purpose-choices {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
      margin-bottom: 10px;
    }
    .contact-purpose-choice {
      min-height: 76px;
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr);
      align-items: center;
      gap: 9px;
      padding: 11px;
      border: 1px solid color-mix(in srgb, var(--feedback-accent, #36573a) 22%, #fff 78%);
      border-radius: 8px;
      background: color-mix(in srgb, var(--feedback-panel-bg, #fff) 94%, var(--feedback-accent, #36573a) 6%);
      color: var(--feedback-text, #26311f);
      text-align: left;
      cursor: pointer;
      font: inherit;
      transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
    }
    .contact-purpose-choice:hover {
      transform: translateY(-2px);
      border-color: var(--feedback-accent, #36573a);
      box-shadow: 0 8px 18px rgba(40, 67, 38, 0.09);
    }
    .contact-purpose-choice.active {
      background: var(--feedback-accent, #36573a);
      border-color: var(--feedback-accent, #36573a);
      color: #fffdf4;
      box-shadow: 0 10px 22px color-mix(in srgb, var(--feedback-accent, #36573a) 24%, transparent 76%);
    }
    .contact-purpose-choice i {
      width: 32px;
      height: 32px;
      padding: 7px;
      border-radius: 7px;
      background: color-mix(in srgb, currentColor 10%, transparent 90%);
    }
    .contact-purpose-choice span { font-size: 0.84rem; line-height: 1.25; font-weight: 850; }
    .contact-purpose-select { margin-top: 8px; }
    .contact-purpose-select summary {
      width: fit-content;
      cursor: pointer;
      color: var(--feedback-accent, #36573a);
      font-size: 0.82rem;
      font-weight: 850;
      list-style: none;
    }
    .contact-purpose-select summary::-webkit-details-marker { display: none; }
    .contact-purpose-select summary::before { content: '+ '; }
    .contact-purpose-select[open] summary::before { content: '- '; }
    .contact-purpose-select select { margin-top: 9px; }
    .contact-purpose-help {
      min-height: 22px;
      display: flex;
      align-items: center;
      gap: 7px;
      color: #66725d;
      font-size: 0.8rem;
      font-weight: 700;
      line-height: 1.4;
      margin-top: 8px;
    }
    .contact-purpose-help i { width: 15px; height: 15px; flex: 0 0 auto; color: var(--feedback-accent, #36573a); }
    .contact-character-count {
      display: block;
      margin-top: 6px;
      color: #7a8373;
      font-size: 0.75rem;
      font-weight: 750;
      text-align: right;
    }
    .contact-character-count.near-limit { color: #a35b15; }
    .contact-submit-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
    }
    .contact-submit-row .btn-primary { min-height: 48px; }
    .contact-submit-note { color: #66725d; font-size: 0.78rem; font-weight: 700; line-height: 1.4; max-width: 190px; }
    .contact-success-card {
      display: none;
      min-height: 420px;
      place-items: center;
      text-align: center;
      padding: 34px;
      background: color-mix(in srgb, var(--feedback-panel-bg, #fff) 92%, #dcfce7 8%);
      color: #255536;
    }
    .contact-success-card.show { display: grid; }
    .contact-success-icon {
      width: 58px;
      height: 58px;
      display: inline-grid;
      place-items: center;
      border-radius: 50%;
      background: #dcfce7;
      color: #166534;
      margin-bottom: 16px;
    }
    .contact-success-card h3 { margin-bottom: 8px; }
    .contact-success-card p { color: #58705d; line-height: 1.6; max-width: 420px; }
    .contact-success-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
    .contact-privacy-note {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      color: #66725d;
      font-size: 0.82rem;
      line-height: 1.5;
      margin: -4px 0 18px;
    }
    label { display: block; font-weight: 800; margin-bottom: 8px; color: var(--dark); }
    input, textarea, select {
      width: 100%;
      padding: 13px;
      border: 2px solid var(--border);
      border-radius: 8px;
      font-family: inherit;
      font-size: 1rem;
      background: var(--white);
    }
    textarea { min-height: 110px; resize: vertical; }
    input:focus, textarea:focus, select:focus { outline: none; border-color: var(--green-1); }
    .form-group { margin-bottom: 20px; }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 80;
      padding: 20px;
      overscroll-behavior: contain;
      touch-action: pan-x pan-y;
    }
    #story-modal.modal-backdrop {
      touch-action: auto;
    }
    .modal-backdrop.show { display: flex; }
    #story-modal.show {
      animation: previewBackdropFade 180ms ease-out both;
    }
    #story-modal.show .document-modal {
      animation: previewModalSlide 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
      will-change: transform, opacity;
    }
    #story-modal.show .document-viewer {
      animation: previewViewerRise 360ms ease-out 80ms both;
    }
    @keyframes previewBackdropFade {
      from { background: rgba(0,0,0,0); }
      to { background: rgba(0,0,0,0.55); }
    }
    @keyframes previewModalSlide {
      from { opacity: 0; transform: translateY(18px) scale(0.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes previewViewerRise {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      #story-modal.show,
      #story-modal.show .document-modal,
      #story-modal.show .document-viewer {
        animation: none;
      }
    }
    .modal {
      background: var(--white);
      border-radius: 12px;
      padding: 34px;
      max-width: 760px;
      width: min(100%, 760px);
      max-height: 86vh;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
      border-top: 6px solid var(--green-1);
    }
    .modal h2 { color: var(--green-1); font-size: 1.8rem; margin-bottom: 8px; }
    .modal-meta { display: flex; gap: 16px; flex-wrap: wrap; color: #666; font-size: 0.92rem; font-weight: 600; margin: 12px 0 22px; }
    .modal-content { line-height: 1.8; color: #333; white-space: pre-wrap; margin-bottom: 24px; }
    .review-modal {
      width: min(760px, 94vw);
      max-height: min(86vh, 820px);
      padding: 28px;
      background: var(--feedback-panel-bg, #fffdf7);
      color: var(--feedback-text, #26311f);
      font-family: var(--feedback-font, var(--body-font));
      border: 1px solid color-mix(in srgb, var(--feedback-accent, #36573a) 28%, #ffffff 72%);
      border-top: 6px solid var(--feedback-accent, #36573a);
      box-shadow: 0 28px 70px rgba(18, 30, 20, 0.28);
    }
    #review-modal { z-index: 96; touch-action: auto; }
    .review-modal-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 20px;
    }
    .review-summary {
      padding: 16px;
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: center;
      background: var(--feedback-surface-bg, #f3f7ee);
      border: 1px solid color-mix(in srgb, var(--feedback-accent, #36573a) 20%, #ffffff 80%);
      border-radius: 10px;
      margin-bottom: 18px;
    }
    .review-stars { display: inline-flex; gap: 3px; color: #ad7c00; }
    .review-stars i { width: 17px; height: 17px; }
    .rating-picker { display: flex; gap: 6px; }
    .rating-picker button {
      width: 40px;
      height: 40px;
      border: 1px solid #d8d0b8;
      border-radius: 8px;
      background: #ffffff;
      color: #9a7a1b;
      cursor: pointer;
      display: grid;
      place-items: center;
    }
    .rating-picker button.active { background: #fff1b8; border-color: #b38b16; }
    .review-list { display: grid; gap: 10px; margin: 18px 0 24px; }
    .review-card {
      padding: 14px 16px;
      border: 1px solid color-mix(in srgb, var(--feedback-accent, #36573a) 20%, #ffffff 80%);
      border-radius: 9px;
      background: var(--feedback-panel-bg, #ffffff);
    }
    .review-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
    .review-card p { color: #45523e; line-height: 1.6; margin-top: 8px; white-space: pre-wrap; }
    .review-form { border-top: 1px solid #ded3b4; padding-top: 22px; }
    .review-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
    .review-form-grid .form-span-2 { grid-column: 1 / -1; }
    .modal-cover {
      display: none;
      width: 100%;
      aspect-ratio: 16 / 8;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 22px;
      border: 1px solid var(--border);
      background: var(--soft-green);
    }
    .modal-cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .close-btn { border: 0; background: transparent; cursor: pointer; color: #666; padding: 8px; }
    .document-modal {
      width: min(94vw, 1200px);
      height: min(86vh, 820px);
      max-width: none;
      max-height: none;
      padding: 0;
      overflow: hidden;
      border: 1px solid rgba(44, 74, 49, 0.28);
      border-radius: 24px;
      background: var(--preview-surface-bg);
      color: #26311f;
      box-shadow: 0 28px 80px rgba(20, 35, 21, 0.36);
      display: flex;
      flex-direction: column;
    }
    .document-topbar {
      background: var(--preview-topbar-bg);
      min-height: 74px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      padding: 16px 22px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    }
    .document-title-wrap {
      min-width: 0;
      flex: 1 1 280px;
      max-width: min(100%, 460px);
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .document-icon {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: var(--preview-icon-bg);
      color: var(--preview-icon-text);
      flex: 0 0 auto;
      position: relative;
      overflow: hidden;
      box-shadow: inset 0 -3px 0 rgba(36, 67, 43, 0.14), 0 12px 26px rgba(0,0,0,0.16);
    }
    .document-icon::after {
      content: "";
      position: absolute;
      inset: 4px;
      border-radius: inherit;
      border: 1px solid rgba(255,255,255,0.45);
      pointer-events: none;
    }
    .document-icon i,
    .document-icon svg {
      width: 22px;
      height: 22px;
      stroke-width: 2.3;
      position: relative;
      z-index: 1;
    }
    .document-modal .document-title,
    .modal .document-title {
      font-family: var(--preview-title-font);
      font-size: var(--preview-title-size);
      font-weight: var(--preview-title-weight);
      color: var(--preview-title-text);
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .document-subtitle { font-size: 0.76rem; color: color-mix(in srgb, var(--preview-topbar-text) 82%, transparent 18%); font-weight: 800; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .document-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex: 1 1 520px;
      flex-wrap: wrap;
    }
    .document-actions .secondary-preview-action {
      display: none;
    }
    .document-modal.tools-expanded .document-actions .secondary-preview-action {
      display: inline-flex;
    }
    .doc-action {
      color: var(--preview-action-text);
      border: 1px solid rgba(255, 255, 255, 0.34);
      border-radius: 999px;
      background: var(--preview-action-bg);
      padding: 8px 11px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 36px;
      cursor: pointer;
      font-family: inherit;
      font-size: 0.83rem;
      white-space: nowrap;
      box-shadow: 0 8px 20px rgba(0,0,0,0.14);
      touch-action: manipulation;
    }
    .doc-action i {
      flex: 0 0 auto;
      width: 15px;
      height: 15px;
      stroke-width: 2.25;
    }
    .doc-action.action-utility {
      padding-inline: 10px;
      background: color-mix(in srgb, var(--preview-action-bg) 94%, white 6%);
    }
    .doc-action:hover { filter: brightness(0.97); transform: translateY(-1px); }
    .doc-action:active { transform: translateY(0) scale(0.98); }
    .doc-action.active {
      background: var(--preview-topbar-bg);
      color: var(--preview-topbar-text);
      border-color: rgba(255, 255, 255, 0.18);
    }
    .doc-action.square { width: 38px; min-height: 38px; padding: 0; }
    .doc-action.zoom-control {
      min-width: 38px;
      padding-inline: 10px;
    }
    .doc-action.zoom-readout {
      min-width: 58px;
      cursor: default;
      font-variant-numeric: tabular-nums;
    }
    .doc-action.zoom-control,
    .doc-action.zoom-readout,
    .preview-fullscreen-zoom,
    .preview-gesture-layer {
      display: none !important;
    }
    .document-toolbar {
      min-height: 48px;
      background: var(--preview-toolbar-bg);
      display: none;
      align-items: center;
      gap: 10px;
      padding: 0 20px;
      border-bottom: 1px solid #dfd1ad;
      color: var(--preview-toolbar-text);
    }
    .document-filename { font-weight: 900; color: var(--preview-toolbar-text); font-size: 0.84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .document-shell {
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(270px, 34%) 1fr;
      background:
        linear-gradient(90deg, rgba(119, 91, 54, 0.08) 1px, transparent 1px),
        var(--preview-surface-bg);
      background-size: 26px 26px;
    }
    .document-info {
      background: var(--preview-info-bg);
      color: var(--preview-info-text);
      font-weight: var(--preview-info-weight);
      padding: 26px;
      overflow-y: auto;
      border-right: 1px solid #ddd0af;
    }
    .document-cover {
      width: 100%;
      aspect-ratio: 4 / 5;
      border-radius: 14px 10px 10px 14px;
      overflow: hidden;
      background: #fdf6e3;
      margin-bottom: 20px;
      border: 1px solid #d4c49d;
      display: none;
      box-shadow: -8px 10px 0 #36573a, 0 20px 38px rgba(36, 67, 43, 0.2);
      transform: rotate(-1deg);
    }
    .document-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .document-overview {
      color: var(--preview-info-text);
      line-height: 1.7;
      white-space: pre-wrap;
      font-weight: var(--preview-info-weight);
      font-size: 0.95rem;
      margin-top: 18px;
    }
    .document-meta-grid {
      display: grid;
      gap: 9px;
      margin-top: 16px;
    }
    .document-meta-chip {
      background: color-mix(in srgb, var(--preview-info-bg) 86%, white 14%);
      border: 1px solid #dacda9;
      border-radius: 8px;
      padding: 10px 12px;
      color: var(--preview-info-text);
      font-weight: var(--preview-info-weight);
      font-size: 0.87rem;
    }
    .document-viewer {
      position: relative;
      min-width: 0;
      min-height: 0;
      background: var(--preview-viewer-bg);
      padding: 22px;
      display: block;
      overflow: auto;
      overscroll-behavior: contain;
      touch-action: none;
      -webkit-overflow-scrolling: touch;
    }
    .document-viewer::after {
      display: none;
    }
    .preview-zoom-content {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 100%;
      display: grid;
      transform-origin: 0 0;
      transition: width 0.16s ease, height 0.16s ease;
    }
    .document-viewer iframe,
    .document-viewer img {
      width: 100%;
      height: 100%;
      border: 1px solid #d4c49d;
      border-radius: 14px;
      background: var(--preview-surface-bg);
      display: block;
      box-shadow: 0 20px 50px rgba(56, 72, 44, 0.2);
    }
    .document-viewer img {
      object-fit: contain;
    }
    .preview-fallback {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 28px;
      text-align: center;
      color: var(--preview-info-text);
      background: var(--preview-viewer-bg);
    }
    .preview-fallback.show { display: flex; }
    .preview-fallback h3 { color: var(--preview-action-text); font-size: 1.35rem; margin-bottom: 10px; }
    .preview-fallback p { color: var(--preview-info-text); line-height: 1.6; max-width: 470px; }
    .preview-gesture-layer {
      position: absolute;
      inset: 0;
      z-index: 4;
      display: none;
      touch-action: none;
      cursor: grab;
      background: transparent;
    }
    .preview-gesture-layer:active {
      cursor: grabbing;
    }
    .preview-gesture-layer::after {
      content: '';
      position: fixed;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(0,0,0,0.62);
      color: #fffaf0;
      font-size: 0.78rem;
      font-weight: 900;
      opacity: 0;
      pointer-events: none;
      animation: gestureHint 4s ease forwards;
    }
    .document-modal.focus-preview .document-shell {
      grid-template-columns: 1fr;
    }
    .document-modal.details-hidden .document-shell {
      grid-template-columns: 1fr;
    }
    .document-modal.focus-preview .document-info,
    .document-modal.details-hidden .document-info {
      display: none;
    }
    .document-modal.focus-preview .document-viewer {
      padding: 12px;
      background: var(--preview-viewer-bg);
    }

    .preview-fullscreen-float {
      position: sticky;
      left: 100%;
      bottom: 54px;
      z-index: 5;
      width: max-content;
      margin-left: auto;
      margin-top: -48px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 40px;
      padding: 0 13px;
      border: 1px solid rgba(255,255,255,0.28);
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.72);
      color: #fffaf0;
      font-family: var(--body-font);
      font-size: 0.82rem;
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 14px 32px rgba(0,0,0,0.25);
      backdrop-filter: blur(10px);
    }
    .preview-fullscreen-float:hover {
      transform: translateY(-1px);
      background: rgba(0, 0, 0, 0.84);
    }
    .preview-fullscreen-float i {
      width: 16px;
      height: 16px;
    }
    .preview-fullscreen-zoom {
      position: fixed;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      z-index: 6;
      display: none;
      align-items: center;
      gap: 8px;
      padding: 8px;
      border-radius: 999px;
      background: rgba(0,0,0,0.72);
      box-shadow: 0 14px 32px rgba(0,0,0,0.25);
      backdrop-filter: blur(10px);
    }
    .preview-fullscreen-zoom button {
      min-width: 42px;
      height: 40px;
      border: 1px solid rgba(255,255,255,0.22);
      border-radius: 999px;
      background: rgba(255,250,240,0.94);
      color: #17251a;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      cursor: pointer;
    }
    .document-viewer.is-fullscreen-preview,
    .document-viewer:fullscreen {
      padding: 18px;
      background: var(--preview-viewer-bg);
    }
    .document-viewer.is-fullscreen-preview .preview-fullscreen-float,
    .document-viewer:fullscreen .preview-fullscreen-float {
      position: fixed;
      top: 18px;
      right: 18px;
      bottom: auto;
      left: auto;
      margin: 0;
      background: rgba(0, 0, 0, 0.78);
    }
    .document-viewer.is-fullscreen-preview .preview-fullscreen-zoom,
    .document-viewer:fullscreen .preview-fullscreen-zoom,
    .document-viewer.is-fullscreen-preview .preview-gesture-layer,
    .document-viewer:fullscreen .preview-gesture-layer {
      display: none !important;
    }
    .document-viewer.is-fullscreen-preview iframe,
    .document-viewer.is-fullscreen-preview img,
    .document-viewer:fullscreen iframe,
    .document-viewer:fullscreen img {
      min-height: calc(100vh - 36px);
    }
    .document-modal.focus-preview .document-viewer iframe,
    .document-modal.focus-preview .document-viewer img {
      min-height: calc(100vh - 160px);
    }
    .modal-mobile-note {
      display: none;
      color: #52614a;
      font-size: 0.86rem;
      font-weight: 700;
      line-height: 1.55;
      margin-top: 12px;
    }
    .document-modal.mobile-preview-mode .document-toolbar {
      display: none;
    }
    .document-modal.mobile-preview-mode .document-topbar {
      min-height: auto;
      align-items: stretch;
      justify-content: flex-start;
      gap: 12px;
      padding: 12px 14px 10px;
      position: sticky;
      top: 0;
      z-index: 5;
    }
    .document-modal.mobile-preview-mode .document-title-wrap,
    .document-modal.mobile-preview-mode .document-actions {
      flex: 0 0 auto;
      max-width: 100%;
    }
    .document-modal.mobile-preview-mode .document-title-wrap {
      gap: 10px;
    }
    .document-modal.mobile-preview-mode .document-icon {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      font-size: 1.08rem;
    }
    .document-modal.mobile-preview-mode .document-title {
      white-space: normal;
      font-size: clamp(0.9rem, var(--preview-title-size), 1.08rem);
      line-height: 1.3;
    }
    .document-modal.landscape-preview-mode {
      width: min(96vw, 1100px);
      height: min(88dvh, 430px);
      border-radius: 18px;
    }
    .document-modal.landscape-preview-mode .document-topbar {
      min-height: auto;
      padding: 10px 14px;
      gap: 9px;
    }
    .document-modal.landscape-preview-mode .document-title-wrap {
      max-width: 100%;
      gap: 9px;
    }
    .document-modal.landscape-preview-mode .document-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      font-size: 1rem;
    }
    .document-modal.landscape-preview-mode .document-title {
      font-size: clamp(0.9rem, var(--preview-title-size), 1.1rem);
      line-height: 1.2;
    }
    .document-modal.landscape-preview-mode .document-actions {
      width: 100%;
      justify-content: flex-start;
      gap: 6px;
      overflow-x: auto;
      flex-wrap: nowrap;
      scrollbar-width: none;
    }
    .document-modal.landscape-preview-mode .document-actions::-webkit-scrollbar {
      display: none;
    }
    .document-modal.landscape-preview-mode .doc-action {
      flex: 0 0 40px;
      min-width: 40px;
      min-height: 40px;
      padding: 0;
    }
    .document-modal.landscape-preview-mode .doc-action span {
      display: none;
    }
    .document-modal.landscape-preview-mode .document-toolbar {
      min-height: 38px;
      padding: 0 14px;
    }
    .document-modal.landscape-preview-mode .document-shell {
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .document-modal.landscape-preview-mode .document-info {
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: 10px;
      z-index: 3;
      max-height: min(54dvh, 210px);
      border: 1px solid #ddd0af;
      border-radius: 16px;
      box-shadow: 0 -18px 36px rgba(38, 49, 31, 0.18);
    }
    .document-modal.landscape-preview-mode.details-hidden .document-info {
      display: none;
    }
    .document-modal.landscape-preview-mode .document-viewer {
      flex: 1 1 auto;
      min-height: 0;
      padding: 8px 10px 10px;
    }
    .document-modal.landscape-preview-mode .document-viewer iframe,
    .document-modal.landscape-preview-mode .document-viewer img {
      height: 100%;
      min-height: 0;
      border-radius: 12px;
    }
    .document-modal.mobile-preview-mode .document-subtitle {
      white-space: normal;
      line-height: 1.35;
    }
    .document-modal.mobile-preview-mode .document-actions {
      width: 100%;
      justify-content: flex-start;
      flex-wrap: nowrap;
      overflow-x: auto;
      padding-bottom: 2px;
      scrollbar-width: none;
    }
    .document-modal.mobile-preview-mode .document-actions::-webkit-scrollbar {
      display: none;
    }
    .document-modal.mobile-preview-mode .doc-action {
      flex: 0 0 40px;
      min-width: 40px;
      min-height: 40px;
      padding: 0;
    }
    .document-modal.mobile-preview-mode .doc-action span {
      display: none;
    }
    .document-modal.mobile-preview-mode .doc-action.zoom-readout span {
      display: inline;
    }
    .document-modal.mobile-preview-mode .doc-action i {
      width: 14px;
      height: 14px;
    }
    .document-modal.mobile-preview-mode .document-shell {
      display: flex;
      flex-direction: column;
      position: relative;
      min-height: 0;
      flex: 1 1 auto;
      background: var(--preview-surface-bg);
    }
    .document-modal.mobile-preview-mode .document-viewer {
      flex: 1 1 auto;
      min-height: 0;
      padding: 8px 10px 10px;
    }
    .document-modal.mobile-preview-mode .preview-zoom-content {
      min-height: 100%;
    }
    .document-modal.mobile-preview-mode .document-viewer iframe,
    .document-modal.mobile-preview-mode .document-viewer img {
      flex: 1 1 auto;
      width: 100%;
      height: 100%;
      min-height: 0;
      max-height: 100%;
      border-radius: 12px;
    }
    .document-modal.mobile-preview-mode .document-info {
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: 10px;
      z-index: 3;
      max-height: min(42dvh, 320px);
      border: 1px solid #ddd0af;
      border-radius: 18px;
      box-shadow: 0 -20px 40px rgba(38, 49, 31, 0.18);
      overflow-y: auto;
    }
    .document-modal.mobile-preview-mode .document-cover {
      display: none !important;
    }
    .document-modal.mobile-preview-mode.details-hidden .document-info {
      display: none;
    }
    .document-modal.mobile-preview-mode .document-meta-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .document-modal.mobile-preview-mode .document-overview {
      font-size: 0.9rem;
      line-height: 1.6;
    }

    .admin-view { display: none; }
    .admin-view.show { display: block; max-width: 1480px; color: var(--dark); }
    body.admin-mode {
      background:
        linear-gradient(180deg, rgba(255, 250, 240, 0.9), rgba(238, 246, 232, 0.94)),
        var(--light);
    }
    body.admin-mode .section-title { color: var(--green-1); }
    body.admin-mode label { color: var(--dark); }
    body.admin-mode input,
    body.admin-mode textarea,
    body.admin-mode select {
      background: var(--white);
      border-color: var(--border);
      color: var(--dark);
    }
    body.admin-mode input::placeholder,
    body.admin-mode textarea::placeholder { color: #8a927f; }
    .admin-command {
      background: #fffaf0;
      border: 1px solid #ded3b4;
      border-radius: 10px;
      padding: 24px;
      margin-bottom: 24px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 18px;
      align-items: center;
      box-shadow: 0 18px 40px rgba(43, 64, 38, 0.1);
    }
    .admin-command-title {
      color: #24432b;
      font-size: 1.35rem;
      margin-bottom: 8px;
    }
    .admin-command-text {
      color: #54604b;
      font-weight: 700;
      line-height: 1.55;
    }
    .admin-mini-stack {
      display: grid;
      gap: 8px;
      min-width: 220px;
    }
    .admin-mini-card {
      background: #ffffff;
      border: 1px solid #ded3b4;
      border-radius: 8px;
      padding: 12px;
      color: #24432b;
      font-weight: 900;
      font-size: 0.9rem;
    }
    .admin-command-main {
      display: grid;
      gap: 14px;
      min-width: 0;
    }
    .admin-command-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }
    .admin-quick-btn,
    .admin-advanced-toggle {
      border: 1px solid #d8d0b8;
      background: #ffffff;
      color: #36573a;
      border-radius: 999px;
      padding: 10px 13px;
      font-weight: 900;
      font-size: 0.84rem;
      cursor: pointer;
      font-family: inherit;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 42px;
      transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }
    .admin-quick-btn:hover,
    .admin-advanced-toggle:hover {
      transform: translateY(-1px);
      border-color: var(--green-1);
      box-shadow: 0 10px 22px rgba(43, 64, 38, 0.1);
    }
    .admin-advanced-toggle.active {
      background: var(--green-1);
      border-color: var(--green-1);
      color: #fffaf0;
    }
    .admin-control-row {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) auto;
      gap: 10px;
      align-items: center;
      margin-bottom: 16px;
    }
    .admin-control-search {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 46px;
      padding: 7px 8px 7px 14px;
      background: #ffffff;
      border: 1px solid #ded3b4;
      border-radius: 999px;
      color: #36573a;
      box-shadow: 0 10px 22px rgba(43, 64, 38, 0.06);
    }
    .admin-control-search input {
      border: 0;
      background: transparent;
      flex: 1;
      min-width: 0;
      padding: 8px 4px;
      font-weight: 800;
    }
    .admin-control-search input:focus { outline: none; }
    .admin-control-clear {
      border: 0;
      background: #f6f2e4;
      color: #36573a;
      border-radius: 999px;
      padding: 8px 12px;
      cursor: pointer;
      font-weight: 900;
      font-family: inherit;
    }
    .admin-search-status,
    .unsaved-indicator {
      font-size: 0.84rem;
      font-weight: 900;
      color: #5f6d57;
    }
    .unsaved-indicator {
      display: none;
      align-items: center;
      gap: 8px;
      justify-content: center;
      background: #fff3cd;
      color: #604b00;
      border: 1px solid #ead074;
      border-radius: 999px;
      padding: 10px 14px;
      white-space: nowrap;
    }
    .unsaved-indicator.show { display: inline-flex; }
    .admin-home-health {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 2px;
    }
    .admin-health-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid #d8e5ce;
      background: #f6fbf3;
      color: #36573a;
      font-size: 0.78rem;
      font-weight: 900;
    }
    .admin-health-chip.warn {
      background: #fff8df;
      border-color: #ead074;
      color: #675000;
    }
    .admin-kpis {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 16px;
      margin-bottom: 28px;
    }
    .admin-kpi {
      background: #ffffff;
      border: 1px solid #dbe5d4;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 16px 34px rgba(43, 64, 38, 0.1);
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    }
    .admin-kpi.actionable {
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      appearance: none;
      width: 100%;
    }
    .admin-kpi.actionable:focus-visible {
      outline: 3px solid rgba(244, 196, 48, 0.7);
      outline-offset: 3px;
    }
    .admin-kpi:hover {
      transform: translateY(-3px);
      border-color: rgba(54, 87, 58, 0.16);
      box-shadow: 0 20px 42px rgba(43, 64, 38, 0.14);
    }
    .admin-kpi-value { color: var(--green-1); font-size: 2rem; font-weight: 900; line-height: 1; }
    .admin-kpi-label { color: #66725d; font-size: 0.9rem; font-weight: 800; margin-top: 8px; }
    .admin-kpi-hint {
      margin-top: 10px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #36573a;
      font-size: 0.78rem;
      font-weight: 950;
    }
    .account-manager-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
      gap: 18px;
      align-items: start;
    }
    .account-list-card,
    .account-form-card {
      border: 1px solid #dbe5d4;
      border-radius: 16px;
      background: #fffdf7;
      padding: 18px;
      box-shadow: 0 14px 32px rgba(43, 64, 38, 0.07);
    }
    .account-list-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }
    .account-list-title {
      color: #24432b;
      font-weight: 950;
      font-size: 1.05rem;
      margin-bottom: 4px;
    }
    .account-list-note {
      color: #66725d;
      font-size: 0.88rem;
      font-weight: 750;
      line-height: 1.45;
    }
    .admin-kpi.accent {
      background:
        radial-gradient(circle at top right, rgba(244, 196, 48, 0.2), transparent 34%),
        linear-gradient(135deg, #fffdf5, #f4faf0);
      border-color: #e7d7a9;
    }
    .admin-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      margin-bottom: 30px;
      flex-wrap: wrap;
    }
    .admin-panel {
      padding: 30px;
      margin-bottom: 34px;
      background: #ffffff;
      border-color: #dbe5d4;
      color: var(--dark);
      box-shadow: 0 16px 36px rgba(43, 64, 38, 0.09);
    }
    .admin-panel h3 { font-size: 1.45rem; margin-bottom: 22px; }
    .admin-panel p { color: #66725d !important; }
    .admin-panel-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }
    .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .admin-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
    .admin-actions > button,
    .admin-actions > a,
    .admin-actions > .btn-primary,
    .admin-actions > .btn-secondary,
    .admin-actions > .btn-light,
    .admin-actions > .btn-danger {
      min-width: 0;
    }
    .message-list {
      display: grid;
      gap: 14px;
    }
    .message-card {
      border: 2px solid var(--border);
      border-radius: 10px;
      padding: 18px;
      background: #fbfef9;
    }
    .message-card.unread {
      border-color: var(--green-1);
      box-shadow: 0 8px 22px rgba(0, 138, 0, 0.12);
    }
    .message-meta {
      color: #666;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      font-size: 0.88rem;
      font-weight: 700;
      margin: 8px 0 12px;
    }
    .inbox-context-chips,
    .review-admin-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .inbox-context-chip,
    .review-status-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 9px;
      border-radius: 999px;
      background: #f3f7ee;
      color: #405934;
      border: 1px solid #dbe5d4;
      font-size: 0.76rem;
      font-weight: 850;
    }
    .review-admin-list { display: grid; gap: 10px; }
    .review-admin-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 16px;
      padding: 16px;
      border: 1px solid #dbe5d4;
      border-radius: 9px;
      background: #fbfdf9;
    }
    .review-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
    .review-admin-row.pending { border-left: 4px solid #c79218; }
    .review-admin-row.approved { border-left: 4px solid #3c7548; }
    .review-admin-row.rejected { border-left: 4px solid #a54d49; opacity: 0.78; }
    @media (max-width: 720px) {
      .contact-intake { grid-template-columns: 1fr; }
      .contact-intro { padding: 22px 20px; gap: 18px; }
      .contact-intro h3 { font-size: 1.35rem; margin-top: 10px; }
      .contact-intro p { line-height: 1.55; }
      .contact-intro-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
      .contact-intro-item { grid-template-columns: 1fr; gap: 6px; align-items: start; font-size: 0.74rem; }
      .contact-intro-item i { width: 30px; height: 30px; padding: 7px; }
      .contact-form { padding: 24px 18px; }
      .contact-form-grid,
      .review-form-grid { grid-template-columns: 1fr; }
      .contact-form .form-span-2,
      .review-form-grid .form-span-2 { grid-column: auto; }
      .review-modal {
        width: 100vw;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        padding: 20px 16px;
      }
      .review-admin-row { grid-template-columns: 1fr; }
      .review-admin-actions button { flex: 1 1 110px; }
      .contact-purpose-choices { grid-template-columns: 1fr; }
      .contact-purpose-choice { min-height: 58px; }
      .contact-submit-row { grid-template-columns: 1fr; }
      .contact-submit-note { max-width: none; text-align: center; }
      .contact-response-note { display: none; }
      .contact-form-heading { align-items: center; }
    }
    .brand-preview {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 16px;
      background: #fffaf0;
      border: 1px solid #ded3b4;
      border-radius: 10px;
      padding: 18px;
      margin-bottom: 18px;
    }
    .brand-preview-logo {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      background: #f8f1d6;
      border-radius: 12px;
      overflow: hidden;
      font-size: 2rem;
      font-weight: 900;
      color: var(--green-1);
    }
    .brand-style-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 12px;
      margin-bottom: 18px;
    }
    .brand-style-btn {
      border: 1px solid #d8d0b8;
      background: #fffaf0;
      color: #24432b;
      border-radius: 8px;
      padding: 12px;
      font-weight: 900;
      cursor: pointer;
      font-family: inherit;
      text-align: left;
    }
    .brand-style-btn:hover { border-color: var(--green-1); box-shadow: 0 10px 24px rgba(43,64,38,0.1); }
    .updates-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 14px;
    }
    .upload-type-switch {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin: 0 0 14px;
    }
    .upload-type-btn,
    .upload-step-btn {
      flex: 0 0 auto;
      border: 1px solid #d8d0b8;
      background: #ffffff;
      color: #36573a;
      border-radius: 999px;
      padding: 10px 14px;
      font-weight: 850;
      font-size: 0.9rem;
      cursor: pointer;
      transition: 0.2s ease;
      font-family: inherit;
      white-space: nowrap;
      min-height: 44px;
      touch-action: manipulation;
    }
    .upload-type-btn:hover,
    .upload-step-btn:hover {
      border-color: var(--green-1);
      transform: translateY(-1px);
    }
    .upload-type-btn.active,
    .upload-step-btn.active {
      background: var(--green-1);
      color: #ffffff;
      border-color: var(--green-1);
      box-shadow: 0 10px 24px rgba(0, 138, 0, 0.18);
    }
    .upload-step-shell {
      margin-bottom: 18px;
      padding: 14px;
      border-radius: 14px;
      border: 1px solid #ded3b4;
      background: #fffaf0;
      box-shadow: 0 12px 28px rgba(43, 64, 38, 0.05);
    }
    .upload-step-track {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding-bottom: 4px;
    }
    .upload-step-note {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 12px;
      color: #66725d;
      font-size: 0.86rem;
      font-weight: 800;
    }
    .upload-step-panel {
      display: none;
      animation: fadeSlide 0.22s ease;
    }
    .upload-step-panel.active { display: block; }
    .upload-step-summary {
      display: grid;
      gap: 10px;
      padding: 18px;
      border-radius: 12px;
      border: 1px solid #ded3b4;
      background: #fffaf0;
      color: #36573a;
      font-weight: 750;
    }
    .upload-step-summary strong {
      color: #24432b;
      font-size: 1rem;
    }
    .upload-step-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 18px;
    }
    .upload-final-actions {
      display: none;
      margin-top: 0;
    }
    .upload-final-actions.show {
      display: flex;
    }
    .upload-nav-actions {
      margin-top: 0;
    }
    .upload-draft-note {
      color: #5f6f54;
      font-weight: 800;
      font-size: 0.84rem;
    }
    .update-card {
      background: #fffaf0;
      border: 1px solid #ded3b4;
      border-radius: 10px;
      padding: 16px;
      min-height: 118px;
      transition: transform 0.22s ease, box-shadow 0.22s ease;
    }
    .update-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 28px rgba(43, 64, 38, 0.1);
    }
    .update-label {
      color: #6c785f;
      font-size: 0.78rem;
      text-transform: uppercase;
      font-weight: 900;
      margin-bottom: 8px;
    }
    .update-title {
      color: #24432b;
      font-weight: 900;
      line-height: 1.35;
    }
    .update-meta {
      color: #66725d;
      font-weight: 700;
      margin-top: 8px;
      font-size: 0.88rem;
    }
    .launch-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 14px;
      margin-top: 18px;
    }
    .launch-card {
      background: #f6fbf3;
      border: 1px solid #dce7d2;
      border-radius: 12px;
      padding: 16px;
    }
    .launch-card strong {
      display: block;
      font-size: 1.5rem;
      color: #24432b;
      margin-bottom: 6px;
    }
    .launch-card span {
      color: #66725d;
      font-size: 0.88rem;
      font-weight: 800;
    }
    .launch-list {
      display: grid;
      gap: 10px;
      margin-top: 18px;
    }
    .launch-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      background: #fffaf0;
      border: 1px solid #e6dabb;
      border-radius: 10px;
      padding: 12px 14px;
      color: #405934;
      font-weight: 700;
      line-height: 1.45;
    }
    .launch-item.ok {
      background: #eef8ee;
      border-color: #d0e7d1;
      color: #245232;
    }
    .launch-item i { flex: 0 0 auto; margin-top: 1px; }
    .system-check-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 12px;
      margin-top: 18px;
    }
    .system-check-card {
      border: 1px solid #dce7d2;
      border-radius: 14px;
      background: #fbfef9;
      padding: 14px;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 10px;
      align-items: flex-start;
    }
    .system-check-icon {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      background: #eef8ee;
      color: #245232;
    }
    .system-check-card.warn .system-check-icon {
      background: #fff3cd;
      color: #6a5300;
    }
    .system-check-title {
      color: #24432b;
      font-weight: 900;
      line-height: 1.25;
    }
    .system-check-text {
      color: #66725d;
      font-size: 0.86rem;
      font-weight: 750;
      line-height: 1.45;
      margin-top: 4px;
    }
    .quality-center-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
      gap: 18px;
      align-items: start;
    }
    .quality-score-card {
      border: 1px solid #dbe7d4;
      border-radius: 22px;
      padding: 22px;
      background:
        radial-gradient(circle at 92% 12%, rgba(244,196,48,0.22), transparent 28%),
        linear-gradient(135deg, #203926, #36573a);
      color: #fffaf0;
      box-shadow: 0 22px 48px rgba(43, 64, 38, 0.16);
    }
    .quality-score-number {
      font-size: clamp(2.4rem, 6vw, 4.4rem);
      line-height: 1;
      font-weight: 900;
      margin: 10px 0 8px;
    }
    .quality-score-card p {
      color: rgba(255,250,240,0.78) !important;
      font-weight: 750;
      line-height: 1.6;
    }
    .quality-check-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 18px;
    }
    .quality-check {
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 16px;
      padding: 12px;
      background: rgba(255,255,255,0.08);
    }
    .quality-check strong {
      display: block;
      font-size: 1.15rem;
      line-height: 1;
      margin-bottom: 6px;
    }
    .quality-check span {
      color: rgba(255,250,240,0.72);
      font-size: 0.78rem;
      font-weight: 850;
    }
    .quality-list {
      display: grid;
      gap: 12px;
    }
    .quality-item {
      border: 1px solid #dbe7d4;
      border-radius: 18px;
      background: #ffffff;
      padding: 16px;
      box-shadow: 0 14px 30px rgba(43, 64, 38, 0.06);
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 12px;
      align-items: start;
    }
    .quality-item-score {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: #eef6e8;
      color: #36573a;
      display: grid;
      place-items: center;
      font-weight: 900;
      box-shadow: inset 0 -3px 0 rgba(54, 87, 58, 0.08);
    }
    .quality-item-title {
      color: #26311f;
      font-weight: 900;
      line-height: 1.3;
    }
    .quality-item-meta {
      color: #687660;
      font-size: 0.82rem;
      font-weight: 750;
      margin-top: 4px;
      line-height: 1.45;
    }
    .quality-tags {
      display: flex;
      gap: 7px;
      flex-wrap: wrap;
      margin-top: 9px;
    }
    .quality-tag {
      border-radius: 999px;
      padding: 6px 9px;
      background: #fff6df;
      color: #7d5a06;
      border: 1px solid #ecd39a;
      font-size: 0.74rem;
      font-weight: 900;
    }
    .quality-tag.ok {
      background: #ebf8ef;
      color: #1f6d35;
      border-color: #b8e0c2;
    }
    .toolkit-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 16px;
    }
    .toolkit-card {
      background: #fffdf7;
      border: 1px solid #d8e5ce;
      border-radius: 18px;
      padding: 18px;
      box-shadow: 0 12px 30px rgba(46, 87, 50, 0.08);
    }
    .toolkit-card-title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 900;
      color: #24432b;
      margin-bottom: 8px;
    }
    .toolkit-card-copy {
      color: #607159;
      font-weight: 700;
      line-height: 1.55;
      font-size: 0.92rem;
    }
    .media-library-list,
    .link-check-list,
    .revision-list {
      display: grid;
      gap: 10px;
      max-height: 360px;
      overflow: auto;
      padding-right: 4px;
    }
    .media-library-item,
    .link-check-item,
    .revision-item {
      background: #f8fbf3;
      border: 1px solid #d8e5ce;
      border-radius: 14px;
      padding: 12px;
      display: grid;
      gap: 6px;
      min-width: 0;
    }
    .media-library-item {
      grid-template-columns: 52px 1fr;
      align-items: center;
    }
    .media-library-thumb {
      width: 52px;
      height: 52px;
      border-radius: 12px;
      overflow: hidden;
      background: #eef5e8;
      display: grid;
      place-items: center;
      color: #36573a;
      font-weight: 900;
      border: 1px solid #d2dfc8;
    }
    .media-library-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .toolkit-title-line {
      font-weight: 900;
      color: #26331f;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .toolkit-meta-line {
      color: #66725d;
      font-size: 0.82rem;
      font-weight: 750;
      overflow-wrap: anywhere;
    }
    .link-risk-high { border-color: #e6a8a8; background: #fff5f2; }
    .link-risk-medium { border-color: #ead074; background: #fff9df; }
    .link-risk-low { border-color: #bdddb1; background: #f5fbef; }
    .category-manager-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: 18px;
      align-items: start;
    }
    .category-manager-card,
    .category-row-card {
      border: 1px solid #dbe7d4;
      border-radius: 18px;
      background: #fffdf7;
      box-shadow: 0 14px 32px rgba(43, 64, 38, 0.07);
    }
    .category-manager-card {
      padding: 18px;
      position: sticky;
      top: calc(var(--navbar-height) + 16px);
    }
    .category-list {
      display: grid;
      gap: 12px;
    }
    .category-row-card {
      padding: 15px;
      display: grid;
      gap: 12px;
    }
    .category-row-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    .category-row-title {
      color: #24432b;
      font-weight: 950;
      font-size: 1.02rem;
      line-height: 1.25;
    }
    .category-row-sub {
      color: #66725d;
      font-size: 0.84rem;
      font-weight: 750;
      margin-top: 4px;
    }
    .category-meter {
      height: 8px;
      border-radius: 999px;
      overflow: hidden;
      background: #edf4e8;
    }
    .category-meter span {
      display: block;
      height: 100%;
      width: var(--meter, 0%);
      background: var(--green-1);
      border-radius: inherit;
    }
    .category-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .category-actions .btn-secondary,
    .category-actions .btn-danger {
      padding: 9px 11px;
      font-size: 0.82rem;
    }
    .upload-quality-note,
    .empty-shelf-state {
      border: 1px dashed #c9dac0;
      border-radius: 14px;
      background: #fbfef9;
      color: #52654b;
    }
    .upload-quality-note {
      padding: 12px 14px;
      font-weight: 750;
      line-height: 1.55;
      margin: 10px 0 16px;
    }
    .empty-shelf-state {
      grid-column: 1 / -1;
      text-align: center;
      padding: 34px 22px;
      display: grid;
      place-items: center;
      gap: 10px;
    }
    .empty-shelf-state i {
      width: 34px;
      height: 34px;
      color: #36573a;
    }
    .empty-shelf-title {
      color: #24432b;
      font-weight: 900;
      font-size: 1.02rem;
    }
    .empty-shelf-copy {
      max-width: 520px;
      color: #66725d;
      font-weight: 700;
      line-height: 1.55;
    }
    .brand-preview-logo img,
    .navbar-brand-icon img,
    .hero-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .backup-box {
      width: 100%;
      min-height: 110px;
      font-family: Consolas, monospace;
      font-size: 0.85rem;
    }
    .uploader-note {
      background: #fffaf0;
      border: 1px solid #ded3b4;
      color: #405934;
      border-radius: 12px;
      padding: 18px;
      font-weight: 700;
      line-height: 1.6;
    }
    .admin-nav-pane {
      position: sticky;
      top: 88px;
      z-index: 80;
      margin-bottom: 22px;
      padding: 10px;
      background: rgba(255, 250, 240, 0.94);
      border: 1px solid #ded3b4;
      border-radius: 12px;
      backdrop-filter: blur(10px);
      box-shadow: 0 14px 30px rgba(43, 64, 38, 0.08);
      isolation: isolate;
    }
    body.admin-mode .admin-nav-pane { top: 16px; }
    .admin-nav-track,
    .settings-tab-track {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: thin;
      scroll-snap-type: x proximity;
    }
    .admin-nav-group-label {
      flex: 0 0 auto;
      align-self: center;
      color: #6d765f;
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-weight: 950;
      padding: 0 4px 0 6px;
      white-space: nowrap;
    }
    .admin-nav-btn,
    .settings-tab-btn {
      flex: 0 0 auto;
      border: 1px solid #d8d0b8;
      background: #ffffff;
      color: #36573a;
      border-radius: 999px;
      padding: 10px 14px;
      font-weight: 800;
      font-size: 0.9rem;
      cursor: pointer;
      transition: 0.2s ease;
      font-family: inherit;
      white-space: nowrap;
      min-height: 44px;
      scroll-snap-align: start;
      touch-action: manipulation;
    }
    .admin-search-hidden { display: none !important; }
    body:not(.admin-advanced-on) .advanced-control {
      display: none !important;
    }
    .advanced-control {
      position: relative;
    }
    .advanced-control::before {
      content: "Advanced";
      display: inline-flex;
      width: fit-content;
      margin: 0 0 8px;
      padding: 4px 8px;
      border-radius: 999px;
      background: #f6f2e4;
      color: #617052;
      font-size: 0.72rem;
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .admin-nav-btn:hover,
    .settings-tab-btn:hover {
      border-color: var(--green-1);
      transform: translateY(-1px);
    }
    .admin-nav-btn.active,
    .settings-tab-btn.active {
      background: var(--green-1);
      color: #ffffff;
      border-color: var(--green-1);
      box-shadow: 0 10px 24px rgba(0, 138, 0, 0.18);
    }
    .admin-section-anchor {
      scroll-margin-top: 170px;
    }
    .settings-tab-shell {
      margin-bottom: 18px;
    }
    .settings-group {
      display: none;
      animation: fadeSlide 0.22s ease;
    }
    .settings-group.active { display: block; }
    .companion-tab-group {
      display: none;
      animation: fadeSlide 0.22s ease;
    }
    .companion-tab-group.active { display: block; }
    .companion-preview-bubble {
      margin-top: 12px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 18px;
      background: #fffaf0;
      border: 1px solid #ded3b4;
      color: #36573a;
      font-weight: 800;
      box-shadow: 0 12px 24px rgba(43, 64, 38, 0.08);
    }
    .loader-preview-card {
      width: min(100%, 360px);
      margin: 0 auto;
      transform: scale(0.96);
      transform-origin: top center;
    }
    .size-control {
      display: grid;
      gap: 8px;
    }
    .size-control-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      font-weight: 800;
      color: #405934;
    }
    .size-chip {
      min-width: 52px;
      text-align: center;
      padding: 5px 10px;
      border-radius: 999px;
      background: #fffaf0;
      border: 1px solid #ded3b4;
      color: #24432b;
      font-size: 0.82rem;
      font-weight: 900;
    }
    .size-control input[type="range"] {
      width: 100%;
      accent-color: var(--green-1);
    }
    .branding-preview-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 18px;
    }
    .preview-card {
      background: #fbfef9;
      border: 1px solid #dbe5d4;
      border-radius: 12px;
      padding: 16px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
    }
    .preview-label {
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #6c785f;
      font-weight: 900;
      margin-bottom: 10px;
    }
    .mini-navbar-preview {
      border: 1px solid #dbe5d4;
      border-radius: 12px;
      overflow: hidden;
      background: #ffffff;
    }
    .mini-navbar-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 0 14px;
      border-bottom: 1px solid #e3ecd9;
      background: #ffffff;
    }
    .mini-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      color: #24432b;
      font-weight: 900;
    }
    .mini-brand-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 180px;
    }
    .mini-brand-logo {
      display: grid;
      place-items: center;
      color: #ffffff;
      overflow: hidden;
      flex: 0 0 auto;
    }
    .mini-brand-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .mini-links {
      display: flex;
      gap: 10px;
      color: #66725d;
      font-size: 0.74rem;
      font-weight: 800;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .mini-hero-preview {
      border: 1px solid #dbe5d4;
      border-radius: 12px;
      padding: 18px;
      color: #ffffff;
      min-height: 188px;
      display: grid;
      align-content: start;
      gap: 10px;
      background: linear-gradient(135deg, #0f6a3a, #1a7d4f);
    }
    .mini-hero-logo {
      display: grid;
      place-items: center;
      color: #ffffff;
      overflow: hidden;
    }
    .mini-hero-logo.wide-logo {
      width: min(220px, 70%) !important;
      height: auto !important;
      min-height: 56px;
    }
    .mini-hero-logo.wide-logo img {
      object-fit: contain;
    }
    .mini-hero-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .mini-hero-title {
      font-size: 1.2rem;
      line-height: 1.2;
      font-weight: 900;
    }
    .mini-hero-subtitle {
      font-size: 0.84rem;
      line-height: 1.55;
      color: rgba(255,255,255,0.88);
    }
    .nav-builder {
      display: grid;
      gap: 12px;
      margin-top: 12px;
    }
    .nav-entry {
      border: 1px solid #dbe5d4;
      border-radius: 14px;
      background: #fbfef9;
      padding: 14px;
      box-shadow: 0 8px 18px rgba(43,64,38,0.05);
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, opacity 0.16s ease;
    }
    .nav-entry-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }
    .nav-entry-heading,
    .portal-entry-heading {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .nav-entry-label {
      color: #28452f;
      font-weight: 900;
      font-size: 0.95rem;
    }
    .nav-entry-actions {
      display: inline-flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .nav-entry-grid {
      display: grid;
      grid-template-columns: 1.1fr 1fr auto;
      gap: 12px;
      align-items: end;
    }
    .mini-reader-preview {
      border: 1px solid #dbe5d4;
      border-radius: 16px;
      overflow: hidden;
      background: var(--preview-surface-bg);
      box-shadow: 0 14px 28px rgba(43,64,38,0.06);
    }
    .mini-reader-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 14px;
      background: var(--preview-topbar-bg);
      color: var(--preview-topbar-text);
    }
    .mini-reader-title {
      min-width: 0;
      color: var(--preview-title-text);
      font-family: var(--preview-title-font);
      font-size: var(--preview-title-size);
      font-weight: var(--preview-title-weight);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mini-reader-actions {
      display: inline-flex;
      gap: 6px;
      align-items: center;
    }
    .mini-reader-chip {
      min-width: 34px;
      min-height: 30px;
      padding: 0 10px;
      border-radius: 999px;
      background: var(--preview-action-bg);
      color: var(--preview-action-text);
      display: inline-grid;
      place-items: center;
      font-size: 0.76rem;
      font-weight: 900;
      border: 1px solid rgba(255,255,255,0.18);
    }
    .mini-reader-toolbar {
      padding: 10px 14px;
      background: var(--preview-toolbar-bg);
      color: var(--preview-toolbar-text);
      border-bottom: 1px solid #e3d6b6;
      font-size: 0.84rem;
      font-weight: 800;
    }
    .mini-reader-shell {
      display: grid;
      grid-template-columns: minmax(140px, 0.7fr) 1fr;
      min-height: 180px;
    }
    .mini-reader-info {
      background: var(--preview-info-bg);
      color: var(--preview-info-text);
      font-weight: var(--preview-info-weight);
      padding: 14px;
      border-right: 1px solid #e5d7b7;
    }
    .mini-reader-info strong,
    .mini-reader-viewer strong {
      display: block;
      font-size: 0.82rem;
      margin-bottom: 6px;
    }
    .mini-reader-viewer {
      background: var(--preview-viewer-bg);
      padding: 14px;
      color: #405934;
      display: grid;
      align-content: start;
      gap: 8px;
    }
    .mini-reader-frame {
      min-height: 96px;
      border-radius: 12px;
      border: 1px solid #d4c49d;
      background: #fffdf7;
      display: grid;
      place-items: center;
      color: #6a785f;
      font-size: 0.82rem;
      font-weight: 800;
    }
    .library-guide-preview {
      display: grid;
      gap: 12px;
      min-height: 260px;
      padding: 18px;
      border-radius: 18px;
      border: 1px solid rgba(54, 87, 58, 0.12);
      background: var(--library-bg);
      background-size: cover;
      background-position: center;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 16px 34px rgba(43,64,38,0.08);
      overflow: hidden;
    }
    .library-guide-preview-head {
      display: grid;
      gap: 7px;
      justify-items: var(--library-justify);
      text-align: var(--library-text-align);
    }
    .library-guide-preview-pill {
      width: fit-content;
      padding: 7px 11px;
      border-radius: 999px;
      background: rgba(255,255,255,0.78);
      border: 1px solid rgba(54,87,58,0.12);
      color: var(--library-text);
      font-size: 0.75rem;
      font-weight: 900;
    }
    .library-guide-preview-title {
      color: var(--library-text);
      font-weight: var(--library-title-weight);
      font-size: 1.15rem;
      line-height: 1.2;
    }
    .library-guide-preview-subtitle {
      color: var(--library-muted);
      font-size: 0.86rem;
      font-weight: 700;
      line-height: 1.5;
    }
    .library-guide-preview-cards {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .library-guide-preview-card {
      min-height: 112px;
      border-radius: 14px;
      padding: 12px;
      background: var(--library-card-bg);
      border: 1px solid rgba(54,87,58,0.12);
      color: var(--library-text);
      display: grid;
      align-content: space-between;
      gap: 10px;
      font-size: 0.82rem;
      font-weight: 800;
    }
    .library-guide-preview-card.featured {
      background: var(--library-feature-bg);
      color: var(--library-feature-text);
    }
    .library-guide-preview-button {
      width: fit-content;
      border-radius: 999px;
      padding: 7px 10px;
      background: var(--library-button-bg);
      color: var(--library-button-text);
      font-size: 0.76rem;
      font-weight: 900;
    }
    .why-card-editor {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }
    .why-card-studio {
      display: grid;
      grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
      gap: 14px;
      align-items: start;
    }
    .why-live-preview {
      border: 1px solid #dbe5d4;
      border-radius: 18px;
      background: linear-gradient(180deg, #fffef9, #f6fbf2);
      padding: 14px;
      box-shadow: 0 14px 30px rgba(43, 64, 38, 0.08);
      position: sticky;
      top: 92px;
    }
    .why-live-preview-label {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 10px;
      border-radius: 999px;
      background: #eef6e8;
      color: #36573a;
      font-size: 0.74rem;
      font-weight: 900;
      margin-bottom: 10px;
    }
    .why-live-preview-title {
      color: #24432b;
      font-family: var(--heading-font);
      font-size: 1.15rem;
      line-height: 1.15;
      font-weight: 800;
      margin-bottom: 6px;
    }
    .why-live-preview-subtitle {
      color: #66725d;
      font-size: 0.82rem;
      font-weight: 700;
      line-height: 1.45;
      margin-bottom: 12px;
    }
    .why-live-preview-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .why-live-preview-card {
      border: 1px solid rgba(54, 87, 58, 0.12);
      border-top: 3px solid var(--why-accent, #f4c430);
      border-radius: 12px;
      background: var(--why-preview-card-bg, #ffffff);
      color: var(--why-preview-text, #24432b);
      padding: 10px;
      min-height: 118px;
      display: grid;
      align-content: start;
      gap: 7px;
    }
    .why-live-preview-icon {
      width: 30px;
      height: 30px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      background: color-mix(in srgb, var(--why-accent, #f4c430) 22%, white);
      color: #36573a;
    }
    .why-live-preview-card-title {
      font-size: 0.82rem;
      font-weight: 900;
      line-height: 1.25;
    }
    .why-live-preview-card-desc {
      color: var(--why-preview-muted, #66725d);
      font-size: 0.74rem;
      font-weight: 700;
      line-height: 1.35;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .why-editor-tools {
      display: grid;
      gap: 10px;
    }
    .about-preview-studio {
      display: grid;
      grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
      gap: 14px;
      align-items: start;
      margin-bottom: 14px;
    }
    .about-live-preview {
      border: 1px solid #dbe5d4;
      border-radius: 18px;
      padding: 16px;
      min-height: 240px;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--about-panel-bg) 80%, transparent 20%), color-mix(in srgb, var(--about-panel-bg) 90%, transparent 10%)),
        var(--about-graphic-image),
        var(--about-panel-bg);
      background-size: cover, cover, cover;
      background-position: center;
      box-shadow: 0 14px 30px rgba(43, 64, 38, 0.08);
      display: grid;
      align-content: center;
      gap: 12px;
      overflow: hidden;
      position: sticky;
      top: 92px;
    }
    .about-live-preview-pill {
      width: fit-content;
      border-radius: 999px;
      padding: 7px 11px;
      background: rgba(255,250,240,0.92);
      color: #36573a;
      border: 1px solid rgba(54,87,58,0.12);
      font-size: 0.78rem;
      font-weight: 900;
    }
    .about-live-preview-title {
      color: var(--about-title-color);
      font-family: var(--heading-font);
      font-size: 1.28rem;
      line-height: 1.16;
      font-weight: 900;
    }
    .about-live-preview-text {
      color: var(--about-text-color);
      font-size: 0.86rem;
      line-height: 1.55;
      font-weight: 700;
      max-width: 620px;
    }
    .about-live-preview-button {
      width: fit-content;
      border-radius: 10px;
      padding: 10px 14px;
      background: var(--about-button-bg);
      color: var(--about-button-text);
      font-size: 0.84rem;
      font-weight: 900;
      box-shadow: 0 10px 22px rgba(43, 64, 38, 0.1);
    }
    .about-editor-tools {
      display: grid;
      gap: 10px;
    }
    .why-card-editor-row {
      border: 1px solid #dbe5d4;
      border-radius: 14px;
      background: #fbfef9;
      padding: 10px;
      display: grid;
      gap: 8px;
      box-shadow: 0 10px 22px rgba(43, 64, 38, 0.05);
    }
    .why-card-editor-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      flex-wrap: wrap;
    }
    .why-card-editor-title {
      color: #28452f;
      font-weight: 900;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .why-card-editor-summary {
      color: #65735d;
      font-size: 0.78rem;
      font-weight: 800;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: min(100%, 520px);
    }
    .why-card-editor-fields {
      display: grid;
      grid-template-columns: minmax(160px, 0.48fr) minmax(240px, 1fr);
      gap: 10px;
    }
    .why-card-editor-fields label {
      font-size: 0.76rem;
      margin-bottom: 4px;
    }
    .why-card-editor-fields input {
      min-height: 34px;
      padding: 8px 10px;
    }
    .why-icon-drawer {
      border: 1px dashed #cbdcc3;
      border-radius: 12px;
      background: #fffef8;
      padding: 8px 10px;
    }
    .why-icon-drawer summary {
      cursor: pointer;
      color: #36573a;
      font-weight: 900;
      font-size: 0.82rem;
      list-style: none;
    }
    .why-icon-drawer summary::-webkit-details-marker {
      display: none;
    }
    .why-icon-picker {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }
    .why-icon-choice {
      width: 31px;
      height: 31px;
      border-radius: 10px;
      border: 1px solid #d9e4cf;
      background: #fffef8;
      color: #36573a;
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    }
    .why-icon-choice:hover {
      transform: translateY(-1px);
      border-color: #9bb58d;
    }
    .why-icon-choice.active {
      background: #36573a;
      color: #fffaf0;
      border-color: #36573a;
    }
    .advanced-text-block {
      border: 1px dashed #c9d9c1;
      border-radius: 14px;
      padding: 12px;
      background: #fffef8;
    }
    .advanced-text-block summary {
      cursor: pointer;
      font-weight: 900;
      color: #36573a;
    }
    .emoji-picker-shell {
      border: 1px solid #ded3b4;
      background: #fffaf0;
      border-radius: 12px;
      padding: 14px;
      margin-top: 12px;
      display: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
    }
    .emoji-picker-shell.show { display: block; }
    .emoji-picker-toolbar {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 12px;
    }
    .emoji-picker-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
      gap: 8px;
      max-height: 260px;
      overflow-y: auto;
    }
    .emoji-choice {
      border: 1px solid #d8d0b8;
      background: #ffffff;
      border-radius: 10px;
      min-height: 52px;
      display: grid;
      place-items: center;
      font-size: 1.35rem;
      cursor: pointer;
      transition: 0.18s ease;
    }
    .emoji-choice:hover {
      border-color: var(--green-1);
      transform: translateY(-1px);
      box-shadow: 0 10px 18px rgba(43, 64, 38, 0.08);
    }
    .section-lead {
      color: #66725d;
      font-weight: 700;
      line-height: 1.6;
      margin-bottom: 16px;
    }
    .user-spotlight-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.95fr);
      gap: 18px;
      align-items: stretch;
    }
    .spotlight-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }
    .spotlight-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border-radius: 999px;
      background: #eef6e8;
      color: #36573a;
      font-size: 0.8rem;
      font-weight: 900;
    }
    .spotlight-rail {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: flex-end;
    }
    .spotlight-rail-card {
      min-width: 118px;
      padding: 12px 14px;
      border-radius: 16px;
      background: #ffffff;
      border: 1px solid #dbe5d4;
      box-shadow: 0 12px 24px rgba(43,64,38,0.06);
    }
    .spotlight-rail-card strong {
      display: block;
      color: #24432b;
      font-size: 1.05rem;
      font-weight: 900;
      line-height: 1;
      margin-bottom: 6px;
    }
    .spotlight-rail-card span {
      color: #66725d;
      font-size: 0.78rem;
      font-weight: 800;
      text-transform: uppercase;
    }
    .spotlight-feature-card,
    .spotlight-side-card {
      background: #ffffff;
      border: 1px solid #dbe5d4;
      border-radius: 16px;
      box-shadow: 0 18px 38px rgba(43,64,38,0.08);
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
    }
    .spotlight-feature-card:hover,
    .spotlight-side-card:hover {
      transform: translateY(-4px);
      border-color: rgba(54, 87, 58, 0.22);
      box-shadow: 0 22px 46px rgba(43,64,38,0.13);
    }
    .spotlight-feature-card {
      display: grid;
      grid-template-columns: minmax(220px, 34%) 1fr;
      min-height: 236px;
      background: #fffaf0;
      position: relative;
    }
    .spotlight-feature-card::after {
      content: '';
      position: absolute;
      inset: -120% auto -120% -35%;
      width: 32%;
      transform: rotate(16deg);
      background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.28), rgba(255,255,255,0));
      animation: spotlightShimmer 7.5s ease-in-out infinite;
      pointer-events: none;
    }
    .spotlight-cover-art {
      position: relative;
      min-height: 100%;
      background: linear-gradient(180deg, rgba(54,87,58,0.16), rgba(54,87,58,0.04)), #eaf2da;
      display: grid;
      place-items: center;
      overflow: hidden;
    }
    .spotlight-cover-art img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .spotlight-cover-placeholder {
      width: 76%;
      aspect-ratio: 4 / 5;
      border-radius: 12px 8px 8px 12px;
      background: #ffffff;
      border: 1px solid rgba(54,87,58,0.14);
      display: grid;
      place-items: center;
      font-size: 2.6rem;
      color: #36573a;
      box-shadow: -7px 8px 0 #36573a, 0 18px 32px rgba(43,64,38,0.14);
    }
    .spotlight-cover-chip {
      position: absolute;
      top: 16px;
      left: 16px;
      z-index: 2;
      background: rgba(255, 250, 240, 0.92);
      color: #24432b;
      border-radius: 999px;
      padding: 8px 12px;
      font-size: 0.76rem;
      font-weight: 900;
      border: 1px solid rgba(54, 87, 58, 0.1);
      box-shadow: 0 10px 18px rgba(43,64,38,0.12);
    }
    .spotlight-feature-copy {
      padding: 20px 20px 18px;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .spotlight-side-stack {
      display: grid;
      gap: 14px;
    }
    .spotlight-side-card {
      padding: 18px;
      background: #fbfef9;
    }
    .spotlight-side-top {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
    }
    .spotlight-side-icon {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: #eef6e8;
      display: grid;
      place-items: center;
      color: #36573a;
      font-size: 1.15rem;
      font-weight: 900;
      overflow: hidden;
    }
    .spotlight-side-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .spotlight-kicker {
      color: #6c785f;
      text-transform: uppercase;
      font-size: 0.76rem;
      font-weight: 900;
      margin-bottom: 8px;
    }
    .spotlight-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      padding: 7px 12px;
      border-radius: 999px;
      background: #eef6e8;
      color: #36573a;
      font-size: 0.78rem;
      font-weight: 900;
      margin-bottom: 12px;
    }
    .spotlight-title {
      font-weight: 900;
      color: #24432b;
      margin-bottom: 8px;
      line-height: 1.35;
      font-size: 1.14rem;
    }
    .spotlight-meta {
      color: #66725d;
      font-size: 0.88rem;
      font-weight: 700;
    }
    .spotlight-summary {
      color: #475740;
      font-weight: 650;
      line-height: 1.62;
      margin-top: 10px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      overflow: hidden;
    }
    .spotlight-cta {
      margin-top: auto;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #36573a;
      font-weight: 900;
      padding-top: 18px;
    }
    .spotlight-carousel-shell {
      margin-top: 20px;
      border: 1px solid #dbe5d4;
      border-radius: 20px;
      background: #ffffff;
      padding: 20px;
      box-shadow: 0 16px 34px rgba(43,64,38,0.08);
    }
    .spotlight-carousel-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }
    .spotlight-carousel-kicker {
      color: #36573a;
      font-size: 0.78rem;
      font-weight: 900;
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .spotlight-carousel-title {
      color: #24432b;
      font-weight: 900;
      font-size: 1.08rem;
    }
    .spotlight-carousel-subtitle {
      color: #66725d;
      font-size: 0.9rem;
      font-weight: 700;
      margin-top: 4px;
    }
    .spotlight-carousel-actions {
      display: inline-flex;
      gap: 8px;
      align-items: center;
    }
    .spotlight-carousel-track {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(240px, 30%);
      gap: 14px;
      overflow-x: auto;
      padding-bottom: 8px;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
    }
    .spotlight-carousel-track::-webkit-scrollbar {
      height: 10px;
    }
    .spotlight-carousel-track::-webkit-scrollbar-thumb {
      background: #cfdbc8;
      border-radius: 999px;
    }
    .spotlight-carousel-card {
      scroll-snap-align: start;
      border: 1px solid #dbe5d4;
      border-radius: 16px;
      overflow: hidden;
      background: #fffdf7;
      cursor: pointer;
      box-shadow: 0 14px 28px rgba(43,64,38,0.07);
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    }
    .spotlight-carousel-card:hover {
      transform: translateY(-3px);
      border-color: #bfd0b8;
      box-shadow: 0 18px 34px rgba(43,64,38,0.11);
    }
    .spotlight-carousel-cover {
      aspect-ratio: 16 / 10;
      background: linear-gradient(180deg, rgba(54,87,58,0.16), rgba(54,87,58,0.04)), #eaf2da;
      display: grid;
      place-items: center;
      overflow: hidden;
    }
    .spotlight-carousel-cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .spotlight-carousel-placeholder {
      color: #36573a;
      font-size: 2rem;
      font-weight: 900;
    }
    .spotlight-carousel-body {
      padding: 16px;
    }
    .spotlight-carousel-meta {
      color: #65735d;
      font-size: 0.86rem;
      font-weight: 800;
      margin-top: 6px;
    }
    .spotlight-carousel-summary {
      color: #506048;
      font-size: 0.9rem;
      line-height: 1.6;
      margin-top: 10px;
    }
    .saved-shelf-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
      gap: 18px;
    }
    .saved-shelf-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .saved-shelf-shell {
      background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250, 246, 236, 0.96));
      border: 1px solid #dbe5d4;
      border-radius: 20px;
      padding: 22px;
      box-shadow: 0 18px 40px rgba(43,64,38,0.08);
    }
    .saved-shelf-note {
      color: #66725d;
      font-weight: 700;
      margin-bottom: 18px;
      text-align: center;
    }
    .recent-shelf-shell {
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,248,240,0.98));
      border: 1px solid #dbe5d4;
      border-radius: 18px;
      padding: 18px;
      box-shadow: 0 18px 40px rgba(43,64,38,0.07);
    }
    .recent-shelf-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #5d6d55;
      font-size: 0.8rem;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }
    .bookmark-btn {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 42px;
      height: 42px;
      border-radius: 999px;
      border: 1px solid rgba(54, 87, 58, 0.12);
      background: rgba(255,255,255,0.92);
      color: #36573a;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 10px 20px rgba(43,64,38,0.1);
      z-index: 3;
    }
    .bookmark-btn.active {
      background: #36573a;
      color: #fffaf0;
      border-color: #36573a;
    }
    #modal-save-link,
    .bookmark-btn,
    #saved-shelf {
      display: none !important;
    }
    .bookmark-btn:hover {
      transform: translateY(-1px);
    }
    .content-card .bookmark-btn {
      opacity: 0.96;
    }
    .bookmark-btn.shelf-remove {
      top: auto;
      right: 16px;
      bottom: 16px;
      width: auto;
      padding: 0 14px;
      gap: 8px;
      border-radius: 999px;
      font-weight: 900;
      line-height: 1;
    }
    .bookmark-btn.shelf-remove span {
      display: inline-flex;
      align-items: center;
    }
    .saved-shelf-card {
      padding-bottom: 78px;
    }
    .recent-shelf-card {
      min-height: 0 !important;
    }
    #recent-shelf-grid.saved-shelf-grid {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
      gap: 14px;
      align-items: stretch;
    }
    #recent-shelf-grid .recent-shelf-card.storybook-card {
      display: grid !important;
      grid-template-columns: 108px minmax(0, 1fr) !important;
      aspect-ratio: auto;
      min-height: 156px !important;
      height: auto !important;
      border-radius: 16px;
      overflow: hidden;
    }
    #recent-shelf-grid .recent-shelf-card .story-cover {
      position: relative;
      inset: auto;
      margin: 12px 0 12px 12px !important;
      height: 132px !important;
      min-height: 132px !important;
      max-height: 132px !important;
      border-radius: 12px !important;
      box-shadow: -4px 5px 0 color-mix(in srgb, var(--green-1) 78%, #26311f 22%), 0 10px 20px rgba(41, 70, 45, 0.12) !important;
    }
    #recent-shelf-grid .recent-shelf-card .storybook-vignette,
    #recent-shelf-grid .recent-shelf-card .story-desc,
    #recent-shelf-grid .recent-shelf-card .resource-badge:not(.type) {
      display: none !important;
    }
    #recent-shelf-grid .recent-shelf-card .storybook-badges {
      top: 12px;
      left: 12px;
      right: auto;
    }
    #recent-shelf-grid .recent-shelf-card .story-body {
      padding: 14px 14px 14px 12px !important;
      justify-content: space-between;
    }
    #recent-shelf-grid .recent-shelf-card .story-title {
      font-size: 0.96rem;
      line-height: 1.18;
      -webkit-line-clamp: 2;
      margin-bottom: 6px;
    }
    #recent-shelf-grid .recent-shelf-card .story-author {
      font-size: 0.72rem;
    }
    #recent-shelf-grid .recent-shelf-card .storybook-meta-row {
      margin-top: 4px;
      font-size: 0.62rem;
    }
    #recent-shelf-grid .recent-shelf-card .read-more {
      width: 34px;
      min-width: 34px;
      min-height: 34px;
      padding: 0;
      font-size: 0;
    }
    #recent-shelf-grid .recent-shelf-card .read-more i {
      width: 15px;
      height: 15px;
    }
    .health-stack {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .health-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border-radius: 999px;
      padding: 5px 10px;
      font-size: 0.76rem;
      font-weight: 900;
      white-space: nowrap;
    }
    .health-chip.ok {
      background: #edf8ee;
      color: #245232;
      border: 1px solid #cfe4d0;
    }
    .health-chip.warn {
      background: #fff6df;
      color: #7a5710;
      border: 1px solid #ecd39a;
    }
    .health-chip.soft {
      background: #f4f7f0;
      color: #5e6e56;
      border: 1px solid #dce7d2;
    }
    .featured-manager-list {
      display: grid;
      gap: 12px;
    }
    .featured-manager-item {
      display: grid;
      grid-template-columns: auto auto minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      background: linear-gradient(180deg, #fffef9, #f6fbf2);
      border: 1px solid #dce7d2;
      border-radius: 14px;
      padding: 14px;
      box-shadow: 0 12px 28px rgba(43, 64, 38, 0.06);
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, opacity 0.16s ease;
      position: relative;
      overflow: hidden;
    }
    .featured-manager-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 34px rgba(43, 64, 38, 0.10);
      border-color: #bcd0bb;
    }
    .featured-manager-item.is-dragging {
      opacity: 0.72;
      transform: scale(0.995);
      border-color: #8ea778;
      box-shadow: 0 22px 42px rgba(43, 64, 38, 0.16);
    }
    .featured-manager-drag {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      border: 1px solid #dce7d2;
      background: #fffaf0;
      color: #36573a;
      display: grid;
      place-items: center;
      cursor: grab;
      touch-action: none;
      user-select: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
    }
    .featured-manager-drag:active {
      cursor: grabbing;
    }
    .featured-manager-drag i {
      pointer-events: none;
    }
    .featured-manager-rank {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: #36573a;
      color: #fffaf0;
      display: grid;
      place-items: center;
      font-weight: 900;
    }
    .arrange-drag-handle {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      border: 1px solid #dce7d2;
      background: #fffaf0;
      color: #36573a;
      display: grid;
      place-items: center;
      cursor: grab;
      touch-action: none;
      user-select: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
      flex: 0 0 auto;
    }
    .arrange-drag-handle:active {
      cursor: grabbing;
    }
    .arrange-drag-handle i {
      pointer-events: none;
    }
    .nav-entry.is-arrange-dragging,
    .portal-entry.is-arrange-dragging,
    .notice-editor-btn.is-arrange-dragging {
      opacity: 0.72;
      transform: scale(0.995);
      border-color: #8ea778;
      box-shadow: 0 18px 34px rgba(43, 64, 38, 0.14);
    }
    .featured-manager-meta {
      min-width: 0;
    }
    .featured-manager-title {
      font-weight: 900;
      color: #24432b;
      margin-bottom: 4px;
    }
    .featured-manager-subtitle {
      color: #66725d;
      font-size: 0.88rem;
      font-weight: 700;
    }
    .featured-manager-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }
    body.admin-sort-dragging {
      user-select: none;
      cursor: grabbing;
    }
    .admin-row-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .admin-row-actions .btn-secondary,
    .admin-row-actions .btn-light,
    .admin-row-actions .btn-danger {
      min-width: 78px;
      justify-content: center;
    }
    .announcement-band {
      padding-top: 14px;
      padding-bottom: 8px;
    }
    .announcement-shell {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 20px;
      align-items: center;
      border: 1px solid #d9e8d0;
      border-radius: 18px;
      padding: 22px 24px;
      background: linear-gradient(135deg, #fffef8, #f6fbf2);
      box-shadow: 0 14px 34px rgba(37, 62, 42, 0.08);
      position: relative;
      overflow: hidden;
    }
    .announcement-shell::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.48) 45%, transparent 72%);
      transform: translateX(-100%);
      animation: spotlightShimmer 7.8s ease-in-out infinite;
      pointer-events: none;
    }
    .announcement-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.78);
      color: #2e5335;
      font-weight: 900;
      font-size: 0.78rem;
      margin-bottom: 12px;
      border: 1px solid rgba(54, 87, 58, 0.12);
      width: fit-content;
    }
    .announcement-title {
      font-family: var(--heading-font);
      font-size: clamp(1.35rem, 2.6vw, 2rem);
      color: #1f3f28;
      margin-bottom: 10px;
      line-height: 1.15;
    }
    .announcement-text {
      color: #53634e;
      line-height: 1.7;
      max-width: 760px;
    }
    .announcement-preview-card,
    .activity-panel {
      border: 1px solid #dbe5d4;
      border-radius: 16px;
      background: #fbfef9;
      padding: 18px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
    }
    .notice-stage {
      border: 1px solid #d9e8d0;
      border-radius: 22px;
      padding: 18px;
      background: linear-gradient(135deg, #fffef8, #f6fbf2);
      box-shadow: 0 16px 38px rgba(37, 62, 42, 0.08);
      position: relative;
      overflow: hidden;
    }
    .notice-stage::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.48) 45%, transparent 72%);
      transform: translateX(-100%);
      animation: spotlightShimmer 8.2s ease-in-out infinite;
      pointer-events: none;
    }
    .notice-stage-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      margin-bottom: 14px;
      position: relative;
      z-index: 1;
    }
    .notice-stage-title {
      color: #26412e;
      font-weight: 900;
      font-size: 1rem;
    }
    .notice-stage-subtitle {
      color: #64715c;
      font-size: 0.88rem;
      font-weight: 700;
      margin-top: 4px;
    }
    .notice-stage-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .notice-nav-btn {
      min-width: 44px;
      width: 44px;
      height: 44px;
      border-radius: 999px;
      border: 1px solid #d2dfcb;
      background: rgba(255,255,255,0.92);
      color: #36573a;
      display: inline-grid;
      place-items: center;
      cursor: pointer;
      box-shadow: 0 10px 20px rgba(43,64,38,0.08);
      touch-action: manipulation;
    }
    .notice-nav-btn i {
      flex-shrink: 0;
    }
    .notice-nav-btn:disabled {
      opacity: 0.46;
      cursor: default;
      box-shadow: none;
      transform: none;
    }
    .notice-nav-btn:hover {
      transform: translateY(-1px);
      border-color: #b9ccb5;
    }
    .notice-nav-text {
      display: none;
      font-size: 0.76rem;
      font-weight: 900;
      line-height: 1;
    }
    .notice-nav-readout {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 64px;
      padding: 0 8px;
      color: #5f6f59;
      font-size: 0.78rem;
      font-weight: 900;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }
    .notice-track {
      position: relative;
      min-height: 0;
      z-index: 1;
    }
    .notice-card {
      display: none;
      grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.72fr);
      gap: 18px;
      align-items: stretch;
    }
    .notice-card.active {
      display: grid;
      animation: panelFadeIn 0.32s ease;
    }
    .notice-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .notice-media {
      min-height: 220px;
      border-radius: 18px;
      background: #edf4e8;
      border: 1px solid rgba(54, 87, 58, 0.1);
      overflow: hidden;
      display: none;
      position: relative;
      box-shadow: 0 18px 34px rgba(43,64,38,0.1);
    }
    .notice-media.show {
      display: block;
    }
    .notice-media img,
    .notice-media iframe,
    .notice-media video {
      width: 100%;
      height: 100%;
      display: block;
      border: 0;
      object-fit: cover;
      background: #f7fbf3;
    }
    .notice-media-placeholder {
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      color: #4c6145;
      font-weight: 800;
      text-align: center;
      padding: 22px;
      line-height: 1.6;
      background: linear-gradient(180deg, rgba(54,87,58,0.08), rgba(54,87,58,0.02));
    }
    .notice-dots {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .notice-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      border: 0;
      background: #cddac5;
      cursor: pointer;
      transition: transform 0.2s ease, background 0.2s ease;
    }
    .notice-dot.active {
      background: #36573a;
      transform: scale(1.15);
    }
    .notice-editor-switch {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 18px;
    }
    .notice-editor-btn {
      border: 1px solid #d4e0cd;
      border-radius: 999px;
      background: #fffef8;
      color: #36573a;
      font-weight: 800;
      font-size: 0.9rem;
      padding: 10px 14px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }
    .notice-editor-btn .arrange-drag-handle {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      background: rgba(255,255,255,0.72);
    }
    .notice-editor-btn:hover {
      transform: translateY(-1px);
      border-color: #bbceb5;
      box-shadow: 0 10px 18px rgba(43,64,38,0.06);
    }
    .notice-editor-btn.active {
      background: #36573a;
      color: #fffaf0;
      border-color: transparent;
    }
    .notice-editor-badge {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: currentColor;
      opacity: 0.28;
    }
    .notice-editor-btn.active .notice-editor-badge {
      opacity: 0.9;
    }
    .notice-helper-note {
      color: #64715c;
      font-size: 0.88rem;
      font-weight: 700;
      line-height: 1.55;
    }
    .activity-panel-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }
    .activity-list {
      display: grid;
      gap: 12px;
      max-height: 480px;
      overflow: auto;
      padding-right: 4px;
    }
    .activity-item {
      border: 1px solid #e1ead9;
      border-radius: 14px;
      background: #ffffff;
      padding: 14px;
      box-shadow: 0 8px 18px rgba(41, 61, 34, 0.05);
    }
    .activity-item-top {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      margin-bottom: 6px;
      flex-wrap: wrap;
    }
    .activity-title {
      font-weight: 900;
      color: #294b2f;
    }
    .activity-meta {
      color: #6a7764;
      font-size: 0.84rem;
      font-weight: 700;
    }
    .activity-detail {
      color: #4f5f49;
      line-height: 1.6;
    }
    .showcase-band {
      padding-top: 8px;
      padding-bottom: 6px;
    }
    .showcase-shell {
      border: 1px solid #d9e8d0;
      border-radius: 24px;
      padding: 20px;
      background: linear-gradient(135deg, #fffdf7, #f4f9ef);
      box-shadow: 0 18px 40px rgba(37, 62, 42, 0.08);
      overflow: hidden;
    }
    .showcase-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 18px;
      margin-bottom: 16px;
    }
    .showcase-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.88);
      color: #355039;
      border: 1px solid rgba(53, 80, 57, 0.1);
      font-weight: 900;
      font-size: 0.78rem;
      margin-bottom: 10px;
    }
    .showcase-title {
      font-family: var(--heading-font);
      font-size: clamp(1.2rem, 2.4vw, 1.85rem);
      color: #203926;
      margin-bottom: 8px;
      line-height: 1.18;
    }
    .showcase-subtitle {
      color: #5e6e58;
      font-weight: 700;
      line-height: 1.65;
      max-width: 720px;
    }
    .showcase-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .showcase-dots {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .showcase-stage {
      position: relative;
      min-height: 0;
    }
    .showcase-slide {
      display: none;
      grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.92fr);
      gap: 22px;
      align-items: stretch;
    }
    .showcase-slide.active {
      display: grid;
      animation: panelFadeIn 0.32s ease;
    }
    .showcase-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
      padding: 12px 4px 12px 2px;
    }
    .showcase-pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 14px;
    }
    .showcase-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 7px 11px;
      background: #eef5e8;
      color: #355039;
      font-size: 0.76rem;
      font-weight: 900;
      border: 1px solid rgba(53, 80, 57, 0.1);
    }
    .showcase-resource-title {
      font-family: var(--heading-font);
      font-size: clamp(1.5rem, 3vw, 2.45rem);
      line-height: 1.12;
      color: #213925;
      margin-bottom: 10px;
    }
    .showcase-resource-meta {
      color: #4c6145;
      font-weight: 800;
      margin-bottom: 12px;
    }
    .showcase-resource-meta-inline {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .showcase-resource-summary {
      color: #5d6d57;
      line-height: 1.75;
      font-weight: 650;
      max-width: 640px;
    }
    .showcase-resource-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 18px;
    }
    .showcase-visual {
      position: relative;
      min-height: 320px;
      border-radius: 24px;
      overflow: hidden;
      border: 1px solid rgba(53, 80, 57, 0.12);
      background: #e9f0e2;
      box-shadow: 0 24px 54px rgba(34, 56, 36, 0.14);
    }
    .showcase-visual img,
    .showcase-visual video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .showcase-visual::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(15, 22, 15, 0.02), rgba(15, 22, 15, 0.22));
      pointer-events: none;
    }
    .showcase-placeholder {
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      color: #355039;
      font-size: 3rem;
      font-weight: 900;
      background:
        radial-gradient(circle at top left, rgba(255,255,255,0.72), transparent 34%),
        linear-gradient(135deg, rgba(53, 80, 57, 0.16), rgba(244, 196, 48, 0.12));
    }
    .showcase-overlay-card {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 18px;
      z-index: 1;
      border-radius: 18px;
      padding: 16px 18px;
      background: rgba(255, 250, 240, 0.88);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.44);
      box-shadow: 0 18px 36px rgba(18, 30, 20, 0.18);
    }
    .showcase-overlay-title {
      font-weight: 900;
      color: #1f3523;
      margin-bottom: 6px;
    }
    .showcase-overlay-meta {
      color: #587056;
      font-size: 0.86rem;
      font-weight: 800;
    }
    @keyframes panelFadeIn {
      from {
        opacity: 0;
        transform: translateY(10px) scale(0.988);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    .feature-studio-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
      gap: 18px;
      align-items: start;
    }
    .feature-studio-side {
      display: grid;
      gap: 16px;
      position: sticky;
      top: 104px;
      z-index: 8;
      align-self: start;
      max-height: calc(100dvh - 128px);
      overflow: auto;
      overscroll-behavior: contain;
    }
    #admin-section-branding .brand-preview,
    #admin-section-companion .brand-preview {
      position: sticky;
      top: 104px;
      z-index: 8;
      box-shadow: 0 18px 46px rgba(37, 60, 38, 0.13);
    }
    #admin-section-developer .branding-preview-grid {
      position: sticky;
      top: 104px;
      z-index: 8;
      padding-bottom: 12px;
      background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.72));
      backdrop-filter: blur(10px);
      max-height: calc(100dvh - 128px);
      overflow: auto;
      overscroll-behavior: contain;
    }
    .feature-note-card {
      border: 1px solid #dbe5d4;
      border-radius: 16px;
      background: #fbfef9;
      padding: 18px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.76);
    }
    .feature-note-title {
      font-weight: 900;
      color: #28442e;
      margin-bottom: 8px;
    }
    .feature-note-text {
      color: #5f6d58;
      line-height: 1.65;
      font-weight: 650;
      margin-bottom: 14px;
    }
    .showcase-admin-list {
      display: grid;
      gap: 10px;
    }
    .showcase-admin-card {
      display: grid;
      grid-template-columns: 54px 1fr;
      gap: 12px;
      align-items: center;
      padding: 10px;
      border-radius: 14px;
      background: #ffffff;
      border: 1px solid #e4ecdc;
      box-shadow: 0 8px 18px rgba(41, 61, 34, 0.05);
    }
    .showcase-admin-thumb {
      width: 54px;
      height: 54px;
      border-radius: 12px;
      overflow: hidden;
      background: #edf4e8;
      display: grid;
      place-items: center;
      color: #355039;
      font-weight: 900;
    }
    .showcase-admin-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .showcase-admin-meta {
      color: #66745f;
      font-size: 0.82rem;
      font-weight: 700;
      margin-top: 3px;
    }
    .status-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 0.76rem;
      font-weight: 900;
      border: 1px solid transparent;
      white-space: nowrap;
    }
    .status-chip.published {
      background: #ebf8ef;
      color: #1f6d35;
      border-color: #b8e0c2;
    }
    .status-chip.draft {
      background: #fff6df;
      color: #7d5a06;
      border-color: #ecd39a;
    }
    .status-chip.review {
      background: #eef6ff;
      color: #075985;
      border-color: #b6d7f7;
    }
    .status-chip.archived {
      background: #f1f4ef;
      color: #5b6758;
      border-color: #d9e3d1;
    }
    .status-chip.soft {
      background: #f7fbf3;
      color: #46623e;
      border-color: #dce9d3;
    }
    .approval-grid {
      display: grid;
      gap: 10px;
    }
    .analytics-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 16px;
    }
    .approval-card,
    .analytics-card {
      border: 1px solid #dbe8d3;
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.95), rgba(249, 253, 245, 0.96));
      padding: 16px;
      box-shadow: 0 16px 34px rgba(43, 64, 38, 0.08);
      position: relative;
      overflow: hidden;
    }
    .approval-card {
      display: grid;
      grid-template-columns: auto 54px minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      padding: 14px;
      overflow: visible;
    }
    .approval-empty {
      display: block;
      padding: 28px;
    }
    .approval-card::before,
    .analytics-card::before {
      content: '';
      position: absolute;
      inset: 0 0 auto 0;
      height: 4px;
      background: linear-gradient(90deg, #36573a, #f4c430);
    }
    .approval-card-top {
      display: grid;
      grid-template-columns: 62px 1fr;
      gap: 12px;
      align-items: center;
      margin-bottom: 12px;
    }
    .approval-select {
      align-self: center;
      white-space: nowrap;
    }
    .approval-thumb {
      width: 54px;
      height: 66px;
      border-radius: 12px;
      overflow: hidden;
      background: #edf4e8;
      display: grid;
      place-items: center;
      color: #36573a;
      font-weight: 900;
      box-shadow: -4px 5px 0 #36573a;
    }
    .approval-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .approval-copy {
      min-width: 0;
      display: grid;
      gap: 5px;
    }
    .approval-title-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      min-width: 0;
    }
    .approval-title,
    .analytics-title {
      color: #24432b;
      font-weight: 900;
      line-height: 1.25;
    }
    .approval-title {
      font-size: 1rem;
    }
    .approval-meta,
    .analytics-meta {
      color: #66745f;
      font-size: 0.84rem;
      font-weight: 750;
      margin-top: 4px;
      line-height: 1.45;
    }
    .approval-preview {
      color: #66745f;
      font-size: 0.84rem;
      font-weight: 750;
      line-height: 1.45;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .approval-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 0;
      justify-content: flex-end;
      align-items: center;
      min-width: 190px;
    }
    .approval-actions .btn-secondary,
    .approval-actions .btn-light,
    .approval-actions .btn-danger {
      min-height: 38px;
      padding: 8px 10px;
    }
    .analytics-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
      gap: 18px;
      align-items: stretch;
      margin-bottom: 18px;
    }
    .analytics-spotlight {
      border-radius: 22px;
      padding: 22px;
      background:
        radial-gradient(circle at 88% 16%, rgba(244,196,48,0.22), transparent 30%),
        linear-gradient(135deg, #203926, #36573a);
      color: #fffaf0;
      min-height: 220px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: 0 22px 48px rgba(32, 57, 38, 0.2);
    }
    .analytics-spotlight h4 {
      color: #fffaf0;
      font-size: clamp(1.25rem, 2.4vw, 2rem);
      line-height: 1.1;
      margin: 8px 0 10px;
    }
    .analytics-spotlight p {
      color: rgba(255,250,240,0.8) !important;
      font-weight: 750;
      line-height: 1.6;
    }
    .analytics-bars {
      display: grid;
      gap: 10px;
    }
    .analytics-stat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 12px;
      margin-bottom: 18px;
    }
    .analytics-stat-card {
      border: 1px solid #dbe8d3;
      border-radius: 16px;
      background: #fffdf7;
      padding: 15px;
      box-shadow: 0 12px 26px rgba(43, 64, 38, 0.07);
      position: relative;
      overflow: hidden;
    }
    .analytics-stat-card::after {
      content: '';
      position: absolute;
      inset: auto -20px -28px auto;
      width: 82px;
      height: 82px;
      border-radius: 999px;
      background: rgba(244, 196, 48, 0.15);
    }
    .analytics-stat-icon {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: #eef6e8;
      color: #36573a;
      margin-bottom: 10px;
    }
    .analytics-stat-value {
      color: #24432b;
      font-size: 1.75rem;
      line-height: 1;
      font-weight: 950;
    }
    .analytics-stat-label {
      color: #66745f;
      font-size: 0.8rem;
      font-weight: 900;
      margin-top: 7px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }
    .analytics-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      overflow: hidden;
      border-radius: 14px;
      border: 1px solid #dce7d2;
      background: #ffffff;
    }
    .analytics-table th,
    .analytics-table td {
      padding: 11px 12px;
      text-align: left;
      border-bottom: 1px solid #edf3e8;
      color: #405934;
      font-size: 0.86rem;
      font-weight: 750;
      vertical-align: top;
    }
    .analytics-table th {
      background: #f6fbf3;
      color: #24432b;
      font-size: 0.76rem;
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .analytics-table tr:last-child td { border-bottom: 0; }
    .quality-progress-flow {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin: 18px 0;
    }
    .quality-flow-step {
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 16px;
      padding: 12px;
      background: rgba(255,255,255,0.08);
      min-height: 94px;
    }
    .quality-flow-step strong {
      display: block;
      color: #fffaf0;
      font-size: 1.25rem;
      line-height: 1;
      margin-bottom: 8px;
    }
    .quality-flow-step span {
      display: block;
      color: rgba(255,250,240,0.74);
      font-size: 0.76rem;
      font-weight: 850;
      line-height: 1.35;
    }
    .quality-table-card {
      border: 1px solid #dbe7d4;
      border-radius: 18px;
      background: #fffdf7;
      padding: 16px;
      box-shadow: 0 14px 30px rgba(43, 64, 38, 0.06);
      margin-top: 16px;
      overflow-x: auto;
    }
    .analytics-bar-row {
      display: grid;
      gap: 6px;
    }
    .analytics-bar-label {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: #38533b;
      font-size: 0.84rem;
      font-weight: 900;
    }
    .analytics-bar-track {
      height: 10px;
      border-radius: 999px;
      background: #e9f1e4;
      overflow: hidden;
    }
    .analytics-bar-fill {
      height: 100%;
      width: var(--bar-width, 0%);
      border-radius: inherit;
      background: linear-gradient(90deg, #36573a, #f4c430);
      min-width: 7px;
    }
    .bulk-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 14px;
      padding: 14px 16px;
      border-radius: 14px;
      background: #f6fbf2;
      border: 1px solid #dbe7d4;
    }
    .library-filter-grid {
      display: grid;
      grid-template-columns: minmax(260px, 1.6fr) minmax(170px, 0.55fr) minmax(170px, 0.55fr);
      gap: 12px;
      align-items: end;
      margin-bottom: 14px;
      padding: 14px;
      border-radius: 16px;
      background: #fbfef8;
      border: 1px solid #dbe7d4;
    }
    .library-filter-grid .form-group {
      margin-bottom: 0 !important;
    }
    .bulk-toolbar-text {
      color: #355039;
      font-weight: 900;
    }
    .bulk-toolbar-main {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      justify-content: flex-end;
    }
    .bulk-toolbar-main .btn-secondary,
    .bulk-toolbar-main .btn-light,
    .bulk-toolbar-main .btn-danger {
      min-height: 40px;
      padding: 9px 12px;
    }
    .action-menu {
      position: relative;
      display: inline-flex;
      align-items: center;
    }
    .action-menu summary {
      list-style: none;
      cursor: pointer;
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border: 1px solid #a4a000;
      border-radius: 9px;
      background: #ffffff;
      color: #5f6200;
      font-weight: 900;
      padding: 8px 11px;
      user-select: none;
      box-shadow: 0 12px 22px rgba(43, 64, 38, 0.08);
    }
    .action-menu summary::-webkit-details-marker {
      display: none;
    }
    .action-menu[open] summary {
      background: #36573a;
      border-color: #36573a;
      color: #fffaf0;
    }
    .action-menu-panel {
      position: absolute;
      right: 0;
      top: calc(100% + 8px);
      z-index: 45;
      min-width: 168px;
      display: grid;
      gap: 8px;
      padding: 10px;
      border: 1px solid #d5dfcd;
      border-radius: 14px;
      background: #fffdf7;
      box-shadow: 0 22px 48px rgba(30, 45, 27, 0.2);
    }
    .action-menu-panel button {
      width: 100%;
      min-height: 38px;
      justify-content: center;
      padding: 8px 10px;
    }
    .table-check {
      width: 18px;
      height: 18px;
      accent-color: #36573a;
      cursor: pointer;
    }
    .featured-flag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      background: #fff2c7;
      color: #705500;
      font-size: 0.74rem;
      font-weight: 900;
      margin-bottom: 10px;
    }
    .featured-inline {
      color: #8a6a00;
      font-size: 0.78rem;
      font-weight: 900;
      margin-bottom: 6px;
    }
    .portal-builder {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
      gap: 14px;
      align-items: start;
    }
    .portal-entry {
      border: 1px solid #dbe5d4;
      border-radius: 14px;
      padding: 14px;
      background: #fbfef9;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, opacity 0.16s ease;
    }
    .portal-entry-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
    }
    .portal-entry-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }
    .portal-entry-label {
      color: #36573a;
      font-weight: 900;
    }
    .portal-entry-grid {
      display: grid;
      grid-template-columns: minmax(104px, 0.22fr) minmax(0, 1fr);
      gap: 12px;
      align-items: start;
    }
    .portal-logo-tools {
      display: grid;
      gap: 8px;
      align-content: start;
    }
    .portal-logo-preview {
      width: 64px;
      height: 64px;
      border-radius: 14px;
      border: 1px dashed #c9d9c1;
      background: #fffaf0;
      display: grid;
      place-items: center;
      font-size: 1.15rem;
      font-weight: 900;
      color: #36573a;
      overflow: hidden;
    }
    .portal-logo-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .portal-hidden-field {
      display: none;
    }
    .portal-fields-grid {
      display: grid;
      grid-template-columns: minmax(120px, 0.65fr) minmax(180px, 1fr) minmax(220px, 1.25fr);
      gap: 10px;
      align-items: end;
    }
    .portal-fields-grid .form-group label {
      font-size: 0.78rem;
      margin-bottom: 5px;
    }
    .portal-fields-grid input {
      min-height: 34px;
      padding: 8px 10px;
    }
    .portal-url-row {
      margin-top: 10px;
    }
    .portal-compact-btn {
      width: fit-content;
      min-height: 38px;
      padding: 8px 10px !important;
      font-size: 0.82rem;
      line-height: 1.1;
    }
    .portal-file-input {
      max-width: 112px;
      font-size: 0.76rem;
    }
    @keyframes fadeSlide {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .table-wrap { overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; min-width: 820px; }
    th { background: #e9f1e3; color: #24432b; text-align: left; padding: 12px; font-weight: 800; }
    td { padding: 12px; border-bottom: 1px solid #e1eadb; vertical-align: top; }
    tr:hover td { background: #fbf7e9; }
    .admin-library-shell {
      display: grid;
      gap: 14px;
    }
    .admin-library-table {
      overflow-x: auto;
      overflow-y: visible;
      border: 1px solid #dbe7d4;
      border-radius: 18px;
      background: #ffffff;
      box-shadow: 0 16px 32px rgba(43, 64, 38, 0.06);
    }
    .admin-library-table table {
      min-width: 980px;
    }
    .admin-library-table th {
      position: sticky;
      top: 0;
      z-index: 2;
      background: #edf4e7;
      font-size: 0.82rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }
    .admin-library-table td {
      background: #ffffff;
    }
    .admin-library-title-cell {
      min-width: 250px;
    }
    .admin-library-title-wrap {
      display: grid;
      gap: 8px;
    }
    .admin-library-title-top {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
    }
    .admin-library-type-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      background: #edf6e8;
      color: #355039;
      border: 1px solid #d2e4cd;
      font-size: 0.74rem;
      font-weight: 900;
      white-space: nowrap;
    }
    .admin-library-title {
      color: #1f2d1d;
      font-size: 0.96rem;
      font-weight: 900;
      line-height: 1.35;
    }
    .admin-library-mini-text {
      color: #66725d;
      font-size: 0.8rem;
      font-weight: 800;
      line-height: 1.5;
    }
    .admin-library-detail-stack {
      display: grid;
      gap: 8px;
    }
    .admin-library-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      min-width: 188px;
      align-items: center;
    }
    .admin-library-actions .btn-secondary,
    .admin-library-actions .btn-light,
    .admin-library-actions .btn-danger {
      min-width: 68px;
      justify-content: center;
      padding: 8px 10px;
    }
    .admin-library-actions .action-menu summary {
      min-width: 68px;
    }
    .admin-library-card-list {
      display: none;
      gap: 14px;
    }
    .admin-library-card {
      background: #ffffff;
      border: 1px solid #dbe7d4;
      border-radius: 18px;
      padding: 16px;
      box-shadow: 0 16px 32px rgba(43, 64, 38, 0.06);
      display: grid;
      gap: 12px;
    }
    .admin-library-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    .admin-library-card-main {
      min-width: 0;
      display: grid;
      gap: 8px;
    }
    .admin-library-card-meta {
      display: grid;
      gap: 8px;
    }
    .admin-library-meta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 12px;
      color: #52614a;
      font-size: 0.84rem;
      font-weight: 800;
      line-height: 1.5;
    }
    .admin-library-card-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .admin-library-card-actions .btn-secondary,
    .admin-library-card-actions .btn-light,
    .admin-library-card-actions .btn-danger {
      flex: 1 1 124px;
      justify-content: center;
    }
    .admin-library-checkbox {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #42503b;
      font-size: 0.82rem;
      font-weight: 900;
    }

    .toast {
      position: fixed;
      right: 20px;
      bottom: 20px;
      background: #065f46;
      color: var(--white);
      padding: 14px 18px;
      border-radius: 8px;
      font-weight: 800;
      display: none;
      z-index: 100;
      box-shadow: 0 12px 30px rgba(0,0,0,0.18);
    }
    .toast.show { display: block; }

    .chat-launcher {
      position: fixed;
      right: 22px;
      bottom: 22px;
      width: calc(var(--companion-avatar-size, 48px) + 14px);
      height: calc(var(--companion-avatar-size, 48px) + 14px);
      min-width: 0;
      border: 0;
      border-radius: var(--companion-float-radius, 22px);
      background: var(--companion-float-bg, #fffaf0);
      color: var(--companion-float-border, #36573a);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 7px;
      cursor: pointer;
      z-index: 70;
      border: 2px solid var(--companion-float-border, #36573a);
      box-shadow: 0 16px 34px rgba(20, 35, 21, 0.16);
      overflow: visible;
      touch-action: none;
      transition: transform 0.22s ease, box-shadow 0.22s ease, left 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
      animation: companionFloat 6.2s ease-in-out infinite;
    }
    body:not(.admin-mode) .chat-launcher,
    body:not(.admin-mode) .chat-panel,
    body:not(.admin-mode) .companion-bubble {
      position: fixed;
    }
    .chat-launcher:hover { transform: translateY(-1px); }
    .chat-launcher.is-dragging {
      cursor: grabbing;
      transform: scale(1.03);
      box-shadow: 0 22px 46px rgba(20, 35, 21, 0.24);
      transition: none;
      animation: none;
    }
    .chat-launcher.has-hopped { animation: companionHop 0.46s cubic-bezier(0.34, 1.56, 0.64, 1); }
    .chat-launcher.is-speaking { animation: companionWave 0.65s ease, companionFloat 6.2s ease-in-out infinite; }
    .chat-launcher::after {
      content: '';
      position: absolute;
      right: 10px;
      top: 8px;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #22c55e;
      border: 2px solid var(--companion-float-bg, #fffaf0);
      box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
      animation: statusBlink 2.2s ease-in-out infinite;
    }
    .chat-launcher::before {
      content: none;
    }
    .chat-launcher-text {
      position: absolute;
      right: calc(100% + 10px);
      top: 50%;
      transform: translateY(-50%);
      background: var(--companion-float-bg, #fffaf0);
      border: 1px solid var(--companion-float-border, #36573a);
      border-radius: 999px;
      box-shadow: 0 10px 24px rgba(20, 35, 21, 0.14);
      padding: 8px 11px;
      font-size: 0.78rem;
      font-weight: 900;
      color: var(--companion-float-border, #36573a);
      line-height: 1.1;
      white-space: nowrap;
      max-width: min(160px, 42vw);
      overflow: hidden;
      text-overflow: ellipsis;
      pointer-events: none;
      user-select: none;
    }
    .chat-panel {
      position: fixed;
      right: 22px;
      bottom: 92px;
      width: min(420px, calc(100vw - 32px));
      height: 560px;
      max-height: calc(100vh - 120px);
      background: var(--companion-panel-bg, #fffaf0);
      border: 1px solid var(--companion-panel-border, #d8d0b8);
      border-radius: 22px;
      display: none;
      flex-direction: column;
      overflow: hidden;
      z-index: 70;
      box-shadow: 0 24px 64px rgba(20, 35, 21, 0.28);
      transition: left 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.2s ease;
    }
    .chat-panel.show { display: flex; }
    .chat-head {
      background: var(--companion-panel-header-bg, #36573a);
      color: var(--companion-panel-header-text, #fffaf0);
      padding: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      cursor: grab;
      user-select: none;
      touch-action: none;
    }
    .chat-head.is-dragging { cursor: grabbing; }
    .chat-persona {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
    .bot-avatar {
      width: var(--companion-avatar-size, 48px);
      height: var(--companion-avatar-size, 48px);
      border-radius: 16px;
      display: grid;
      place-items: center;
      background: var(--companion-panel-bg, #fffaf0);
      color: var(--companion-float-border, #36573a);
      border: 2px solid rgba(255,255,255,0.35);
      box-shadow: inset 0 -4px 0 rgba(54, 87, 58, 0.12);
      flex: 0 0 auto;
      animation: companionBreathe 3.8s ease-in-out infinite;
    }
    .companion-icon-shell {
      width: var(--companion-avatar-size, 48px);
      height: var(--companion-avatar-size, 48px);
      display: grid;
      place-items: center;
      border-radius: 16px;
      overflow: hidden;
    }
    .poopo-static-avatar {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      user-select: none;
      -webkit-user-drag: none;
    }
    .companion-frame-stack {
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      position: relative;
    }
    .companion-avatar-fallback {
      grid-area: 1 / 1;
      width: 58%;
      height: 58%;
      opacity: 1;
      transition: opacity 0.16s ease;
    }
    .companion-frame-stack.has-loaded-frame .companion-avatar-fallback {
      opacity: 0;
    }
    .companion-frame-stack img {
      grid-area: 1 / 1;
      opacity: 0;
      animation-duration: var(--companion-animation-duration, 1.8s);
      animation-timing-function: steps(1, end);
      animation-iteration-count: infinite;
    }
    .companion-frame-stack.frames-1 img,
    .companion-frame-stack.animation-none img,
    .companion-frame-stack.animation-breathe img {
      opacity: 1;
      animation: none;
    }
    .companion-frame-stack.animation-breathe {
      animation: companionBreathe 3.8s ease-in-out infinite;
    }
    .companion-frame-stack.frames-2 img:nth-of-type(1) { animation-name: companionFrameTwoOne; }
    .companion-frame-stack.frames-2 img:nth-of-type(2) { animation-name: companionFrameTwoTwo; }
    .companion-frame-stack.frames-3 img:nth-of-type(1) { animation-name: companionFrameThreeOne; }
    .companion-frame-stack.frames-3 img:nth-of-type(2) { animation-name: companionFrameThreeTwo; }
    .companion-frame-stack.frames-3 img:nth-of-type(3) { animation-name: companionFrameThreeThree; }
    .bot-avatar img,
    .companion-icon-shell img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      transform: scale(1.12);
      display: block;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }
    .chat-launcher .companion-icon-shell,
    .chat-launcher .companion-icon-shell * {
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }
    .chat-title { font-weight: 900; }
    .chat-subtitle { font-size: 0.82rem; color: color-mix(in srgb, var(--companion-panel-header-text, #fffaf0) 82%, transparent 18%); font-weight: 700; margin-top: 2px; }
    .bot-status {
      display: flex;
      align-items: center;
      gap: 6px;
      color: color-mix(in srgb, var(--companion-panel-header-text, #fffaf0) 88%, transparent 12%);
      font-size: 0.76rem;
      font-weight: 900;
      margin-top: 5px;
    }
    .bot-status-dot {
      width: 8px;
      height: 8px;
      background: #a7f3d0;
      border-radius: 999px;
      box-shadow: 0 0 0 4px rgba(167, 243, 208, 0.16);
      animation: statusBlink 1.8s ease-in-out infinite;
    }
    .chat-close { border: 0; background: transparent; color: var(--companion-panel-header-text, #fffaf0); cursor: pointer; padding: 6px; }
    .chat-helper-strip {
      background: var(--companion-helper-bg, #f8f1d6);
      color: var(--companion-helper-text, #405934);
      border-bottom: 1px solid var(--companion-panel-border, #d8d0b8);
      padding: 10px 16px;
      font-size: 0.82rem;
      font-weight: 800;
      line-height: 1.45;
    }
    .chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      display: grid;
      gap: 10px;
      align-content: start;
    }
    .chat-bubble {
      padding: 11px 12px;
      border-radius: 12px;
      line-height: 1.5;
      font-weight: 650;
      font-size: 0.92rem;
      white-space: pre-wrap;
    }
    .chat-bubble.bot { background: var(--companion-bot-bg, #eef6e8); color: var(--companion-bot-text, #26311f); border-top-left-radius: 4px; border: 1px solid color-mix(in srgb, var(--companion-bot-bg, #eef6e8) 82%, #36573a 18%); }
    .chat-bubble.user { background: var(--companion-user-bg, #36573a); color: var(--companion-user-text, #fffaf0); border-top-right-radius: 4px; justify-self: end; max-width: 88%; }
    .chat-bubble.bot strong { font-weight: 900; }
    .chat-bubble.typing {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-width: 68px;
    }
    .chat-bubble.typing span {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #8aa17f;
      animation: typingBounce 1s ease-in-out infinite;
    }
    .chat-bubble.typing span:nth-child(2) { animation-delay: 0.12s; }
    .chat-bubble.typing span:nth-child(3) { animation-delay: 0.24s; }
    .chat-quick {
      padding: 0 16px 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .chat-followups {
      display: none;
      padding: 10px 16px 12px;
      gap: 7px;
      flex-wrap: wrap;
      border-top: 1px dashed color-mix(in srgb, var(--companion-panel-border, #d8d0b8) 78%, transparent 22%);
    }
    .chat-followups.show { display: flex; }
    .chat-followup-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid var(--companion-panel-border, #d8d0b8);
      border-radius: 999px;
      padding: 7px 10px;
      background: var(--companion-helper-bg, #f8f1d6);
      color: var(--companion-helper-text, #405934);
      font: inherit;
      font-size: 0.77rem;
      font-weight: 850;
      cursor: pointer;
      transition: transform 150ms ease, border-color 150ms ease;
    }
    .chat-followup-btn:hover { transform: translateY(-1px); border-color: var(--companion-panel-header-bg, #36573a); }
    .chat-followup-btn i { width: 14px; height: 14px; }
    .chat-context-note {
      padding: 0 16px 10px;
      color: color-mix(in srgb, var(--companion-helper-text, #405934) 78%, transparent 22%);
      font-size: 0.72rem;
      font-weight: 750;
    }
    .chat-chip {
      border: 1px solid var(--companion-panel-border, #d8d0b8);
      border-radius: 999px;
      background: var(--companion-panel-bg, #fff);
      color: var(--companion-panel-header-bg, #36573a);
      font-weight: 850;
      padding: 7px 10px;
      cursor: pointer;
      font-family: inherit;
    }
    .chat-chip:hover { background: var(--companion-helper-bg, #f8f1d6); border-color: var(--companion-panel-header-bg, #36573a); }
    .chat-form {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      padding: 12px;
      border-top: 1px solid var(--companion-panel-border, #d8d0b8);
      background: color-mix(in srgb, var(--companion-panel-bg, #fffaf0) 86%, var(--companion-helper-bg, #f8f1d6) 14%);
    }
    .chat-form input { border-width: 1px; background: #fff; color: var(--companion-bot-text, #26311f); }
    .chat-form button {
      border: 0;
      border-radius: 8px;
      background: var(--companion-panel-header-bg, #36573a);
      color: var(--companion-panel-header-text, #fffaf0);
      font-weight: 900;
      padding: 0 14px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
    }
    .companion-bubble {
      position: fixed;
      max-width: 230px;
      background: var(--companion-bot-bg, #fffaf0);
      color: var(--companion-bot-text, #36573a);
      border: 1px solid var(--companion-panel-border, #d8d0b8);
      border-radius: 16px;
      padding: 11px 13px;
      box-shadow: 0 14px 28px rgba(20, 35, 21, 0.14);
      z-index: 69;
      display: none;
      line-height: 1.42;
      font-size: 0.84rem;
      font-weight: 800;
      transition: left 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease, transform 0.22s ease;
      transform: translateY(6px);
      opacity: 0;
      pointer-events: none;
    }
    .companion-bubble.show {
      display: block;
      transform: translateY(0);
      opacity: 1;
    }
    .companion-bubble::after {
      content: '';
      position: absolute;
      width: 14px;
      height: 14px;
      background: var(--companion-bot-bg, #fffaf0);
      border-right: 1px solid var(--companion-panel-border, #d8d0b8);
      border-bottom: 1px solid var(--companion-panel-border, #d8d0b8);
      transform: rotate(45deg);
      bottom: -8px;
      right: calc(50% - 7px);
    }
    body.companion-dragging { user-select: none; }

    .footer {
      background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
      color: var(--white);
      padding: 48px 32px;
      text-align: center;
    }
    .footer-brandline {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 14px;
      font-size: 1.05rem;
      font-weight: 900;
    }
    .footer-brand-mark {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.14);
      display: grid;
      place-items: center;
      overflow: hidden;
      font-size: 0.9rem;
    }
    .footer-brand-mark img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .footer-brand-mark.is-hidden { display: none; }
    .footer-main { max-width: 1400px; margin: 0 auto 22px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,0.12); }
    .footer-text { font-weight: 700; opacity: 0.9; }
    .footer-region { font-weight: 600; opacity: 0.7; margin-top: 12px; }
    .footer-bottom { opacity: 0.72; font-size: 0.9rem; }
    .save-state-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 8px 11px;
      background: #e8f6df;
      color: #30572f;
      border: 1px solid #bdddb1;
      font-weight: 900;
      font-size: 0.82rem;
      animation: savePillIn 0.25s ease both;
    }
    @keyframes savePillIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes floatBg {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-30px); }
    }
    @keyframes bounceIcon {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-16px); }
    }
    @keyframes bannerLogoFloat {
      0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 16px 24px rgba(0,0,0,0.16)); }
      50% { transform: translateY(-8px) scale(1.01); filter: drop-shadow(0 22px 30px rgba(0,0,0,0.2)); }
    }
    @keyframes companionHop {
      0% { transform: scale(1) rotate(0deg); }
      35% { transform: scale(1.08) rotate(3deg) translateY(-8px); }
      70% { transform: scale(0.98) rotate(-2deg) translateY(2px); }
      100% { transform: scale(1) rotate(0deg); }
    }
    @keyframes companionFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
    }
    @keyframes companionWave {
      0% { transform: rotate(0deg) scale(1); }
      25% { transform: rotate(-7deg) scale(1.04); }
      55% { transform: rotate(5deg) scale(1.02); }
      100% { transform: rotate(0deg) scale(1); }
    }
    @keyframes companionBreathe {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.03); }
    }
    @keyframes companionFrameTwoOne {
      0%, 47%, 100% { opacity: 1; }
      50%, 97% { opacity: 0; }
    }
    @keyframes companionFrameTwoTwo {
      0%, 47%, 100% { opacity: 0; }
      50%, 97% { opacity: 1; }
    }
    @keyframes companionFrameThreeOne {
      0%, 30%, 100% { opacity: 1; }
      33%, 97% { opacity: 0; }
    }
    @keyframes companionFrameThreeTwo {
      0%, 30%, 66%, 100% { opacity: 0; }
      33%, 63% { opacity: 1; }
    }
    @keyframes companionFrameThreeThree {
      0%, 63%, 100% { opacity: 0; }
      66%, 97% { opacity: 1; }
    }
    @keyframes statusBlink {
      0%, 100% { transform: scale(1); box-shadow: 0 0 0 4px rgba(167, 243, 208, 0.16); }
      50% { transform: scale(1.16); box-shadow: 0 0 0 7px rgba(167, 243, 208, 0.08); }
    }
    @keyframes loaderPulse {
      0%, 100% { transform: translateY(0); opacity: 0.45; }
      50% { transform: translateY(-4px); opacity: 1; }
    }
    @keyframes loaderDotJump {
      0%, 100% { transform: translateY(0) scale(0.92); opacity: 0.42; }
      45% { transform: translateY(-7px) scale(1.1); opacity: 1; }
    }
    @keyframes loaderPageTurn {
      0%, 100% { transform: translateX(-5px) rotateY(0deg); opacity: 0.18; }
      45% { transform: translateX(6px) rotateY(62deg); opacity: 0.42; }
    }
    @keyframes loaderLine {
      0%, 100% { transform: scaleX(0.35); opacity: 0.4; }
      50% { transform: scaleX(1); opacity: 0.9; }
    }
    @keyframes bootSpin {
      to { transform: rotate(360deg); }
    }
    @keyframes loaderBadgeBreathe {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }
    @keyframes busySpin {
      to { transform: rotate(360deg); }
    }
    @keyframes gestureHint {
      0%, 14% { opacity: 0; transform: translate(-50%, 8px); }
      22%, 72% { opacity: 1; transform: translate(-50%, 0); }
      100% { opacity: 0; transform: translate(-50%, 8px); }
    }
    @keyframes typingBounce {
      0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
      40% { transform: translateY(-4px); opacity: 1; }
    }
    @keyframes spotlightShimmer {
      0%, 100% { transform: translateX(-10%) rotate(16deg); opacity: 0; }
      14% { opacity: 0.85; }
      35% { transform: translateX(360%) rotate(16deg); opacity: 0; }
    }
    @keyframes countPop {
      0% { transform: translateY(8px) scale(0.92); opacity: 0.45; }
      65% { transform: translateY(-2px) scale(1.04); opacity: 1; }
      100% { transform: translateY(0) scale(1); opacity: 1; }
    }

    /* Final aesthetic polish layer */
    body:not(.admin-mode) {
      background:
        radial-gradient(circle at 12% 8%, rgba(244,196,48,0.08), transparent 28%),
        radial-gradient(circle at 92% 18%, rgba(54,87,58,0.08), transparent 30%),
        linear-gradient(180deg, #f8fcf4 0%, #eef8eb 48%, #fffaf0 100%);
    }
    body:not(.admin-mode) #user-view {
      position: relative;
      overflow: clip;
    }
    body:not(.admin-mode) #user-view::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -1;
      opacity: 0.34;
      background-image:
        linear-gradient(rgba(54,87,58,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(54,87,58,0.025) 1px, transparent 1px);
      background-size: 28px 28px;
      mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 88%, transparent 100%);
    }
    body:not(.admin-mode) .section {
      position: relative;
    }
    body:not(.admin-mode) .section + .section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      width: min(1040px, calc(100% - 36px));
      height: 1px;
      transform: translateX(-50%);
      background: linear-gradient(90deg, transparent, rgba(54,87,58,0.14), rgba(244,196,48,0.22), rgba(54,87,58,0.14), transparent);
    }
    body:not(.admin-mode) .section-title {
      letter-spacing: 0;
      text-wrap: balance;
    }
    body:not(.admin-mode) .section-subtitle {
      color: #66745d;
      text-wrap: balance;
    }
    .hero {
      isolation: isolate;
    }
    .hero::before {
      background:
        radial-gradient(circle, rgba(255,250,240,0.16), rgba(255,250,240,0.02) 62%, transparent 70%);
      filter: blur(2px);
    }
    .hero::after {
      background:
        radial-gradient(circle, rgba(244,196,48,0.12), rgba(255,250,240,0.03) 58%, transparent 72%);
      filter: blur(1px);
    }
    .hero-container {
      animation: heroSettle 0.72s ease both;
    }
    .hero h1 {
      text-shadow: 0 14px 40px rgba(12, 27, 16, 0.22);
      text-wrap: balance;
    }
    .hero p {
      text-wrap: pretty;
    }
    .notice-panel {
      border-radius: 22px;
      background: rgba(255,250,240,0.16);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 18px 46px rgba(12,27,16,0.12);
    }
    .btn-primary,
    .btn-secondary,
    .btn-light,
    .btn-danger,
    .filter-btn,
    .page-btn,
    .doc-action {
      will-change: transform;
    }
    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-light:hover,
    .btn-danger:hover {
      transform: translateY(-3px);
    }
    .story-card{
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,250,240,0.94)),
        #fffaf0;
      border-color: rgba(54,87,58,0.12);
      box-shadow: 0 1px 0 rgba(255,255,255,0.86), 0 18px 44px rgba(29,62,35,0.08);
    }
    .story-card::after{
      background:
        linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.34) 44%, transparent 56%),
        radial-gradient(circle at 90% 12%, rgba(244,196,48,0.08), transparent 28%);
    }
    .story-card:hover{
      transform: translateY(-7px) rotate(-0.15deg);
      box-shadow: 0 26px 56px rgba(29,62,35,0.15);
    }
    .story-cover,

    .spotlight-carousel-cover,

    .showcase-visual{
      background:
        linear-gradient(135deg, rgba(255,250,240,0.75), rgba(232,240,227,0.9)),
        #eaf2da;
    }
    .story-cover {
      border-radius: 14px 7px 7px 14px;
      box-shadow:
        -8px 9px 0 color-mix(in srgb, var(--green-1) 76%, #26311f 24%),
        -12px 14px 0 rgba(54,87,58,0.08),
        0 18px 34px rgba(41,70,45,0.14);
    }
    .story-cover::before {
      content: '';
      position: absolute;
      inset: 0 auto 0 0;
      width: 8px;
      z-index: 1;
      background: linear-gradient(180deg, rgba(255,255,255,0.32), rgba(0,0,0,0.08));
      pointer-events: none;
    }
    .story-cover::after {
      width: 18px;
      background: linear-gradient(90deg, rgba(20,35,21,0.2), rgba(255,255,255,0.1));
    }
    .resource-badge,

    .shelf-pill,

    .spotlight-rail-card{
      backdrop-filter: blur(10px);
    }
    .read-more,

    .story-card .read-more{
      transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }
    .content-card:hover .read-more {
      transform: translateX(2px);
      box-shadow: 0 10px 22px rgba(43,64,38,0.08);
    }
    .portal-card {
      border-radius: 18px;
      background:
        radial-gradient(circle at top left, rgba(255,255,255,0.18), transparent 32%),
        linear-gradient(135deg, var(--green-1), var(--green-2));
      box-shadow: 0 18px 42px rgba(0, 92, 38, 0.18);
    }
    .portal-card:hover {
      transform: translateY(-7px) scale(1.01);
    }
    .filter-btn,
    .story-type-btn,
    .page-btn {
      border-radius: 999px;
      box-shadow: 0 8px 18px rgba(43,64,38,0.04);
    }
    .filter-btn.active,
    .story-type-btn.active,
    .page-btn.active {
      box-shadow: 0 12px 26px rgba(43,64,38,0.16);
    }
    .document-modal {
      border-radius: 28px;
      box-shadow: 0 32px 90px rgba(10, 18, 12, 0.38);
      border-color: rgba(255,250,240,0.34);
    }
    .document-topbar {
      background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--preview-action-bg) 20%, transparent 80%), transparent 36%),
        var(--preview-topbar-bg);
    }
    .document-toolbar {
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.32);
    }
    .document-shell {
      background:
        linear-gradient(90deg, rgba(119, 91, 54, 0.055) 1px, transparent 1px),
        linear-gradient(180deg, color-mix(in srgb, var(--preview-surface-bg) 96%, white 4%), var(--preview-surface-bg));
      background-size: 24px 24px, auto;
    }
    .document-info {
      box-shadow: inset -12px 0 28px rgba(41,70,45,0.045);
    }
    .document-cover {
      border-radius: 18px 10px 10px 18px;
    }
    .document-viewer iframe,
    .document-viewer img {
      border-radius: 18px;
      box-shadow: 0 22px 54px rgba(44, 57, 34, 0.18);
    }
    .chat-launcher {
      background: var(--companion-float-bg, #fffaf0);
      box-shadow: 0 16px 36px rgba(20,35,21,0.16);
    }
    .chat-launcher:hover {
      transform: translateY(-3px) rotate(-1deg);
    }
    .chat-launcher-text {
      background: var(--companion-float-bg, #fffaf0) !important;
      color: var(--companion-float-border, #36573a) !important;
      border-color: var(--companion-float-border, #36573a) !important;
    }
    .chat-launcher-text::after {
      content: '';
      position: absolute;
      right: -6px;
      top: 50%;
      width: 10px;
      height: 10px;
      transform: translateY(-50%) rotate(45deg);
      background: inherit;
      border-top: inherit;
      border-right: inherit;
    }
    .chat-panel {
      border-radius: 26px;
      box-shadow: 0 28px 72px rgba(20,35,21,0.3);
    }
    .chat-head {
      background: var(--companion-panel-header-bg, #36573a);
    }
    .bot-avatar,
    .companion-icon-shell {
      border-radius: 18px;
    }
    .chat-bubble {
      box-shadow: 0 8px 18px rgba(43,64,38,0.06);
    }
    @keyframes heroSettle {
      from { opacity: 0; transform: translateY(18px) scale(0.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @media (max-width: 1180px) {
      .nav-links { gap: 8px; }
      .nav-link { font-size: 0.84rem; padding-inline: 7px; }
      .nav-link svg { width: 15px; height: 15px; }
      .document-topbar {
        flex-direction: column;
        align-items: stretch;
        padding: 14px 18px;
      }
      .document-title-wrap {
        max-width: 100%;
      }
      .document-actions {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 4px;
      }
      .doc-action.action-utility span {
        display: none;
      }
    }

    @media (max-width: 1120px) {
      body:not(.admin-mode) .navbar-inner {
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 12px;
        padding: 0 16px;
      }
      body:not(.admin-mode) .navbar-brand {
        flex: 0 0 auto;
        min-width: max-content;
      }
      body:not(.admin-mode) .nav-links {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 6px;
        padding-bottom: 2px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      body:not(.admin-mode) .nav-links::-webkit-scrollbar {
        display: none;
      }
      body:not(.admin-mode) .nav-link {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 38px;
        padding: 5px 8px;
        font-size: 0.84rem;
      }
      body:not(.admin-mode) .nav-link svg {
        width: 15px;
        height: 15px;
      }
    }
    @media (max-width: 820px) {
      .navbar-inner { align-items: flex-start; flex-direction: column; padding: 16px 20px; }
      body.admin-mode {
        padding-bottom: 0;
      }
      .btn-primary,
      .btn-secondary,
      .btn-danger,
      .btn-light {
        min-height: 46px;
        padding: 12px 16px;
      }
      .nav-links {
        gap: 10px;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 100%;
        padding-bottom: 4px;
      }
      .nav-link { white-space: nowrap; }
      .nav-links { scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
      .nav-link { flex: 0 0 auto; padding-inline: 10px; font-size: 0.86rem; }
      .nav-link svg { display: none; }
      .hero { min-height: auto; }
      .form-grid { grid-template-columns: 1fr; }
      .account-manager-layout { grid-template-columns: 1fr; }
      .admin-panel, .contact-form, .modal { padding: 20px; }
      .category-manager-grid { grid-template-columns: 1fr; }
      .category-manager-card { position: static; }
      .branding-preview-grid { grid-template-columns: 1fr; }
      .about-preview-studio { grid-template-columns: 1fr; }
      .about-live-preview { position: static; }
      .why-card-studio { grid-template-columns: 1fr; }
      .why-live-preview { position: static; }
      .why-card-editor-fields { grid-template-columns: 1fr; }
      .mini-links { display: none; }
      .admin-nav-pane { top: 16px; padding: 8px; }
      .admin-nav-track,
      .settings-tab-track,
      .upload-type-switch,
      .upload-step-track,
      .story-type-toggle,
      .filter-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 8px;
        scroll-snap-type: x proximity;
      }
      .admin-nav-btn,
      .settings-tab-btn,
      .upload-type-btn,
      .upload-step-btn,
      .story-type-btn,
      .filter-btn {
        flex: 0 0 auto;
        scroll-snap-align: start;
      }
      .admin-actions,
      .bulk-toolbar,
      .category-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
        gap: 10px;
      }
      .admin-actions > *,
      .bulk-toolbar > *,
      .category-actions > * {
        width: 100%;
        justify-content: center;
      }
      .bulk-toolbar-text {
        grid-column: 1 / -1;
      }
      .library-filter-grid {
        grid-template-columns: 1fr;
        padding: 12px;
      }
      .bulk-toolbar-main {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 138px), 1fr));
        width: 100%;
      }
      .approval-card {
        grid-template-columns: auto 46px minmax(0, 1fr);
        align-items: start;
      }
      .approval-thumb {
        width: 46px;
        height: 56px;
      }
      .approval-actions {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        justify-content: stretch;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .approval-actions > * {
        width: 100%;
      }
      .action-menu,
      .action-menu summary {
        width: 100%;
      }
      .action-menu-panel {
        right: 0;
        left: auto;
        min-width: min(220px, 88vw);
      }
      .document-modal { width: 96vw; height: 88vh; padding: 0; border-radius: 14px; }
      .document-topbar {
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
        padding: 14px;
        flex-direction: column;
        position: sticky;
        top: 0;
        z-index: 5;
      }
      .document-actions { gap: 6px; width: 100%; overflow-x: auto; padding-bottom: 2px; }
      .doc-action.action-utility span { display: none; }
      .admin-library-table { display: none; }
      .admin-library-card-list { display: grid; }
      .document-toolbar { padding: 0 14px; }
      .document-shell {
        display: flex;
        flex-direction: column;
        min-height: 0;
      }
      .document-viewer {
        order: 1;
        min-height: 58vh;
        padding: 12px 12px 0;
      }
      .document-info {
        order: 2;
        max-height: none;
        border-right: 0;
        border-top: 1px solid #ddd0af;
        padding: 18px;
      }
      .story-card { grid-template-columns: 118px 1fr; min-height: 238px; }
      .story-cover { margin: 16px 0 16px 16px; min-height: 190px; max-height: 220px; }
      .story-body { padding: 18px; }
      .story-desc{ font-size: 0.92rem; }
      .admin-command { grid-template-columns: 1fr; }
      .admin-mini-stack { min-width: 0; }
      .admin-control-row {
        grid-template-columns: 1fr;
      }
      .admin-command-actions {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
      }
      .admin-quick-btn,
      .admin-advanced-toggle {
        flex: 0 0 auto;
      }
      .admin-nav-group-label {
        font-size: 0.66rem;
        padding-left: 2px;
      }
      .admin-home-health {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
      }
      .admin-health-chip {
        flex: 0 0 auto;
      }
      .user-spotlight-grid,
      .portal-entry-grid,
      .shelf-search-row { grid-template-columns: 1fr; }
      .portal-builder {
        grid-template-columns: 1fr;
      }
      .portal-entry-top {
        align-items: flex-start;
      }
      .portal-entry-actions {
        justify-content: flex-start;
      }
      .portal-logo-tools {
        grid-template-columns: 72px minmax(0, 1fr);
        align-items: start;
      }
      .portal-logo-tools .portal-file-input {
        max-width: 100%;
      }
      .portal-fields-grid {
        grid-template-columns: 1fr;
      }
      .portal-url-row {
        margin-top: 0;
      }
      #latest-spotlight { padding-top: 40px; padding-bottom: 40px; overflow: hidden; }
      #latest-spotlight .section-title { font-size: clamp(1.38rem, 4vw, 1.72rem); margin-bottom: 8px; }
      #latest-spotlight .section-subtitle { max-width: 44rem; font-size: 0.94rem; }
      .spotlight-topbar { align-items: flex-start; gap: 12px; margin-bottom: 14px; }
      .spotlight-rail { justify-content: flex-start; gap: 8px; }
      .spotlight-rail-card { min-width: 0; flex: 1 1 120px; padding: 10px 12px; border-radius: 14px; }
      .spotlight-rail-card strong { font-size: 0.98rem; margin-bottom: 4px; }
      .spotlight-rail-card span { font-size: 0.72rem; }
      .spotlight-feature-card { grid-template-columns: 1fr; min-height: 0; }
      .spotlight-feature-card::after { display: none; }
      .spotlight-cover-art { min-height: 220px; aspect-ratio: 16 / 10; }
      .spotlight-cover-chip { top: 12px; left: 12px; padding: 7px 10px; font-size: 0.7rem; }
      .spotlight-feature-copy { padding: 16px 16px 14px; }
      .spotlight-pill { margin-bottom: 10px; padding: 6px 10px; font-size: 0.72rem; }
      .spotlight-kicker { margin-bottom: 6px; font-size: 0.7rem; }
      .spotlight-title { font-size: 1rem; margin-bottom: 6px; }
      .spotlight-feature-card .spotlight-title {
        font-size: 1.08rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .spotlight-meta { font-size: 0.82rem; }
      .spotlight-summary { margin-top: 8px; font-size: 0.9rem; line-height: 1.5; -webkit-line-clamp: 3; }
      .spotlight-cta { padding-top: 12px; font-size: 0.88rem; }
      .spotlight-side-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
      .spotlight-side-card { padding: 14px; }
      .spotlight-side-top { gap: 10px; margin-bottom: 8px; }
      .spotlight-side-icon { width: 38px; height: 38px; border-radius: 10px; }
      .spotlight-side-card .spotlight-summary { -webkit-line-clamp: 2; font-size: 0.85rem; }
      .chat-launcher {
        width: calc(var(--companion-avatar-size, 42px) + 10px);
        height: calc(var(--companion-avatar-size, 42px) + 10px);
        padding: 5px;
        border-radius: 18px;
      }
      .chat-launcher::after { right: 8px; top: 7px; }
      .chat-launcher-text { display: none; }
      .companion-bubble {
        max-width: min(210px, calc(100vw - 28px));
        padding: 9px 11px;
        border-radius: 14px;
        font-size: 0.78rem;
        line-height: 1.35;
      }
      .companion-bubble::after { right: calc(50% - 7px); bottom: -7px; }
      .chat-edge-tab { bottom: max(96px, calc(env(safe-area-inset-bottom) + 68px)); }
      .notice-card { grid-template-columns: 1fr; }
      .notice-media { min-height: 200px; order: -1; }
      .showcase-head,
      .showcase-slide,
      .feature-studio-grid,
      .quality-center-grid {
        grid-template-columns: 1fr;
      }
      .analytics-hero,
      .quality-progress-flow {
        grid-template-columns: 1fr;
      }
      .analytics-table {
        min-width: 560px;
      }
      .featured-manager-item {
        grid-template-columns: auto auto minmax(0, 1fr);
      }
      .featured-manager-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
      }
      .quality-table-card {
        padding: 10px;
      }
      .feature-studio-side {
        position: static;
        max-height: none;
        overflow: visible;
      }
      #admin-section-branding .brand-preview,
      #admin-section-companion .brand-preview,
      #admin-section-developer .branding-preview-grid {
        position: static;
        max-height: none;
        overflow: visible;
      }
      .about-main-card {
        grid-template-columns: 1fr;
        padding: 24px;
      }
      .impact-grid,
      .why-choose-grid {
        grid-template-columns: 1fr;
      }
      .about-main-card h2,
      .about-main-card p,
      .about-lower-head {
        text-align: left;
        justify-items: start;
      }
      .showcase-actions {
        justify-content: flex-start;
      }
      .showcase-visual {
        order: -1;
        min-height: 260px;
      }
      .showcase-resource-actions {
        align-items: stretch;
      }
      .spotlight-carousel-track { grid-auto-columns: minmax(260px, 72%); }
      .shelf-search-meta { white-space: normal; justify-content: flex-start; text-align: left; }
      .portal-card { grid-template-columns: 48px 1fr; }
      .portal-icon { width: 48px; height: 48px; border-radius: 14px; }
      .saved-shelf-heading { align-items: flex-start; }
      .recent-shelf-shell { padding: 20px; }
      .upload-step-footer { align-items: stretch; }
      .nav-entry-grid,
      .mini-reader-shell { grid-template-columns: 1fr; }
      .discovery-card { min-height: auto; }
      .chat-launcher {
        width: calc(var(--companion-avatar-size, 48px) + 12px);
        height: calc(var(--companion-avatar-size, 48px) + 12px);
        padding: 6px;
      }
      .chat-launcher-text {
        right: auto;
        left: 50%;
        top: auto;
        bottom: calc(100% + 8px);
        transform: translateX(-50%);
        max-width: min(150px, 58vw);
        font-size: 0.74rem;
        background: var(--companion-float-bg, #fffaf0) !important;
        color: var(--companion-float-border, #36573a) !important;
        border-color: var(--companion-float-border, #36573a) !important;
      }
      .chat-launcher-text::after {
        right: auto;
        left: 50%;
        top: auto;
        bottom: -6px;
        transform: translateX(-50%) rotate(45deg);
      }
    }

    @media (max-width: 640px) {
      .section { padding: 64px 18px; }
      .hero .flex.flex-wrap,
      .showcase-resource-actions,
      .spotlight-carousel-actions {
        display: grid !important;
        grid-template-columns: 1fr;
        width: 100%;
      }
      .hero .btn-light,
      .hero .btn-secondary,
      .showcase-resource-actions .btn-primary,
      .showcase-resource-actions .btn-secondary {
        width: 100%;
      }
      .content-grid,

      #stories-container.content-grid{ grid-template-columns: 1fr; }
      .story-card { grid-template-columns: 1fr; min-height: auto; }
      .story-cover {
        margin: 16px 16px 0;
        height: 250px;
        min-height: 250px;
        max-height: 250px;
        border-radius: 12px;
        box-shadow: 0 14px 30px rgba(41, 70, 45, 0.14);
      }
      .story-cover::after { display: none; }
      .story-cover::before { display: none; }
      .story-body { padding-top: 16px; }
      .document-modal {
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
        border: 0;
        box-shadow: none;
      }
      .document-toolbar { min-height: 48px; }
      .document-title {
        white-space: normal;
        font-size: 0.94rem;
      }
      .document-subtitle { white-space: normal; }
      .document-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: nowrap;
      }
      .doc-action {
        flex: 0 0 42px;
        min-width: 42px;
        padding: 0;
      }
      .doc-action.square { flex: 0 0 42px; }
      .doc-action span { display: none; }
      .doc-action.zoom-readout span { display: inline; }
      .document-info {
        max-height: none;
        padding: 16px 16px 24px;
      }
      .document-viewer {
        order: 1;
        padding: 8px 10px 0;
        min-height: 0;
        height: auto;
      }
      .document-viewer iframe,
      .document-viewer img {
        min-height: 0;
        border-radius: 12px;
      }
      .document-modal.focus-preview .document-viewer {
        min-height: 0;
        padding: 8px;
      }
      .document-modal.focus-preview .document-viewer iframe,
      .document-modal.focus-preview .document-viewer img {
        min-height: 0;
      }
      .document-cover {
        max-width: 190px;
        margin: 0 auto 18px;
      }
      .modal-mobile-note {
        display: block;
      }
      .saved-shelf-shell {
        padding: 18px;
      }
      .saved-shelf-heading {
        align-items: flex-start;
        gap: 10px;
      }
      #recent-shelf .saved-shelf-heading,
      #saved-shelf .saved-shelf-heading {
        flex-direction: column;
      }
      #recent-shelf .saved-shelf-heading .btn-secondary,
      #saved-shelf .saved-shelf-heading .btn-secondary {
        width: 100%;
        justify-content: center;
      }
      #recent-shelf .saved-shelf-note,
      #saved-shelf .saved-shelf-note {
        margin-bottom: 12px;
        text-align: left;
        font-size: 0.84rem;
      }
      #recent-shelf-grid.saved-shelf-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      #recent-shelf-grid .recent-shelf-card.storybook-card {
        grid-template-columns: 92px minmax(0, 1fr) !important;
        min-height: 136px !important;
      }
      #recent-shelf-grid .recent-shelf-card .story-cover {
        margin: 10px 0 10px 10px !important;
        height: 116px !important;
        min-height: 116px !important;
        max-height: 116px !important;
      }
      #recent-shelf-grid .recent-shelf-card .story-body {
        padding: 12px 12px 12px 10px !important;
      }
      #recent-shelf-grid .recent-shelf-card .story-title {
        font-size: 0.88rem;
      }
      .about-main-card,
      .impact-board,
      .why-choose-card {
        border-radius: 22px;
      }
      .about-lower-band {
        padding-inline: 0;
      }
      .impact-card {
        min-height: auto;
      }
      .announcement-shell {
        grid-template-columns: 1fr;
      }
      .notice-stage-head,
      .spotlight-carousel-head {
        align-items: flex-start;
      }
      .notice-stage-actions,
      .showcase-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
      }
      .notice-stage-actions .notice-dots,
      .showcase-actions .showcase-dots {
        order: 1;
        flex: 1 1 auto;
        justify-content: flex-start;
        flex-wrap: wrap;
      }
      .notice-nav-btn {
        order: 2;
        flex: 1 1 calc(50% - 4px);
        width: auto;
        min-width: 44px;
        height: 38px;
        padding: 0 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
      }
      .notice-nav-text {
        display: inline;
      }
      .notice-nav-readout {
        order: 1;
        flex: 0 0 auto;
        min-width: auto;
        margin-left: auto;
        justify-content: flex-end;
        padding: 0;
      }
      .shelf-pagination {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
      }
      .page-btn {
        flex: 0 0 auto;
      }
      .spotlight-carousel-track {
        grid-auto-columns: 86%;
      }
      #latest-spotlight { padding-top: 34px; padding-bottom: 34px; }
      .spotlight-topbar { gap: 10px; margin-bottom: 12px; }
      .spotlight-rail {
        flex-wrap: nowrap;
        overflow-x: auto;
        width: calc(100% + 2px);
        padding-bottom: 6px;
      }
      .spotlight-rail-card { flex: 0 0 132px; }
      .spotlight-side-stack { grid-template-columns: 1fr; }
      .spotlight-cover-art { min-height: 180px; aspect-ratio: 4 / 3; }
      .spotlight-feature-copy { padding: 14px 14px 12px; }
      .spotlight-feature-card .spotlight-title { font-size: 1rem; }
      .spotlight-summary { font-size: 0.86rem; -webkit-line-clamp: 2; }
      .spotlight-side-card .spotlight-summary { display: none; }
      .chat-launcher {
        width: calc(var(--companion-avatar-size, 38px) + 8px);
        height: calc(var(--companion-avatar-size, 38px) + 8px);
        padding: 4px;
        border-radius: 16px;
      }
      .companion-bubble { max-width: min(180px, calc(100vw - 24px)); font-size: 0.74rem; }
      .chat-edge-tab { width: 40px; height: 44px; bottom: max(88px, calc(env(safe-area-inset-bottom) + 62px)); }
      .chat-edge-tab i { width: 16px; height: 16px; }
      .showcase-shell {
        padding: 18px;
      }
      .showcase-overlay-card {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 12px 14px;
      }
      .saved-shelf-card {
        padding-bottom: 84px;
      }
      .bookmark-btn.shelf-remove {
        left: 16px;
        right: 16px;
        justify-content: center;
      }
      .upload-type-switch,
      .upload-step-track,
      .upload-step-footer,
      .upload-nav-actions,
      .upload-final-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .upload-final-actions,
      .upload-nav-actions { grid-template-columns: 1fr; }
      .upload-step-note {
        align-items: flex-start;
      }
      .chat-panel {
        width: calc(100vw - 20px);
        max-height: calc(100dvh - 84px);
      }
      .chat-form {
        grid-template-columns: 1fr auto;
      }
      .chat-form button {
        min-width: 52px;
        padding-inline: 12px;
      }
      .footer { padding: 40px 18px; }
      .admin-library-card {
        padding: 14px;
      }
      .admin-library-card-head {
        flex-direction: column;
      }
      .admin-library-card-actions .btn-secondary,
      .admin-library-card-actions .btn-light,
      .admin-library-card-actions .btn-danger {
        flex: 1 1 100%;
      }
    }

        @media (max-width: 980px) {
      body:not(.admin-mode) .section {
        padding: 56px 18px;
      }
      body:not(.admin-mode) .section-title {
        font-size: clamp(1.5rem, 4.6vw, 2.15rem);
        margin-bottom: 10px;
      }
      body:not(.admin-mode) .section-subtitle {
        max-width: 42rem;
        font-size: 0.94rem;
        margin-bottom: 20px;
      }
      body:not(.admin-mode) .hero p {
        font-size: 0.98rem;
        line-height: 1.65;
        margin-bottom: 24px;
      }
      .saved-shelf-shell,
      .recent-shelf-shell {
        padding: 18px;
      }
      .saved-shelf-grid {
        gap: 14px;
      }
      .spotlight-carousel-track {
        grid-auto-columns: minmax(240px, 62%);
      }
      .music-shelf {
        gap: 12px;
      }
    }

    @media (max-width: 960px) and (max-height: 560px) and (orientation: landscape) {
      body:not(.admin-mode) .section {
        padding-top: 34px;
        padding-bottom: 34px;
      }
      #latest-spotlight {
        padding-top: 26px;
        padding-bottom: 28px;
      }
      .saved-shelf-shell,
      .recent-shelf-shell {
        padding: 16px;
      }
      .spotlight-topbar {
        margin-bottom: 10px;
      }
      .spotlight-carousel-track {
        grid-auto-columns: minmax(220px, 48%);
      }
      .music-card {
        width: min(220px, 38vw);
        flex-basis: min(220px, 38vw);
      }
    }

    @media (max-width: 760px) {
      body:not(.admin-mode) .section {
        padding: 46px 16px;
      }
      body:not(.admin-mode) .navbar {
        overflow: hidden;
      }
      body:not(.admin-mode) .navbar-inner {
        align-items: stretch;
        gap: 8px;
        padding: 10px 12px 9px;
      }
      body:not(.admin-mode) .navbar-brand {
        align-self: flex-start;
        justify-content: flex-start;
        min-width: 0;
        max-width: 100%;
        padding-right: 6px;
      }
      body:not(.admin-mode) .navbar-brand-icon {
        width: 40px;
        height: 40px;
      }
      body:not(.admin-mode) .nav-links {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 8px;
        padding: 2px 2px 6px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        mask-image: linear-gradient(90deg, transparent 0, black 10px, black calc(100% - 10px), transparent 100%);
      }
      body:not(.admin-mode) .nav-links::-webkit-scrollbar {
        display: none;
      }
      body:not(.admin-mode) .nav-link {
        flex: 0 0 auto;
        scroll-snap-align: start;
        min-height: 34px;
        padding: 6px 12px;
        border: 1px solid rgba(92, 118, 86, 0.16);
        border-radius: 999px;
        background: rgba(255, 252, 244, 0.96);
        color: #30472f;
        box-shadow: 0 1px 0 rgba(255,255,255,0.72) inset;
        font-size: 0.8rem;
        font-weight: 700;
      }
      body:not(.admin-mode) .nav-link svg {
        display: none;
      }
      body:not(.admin-mode) .nav-link.active {
        border-color: rgba(132, 156, 104, 0.42);
        background: #eef5e8;
        color: #27422d;
      }
      body:not(.admin-mode) .section-title {
        font-size: clamp(1.35rem, 7vw, 1.9rem);
        line-height: 1.14;
        margin-bottom: 8px;
        text-align: left;
      }
      body:not(.admin-mode) .section-subtitle {
        font-size: 0.9rem;
        line-height: 1.45;
        margin-bottom: 18px;
        text-align: left;
      }
      body:not(.admin-mode) .hero {
        padding: 44px 18px;
      }
      body:not(.admin-mode) .hero h1 {
        font-size: clamp(1.85rem, 10vw, 2.55rem);
        line-height: 1.08;
      }
      body:not(.admin-mode) .hero-division {
        font-size: 1rem;
        margin-bottom: 10px;
      }
      body:not(.admin-mode) .hero p {
        font-size: 0.95rem;
        line-height: 1.55;
        margin-bottom: 22px;
      }
      body:not(.admin-mode) .notice-panel {
        padding: 14px;
        margin-bottom: 18px;
      }
      body:not(.admin-mode) .notice-panel div:last-child {
        display: none;
      }
      body:not(.admin-mode) .impact-subtitle,
      body:not(.admin-mode) .impact-note,
      body:not(.admin-mode) .library-lane-note,
      body:not(.admin-mode) .spotlight-carousel-subtitle,
      body:not(.admin-mode) .saved-shelf-note {
        display: none;
      }
      body:not(.admin-mode) .impact-board {
        padding: 16px;
        border-radius: 20px;
      }
      body:not(.admin-mode) .impact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      body:not(.admin-mode) .impact-card {
        min-height: auto;
        padding: 14px;
      }
      body:not(.admin-mode) .impact-number {
        font-size: clamp(1.65rem, 10vw, 2.35rem);
      }
      body:not(.admin-mode) .impact-label,
      body:not(.admin-mode) .impact-mini {
        font-size: 0.72rem;
      }
      body:not(.admin-mode) .discovery-head,
      body:not(.admin-mode) .impact-feature-head {
        justify-items: start;
        text-align: left;
      }
      body:not(.admin-mode) .discovery-grid {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        padding: 4px 2px 12px;
      }
      body:not(.admin-mode) .discovery-card {
        flex: 0 0 min(78vw, 310px);
        min-height: 0;
        padding: 16px;
        scroll-snap-align: start;
      }
      body:not(.admin-mode) .discovery-body-copy,
      body:not(.admin-mode) .discovery-tags,
      body:not(.admin-mode) .discovery-meta {
        display: none;
      }
      body:not(.admin-mode) .content-shelf-controls {
        gap: 10px;
        margin-bottom: 16px;
      }
      body:not(.admin-mode) .shelf-search-row {
        gap: 8px;
      }
      body:not(.admin-mode) .shelf-search-shell input {
        font-size: 0.92rem;
      }
      body:not(.admin-mode) .shelf-search-clear {
        display: none;
      }
      body:not(.admin-mode) .shelf-insights {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 6px;
      }
      body:not(.admin-mode) .shelf-pill {
        flex: 0 0 auto;
        padding: 8px 10px;
      }
      body:not(.admin-mode) .shelf-pill span {
        font-size: 0.68rem;
      }
      body:not(.admin-mode) .story-type-toggle,
      body:not(.admin-mode) .filter-tabs {
        gap: 8px;
      }
      body:not(.admin-mode) .story-type-btn,
      body:not(.admin-mode) .filter-btn {
        min-height: 36px;
        padding: 8px 12px;
        font-size: 0.78rem;
      }
      body:not(.admin-mode) .story-card {
        grid-template-columns: 96px minmax(0, 1fr) !important;
        min-height: 150px;
        border-radius: 14px;
      }
      body:not(.admin-mode) .story-cover {
        margin: 12px 0 12px 12px !important;
        height: 126px !important;
        min-height: 126px !important;
        max-height: 126px !important;
        border-radius: 10px !important;
        box-shadow: -4px 5px 0 color-mix(in srgb, var(--green-1) 78%, #26311f 22%), 0 10px 20px rgba(41, 70, 45, 0.12) !important;
      }
      body:not(.admin-mode) .story-body {
        padding: 12px 12px 12px 14px !important;
      }
      body:not(.admin-mode) .resource-badge-row {
        gap: 4px;
        margin-bottom: 6px;
        flex-wrap: nowrap;
        overflow: hidden;
      }
      body:not(.admin-mode) .resource-badge {
        font-size: 0.58rem;
        padding: 4px 7px;
      }
      body:not(.admin-mode) .resource-badge.new,
      body:not(.admin-mode) .resource-badge.popular {
        display: none;
      }
      body:not(.admin-mode) .story-kicker{
        font-size: 0.64rem;
        margin-bottom: 4px;
      }
      body:not(.admin-mode) .story-title{
        font-size: 0.95rem;
        line-height: 1.2;
        margin-bottom: 5px;
        -webkit-line-clamp: 2;
      }
      body:not(.admin-mode) .story-desc,

      body:not(.admin-mode) .credit-line,

      body:not(.admin-mode) .content-views{
        display: none !important;
      }
      body:not(.admin-mode) .story-footer{
        gap: 8px;
        align-items: center;
        flex-wrap: nowrap;
      }
      body:not(.admin-mode) .story-author{
        font-size: 0.73rem;
        -webkit-line-clamp: 1;
      }
      body:not(.admin-mode) .story-card .read-more{
        padding: 7px 9px;
        font-size: 0.72rem;
        white-space: nowrap;
      }
      body:not(.admin-mode) .spotlight-carousel-track {
        grid-auto-columns: 82%;
      }
    }
    @media (max-width: 430px) {
      .btn-primary,
      .btn-secondary,
      .btn-danger,
      .btn-light {
        width: 100%;
      }
      .admin-nav-btn,
      .settings-tab-btn,
      .story-type-btn,
      .filter-btn,
      .upload-type-btn,
      .upload-step-btn {
        padding-inline: 12px;
        font-size: 0.84rem;
      }
      .admin-actions,
      .bulk-toolbar,
      .category-actions,
      .upload-type-switch,
      .upload-step-track {
        grid-template-columns: 1fr;
      }
      .notice-nav-btn {
        min-height: 42px;
      }
      .document-actions {
        gap: 5px;
      }
      .doc-action {
        flex-basis: 40px;
        min-width: 40px;
      }
      .chat-form {
        grid-template-columns: 1fr;
      }
      .chat-form button {
        width: 100%;
      }
    }

    /* NARRASPACE 2026 WORKSPACE REFRESH */
    :root {
      --workspace-bg: #f3f6ef;
      --workspace-surface: #ffffff;
      --workspace-ink: #193321;
      --workspace-muted: #667360;
      --workspace-line: #d8e2d1;
      --workspace-accent: #315e3b;
      --workspace-accent-strong: #23472d;
      --workspace-gold: #d8b84b;
      --workspace-soft: #edf4e9;
    }

    body.admin-mode {
      background:
        linear-gradient(180deg, #eef4e9 0, #f7f4e9 360px, var(--workspace-bg) 760px);
    }

    body.admin-mode #admin-view {
      width: min(100%, 1500px);
      padding-top: 28px;
    }

    .admin-workspace-heading {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .admin-workspace-mark {
      width: 50px;
      height: 50px;
      flex: 0 0 50px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: var(--workspace-accent);
      color: #fff;
      box-shadow: 0 10px 24px rgba(35, 71, 45, 0.2);
    }

    .admin-workspace-kicker {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 5px;
      color: var(--workspace-accent);
      font-size: 0.72rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .admin-workspace-kicker::before {
      content: "";
      width: 18px;
      height: 3px;
      border-radius: 99px;
      background: var(--workspace-gold);
    }

    .admin-header {
      margin-bottom: 22px;
      padding: 2px 2px 0;
    }

    .admin-header .section-title {
      color: var(--workspace-ink) !important;
      font-size: clamp(1.75rem, 3vw, 2.45rem);
      line-height: 1.08;
    }

    .admin-header > .flex {
      padding: 6px;
      border: 1px solid var(--workspace-line);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.76);
      box-shadow: 0 10px 25px rgba(37, 63, 39, 0.06);
    }

    .admin-command {
      position: relative;
      overflow: hidden;
      grid-template-columns: minmax(0, 1fr) minmax(210px, 260px);
      gap: 22px;
      padding: 24px 26px;
      border: 0;
      border-radius: 18px;
      background: var(--workspace-accent-strong);
      color: #fff;
      box-shadow: 0 18px 42px rgba(29, 58, 36, 0.18);
    }

    .admin-command::after { display: none; }

    .admin-command-title,
    .admin-command-text {
      color: #fff;
    }

    .admin-command-text {
      opacity: 0.78;
    }

    .admin-command-actions {
      gap: 8px;
    }

    .admin-command .admin-quick-btn,
    .admin-command .admin-advanced-toggle {
      min-height: 38px;
      padding: 8px 11px;
      border-color: rgba(255, 255, 255, 0.2);
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      backdrop-filter: blur(8px);
    }

    .admin-command .admin-quick-btn:hover,
    .admin-command .admin-advanced-toggle:hover {
      border-color: rgba(255, 255, 255, 0.46);
      background: rgba(255, 255, 255, 0.18);
      box-shadow: none;
    }

    .admin-command .admin-advanced-toggle.active {
      background: var(--workspace-gold);
      border-color: var(--workspace-gold);
      color: #203624;
    }

    .admin-command .admin-health-chip {
      border-color: rgba(255, 255, 255, 0.16);
      background: rgba(255, 255, 255, 0.09);
      color: #fff;
    }

    .admin-command .admin-health-chip.warn {
      border-color: rgba(255, 227, 131, 0.4);
      background: rgba(255, 227, 131, 0.14);
      color: #fff2bd;
    }

    .admin-mini-stack {
      position: relative;
      z-index: 1;
    }

    .admin-mini-card {
      padding: 11px 13px;
      border-color: rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
    }

    .admin-command .btn-secondary {
      border-color: #fff;
      background: #fff;
      color: var(--workspace-accent-strong);
    }

    .admin-control-row {
      margin-top: 18px;
      margin-bottom: 8px;
    }

    .admin-control-search {
      min-height: 48px;
      border-color: var(--workspace-line);
      border-radius: 13px;
      box-shadow: 0 8px 20px rgba(37, 63, 39, 0.05);
    }

    .admin-nav-pane {
      --nav-paper: #fffdf8;
      --nav-wash: #f4f1e8;
      --nav-line: #ddd7c8;
      --nav-ink: #273028;
      --nav-muted: #72776e;
      --nav-gold: #c6a437;
      position: sticky;
      top: 12px;
      margin: 14px 0 22px;
      padding: 8px;
      max-width: 100%;
      overflow: hidden;
      border: 1px solid var(--nav-line);
      border-radius: 14px;
      background: rgba(255, 253, 248, 0.97);
      box-shadow:
        0 12px 28px rgba(48, 45, 36, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(16px);
    }

    .admin-nav-pane::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 4px;
      background: var(--nav-gold);
    }

    body.admin-mode .admin-nav-pane {
      top: 10px;
    }

    .admin-nav-intro {
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 3px 7px 8px;
      color: var(--workspace-ink);
    }

    .admin-nav-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.82rem;
      font-weight: 900;
    }

    .admin-nav-title > i {
      color: var(--workspace-accent);
    }

    .admin-version-chip {
      padding: 5px 9px;
      border: 1px solid #d9e2d4;
      border-radius: 999px;
      background: #f3f7f0;
      color: #58705d;
      font-size: 0.69rem;
      font-weight: 900;
      white-space: nowrap;
    }

    .admin-nav-track {
      gap: 3px;
      padding: 4px 5px 4px 8px;
      border: 0;
      border-radius: 10px;
      background: var(--nav-wash);
      scrollbar-color: #c8b96f transparent;
    }

    .admin-nav-group-label {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--nav-muted);
      padding-inline: 12px 5px;
      letter-spacing: 0.1em;
      font-size: 0.66rem;
    }

    .admin-nav-group-label::after {
      content: "";
      width: 1px;
      height: 20px;
      margin-left: 3px;
      background: #d8d1c1;
    }

    .admin-nav-btn {
      position: relative;
      min-height: 40px;
      padding: 8px 10px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border: 1px solid transparent;
      border-radius: 7px;
      background: transparent;
      color: #424a42;
      font-size: 0.82rem;
      box-shadow: none;
    }

    .admin-nav-btn > i {
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
      color: #71776f;
      stroke-width: 2;
    }

    .admin-nav-btn:hover {
      border-color: #e0d9c9;
      background: rgba(255, 255, 255, 0.72);
      color: var(--nav-ink);
      transform: none;
    }

    .admin-nav-btn.active {
      border-color: #d6cebb;
      background: #ffffff;
      color: var(--nav-ink);
      box-shadow: 0 6px 15px rgba(48, 45, 36, 0.1);
    }

    .admin-nav-btn.active > i {
      color: #35583d;
    }

    .admin-nav-btn.active::after {
      content: "";
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: 3px;
      height: 3px;
      border-radius: 999px;
      background: var(--nav-gold);
    }

    .admin-kpis {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 22px;
    }

    .admin-kpi,
    .admin-kpi.accent {
      min-height: 118px;
      padding: 17px;
      border: 1px solid var(--workspace-line);
      border-radius: 15px;
      background: var(--workspace-surface);
      box-shadow: 0 10px 24px rgba(37, 63, 39, 0.06);
    }

    .admin-kpi::before {
      content: "";
      display: block;
      width: 28px;
      height: 4px;
      margin-bottom: 17px;
      border-radius: 999px;
      background: var(--workspace-gold);
    }

    .admin-kpi-value {
      color: var(--workspace-accent-strong);
      font-size: 1.8rem;
    }

    .admin-kpi-label {
      color: var(--workspace-muted);
      font-size: 0.8rem;
    }

    .admin-panel {
      position: relative;
      padding: 26px;
      margin-bottom: 20px;
      border: 1px solid var(--workspace-line);
      border-radius: 18px;
      background: var(--workspace-surface);
      box-shadow: 0 10px 26px rgba(37, 63, 39, 0.055);
    }

    .account-manager-layout,
    .account-list-card,
    .account-form-card {
      min-width: 0;
      max-width: 100%;
    }

    .account-list-card .table-wrap {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
    }

    .admin-panel::before {
      content: "";
      position: absolute;
      top: 18px;
      bottom: 18px;
      left: 0;
      width: 4px;
      border-radius: 0 6px 6px 0;
      background: var(--workspace-accent);
      opacity: 0.2;
    }

    .admin-panel-header {
      padding-bottom: 16px;
      margin-bottom: 20px;
      border-bottom: 1px solid #edf1e9;
    }

    .admin-panel h3 {
      color: var(--workspace-ink);
      font-size: 1.3rem;
      letter-spacing: 0;
    }

    .admin-panel p {
      color: var(--workspace-muted) !important;
    }

    body.admin-mode label {
      color: #304a35;
      font-size: 0.87rem;
      font-weight: 850;
    }

    body.admin-mode input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    body.admin-mode textarea,
    body.admin-mode select {
      min-height: 43px;
      border: 1px solid #cfdac8;
      border-radius: 9px;
      background: #fbfdf9;
      box-shadow: inset 0 1px 1px rgba(30, 58, 36, 0.03);
      transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }

    body.admin-mode input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
    body.admin-mode textarea:focus,
    body.admin-mode select:focus {
      border-color: var(--workspace-accent);
      background: #fff;
      box-shadow: 0 0 0 3px rgba(49, 94, 59, 0.11);
    }

    body.admin-mode .btn-primary,
    body.admin-mode .btn-secondary,
    body.admin-mode .btn-light,
    body.admin-mode .btn-danger {
      min-height: 40px;
      border-radius: 9px;
      box-shadow: none;
    }

    body.admin-mode .btn-primary:hover,
    body.admin-mode .btn-secondary:hover,
    body.admin-mode .btn-light:hover,
    body.admin-mode .btn-danger:hover {
      transform: translateY(-1px);
    }

    body.admin-mode .form-grid > .form-group {
      margin-bottom: 0;
    }

    .compact-setting-block {
      margin: 14px 0 18px;
      padding: 14px;
      border: 1px solid var(--workspace-line);
      border-radius: 15px;
      background: #f8fbf6;
    }

    .compact-setting-heading {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .compact-setting-title {
      display: flex;
      align-items: center;
      gap: 9px;
      color: var(--workspace-ink);
      font-size: 0.96rem;
      font-weight: 900;
    }

    .compact-setting-title-icon {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      flex: 0 0 30px;
      border-radius: 9px;
      background: var(--workspace-accent);
      color: #fff;
    }

    .compact-setting-note {
      max-width: 560px;
      color: var(--workspace-muted);
      font-size: 0.78rem;
      font-weight: 700;
      line-height: 1.45;
      text-align: right;
    }

    .compact-color-board {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .compact-color-card {
      display: grid;
      gap: 9px;
      min-width: 0;
      padding: 11px;
      border: 1px solid #dce5d6;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 5px 14px rgba(37, 63, 39, 0.035);
    }

    .compact-color-card.wide {
      grid-column: 1 / -1;
    }

    .compact-color-card-title {
      display: flex;
      align-items: center;
      gap: 7px;
      color: #36543c;
      font-size: 0.76rem;
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: 0.055em;
    }

    .compact-color-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
    }

    .compact-color-field.form-group {
      min-height: 44px;
      margin: 0;
      padding: 7px 8px 7px 10px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 42px;
      align-items: center;
      gap: 8px;
      border: 1px solid #e1e8dc;
      border-radius: 9px;
      background: #fbfdf9;
      transition: border-color 0.18s ease, background 0.18s ease;
    }

    .compact-color-field.form-group:hover {
      border-color: #b9cbb2;
      background: #fff;
    }

    .compact-color-field.form-group label {
      min-width: 0;
      margin: 0;
      color: #4b5d49;
      font-size: 0.76rem;
      font-weight: 850;
      line-height: 1.25;
    }

    .compact-color-field.form-group input[type="color"] {
      width: 38px;
      min-width: 38px;
      height: 34px;
      justify-self: end;
      border-radius: 8px;
    }

    .compact-preset-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .compact-preset-row .brand-style-btn {
      flex: 1 1 130px;
      min-height: 38px;
      margin: 0;
      padding: 8px 11px;
      text-align: center;
      font-size: 0.8rem;
    }

    .settings-group[data-branding-tab="colors"] > .form-grid:has(input[type="color"]) {
      gap: 8px;
      margin-bottom: 9px;
      padding: 9px;
      border: 1px solid var(--workspace-line);
      border-radius: 11px;
      background: #f8fbf6;
    }

    .settings-group[data-branding-tab="colors"] > .form-grid:has(input[type="color"]) .form-group {
      min-height: 42px;
      padding: 6px 7px 6px 9px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 42px;
      align-items: center;
      gap: 8px;
      border-radius: 8px;
      background: #fff;
    }

    .settings-group[data-branding-tab="colors"] > .form-grid:has(input[type="color"]) label,
    .loader-controls-grid > .form-group:has(input[type="color"]) label {
      margin: 0;
      font-size: 0.78rem;
      line-height: 1.25;
    }

    .loader-controls-grid > .form-group:has(input[type="color"]) {
      min-height: 50px;
      margin: 0;
      padding: 7px 8px 7px 10px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 42px;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--workspace-line);
      border-radius: 10px;
      background: #f8fbf6;
    }

    .loader-controls-grid > .form-group:has(input[type="color"]) input[type="color"] {
      width: 38px;
      min-width: 38px;
      height: 34px;
      justify-self: end;
    }

    .settings-tab-shell {
      position: sticky;
      top: 116px;
      z-index: 20;
      margin: -4px -4px 18px;
      padding: 8px;
      border: 1px solid var(--workspace-line);
      border-radius: 13px;
      background: rgba(248, 251, 246, 0.94);
      backdrop-filter: blur(12px);
    }

    .settings-tab-btn {
      min-height: 38px;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 0.82rem;
    }

    .settings-tab-btn.active {
      background: var(--workspace-accent);
      border-color: var(--workspace-accent);
      box-shadow: none;
    }

    .advanced-control::before {
      background: #eef1e9;
      color: #65705f;
    }

    .update-card,
    .launch-card,
    .system-check-card,
    .message-card {
      border-radius: 13px;
      box-shadow: none;
    }

    .content-card,


    .story-card,


    .portal-card{
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    }

    body:not(.admin-mode) .content-card:hover,


    body:not(.admin-mode) .story-card:hover,


    body:not(.admin-mode) .portal-card:hover{
      transform: translateY(-4px);
      box-shadow: 0 18px 40px rgba(35, 71, 45, 0.12);
    }

    body:not(.admin-mode) .section-title {
      text-wrap: balance;
    }

    @media (max-width: 1120px) {
      .admin-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      body.admin-mode #admin-section-developer .loader-controls-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      body.admin-mode #admin-section-developer .loader-upload-card {
        grid-column: span 1;
      }
    }

    @media (max-width: 820px) {
      body.admin-mode #admin-view {
        padding: 18px 14px 44px;
      }
      .admin-workspace-mark {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border-radius: 12px;
      }
      .admin-header {
        align-items: stretch;
      }
      .admin-header > .flex {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
      }
      .admin-command {
        padding: 20px;
        border-radius: 16px;
      }
      .admin-command-actions {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
      }
      .admin-nav-pane {
        top: 6px;
        margin-inline: -4px;
        padding: 7px;
        border-radius: 13px;
      }
      body.admin-mode .admin-nav-pane {
        top: 6px;
      }
      .admin-nav-intro {
        padding-bottom: 7px;
      }
      .admin-nav-track {
        padding-bottom: 4px;
        border-radius: 9px;
      }
      .admin-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .admin-kpi {
        min-height: 108px;
      }
      .admin-panel {
        padding: 20px 17px;
        border-radius: 15px;
        min-width: 0;
        max-width: 100%;
      }
      .admin-panel::before {
        top: 14px;
        bottom: 14px;
      }
      .admin-panel-header {
        align-items: stretch;
      }
      .settings-tab-shell {
        top: 99px;
        margin-inline: -2px;
      }
      .compact-setting-heading {
        display: grid;
      }
      .compact-setting-note {
        max-width: none;
        text-align: left;
      }
    }

    @media (max-width: 520px) {
      .admin-workspace-heading {
        align-items: flex-start;
      }
      .admin-header .section-title {
        font-size: 1.7rem;
      }
      .admin-header > .flex {
        grid-template-columns: 1fr;
      }
      .admin-command {
        gap: 18px;
      }
      .admin-nav-intro {
        display: none;
      }
      .settings-tab-shell {
        top: 59px;
      }
      .admin-section-anchor {
        scroll-margin-top: 128px;
      }
      .admin-mini-stack {
        grid-template-columns: 1fr;
      }
      .admin-nav-group-label {
        display: none;
      }
      .admin-nav-btn {
        padding-inline: 10px;
      }
      .admin-nav-btn > span {
        display: inline;
      }
      .admin-kpis {
        grid-template-columns: 1fr 1fr;
      }
      .admin-kpi {
        min-height: 100px;
        padding: 14px;
      }
      .admin-kpi::before {
        margin-bottom: 13px;
      }
      .admin-panel {
        margin-bottom: 14px;
      }
      .admin-panel-header .admin-actions {
        grid-template-columns: 1fr;
      }
      .compact-setting-block {
        padding: 10px;
      }
      body.admin-mode #admin-view {
        max-width: 100vw;
        overflow-x: clip;
      }
      .compact-color-board,
      .compact-color-fields {
        grid-template-columns: 1fr;
      }
      .compact-color-card.wide {
        grid-column: auto;
      }
      .feedback-admin-preview-grid {
        grid-template-columns: 1fr !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .admin-kpi,

      .admin-nav-btn,

      .admin-quick-btn,

      .content-card,

      .story-card,

      .portal-card{
        transition: none !important;
      }
    }

    /* Launch reliability and compact administration refinements. */
    #discovery-studio .section-title { font-weight: var(--library-title-weight); }
    .preview-fallback.is-loading button { display: none; }
    .preview-fallback.is-loading > div::before {
      content: '';
      width: 32px;
      height: 32px;
      display: block;
      margin: 0 auto 14px;
      border: 3px solid color-mix(in srgb, var(--preview-info-text) 20%, transparent 80%);
      border-top-color: var(--preview-info-text);
      border-radius: 50%;
      animation: previewLoadSpin .8s linear infinite;
    }
    @keyframes previewLoadSpin { to { transform: rotate(360deg); } }
    .preview-image-zoom-controls {
      position: absolute;
      left: 50%;
      bottom: 16px;
      z-index: 8;
      display: none;
      align-items: center;
      gap: 8px;
      transform: translateX(-50%);
      padding: 7px;
      border-radius: 999px;
      background: rgba(20, 28, 19, .84);
      color: #fff;
      box-shadow: 0 12px 28px rgba(0,0,0,.22);
    }
    .preview-image-zoom-controls.image-zoom-ready { display: flex; }
    .preview-image-zoom-controls button {
      width: 36px;
      height: 36px;
      border: 0;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #fffaf0;
      color: #26311f;
      cursor: pointer;
    }
    .preview-image-zoom-controls span { min-width: 48px; text-align: center; font-size: .8rem; font-weight: 900; }
    #chat-launcher img,
    #chat-launcher picture,
    #chat-launcher .companion-avatar,
    .chat-avatar img {
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }
    body.companion-dragging,
    body.companion-dragging * {
      cursor: grabbing !important;
      user-select: none !important;
    }
    /* 2026 admin workspace: spacious content, compact controls, icon-first navigation. */
    body.admin-mode {
      --admin-canvas: #f4f6f1;
      --admin-paper: #ffffff;
      --admin-ink: #1d2a21;
      --admin-muted: #667267;
      --admin-line: #dce4d9;
      --admin-green: #294e38;
      --admin-green-soft: #e7efe8;
      --admin-gold: #c9a84f;
      background: var(--admin-canvas);
    }
    body.admin-mode #admin-view.show {
      width: min(100%, 1600px);
      max-width: 1600px;
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      align-items: start;
      gap: 16px 18px;
      padding: 28px clamp(16px, 2.5vw, 34px) 72px;
    }
    body.admin-mode #admin-view > .admin-header,
    body.admin-mode #admin-view > .admin-command,
    body.admin-mode #admin-view > .admin-control-row,
    body.admin-mode #admin-view > .admin-search-status,
    body.admin-mode #admin-view > .admin-nav-pane,
    body.admin-mode #admin-view > .admin-kpis,
    body.admin-mode #admin-view > .admin-panel {
      grid-column: 1 / -1;
      margin: 0;
    }
    body.admin-mode .admin-header {
      gap: 18px;
      margin-bottom: 2px;
    }
    body.admin-mode .admin-workspace-heading {
      gap: 13px;
    }
    body.admin-mode .admin-workspace-mark {
      width: 48px;
      height: 48px;
      border-radius: 10px;
      background: var(--admin-green);
      color: #fff;
      box-shadow: 0 8px 20px rgba(41, 78, 56, .16);
    }
    body.admin-mode .admin-header .section-title {
      font-size: clamp(1.55rem, 2.2vw, 2.05rem);
    }
    body.admin-mode .admin-workspace-kicker {
      color: #7b6a35;
      font-size: .67rem;
      letter-spacing: .12em;
    }
    body.admin-mode .admin-header p {
      max-width: 64ch;
      margin-top: 3px !important;
      font-size: .82rem;
      line-height: 1.45;
    }
    body.admin-mode .admin-header > .flex {
      padding: 4px;
      border-radius: 10px;
      box-shadow: none;
    }
    body.admin-mode .admin-command {
      grid-template-columns: minmax(0, 1fr) minmax(200px, 240px);
      gap: 16px;
      padding: 18px 20px;
      border-radius: 12px;
      box-shadow: 0 12px 28px rgba(29, 58, 36, .13);
    }
    body.admin-mode .admin-command-main {
      gap: 12px;
    }
    body.admin-mode .admin-command-title {
      font-size: 1.18rem;
    }
    body.admin-mode .admin-command-text {
      margin-top: 3px;
      font-size: .82rem;
    }
    body.admin-mode .admin-command-actions {
      gap: 6px;
    }
    body.admin-mode .admin-command .admin-quick-btn,
    body.admin-mode .admin-command .admin-advanced-toggle {
      min-height: 36px;
      padding: 7px 10px;
      border-radius: 8px;
      font-size: .76rem;
    }
    body.admin-mode .admin-mini-stack {
      gap: 7px;
    }
    body.admin-mode .admin-mini-card {
      padding: 9px 11px;
      border-radius: 8px;
      font-size: .76rem;
    }
    body.admin-mode .admin-control-row {
      margin-top: 0;
    }
    body.admin-mode .admin-control-search {
      min-height: 44px;
      border-radius: 10px;
      box-shadow: none;
    }
    body.admin-mode .admin-search-shortcut {
      padding: 4px 7px;
      border: 1px solid #d9dfd5;
      border-radius: 6px;
      background: #f5f7f2;
      color: #6d756d;
      font-family: inherit;
      font-size: .66rem;
      font-weight: 850;
      line-height: 1;
      white-space: nowrap;
    }
    body.admin-mode .admin-control-clear {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      padding: 0;
      border-radius: 8px;
    }
    body.admin-mode .admin-control-clear > i,
    body.admin-mode .admin-control-clear > svg {
      width: 17px;
      height: 17px;
    }
    body.admin-mode .admin-nav-pane {
      top: 8px;
      z-index: 35;
      padding: 7px;
      border-radius: 12px;
      border-color: #d8dfd5;
      background: rgba(252, 253, 250, .96);
      box-shadow: 0 10px 24px rgba(38, 58, 42, .09);
    }
    body.admin-mode .admin-nav-row {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    body.admin-mode .admin-nav-mobile-context {
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 2px 5px 7px;
      color: var(--admin-muted);
      font-size: .69rem;
      font-weight: 800;
    }
    body.admin-mode .admin-nav-current {
      min-width: 0;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--admin-green);
    }
    body.admin-mode .admin-nav-current > i,
    body.admin-mode .admin-nav-current > svg {
      width: 15px;
      height: 15px;
    }
    body.admin-mode .admin-nav-current-label {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    body.admin-mode .admin-nav-swipe-hint {
      white-space: nowrap;
      font-weight: 700;
    }
    body.admin-mode .admin-nav-scroll {
      width: 38px;
      min-width: 38px;
      height: 42px;
      display: none;
      place-items: center;
      padding: 0;
      border: 1px solid #d3ddd3;
      border-radius: 8px;
      background: #fff;
      color: var(--admin-green);
      cursor: pointer;
    }
    body.admin-mode .admin-nav-scroll > i,
    body.admin-mode .admin-nav-scroll > svg {
      width: 18px;
      height: 18px;
    }
    body.admin-mode .admin-nav-scroll:disabled {
      opacity: .35;
      cursor: default;
    }
    body.admin-mode .admin-nav-pane::before {
      display: none;
    }
    body.admin-mode .admin-nav-track {
      flex: 1 1 auto;
      min-width: 0;
      gap: 5px;
      padding: 4px;
      border-radius: 8px;
      background: #eef2ec;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-padding-inline: 8px;
    }
    body.admin-mode .admin-nav-group-label {
      width: 1px;
      min-width: 1px;
      height: 28px;
      padding: 0;
      margin: 0 4px;
      overflow: hidden;
      color: transparent;
      background: #cdd7cd;
      align-self: center;
    }
    body.admin-mode .admin-nav-group-label::after {
      display: none;
    }
    body.admin-mode .admin-nav-btn {
      width: 50px;
      min-width: 50px;
      max-width: 50px;
      height: 48px;
      min-height: 48px;
      justify-content: center;
      gap: 8px;
      padding: 0 13px;
      overflow: hidden;
      white-space: nowrap;
      border: 1px solid transparent;
      border-radius: 9px;
      background: transparent;
      color: #344139;
      box-shadow: none;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      transition: max-width .2s ease, width .2s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    body.admin-mode .admin-nav-btn > i,
    body.admin-mode .admin-nav-btn > svg {
      width: 22px;
      height: 22px;
      flex: 0 0 22px;
      color: currentColor;
      stroke-width: 1.9;
    }
    body.admin-mode .admin-nav-btn .admin-nav-label {
      max-width: 0;
      opacity: 0;
      overflow: hidden;
      font-size: .78rem;
      font-weight: 850;
      transition: max-width .2s ease, opacity .14s ease;
    }
    body.admin-mode .admin-nav-btn:hover,
    body.admin-mode .admin-nav-btn:focus-visible,
    body.admin-mode .admin-nav-btn.label-visible {
      width: 50px;
      min-width: 50px;
      max-width: 50px;
      justify-content: center;
      border-color: #ced9cf;
      background: #fff;
      color: var(--admin-green);
      box-shadow: 0 7px 17px rgba(40, 68, 48, .1);
    }
    body.admin-mode .admin-nav-btn:hover .admin-nav-label,
    body.admin-mode .admin-nav-btn:focus-visible .admin-nav-label,
    body.admin-mode .admin-nav-btn.label-visible .admin-nav-label {
      max-width: 0;
      opacity: 0;
    }
    body.admin-mode .admin-nav-btn.active {
      border-color: var(--admin-green);
      background: var(--admin-green);
      color: #fff;
      box-shadow: 0 7px 16px rgba(41, 78, 56, .2);
    }
    body.admin-mode .admin-nav-btn.active::after {
      left: 12px;
      right: 12px;
      bottom: 4px;
      height: 2px;
      background: var(--admin-gold);
    }
    body.admin-mode .admin-kpis {
      gap: 9px;
      margin-bottom: 0;
    }
    body.admin-mode .admin-kpi,
    body.admin-mode .admin-kpi.accent {
      min-height: 94px;
      padding: 14px 15px;
      border-radius: 10px;
      box-shadow: none;
    }
    body.admin-mode .admin-kpi::before {
      width: 24px;
      height: 3px;
      margin-bottom: 11px;
    }
    body.admin-mode .admin-kpi-value {
      font-size: 1.52rem;
    }
    body.admin-mode .admin-kpi-label {
      font-size: .72rem;
    }
    body.admin-mode .admin-panel {
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 6px 18px rgba(37, 63, 39, .045);
      content-visibility: auto;
      contain-intrinsic-size: 420px;
    }
    body.admin-mode .admin-panel::before {
      top: 15px;
      bottom: 15px;
      width: 3px;
    }
    body.admin-mode .admin-panel-header {
      align-items: center;
      min-height: 0;
      padding-bottom: 12px;
      margin-bottom: 15px;
    }
    body.admin-mode .admin-panel h3 {
      font-size: 1.08rem;
    }
    body.admin-mode .admin-panel-header p,
    body.admin-mode .section-lead {
      max-width: 78ch;
      margin-top: 4px !important;
      font-size: .78rem;
      line-height: 1.42;
    }
    body.admin-mode .form-grid {
      gap: 12px 14px;
      margin-bottom: 12px;
    }
    body.admin-mode .form-group {
      margin-bottom: 13px;
    }
    body.admin-mode label {
      margin-bottom: 5px;
      font-size: .78rem;
      letter-spacing: .005em;
    }
    body.admin-mode input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    body.admin-mode textarea,
    body.admin-mode select {
      min-height: 40px;
      padding: 9px 11px;
      border-radius: 7px;
      font-size: .86rem;
    }
    body.admin-mode textarea {
      min-height: 82px;
    }
    body.admin-mode .uploader-note,
    body.admin-mode .helper-note {
      padding: 10px 11px !important;
      border-radius: 8px !important;
      font-size: .76rem;
      line-height: 1.42;
    }
    body.admin-mode .settings-tab-shell {
      position: static;
      top: auto;
      z-index: auto;
      margin: 0 0 12px;
      padding: 4px;
      border-radius: 9px;
      background: #f8fbf6;
      backdrop-filter: none;
    }
    body.admin-mode .settings-tab-track {
      gap: 5px;
    }
    body.admin-mode .settings-tab-btn {
      min-height: 36px;
      padding: 7px 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border-radius: 7px;
      font-size: .76rem;
    }
    body.admin-mode .settings-tab-btn > i {
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
      stroke-width: 2;
    }
    body.admin-mode .preview-card {
      padding: 13px;
      border-radius: 10px;
    }
    body.admin-mode #admin-section-branding .brand-preview,
    body.admin-mode #admin-section-companion .brand-preview,
    body.admin-mode #admin-section-developer .branding-preview-grid {
      position: static;
      top: auto;
      z-index: auto;
      max-height: none;
      overflow: visible;
      box-shadow: none;
      backdrop-filter: none;
    }
    body.admin-mode #admin-section-branding .brand-preview {
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 11px;
      margin-bottom: 10px;
      padding: 11px 13px;
    }
    body.admin-mode #admin-section-branding .brand-preview-logo {
      width: 48px;
      height: 48px;
      border-radius: 10px;
      font-size: 1.35rem;
    }
    body.admin-mode #admin-section-branding .brand-style-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 10px;
    }
    body.admin-mode #admin-section-branding .brand-style-btn {
      min-height: 46px;
      padding: 8px 10px;
      line-height: 1.25;
      font-size: .75rem;
    }
    body.admin-mode #admin-section-branding .branding-preview-grid,
    body.admin-mode #admin-section-developer .branding-preview-grid {
      align-items: start;
      gap: 10px;
      margin-bottom: 12px;
      padding-bottom: 0;
      background: transparent;
    }
    body.admin-mode #admin-section-branding .branding-preview-grid > *,
    body.admin-mode #admin-section-developer .branding-preview-grid > *,
    body.admin-mode .form-grid > *,
    body.admin-mode .loader-controls-grid > * {
      min-width: 0;
    }
    body.admin-mode #admin-section-branding .preview-label,
    body.admin-mode #admin-section-developer .preview-label {
      margin-bottom: 7px;
      font-size: .68rem;
    }
    body.admin-mode #admin-section-branding .mini-hero-preview {
      min-height: 126px;
      padding: 16px;
    }
    body.admin-mode #admin-section-developer .loader-preview-surface {
      min-height: 250px;
      padding: 16px;
      border-radius: 18px;
    }
    body.admin-mode #admin-section-developer .loader-preview-card {
      width: min(100%, 340px);
      transform: scale(.9);
    }
    body.admin-mode #admin-section-developer .loader-preview-footnote {
      margin-top: 8px;
      font-size: .75rem;
      line-height: 1.4;
    }
    body.admin-mode #admin-section-developer .loader-controls-grid {
      grid-template-columns: repeat(4, minmax(150px, 1fr));
      grid-auto-rows: max-content;
      align-items: start;
      align-content: start;
      gap: 10px;
      margin-top: 12px;
    }
    body.admin-mode #admin-section-developer .loader-controls-grid > * {
      align-self: start;
      height: auto;
    }
    body.admin-mode #admin-section-developer .loader-upload-card {
      grid-column: span 2;
      padding: 12px;
      border-radius: 10px;
      background: #f8fbf6;
    }
    body.admin-mode #admin-section-developer .loader-upload-card label {
      display: block;
      margin-bottom: 7px;
    }
    body.admin-mode #admin-section-developer .loader-upload-card input[type="file"] {
      min-height: 38px;
      padding: 6px;
      font-size: .74rem;
    }
    body.admin-mode #admin-section-developer .loader-upload-card .loader-image-status {
      min-height: 0;
      margin-top: 7px;
      font-size: .7rem;
      line-height: 1.35;
    }
    body.admin-mode #admin-section-developer .loader-upload-card .btn-secondary {
      width: auto !important;
      min-height: 34px;
      margin-top: 8px !important;
      padding: 7px 10px;
      font-size: .72rem;
    }
    body.admin-mode #admin-section-developer .loader-upload-card .mini-note {
      margin-top: 8px !important;
      font-size: .68rem;
      line-height: 1.4;
    }
    body.admin-mode #admin-section-developer .loader-controls-grid > .form-group:has(input[type="color"]) {
      align-self: start;
      min-height: 48px;
      height: auto;
      padding: 7px 8px;
    }
    body.admin-mode #admin-section-developer .loader-controls-grid > .form-group:has(input[type="range"]) {
      grid-column: span 2;
      min-height: 0;
      margin: 0;
      padding: 10px;
      border: 1px solid var(--workspace-line);
      border-radius: 10px;
      background: #f8fbf6;
    }
    body.admin-mode .mini-reader-preview {
      border-radius: 10px;
      box-shadow: none;
    }
    body.admin-mode .settings-group[data-branding-tab="colors"].active {
      display: grid;
      grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
      align-items: start;
      gap: 10px 14px;
    }
    body.admin-mode .settings-group[data-branding-tab="colors"] > .section-lead,
    body.admin-mode .settings-group[data-branding-tab="colors"] > .form-grid:first-of-type {
      grid-column: 1 / -1;
    }
    body.admin-mode .settings-group[data-branding-tab="colors"] > .preview-card {
      grid-column: 1;
      grid-row: 3 / span 12;
      position: sticky;
      top: 82px;
      z-index: 4;
      margin: 0 !important;
    }
    body.admin-mode .settings-group[data-branding-tab="colors"] > .form-grid:not(:first-of-type),
    body.admin-mode .settings-group[data-branding-tab="colors"] > .form-group,
    body.admin-mode .settings-group[data-branding-tab="colors"] > .uploader-note {
      grid-column: 2;
    }
    body.admin-mode .settings-group[data-branding-tab="colors"] .preview-title-format-group {
      grid-template-columns: 1fr !important;
      align-items: start !important;
    }
    body.admin-mode .settings-group[data-branding-tab="colors"] .preview-title-format-group input {
      width: 100%;
      min-width: 0;
    }
    body.admin-mode .settings-group[data-branding-tab="colors"] .preview-title-format-group .field-hint {
      margin-top: 4px;
      color: var(--admin-muted);
      font-size: .7rem;
      line-height: 1.35;
    }
    body.admin-mode .admin-actions {
      gap: 8px;
    }
    body.admin-mode .admin-actions > button,
    body.admin-mode .admin-actions > a {
      min-height: 38px;
      padding: 8px 12px;
      font-size: .78rem;
    }
    .admin-back-top {
      position: fixed;
      right: 20px;
      bottom: 20px;
      z-index: 80;
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 1px solid rgba(255,255,255,.25);
      border-radius: 10px;
      background: var(--admin-green, #294e38);
      color: #fff;
      box-shadow: 0 12px 24px rgba(27, 54, 37, .22);
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    }
    body.admin-mode .admin-back-top.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .admin-back-top > i,
    .admin-back-top > svg {
      width: 20px;
      height: 20px;
    }
    @media (min-width: 1180px) {
      body.admin-mode #admin-section-inbox,
      body.admin-mode #admin-section-reviews {
        grid-column: span 6;
      }
    }
    @media (max-width: 1180px) {
      .archive-portal {
        gap: 18px;
        padding: 24px;
      }
      .archive-gateways-head h2 {
        font-size: clamp(1.5rem, 3.3vw, 2.2rem);
      }
      .archive-gateways-head p {
        font-size: 0.94rem;
        line-height: 1.55;
      }
      .archive-enter-action {
        min-height: 42px;
        padding: 10px 14px;
        font-size: 0.8rem;
      }
      .music-section-head {
        align-items: flex-start;
        flex-wrap: wrap;
        margin-bottom: 18px;
      }
      .music-surprise-btn {
        min-height: 42px;
        padding: 10px 13px;
        font-size: 0.78rem;
      }
      .music-feature {
        min-height: 0;
      }
      .music-feature-copy {
        padding: 26px;
      }
      .music-feature-copy h3 {
        font-size: clamp(1.4rem, 3vw, 2.2rem);
      }
      .music-feature-copy p {
        font-size: 0.92rem;
        line-height: 1.55;
      }
    }
    @media (max-width: 1100px) {
      .archive-gateway-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
      }
      .connected-experience-shell {
        grid-template-columns: 1fr;
      }
      .connected-experience-path {
        grid-template-columns: repeat(2, minmax(0,1fr));
      }
    }
    @media (max-width: 900px) {
      body.admin-mode #admin-view.show {
        gap: 13px;
        padding: 18px 12px 56px;
      }
      body.admin-mode .admin-command {
        grid-template-columns: 1fr;
      }
      body.admin-mode .admin-mini-stack {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      body.admin-mode .admin-mini-stack .btn-secondary {
        grid-column: 1 / -1;
      }
      body.admin-mode .admin-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      body.admin-mode .admin-kpi:last-child {
        grid-column: 1 / -1;
      }
      body.admin-mode .admin-nav-mobile-context {
        display: flex;
      }
      body.admin-mode .admin-nav-scroll {
        display: grid;
      }
    }
    @media (max-width: 760px) {
      .preview-image-zoom-controls { bottom: 10px; }
      body.admin-mode .admin-header {
        align-items: stretch;
      }
      body.admin-mode .admin-header > .flex {
        width: 100%;
      }
      body.admin-mode .admin-header > .flex > button {
        flex: 1 1 0;
      }
      body.admin-mode .admin-command {
        padding: 15px;
      }
      body.admin-mode .admin-command-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row;
        grid-auto-columns: auto;
        width: 100%;
        overflow: visible;
      }
      body.admin-mode .admin-command .admin-quick-btn,
      body.admin-mode .admin-command .admin-advanced-toggle {
        width: 100%;
        min-width: 0;
        justify-content: center;
      }
      body.admin-mode .admin-command-actions .mobile-quick-hide {
        display: none !important;
      }
      body.admin-mode .admin-command .admin-advanced-toggle {
        grid-column: 1 / -1;
      }
      body.admin-mode .admin-nav-pane {
        top: 5px;
        margin-inline: -3px;
      }
      body.admin-mode .admin-nav-swipe-hint,
      body.admin-mode .admin-search-shortcut {
        display: none;
      }
      body.admin-mode .admin-nav-btn {
        width: 50px;
        min-width: 50px;
        max-width: 50px;
        padding: 0 13px;
      }
      body.admin-mode .admin-nav-btn .admin-nav-label {
        display: inline !important;
      }
      body.admin-mode .admin-nav-btn.label-visible {
        width: auto;
        max-width: 170px;
      }
      body.admin-mode .admin-nav-btn.label-visible .admin-nav-label {
        max-width: 112px;
        opacity: 1;
      }
      body.admin-mode .admin-panel {
        padding: 16px 14px;
      }
      body.admin-mode .admin-panel-header {
        align-items: flex-start;
      }
      body.admin-mode .form-grid {
        grid-template-columns: 1fr;
      }
      body.admin-mode .settings-group[data-branding-tab="colors"].active {
        display: block;
      }
      body.admin-mode .settings-group[data-branding-tab="colors"] > .preview-card {
        position: static;
        margin-bottom: 12px !important;
      }
      body.admin-mode #admin-section-branding .brand-style-grid,
      body.admin-mode #admin-section-developer .branding-preview-grid {
        grid-template-columns: 1fr;
      }
      body.admin-mode #admin-section-branding {
        display: flex;
        flex-direction: column;
      }
      body.admin-mode #admin-section-branding .admin-panel-header { order: 0; }
      body.admin-mode #admin-section-branding .brand-preview { order: 1; }
      body.admin-mode #admin-section-branding .settings-tab-shell { order: 2; }
      body.admin-mode #admin-section-branding .brand-style-grid { order: 3; }
      body.admin-mode #admin-section-branding .branding-preview-grid { order: 4; }
      body.admin-mode #admin-section-branding #settings-form { order: 5; }
      body.admin-mode #admin-section-branding .brand-style-grid,
      body.admin-mode #admin-section-branding .branding-preview-grid {
        display: flex;
        gap: 9px;
        overflow-x: auto;
        padding: 2px 2px 8px;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
      }
      body.admin-mode #admin-section-branding .brand-style-btn {
        flex: 0 0 230px;
        scroll-snap-align: start;
      }
      body.admin-mode #admin-section-branding .branding-preview-grid > .preview-card {
        flex: 0 0 calc(100% - 22px);
        scroll-snap-align: start;
      }
      body.admin-mode #admin-section-developer .loader-controls-grid {
        grid-template-columns: 1fr;
      }
      body.admin-mode #admin-section-developer .loader-upload-card,
      body.admin-mode #admin-section-developer .loader-controls-grid > .form-group:has(input[type="range"]) {
        grid-column: auto;
      }
      body.admin-mode #admin-section-developer .loader-preview-surface {
        min-height: 220px;
        padding: 12px;
      }
      .admin-back-top {
        right: 14px;
        bottom: 14px;
        width: 42px;
        height: 42px;
      }
    }

    /* PO-OPO RESPONSIVE ASSISTANT SHELL */
    .chat-panel {
      width: min(400px, calc(100vw - 24px));
      height: min(590px, calc(100dvh - 24px));
      max-height: none;
      border-radius: 20px;
      display: flex;
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      transform: translateY(12px) scale(0.985);
      transform-origin: bottom right;
      transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1), left 220ms ease, top 220ms ease;
      contain: layout paint;
    }
    .chat-panel.show {
      display: flex;
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }
    .chat-head {
      min-height: 64px;
      padding: 10px 12px;
      gap: 8px;
      cursor: default;
      touch-action: auto;
    }
    .chat-persona { gap: 9px; min-width: 0; }
    .chat-head .bot-avatar {
      width: 42px;
      height: 42px;
      border-radius: 13px;
    }
    .chat-title { font-size: 0.98rem; line-height: 1.15; }
    .chat-subtitle {
      max-width: 205px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 0.74rem;
    }
    .bot-status { margin-top: 2px; font-size: 0.69rem; }
    .bot-status-dot { width: 7px; height: 7px; box-shadow: none; }
    .chat-window-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 3px;
      flex: 0 0 auto;
      flex-wrap: nowrap;
    }
    .chat-window-btn,
    .chat-close {
      width: 36px;
      height: 36px;
      display: inline-grid;
      place-items: center;
      border: 0;
      border-radius: 9px;
      padding: 0;
      background: transparent;
      color: var(--companion-panel-header-text, #fffaf0);
      cursor: pointer;
      transition: background 150ms ease, transform 150ms ease;
    }
    .chat-window-btn:hover,
    .chat-close:hover { background: rgba(255,255,255,0.14); }
    .chat-window-btn:active,
    .chat-close:active { transform: scale(0.94); }
    .chat-window-btn:focus-visible,
    .chat-close:focus-visible,
    .chat-followup-btn:focus-visible,
    .chat-chip:focus-visible,
    .chat-form input:focus-visible,
    .chat-form button:focus-visible,
    .chat-edge-tab:focus-visible {
      outline: 3px solid #f5cf5b;
      outline-offset: 2px;
    }
    .chat-helper-strip {
      flex: 0 0 auto;
      padding: 8px 12px;
      font-size: 0.76rem;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .chat-messages {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
      padding: 12px;
      gap: 9px;
      scroll-behavior: smooth;
    }
    .chat-bubble {
      width: fit-content;
      max-width: 88%;
      padding: 10px 11px;
      border-radius: 13px;
      font-size: 0.88rem;
      line-height: 1.48;
      box-shadow: none;
    }
    .chat-bubble.bot { justify-self: start; }
    .chat-message-tools {
      display: flex;
      gap: 6px;
      margin-top: 6px;
      opacity: 0.72;
    }
    .chat-copy-answer {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border: 0;
      background: transparent;
      color: currentColor;
      padding: 3px 2px;
      font: inherit;
      font-size: 0.7rem;
      font-weight: 850;
      cursor: pointer;
    }
    .chat-copy-answer i { width: 13px; height: 13px; }
    .chat-suggestions {
      flex: 0 0 auto;
      border-top: 1px solid color-mix(in srgb, var(--companion-panel-border, #d8d0b8) 74%, transparent 26%);
      background: color-mix(in srgb, var(--companion-panel-bg, #fffaf0) 94%, var(--companion-helper-bg, #f8f1d6) 6%);
    }
    .chat-quick,
    .chat-followups {
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      padding: 8px 12px;
      gap: 7px;
    }
    .chat-quick::-webkit-scrollbar,
    .chat-followups::-webkit-scrollbar { display: none; }
    .chat-chip,
    .chat-followup-btn {
      flex: 0 0 auto;
      min-height: 36px;
      padding: 7px 10px;
      font-size: 0.76rem;
      white-space: nowrap;
    }
    .chat-followups { border-top: 0; padding-top: 0; }
    .chat-context-note { padding: 0 12px 8px; font-size: 0.67rem; }
    .chat-panel.has-conversation .chat-helper-strip,
    .chat-panel.has-conversation .chat-quick,
    .chat-panel.has-conversation .chat-context-note { display: none; }
    .chat-panel.has-conversation .chat-followups { padding-top: 8px; }
    .chat-form {
      flex: 0 0 auto;
      grid-template-columns: minmax(0, 1fr) auto !important;
      gap: 7px;
      padding: 9px 10px max(9px, env(safe-area-inset-bottom));
    }
    .chat-form input {
      min-width: 0;
      min-height: 42px;
      padding: 9px 11px;
      font-size: 0.9rem;
    }
    .chat-form button {
      min-width: 46px;
      min-height: 42px;
      padding: 0 12px;
    }
    .chat-result-list {
      width: min(100%, 320px);
      display: grid;
      gap: 7px;
      justify-self: start;
    }
    .chat-result-card {
      width: 100%;
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr) auto;
      align-items: center;
      gap: 9px;
      padding: 8px;
      border: 1px solid var(--companion-panel-border, #d8d0b8);
      border-radius: 11px;
      background: var(--companion-panel-bg, #fffaf0);
      color: var(--companion-bot-text, #26311f);
      text-align: left;
      font: inherit;
      cursor: pointer;
    }
    .chat-result-card:hover { border-color: var(--companion-panel-header-bg, #36573a); }
    .chat-result-thumb {
      width: 40px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 7px;
      overflow: hidden;
      background: var(--companion-helper-bg, #f8f1d6);
      font-size: 1.2rem;
    }
    .chat-result-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .chat-result-title { display: block; font-size: 0.78rem; font-weight: 900; line-height: 1.25; }
    .chat-result-meta { display: block; color: #66725d; font-size: 0.66rem; font-weight: 750; margin-top: 3px; }
    .chat-result-action { display: block; margin-top: 4px; color: var(--companion-panel-header-bg, #36573a); font-size: 0.64rem; font-weight: 900; }
    .chat-result-thumb { font-size: 0.66rem; font-weight: 900; letter-spacing: 0; }
    .chat-result-card > i { width: 16px; height: 16px; }
    .chat-result-kind {
      display: inline-flex;
      width: fit-content;
      margin-bottom: 2px;
      padding: 2px 6px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--companion-helper-bg, #f8f1d6) 84%, white 16%);
      color: var(--companion-panel-header-bg, #36573a);
      font-size: 0.58rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0;
    }
    .poopo-journey {
      width: min(100%, 320px);
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 8px;
      border: 1px dashed var(--companion-panel-border, #d8d0b8);
      border-radius: 12px;
      background: color-mix(in srgb, var(--companion-helper-bg, #f8f1d6) 66%, transparent 34%);
    }
    .poopo-journey-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-height: 34px;
      max-width: 100%;
      padding: 6px 8px;
      border: 1px solid var(--companion-panel-border, #d8d0b8);
      border-radius: 999px;
      background: var(--companion-panel-bg, #fffaf0);
      color: var(--companion-bot-text, #26311f);
      font-size: 0.68rem;
      font-weight: 850;
      cursor: pointer;
    }
    .poopo-journey-btn i { width: 14px; height: 14px; flex: 0 0 auto; }
    .poopo-journey-btn span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    body.chat-open .chat-launcher-text { opacity: 0; transform: translateY(-50%) translateX(8px); }
    .chat-launcher.has-unread::after { background: #f4c430; }
    .companion-dismiss-target {
      position: fixed;
      left: 50%;
      bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px));
      width: 68px;
      height: 68px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgba(35, 49, 37, 0.88);
      color: #fff;
      border: 2px solid rgba(255,255,255,0.7);
      box-shadow: 0 18px 44px rgba(0,0,0,0.28);
      z-index: 96;
      opacity: 0;
      visibility: hidden;
      transform: translate(-50%, 18px) scale(0.78);
      pointer-events: none;
      transition: opacity 160ms ease, transform 180ms cubic-bezier(0.22,1,0.36,1), background 160ms ease;
    }
    .companion-dismiss-target.show {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, 0) scale(1);
    }
    .companion-dismiss-target.active {
      background: #b83c3c;
      transform: translate(-50%, 0) scale(1.14);
    }
    .companion-dismiss-target i { width: 26px; height: 26px; }
    .chat-edge-tab {
      position: fixed;
      right: max(8px, calc(env(safe-area-inset-right) + 4px));
      bottom: max(108px, calc(env(safe-area-inset-bottom) + 72px));
      top: auto;
      z-index: 69;
      display: none;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 48px;
      padding: 0;
      border: 1px solid color-mix(in srgb, var(--companion-float-border, #36573a) 86%, white 14%);
      border-radius: 16px;
      background: color-mix(in srgb, var(--companion-float-bg, #fffaf0) 94%, white 6%);
      color: var(--companion-float-border, #36573a);
      box-shadow: 0 10px 22px rgba(20,35,21,0.12);
      opacity: 0.94;
      font: inherit;
      font-size: 0.75rem;
      font-weight: 900;
      cursor: pointer;
      transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
    }
    .chat-edge-tab:hover {
      transform: translateY(-1px);
      box-shadow: 0 14px 26px rgba(20,35,21,0.16);
      opacity: 1;
    }
    .chat-edge-tab.show { display: inline-flex; }
    .chat-edge-tab i { width: 18px; height: 18px; }
    .chat-edge-tab span {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    @media (max-width: 640px) {
      body.chat-open .chat-launcher { opacity: 0; pointer-events: none; }
      .chat-panel {
        width: calc(100vw - 16px);
        height: min(78dvh, 640px);
        border-radius: 18px 18px 10px 10px;
        transform-origin: bottom center;
      }
      .chat-head { min-height: 58px; padding: 8px 10px; }
      .chat-head .bot-avatar { width: 38px; height: 38px; border-radius: 11px; }
      .chat-subtitle { display: none; }
      .chat-window-actions { gap: 2px; }
      .chat-window-btn,
      .chat-close { width: 34px; height: 34px; }
      .chat-helper-strip { display: none !important; }
      .chat-messages { padding: 10px; }
      .chat-bubble { max-width: 91%; font-size: 0.84rem; }
      .chat-form button span { display: none; }
      .chat-form button { width: 44px; min-width: 44px; padding: 0; }
    }

    @media (orientation: landscape) and (max-height: 560px) {
      .chat-panel {
        width: calc(100vw - 12px);
        height: calc(100dvh - 12px);
        border-radius: 14px;
      }
      .chat-head { min-height: 50px; padding: 6px 9px; }
      .chat-head .bot-avatar { width: 36px; height: 36px; }
      .chat-subtitle,
      .chat-helper-strip,
      .chat-context-note { display: none !important; }
      .chat-window-actions { gap: 2px; }
      .chat-quick,
      .chat-followups { padding: 6px 9px; }
      .chat-chip,
      .chat-followup-btn { min-height: 32px; padding: 5px 9px; }
      .chat-form { padding-top: 6px; }
    }

    /* Immersive storybook cards: cover-first, compact, and readable on touch screens. */
    body:not(.admin-mode) #stories-container.content-grid {
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      align-items: start;
      gap: 24px;
    }
    body:not(.admin-mode) .storybook-card {
      display: block !important;
      position: relative;
      isolation: isolate;
      aspect-ratio: 4 / 5;
      min-height: 0 !important;
      height: auto !important;
      padding: 0 !important;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.44);
      border-radius: 20px;
      background: #203124;
      color: #fffdf4;
      box-shadow: 0 24px 54px rgba(26,49,30,.16);
      transform: translateZ(0);
      transition: transform .28s cubic-bezier(.2,.75,.25,1), box-shadow .28s ease, border-color .28s ease;
    }
    body:not(.admin-mode) .storybook-card::before,
    body:not(.admin-mode) .storybook-card::after { display: none !important; }
    body:not(.admin-mode) .storybook-card:hover {
      transform: translateY(-7px) scale(1.008);
      border-color: rgba(255,255,255,.7);
      box-shadow: 0 32px 72px rgba(23,46,28,.24);
    }
    body:not(.admin-mode) .storybook-card:active { transform: translateY(1px) scale(.99); }
    body:not(.admin-mode) .storybook-card .story-cover {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100% !important;
      min-height: 100% !important;
      max-height: none !important;
      margin: 0 !important;
      border: 0;
      border-radius: inherit !important;
      background: #dfe8d9;
      box-shadow: none !important;
    }
    body:not(.admin-mode) .storybook-card .story-cover::before,
    body:not(.admin-mode) .storybook-card .story-cover::after { display: none !important; }
    body:not(.admin-mode) .storybook-card .story-cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      transform: scale(1.002);
      transition: transform .55s cubic-bezier(.2,.75,.25,1), filter .35s ease;
    }
    body:not(.admin-mode) .storybook-card:hover .story-cover img {
      transform: scale(1.045);
      filter: saturate(1.03) contrast(1.02);
    }
    body:not(.admin-mode) .storybook-card .story-cover-placeholder {
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--green-1) 88%, #26311f 12%), #1f3424);
      color: #fff6ce;
      font-size: 4rem;
    }
    .storybook-vignette {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(9,19,12,.08) 0%, rgba(9,19,12,.02) 28%, rgba(9,19,12,.46) 56%, rgba(9,19,12,.98) 100%),
        linear-gradient(90deg, rgba(9,19,12,.16), transparent 34%);
    }
    .storybook-vignette::after {
      content: '';
      position: absolute;
      inset: 0;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: inherit;
      box-shadow: inset 0 -80px 90px rgba(0,0,0,.12);
    }
    body:not(.admin-mode) .storybook-card .storybook-badges {
      position: absolute;
      top: 14px;
      left: 14px;
      right: 14px;
      z-index: 3;
      pointer-events: none;
    }
    body:not(.admin-mode) .storybook-card .resource-badge-row {
      margin: 0;
      gap: 6px;
    }
    body:not(.admin-mode) .storybook-card .resource-badge {
      min-height: 26px;
      padding: 6px 9px;
      border-color: rgba(255,255,255,.42);
      background: rgba(255,253,244,.9);
      color: #26311f;
      box-shadow: 0 8px 24px rgba(13,26,16,.16);
      backdrop-filter: blur(12px);
    }
    body:not(.admin-mode) .storybook-card .resource-badge.featured {
      background: #fff0b8;
      color: #564300;
      border-color: #f6d86e;
    }
    body:not(.admin-mode) .storybook-card .story-body {
      position: absolute;
      inset: auto 0 0;
      z-index: 2;
      min-height: 52%;
      padding: clamp(18px, 2.2vw, 24px);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      overflow: visible;
      color: #fffdf4;
    }
    body:not(.admin-mode) .storybook-card .story-kicker {
      display: none;
    }
    body:not(.admin-mode) .storybook-card .story-title {
      margin: 0 0 8px;
      color: #ffffff;
      font-family: var(--heading-font);
      font-size: clamp(1.2rem, 2vw, 1.48rem);
      font-weight: 800;
      line-height: 1.17;
      letter-spacing: 0;
      text-shadow: 0 3px 18px rgba(0,0,0,.64);
      -webkit-line-clamp: 2;
    }
    body:not(.admin-mode) .storybook-card .story-desc {
      display: -webkit-box;
      overflow: hidden;
      margin: 0 0 11px;
      color: rgba(255,255,255,.82);
      font-size: .78rem;
      font-weight: 560;
      line-height: 1.42;
      text-shadow: 0 2px 12px rgba(0,0,0,.55);
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    body:not(.admin-mode) .storybook-card .story-footer {
      margin-top: 0;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: nowrap;
    }
    body:not(.admin-mode) .storybook-card .storybook-credit-block { min-width: 0; }
    body:not(.admin-mode) .storybook-card .story-author {
      color: #fffdf4;
      overflow: hidden;
      font-size: .72rem;
      font-weight: 760;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-shadow: 0 2px 10px rgba(0,0,0,.6);
    }
    body:not(.admin-mode) .storybook-card .credit-line {
      margin-top: 3px;
      color: rgba(255,255,255,.7);
      font-size: .69rem;
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .storybook-meta-row {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 7px;
      margin-top: 6px;
      color: rgba(255,255,255,.74);
      font-size: .64rem;
      font-weight: 720;
    }
    .storybook-meta-row span { display: inline-flex; align-items: center; gap: 5px; }
    .storybook-meta-row i { width: 13px; height: 13px; }
    body:not(.admin-mode) .storybook-card .storybook-meta-row .content-views {
      display: inline-flex !important;
      margin: 0;
      overflow: hidden;
      color: rgba(255,255,255,.78) !important;
      font-size: inherit;
      font-weight: inherit;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .library-card-meta-dot { padding: 0 2px; color: rgba(255,255,255,.52); }
    body:not(.admin-mode) .storybook-card .read-more {
      flex: 0 0 auto;
      min-height: 38px;
      padding: 9px 12px;
      border: 1px solid rgba(255,255,255,.42);
      border-radius: 999px;
      background: rgba(255,253,244,.94);
      color: #26311f;
      box-shadow: 0 10px 24px rgba(0,0,0,.2);
      font-size: .74rem;
      white-space: nowrap;
      backdrop-filter: blur(12px);
    }
    body:not(.admin-mode) .storybook-card:hover .read-more {
      transform: translateY(-1px);
      background: #ffffff;
      box-shadow: 0 14px 30px rgba(0,0,0,.24);
    }
    body:not(.admin-mode) .video-story-card { height: auto; }
    @media (max-width: 820px) {
      body:not(.admin-mode) #stories-container.content-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }
      body:not(.admin-mode) .storybook-card .story-body { padding: 18px; }
      body:not(.admin-mode) .storybook-card .story-desc,
      body:not(.admin-mode) .storybook-card .credit-line,
      body:not(.admin-mode) .storybook-card .storybook-meta-row span:not(.content-views) { display: none !important; }
      body:not(.admin-mode) .storybook-card .read-more {
        width: 38px;
        min-width: 38px;
        padding: 0;
        font-size: 0;
      }
      body:not(.admin-mode) .storybook-card .read-more i { width: 17px; height: 17px; }
    }
    @media (max-width: 560px) {
      body:not(.admin-mode) #stories-container.content-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }
      body:not(.admin-mode) .storybook-card {
        aspect-ratio: 4 / 5;
        max-height: none;
        border-radius: 16px;
      }
      body:not(.admin-mode) .storybook-card .story-body {
        min-height: 58%;
        padding: 12px;
      }
      body:not(.admin-mode) .storybook-card .storybook-badges {
        top: 9px;
        left: 9px;
        right: 48px;
      }
      body:not(.admin-mode) .storybook-card .resource-badge {
        min-height: 22px;
        padding: 4px 7px;
        font-size: .56rem;
      }
      body:not(.admin-mode) .storybook-card .resource-badge:not(.type) { display: none; }
      body:not(.admin-mode) .storybook-card .story-kicker,
      body:not(.admin-mode) .storybook-card .story-desc,
      body:not(.admin-mode) .storybook-card .credit-line { display: none !important; }
      body:not(.admin-mode) .storybook-card .story-title {
        margin-bottom: 6px;
        font-size: clamp(.84rem, 4.2vw, 1rem);
        line-height: 1.16;
        -webkit-line-clamp: 2;
      }
      body:not(.admin-mode) .storybook-card .story-footer { align-items: flex-end; gap: 6px; }
      body:not(.admin-mode) .storybook-card .story-author {
        max-width: 100%;
        overflow: hidden;
        font-size: .64rem;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      body:not(.admin-mode) .storybook-card .storybook-meta-row { margin-top: 3px; font-size: .6rem; }
      body:not(.admin-mode) .storybook-card .storybook-meta-row i { width: 11px; height: 11px; }
      body:not(.admin-mode) .storybook-card .read-more {
        width: 34px;
        min-width: 34px;
        min-height: 34px;
      }
      body:not(.admin-mode) .storybook-card .story-footer { align-items: center; }
    }

    /* Mobile library: a compact curated glide above the complete two-column shelf. */
    .mobile-library-shelf { display: none; }
    .mobile-library-overview,
    .mobile-all-library-heading { display: none; }
    .mobile-library-shelf[hidden] { display: none !important; }
    @media (max-width: 820px) {
      body:not(.admin-mode) .mobile-library-shelf {
        display: block;
        margin: 4px -18px 22px;
        padding: 15px 0 2px;
        border-block: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
        background: color-mix(in srgb, var(--white) 72%, transparent);
      }
      body:not(.admin-mode) .mobile-library-shelf-head {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 14px;
        padding: 0 18px 11px;
      }
      body:not(.admin-mode) #stories.section {
        padding-top: 28px;
        padding-bottom: 42px;
      }
      body:not(.admin-mode) .navbar-inner {
        min-height: 0;
        gap: 8px;
        padding: 10px 12px 9px;
      }
      body:not(.admin-mode) .navbar-brand {
        gap: 9px;
        font-size: 0.98rem;
        max-width: 100%;
      }
      body:not(.admin-mode) .navbar-brand-icon {
        width: 40px;
        height: 40px;
      }
      body:not(.admin-mode) .nav-links {
        gap: 8px;
        padding: 2px 2px 6px;
      }
      body:not(.admin-mode) .nav-link {
        min-height: 34px;
        padding: 6px 12px;
        font-size: .8rem;
      }
      body:not(.admin-mode) #stories .section-title { margin-bottom: 6px; }
      body:not(.admin-mode) #stories .section-subtitle { display: none; }
      body:not(.admin-mode) #stories .content-shelf-controls {
        gap: 8px;
        margin-bottom: 10px;
      }
      body:not(.admin-mode) #stories .shelf-search-row { display: block; }
      body:not(.admin-mode) #stories-result-summary { display: none; }
      body:not(.admin-mode) #stories > .content-shelf-controls > #stories-insights { display: none; }
      body:not(.admin-mode) .mobile-library-overview {
        display: block;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: color-mix(in srgb, var(--white) 88%, transparent);
      }
      body:not(.admin-mode) .mobile-library-overview summary {
        min-height: 40px;
        padding: 9px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        color: var(--green-1);
        font-size: .76rem;
        font-weight: 850;
        cursor: pointer;
        list-style: none;
      }
      body:not(.admin-mode) .mobile-library-overview summary::-webkit-details-marker { display: none; }
      body:not(.admin-mode) .mobile-library-overview summary i { width: 16px; height: 16px; }
      body:not(.admin-mode) .mobile-library-overview-summary {
        display: inline-flex;
        align-items: center;
        gap: 7px;
      }
      body:not(.admin-mode) .mobile-library-overview-count {
        color: #64705d;
        font-size: .68rem;
        font-weight: 760;
      }
      body:not(.admin-mode) .mobile-library-overview[open] summary { border-bottom: 1px solid var(--border); }
      body:not(.admin-mode) #mobile-stories-insights {
        display: flex;
        gap: 7px;
        overflow-x: auto;
        padding: 10px;
        scrollbar-width: none;
      }
      body:not(.admin-mode) #mobile-stories-insights::-webkit-scrollbar { display: none; }
      body:not(.admin-mode) #mobile-stories-insights .shelf-pill { flex: 0 0 auto; padding: 7px 9px; }
      body:not(.admin-mode) .mobile-library-shelf-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 3px;
        color: var(--green-1);
        font-size: .68rem;
        font-weight: 900;
        text-transform: uppercase;
      }
      body:not(.admin-mode) .mobile-library-shelf-title {
        margin: 0;
        color: var(--dark);
        font-family: var(--heading-font);
        font-size: 1.02rem;
        line-height: 1.2;
      }
      body:not(.admin-mode) .mobile-library-shelf-count {
        flex: 0 0 auto;
        padding: 6px 9px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--white);
        color: #64705d;
        font-size: .67rem;
        font-weight: 800;
      }
      body:not(.admin-mode) .mobile-library-shelf-tabs {
        display: flex;
        gap: 7px;
        overflow-x: auto;
        padding: 0 18px 10px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      body:not(.admin-mode) .mobile-library-shelf-tabs::-webkit-scrollbar { display: none; }
      body:not(.admin-mode) .mobile-library-shelf-tab {
        flex: 0 0 auto;
        min-height: 34px;
        padding: 7px 10px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--white);
        color: #52614a;
        font: inherit;
        font-size: .7rem;
        font-weight: 820;
        cursor: pointer;
        scroll-snap-align: start;
      }
      body:not(.admin-mode) .mobile-library-shelf-tab.active {
        border-color: var(--green-1);
        background: var(--green-1);
        color: var(--white);
      }
      body:not(.admin-mode) .mobile-library-rail {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(142px, min(42vw, 210px));
        gap: 11px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding: 2px 18px 13px;
        scroll-padding-inline: 18px;
        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
        scrollbar-width: none;
        touch-action: pan-x pan-y;
        -webkit-overflow-scrolling: touch;
      }
      body:not(.admin-mode) .mobile-library-rail::-webkit-scrollbar { display: none; }
      body:not(.admin-mode) .mobile-library-pick {
        position: relative;
        isolation: isolate;
        aspect-ratio: 4 / 5;
        min-width: 0;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.72);
        border-radius: 16px;
        background: #dfe8d9;
        color: #fff;
        box-shadow: 0 14px 30px rgba(30,53,32,.15);
        cursor: pointer;
        scroll-snap-align: start;
        scroll-snap-stop: normal;
        transition: transform .18s ease, box-shadow .18s ease;
      }
      body:not(.admin-mode) .mobile-library-pick:active {
        transform: scale(.975);
        box-shadow: 0 8px 18px rgba(30,53,32,.13);
      }
      body:not(.admin-mode) .mobile-library-pick-cover,
      body:not(.admin-mode) .mobile-library-pick-cover img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }
      body:not(.admin-mode) .mobile-library-pick-cover img { object-fit: cover; object-position: center top; }
      body:not(.admin-mode) .mobile-library-pick-placeholder {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        background: var(--green-1);
        font-size: 2.4rem;
      }
      body:not(.admin-mode) .mobile-library-pick::after {
        content: '';
        position: absolute;
        z-index: 1;
        inset: 0;
        background: linear-gradient(to top, rgba(8,18,10,.9) 0%, rgba(8,18,10,.22) 58%, rgba(8,18,10,.02) 100%);
        pointer-events: none;
      }
      body:not(.admin-mode) .mobile-library-pick-type {
        position: absolute;
        z-index: 2;
        top: 9px;
        left: 9px;
        max-width: calc(100% - 18px);
        overflow: hidden;
        padding: 5px 7px;
        border-radius: 999px;
        background: rgba(255,253,244,.92);
        color: #29442d;
        font-size: .56rem;
        font-weight: 900;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
        backdrop-filter: blur(8px);
      }
      body:not(.admin-mode) .mobile-library-pick-copy {
        position: absolute;
        z-index: 2;
        inset: auto 0 0;
        padding: 13px;
      }
      body:not(.admin-mode) .mobile-library-pick-title {
        display: -webkit-box;
        overflow: hidden;
        margin: 0 0 5px;
        color: #fff;
        font-family: var(--heading-font);
        font-size: .9rem;
        font-weight: 800;
        line-height: 1.18;
        text-shadow: 0 2px 12px rgba(0,0,0,.5);
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      body:not(.admin-mode) .mobile-library-pick-credit {
        display: block;
        overflow: hidden;
        color: rgba(255,255,255,.78);
        font-size: .62rem;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      body:not(.admin-mode) .story-type-toggle,
      body:not(.admin-mode) #story-filters {
        scroll-padding-inline: 4px;
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      body:not(.admin-mode) .story-type-toggle::-webkit-scrollbar,
      body:not(.admin-mode) #story-filters::-webkit-scrollbar { display: none; }
      body:not(.admin-mode) .mobile-all-library-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 5px 0 12px;
      }
      body:not(.admin-mode) .mobile-all-library-heading strong {
        color: var(--dark);
        font-family: var(--heading-font);
        font-size: .96rem;
      }
      body:not(.admin-mode) .mobile-all-library-heading span {
        color: #687560;
        font-size: .68rem;
        font-weight: 760;
      }
      body:not(.admin-mode) .chat-launcher {
        width: 50px;
        height: 50px;
        padding: 5px;
      }
      body:not(.admin-mode) .chat-launcher > .companion-icon-shell {
        width: 38px;
        height: 38px;
      }
      body:not(.admin-mode) .chat-launcher-text { display: none !important; }
      body:not(.admin-mode) .companion-bubble { max-width: min(190px, calc(100vw - 84px)); font-size: .76rem; }
    }
    @media (max-width: 360px) {
      body:not(.admin-mode) .mobile-library-rail { grid-auto-columns: minmax(132px, 43vw); }
      body:not(.admin-mode) .storybook-card .story-body { padding: 10px; }
      body:not(.admin-mode) .storybook-card .story-title { font-size: .82rem; }
    }
    @media (max-width: 340px) {
      body:not(.admin-mode) #stories-container.content-grid { grid-template-columns: 1fr; }
      body:not(.admin-mode) .storybook-card { width: min(100%, 292px); margin-inline: auto; }
      body:not(.admin-mode) .storybook-card .story-title { font-size: 1rem; }
    }
    @media (max-width: 900px) and (max-height: 560px) and (orientation: landscape) {
      body:not(.admin-mode) #stories-container.content-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
      }
      body:not(.admin-mode) .mobile-library-rail { grid-auto-columns: minmax(138px, min(24vw, 190px)); }
      body:not(.admin-mode) .storybook-card .story-body { padding: 12px; }
      body:not(.admin-mode) .storybook-card .story-title { font-size: .9rem; }
      body:not(.admin-mode) .storybook-card .story-kicker,
      body:not(.admin-mode) .storybook-card .story-desc,
      body:not(.admin-mode) .storybook-card .credit-line { display: none !important; }
    }
    @media (prefers-reduced-motion: reduce) {
      body:not(.admin-mode) .storybook-card,
      body:not(.admin-mode) .storybook-card .story-cover img,
      body:not(.admin-mode) .storybook-card .read-more,
      body:not(.admin-mode) .mobile-library-pick { transition: none !important; }
      body:not(.admin-mode) .mobile-library-rail { scroll-behavior: auto; }
    }

    .skip-link {
      position: fixed;
      top: 10px;
      left: 10px;
      z-index: 10000;
      transform: translateY(-150%);
      padding: 10px 14px;
      border-radius: 8px;
      background: #ffffff;
      color: #193321;
      font-weight: 800;
      box-shadow: 0 12px 30px rgba(20,35,21,.22);
    }
    .skip-link:focus { transform: translateY(0); }
    .beta-brand-badge {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 3px 8px;
      border: 1px solid color-mix(in srgb, var(--mustard) 74%, #7b6412 26%);
      border-radius: 999px;
      background: #fff6cd;
      color: #604b05;
      font-family: var(--body-font);
      font-size: .65rem;
      font-weight: 900;
      letter-spacing: .06em;
      line-height: 1;
      text-transform: uppercase;
      box-shadow: 0 6px 16px rgba(70,56,8,.1);
    }
    .beta-notice-wrap { padding-top: 22px; padding-bottom: 8px; transition: opacity .18s ease, transform .18s ease; }
    .beta-notice {
      max-width: 1400px;
      margin: 0 auto;
      padding: 16px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      border: 1px solid #d9cc8e;
      border-radius: 16px;
      background: #fffaf0;
      box-shadow: 0 14px 34px rgba(50,70,44,.08);
    }
    .beta-notice-copy { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
    .beta-notice-icon {
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      background: #36573a;
      color: #fffdf4;
    }
    .beta-notice-copy strong { display: block; color: #243b28; font-size: .96rem; }
    .beta-notice-copy p { margin-top: 3px; color: #5c6956; font-size: .84rem; font-weight: 650; line-height: 1.5; }
    .beta-notice-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
    .beta-link-btn,
    .beta-dismiss-btn {
      min-height: 44px;
      border: 1px solid #c8d4c2;
      border-radius: 10px;
      background: #ffffff;
      color: #294c31;
      padding: 9px 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      font: inherit;
      font-size: .78rem;
      font-weight: 850;
      cursor: pointer;
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }
    .beta-link-btn:hover,
    .beta-dismiss-btn:hover { transform: translateY(-1px); border-color: #36573a; background: #f5faf2; }
    .beta-link-btn:focus-visible,
    .beta-dismiss-btn:focus-visible,
    .footer-beta-links button:focus-visible,
    .network-status button:focus-visible {
      outline: 3px solid #f4c430;
      outline-offset: 3px;
    }
    .beta-dismiss-btn { width: 44px; padding: 0; }
    .beta-status-modal { width: min(92vw, 720px); max-height: min(88dvh, 760px); overflow-y: auto; }
    .beta-status-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
    .beta-version-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
    .beta-version-chip { padding: 7px 10px; border-radius: 999px; background: #edf4e9; color: #36573a; font-size: .76rem; font-weight: 850; }
    .beta-status-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 18px 0; }
    .beta-status-card { padding: 16px; border: 1px solid #dbe4d5; border-radius: 12px; background: #f9fbf7; }
    .beta-status-card h3 { margin: 0 0 7px; font-size: .95rem; color: #294c31; }
    .beta-status-card p,
    .beta-status-card li { color: #63705d; font-size: .82rem; line-height: 1.55; }
    .beta-status-card ul { padding-left: 18px; }
    .beta-disabled {
      opacity: .58;
      cursor: not-allowed !important;
      filter: grayscale(.25);
    }
    .footer-beta-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
    .footer-beta-links button {
      border: 0;
      background: transparent;
      color: inherit;
      opacity: .82;
      font: inherit;
      font-size: .8rem;
      font-weight: 750;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .network-status {
      position: fixed;
      left: max(12px, env(safe-area-inset-left));
      bottom: max(12px, env(safe-area-inset-bottom));
      z-index: 180;
      max-width: min(360px, calc(100vw - 24px));
      padding: 10px 12px;
      display: none;
      align-items: center;
      gap: 9px;
      border: 1px solid #d5b56b;
      border-radius: 10px;
      background: #fff8e7;
      color: #4b3b11;
      box-shadow: 0 16px 40px rgba(30,35,22,.18);
      font-size: .78rem;
      font-weight: 750;
    }
    .network-status.show { display: flex; }
    .network-status button { margin-left: auto; border: 0; background: transparent; color: #294c31; font: inherit; font-weight: 900; cursor: pointer; }
    .toast[role="status"] { max-width: min(92vw, 520px); }
    .contact-form input,
    .contact-form select { min-height: 44px; padding: 10px 12px; }
    .contact-form textarea { min-height: 150px; padding: 12px; }
    #story-search{ min-height: 44px; }
    .chat-window-btn,
    .chat-close { min-width: 44px; min-height: 44px; }
    @media (max-width: 700px) {
.beta-notice { align-items: flex-start; }
      .beta-notice-actions { flex-wrap: wrap; justify-content: flex-end; }
      .beta-link-btn span { display: none; }
      .beta-link-btn { width: 44px; padding: 0; }
      .beta-status-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 360px) {
      .document-modal.mobile-preview-mode .document-title-wrap { padding-right: 46px; }
      .document-modal.mobile-preview-mode .document-actions { padding-right: 46px; }
      .document-modal.mobile-preview-mode .document-actions > .square {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 3;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .chat-panel,
      .chat-launcher,
      .companion-dismiss-target,
      .chat-window-btn,
      .chat-followup-btn { transition: none !important; animation: none !important; }
      .chat-messages { scroll-behavior: auto; }
      .beta-link-btn,
      .beta-dismiss-btn { transition: none !important; }
    }

    /* Phase 8A CMS studio foundation */

    /* Phase 8B-1 public editorial homepage layer. */
    body:not(.admin-mode) .phase8b-editorial-section {
      width: 100%;
      max-width: min(1180px, calc(100vw - 32px));
      margin-inline: auto;
      padding-block: clamp(34px, 5vw, 72px);
    }
    body:not(.admin-mode) #home.hero {
      min-height: min(74vh, 720px);
      display: grid;
      align-items: center;
      background:
        radial-gradient(circle at 18% 24%, rgba(226, 189, 98, .25), transparent 28%),
        linear-gradient(135deg, rgba(24, 49, 31, .96), rgba(66, 83, 31, .9)),
        var(--hero-bg-image, none);
      background-size: cover;
      background-position: center;
    }
    body:not(.admin-mode) #home .notice-panel {
      display: inline-flex;
      flex-direction: column;
      max-width: 620px;
      margin-inline: auto;
      border: 1px solid rgba(255, 246, 218, .22);
      background: rgba(255, 250, 235, .1);
      backdrop-filter: blur(8px);
    }
    body:not(.admin-mode) .phase8b-section-head {
      display: grid;
      gap: 10px;
      max-width: 760px;
      margin-bottom: 22px;
    }
    body:not(.admin-mode) .phase8b-split-head {
      max-width: none;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 18px;
    }
    body:not(.admin-mode) .phase8b-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      padding: 7px 12px;
      border-radius: 999px;
      border: 1px solid rgba(45, 88, 54, .14);
      background: #fffaf0;
      color: #38533a;
      font-weight: 900;
      font-size: .78rem;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    body:not(.admin-mode) .phase8b-eyebrow svg { width: 15px; height: 15px; }
    body:not(.admin-mode) .phase8b-section-head h2 {
      margin: 0;
      color: #233829;
      font-size: clamp(1.85rem, 4vw, 3.25rem);
      line-height: 1.05;
      font-weight: 800;
    }
    body:not(.admin-mode) .phase8b-section-head p {
      margin: 0;
      color: #5c6a58;
      font-size: clamp(.98rem, 1.8vw, 1.12rem);
      line-height: 1.65;
      font-weight: 650;
    }
    body:not(.admin-mode) .phase8b-featured-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
      gap: 18px;
      align-items: stretch;
    }
    body:not(.admin-mode) .phase8b-featured-grid.is-solo {
      grid-template-columns: 1fr;
      justify-items: center;
    }
    body:not(.admin-mode) #editorial-featured.is-solo {
      padding-bottom: clamp(26px, 3.4vw, 46px);
    }
    body:not(.admin-mode) #editorial-featured.is-solo .phase8b-section-head {
      margin-bottom: 18px;
    }
    body:not(.admin-mode) .phase8b-feature-card,
    body:not(.admin-mode) .phase8b-side-panel,
    body:not(.admin-mode) .phase8b-person-card,
    body:not(.admin-mode) .phase8b-collection-card,
    body:not(.admin-mode) .phase8b-lane {
      border: 1px solid rgba(42, 78, 48, .16);
      background: rgba(255, 253, 245, .9);
      box-shadow: 0 18px 48px rgba(41, 62, 39, .11);
    }
    body:not(.admin-mode) .phase8b-feature-card {
      position: relative;
      min-height: 420px;
      overflow: hidden;
      border-radius: 24px;
      display: flex;
      align-items: end;
      cursor: pointer;
      isolation: isolate;
    }
    body:not(.admin-mode) .phase8b-feature-card.is-solo {
      grid-column: 1 / -1;
      width: min(100%, 1020px);
      margin-inline: auto;
      min-height: clamp(400px, 33vw, 470px);
    }
    body:not(.admin-mode) .phase8b-feature-card img,
    body:not(.admin-mode) .phase8b-feature-card .phase8b-art-placeholder {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -2;
    }
    body:not(.admin-mode) .phase8b-art-placeholder {
      display: grid;
      place-items: center;
      background: radial-gradient(circle at 30% 20%, rgba(226, 189, 98, .23), transparent 30%), linear-gradient(135deg, #263d2b, #101911);
      color: #fff9df;
      font-size: clamp(2.8rem, 8vw, 5.5rem);
    }
    body:not(.admin-mode) .phase8b-feature-card::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(180deg, rgba(12, 22, 15, .08), rgba(12, 22, 15, .82));
    }
    body:not(.admin-mode) .phase8b-feature-copy {
      padding: clamp(22px, 4vw, 34px);
      color: #fffdf4;
      display: grid;
      gap: 12px;
      width: 100%;
    }
    body:not(.admin-mode) .phase8b-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
    body:not(.admin-mode) .phase8b-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(255, 250, 232, .9);
      color: #2e452f;
      font-size: .74rem;
      font-weight: 900;
      text-transform: uppercase;
    }
    body:not(.admin-mode) .phase8b-feature-copy h3,
    body:not(.admin-mode) .phase8b-side-card h3,
    body:not(.admin-mode) .phase8b-lane-title,
    body:not(.admin-mode) .phase8b-person-name,
    body:not(.admin-mode) .phase8b-collection-title {
      margin: 0;
      font-weight: 900;
      line-height: 1.08;
      letter-spacing: 0;
    }
    body:not(.admin-mode) .phase8b-feature-copy h3 { font-size: clamp(1.9rem, 4.6vw, 3.6rem); }
    body:not(.admin-mode) .phase8b-feature-copy p { margin: 0; max-width: 720px; font-weight: 650; line-height: 1.62; }
    body:not(.admin-mode) .phase8b-action-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
    body:not(.admin-mode) .phase8b-action,
    body:not(.admin-mode) .phase8b-outline-action {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 999px;
      padding: 10px 16px;
      font-weight: 900;
      border: 1px solid rgba(43, 71, 45, .2);
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }
    body:not(.admin-mode) .phase8b-action { background: #f4cd67; color: #26351f; }
    body:not(.admin-mode) .phase8b-outline-action { background: #fffaf0; color: #2d5535; }
    body:not(.admin-mode) .phase8b-action:hover,
    body:not(.admin-mode) .phase8b-outline-action:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(39, 65, 40, .14); }
    body:not(.admin-mode) .phase8b-action:focus-visible,
    body:not(.admin-mode) .phase8b-outline-action:focus-visible,
    body:not(.admin-mode) .phase8b-card:focus-visible { outline: 3px solid rgba(226, 189, 98, .72); outline-offset: 3px; }
    body:not(.admin-mode) .phase8b-side-panel {
      border-radius: 24px;
      padding: 16px;
      display: grid;
      gap: 12px;
      align-content: start;
      background: linear-gradient(180deg, rgba(255,253,245,.96), rgba(239,246,229,.92));
    }
    body:not(.admin-mode) .phase8b-side-card {
      border: 1px solid rgba(54, 84, 49, .13);
      border-radius: 18px;
      background: #fffdf7;
      padding: 14px;
      display: grid;
      grid-template-columns: 82px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      cursor: pointer;
    }
    body:not(.admin-mode) .phase8b-side-thumb,
    body:not(.admin-mode) .phase8b-person-image,
    body:not(.admin-mode) .phase8b-collection-cover {
      overflow: hidden;
      background: #edf3e4;
      display: grid;
      place-items: center;
      color: #355138;
      font-weight: 900;
    }
    body:not(.admin-mode) .phase8b-side-thumb { aspect-ratio: 1; border-radius: 14px; }
    body:not(.admin-mode) .phase8b-side-thumb img,
    body:not(.admin-mode) .phase8b-person-image img,
    body:not(.admin-mode) .phase8b-collection-cover img { width: 100%; height: 100%; object-fit: cover; }
    body:not(.admin-mode) .phase8b-side-card h3 { color: #24402a; font-size: 1.1rem; }
    body:not(.admin-mode) .phase8b-meta { color: #63705d; font-size: .88rem; font-weight: 750; line-height: 1.45; }
    body:not(.admin-mode) .phase8b-lanes { display: grid; gap: 18px; }
    body:not(.admin-mode) .phase8b-lane {
      border-radius: 22px;
      padding: 18px;
      background: linear-gradient(180deg, rgba(255,253,245,.96), rgba(250,247,237,.9));
    }
    body:not(.admin-mode) .phase8b-lane-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 12px;
    }
    body:not(.admin-mode) .phase8b-lane-title { color: #233829; font-size: clamp(1.25rem, 2.4vw, 1.75rem); }
    body:not(.admin-mode) .phase8b-lane-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }
    body:not(.admin-mode) .phase8b-card {
      position: relative;
      border: 1px solid rgba(42, 77, 49, .13);
      background: #fffdf7;
      border-radius: 18px;
      overflow: hidden;
      cursor: pointer;
      display: grid;
      transition: transform .18s ease, box-shadow .18s ease;
    }
    body:not(.admin-mode) .phase8b-card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(33, 54, 34, .13); }
    body:not(.admin-mode) .phase8b-card-art { position: relative; overflow: hidden; background: #172619; }
    body:not(.admin-mode) .phase8b-card.story .phase8b-card-art { aspect-ratio: 4 / 5; }
    body:not(.admin-mode) .phase8b-card.film .phase8b-card-art { aspect-ratio: 16 / 9; }
    body:not(.admin-mode) .phase8b-card.music .phase8b-card-art { aspect-ratio: 1; }
    body:not(.admin-mode) .phase8b-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
    body:not(.admin-mode) .phase8b-card-body { display: grid; gap: 7px; padding: 13px; align-content: start; }
    body:not(.admin-mode) .phase8b-card-title { color: #1f3525; font-weight: 900; line-height: 1.16; font-size: 1rem; }
    body:not(.admin-mode) .phase8b-card-action {
      margin-top: 4px;
      width: fit-content;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #315b38;
      font-weight: 900;
      font-size: .86rem;
    }
    body:not(.admin-mode) .phase8b-connected-shell {
      border-radius: 26px;
      padding: clamp(18px, 3vw, 28px);
      background: linear-gradient(135deg, #1d3527, #425326);
      color: #fffdf4;
      overflow: hidden;
    }
    body:not(.admin-mode) .phase8b-connected-shell .phase8b-section-head h2,
    body:not(.admin-mode) .phase8b-connected-shell .phase8b-section-head p { color: #fffdf4; }
    body:not(.admin-mode) .phase8b-journey { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    body:not(.admin-mode) .phase8b-journey-card {
      border: 1px solid rgba(255, 250, 225, .2);
      border-radius: 18px;
      background: rgba(255, 250, 235, .09);
      padding: 16px;
      display: grid;
      gap: 10px;
    }
    body:not(.admin-mode) .phase8b-journey-step { color: #f4cd67; font-weight: 900; font-size: .8rem; text-transform: uppercase; }
    body:not(.admin-mode) .phase8b-people-grid,
    body:not(.admin-mode) .phase8b-collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    body:not(.admin-mode) .phase8b-person-card,
    body:not(.admin-mode) .phase8b-collection-card { border-radius: 20px; padding: 15px; display: grid; gap: 12px; }
    body:not(.admin-mode) .phase8b-person-top { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; }
    body:not(.admin-mode) .phase8b-person-image { width: 72px; height: 72px; border-radius: 18px; }
    body:not(.admin-mode) .phase8b-person-name,
    body:not(.admin-mode) .phase8b-collection-title { color: #213929; font-size: 1.08rem; }
    body:not(.admin-mode) .phase8b-person-bio,
    body:not(.admin-mode) .phase8b-collection-copy { color: #53624f; line-height: 1.55; font-weight: 600; }
    body:not(.admin-mode) .phase8b-linked-works { display: flex; flex-wrap: wrap; gap: 7px; }
    body:not(.admin-mode) .phase8b-mini-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid rgba(45, 82, 50, .14);
      border-radius: 999px;
      padding: 7px 10px;
      color: #315638;
      background: #f7faef;
      font-size: .8rem;
      font-weight: 850;
    }
    body:not(.admin-mode) .phase8b-collection-cover { aspect-ratio: 16 / 9; border-radius: 15px; }
    body:not(.admin-mode) #impact-highlight,
    body:not(.admin-mode) #archive-gateways,
    body:not(.admin-mode) #discovery-studio,
    body:not(.admin-mode) #connected-experience { display: none !important; }
    @media (max-width: 1023px) {
      body:not(.admin-mode) .phase8b-featured-grid,
      body:not(.admin-mode) .phase8b-split-head { grid-template-columns: 1fr; }
      body:not(.admin-mode) .phase8b-lane-row,
      body:not(.admin-mode) .phase8b-people-grid,
      body:not(.admin-mode) .phase8b-collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      body:not(.admin-mode) .phase8b-journey { grid-template-columns: 1fr; }
    }
    @media (max-width: 700px) {
      body:not(.admin-mode) #home.hero { min-height: auto; padding-block: 42px 34px; }
      body:not(.admin-mode) .phase8b-editorial-section { max-width: calc(100vw - 22px); padding-block: 28px; }
      body:not(.admin-mode) .phase8b-feature-card { min-height: 360px; }
      body:not(.admin-mode) .phase8b-lane { margin-inline: 0; padding: 14px 14px 16px; }
      body:not(.admin-mode) .phase8b-lane-head {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
      }
      body:not(.admin-mode) .phase8b-lane-head > div {
        min-width: 0;
        width: 100%;
      }
      body:not(.admin-mode) .phase8b-lane-title {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
      }
      body:not(.admin-mode) .phase8b-lane-head p {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
      }
      body:not(.admin-mode) .phase8b-outline-action {
        width: 100%;
        justify-content: center;
      }
      body:not(.admin-mode) .phase8b-lane-row {
        display: flex;
        overflow-x: auto;
        gap: 8px;
        padding: 2px 0 10px;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scroll-padding-inline: 0;
      }
      body:not(.admin-mode) .phase8b-card {
        flex: 0 0 calc(100% - 16px);
        min-width: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
      }
      body:not(.admin-mode) .phase8b-people-grid,
      body:not(.admin-mode) .phase8b-collection-grid { grid-template-columns: 1fr; }
      body:not(.admin-mode) .phase8b-side-card { grid-template-columns: 64px minmax(0, 1fr); }
      body:not(.admin-mode) .phase8b-side-thumb { border-radius: 12px; }
    }
    @media (prefers-reduced-motion: reduce) {
      body:not(.admin-mode) .phase8b-action,
      body:not(.admin-mode) .phase8b-outline-action,
      body:not(.admin-mode) .phase8b-card { transition: none; }
    }

    .phase8-studio-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 18px; align-items: start; }
    .phase8-form-card, .phase8-list-card { border: 1px solid #dce8d6; border-radius: 14px; background: #fbfdf8; padding: 16px; }
    .phase8-list-card { max-height: 520px; overflow: auto; }
    .phase8-entry { border: 1px solid #e2eadb; border-radius: 12px; background: #fff; padding: 12px; margin-bottom: 10px; display: grid; gap: 7px; }
    .phase8-entry-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
    .phase8-entry-title { font-weight: 900; color: #213c2a; line-height: 1.25; }
    .phase8-entry-meta { color: #61705c; font-size: .86rem; font-weight: 700; }
    .phase8-badge { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #dce8d6; border-radius: 999px; background: #f7faef; padding: 5px 9px; font-size: .72rem; font-weight: 900; text-transform: uppercase; color: #42593b; }
    .phase8-badge.published { background: #e8f5e9; color: #1d5d32; border-color: #bfe2c1; }
    .phase8-badge.archived { background: #f3f1eb; color: #706857; }
    .phase8-inline-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .phase8-mini-note { border-radius: 12px; background: #fff8e6; border: 1px solid #ead9a5; padding: 10px 12px; color: #526044; font-weight: 750; }
    .phase8-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .phase8-three-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .phase8-muted { color: #62705f; font-size: .88rem; font-weight: 700; }
    @media (max-width: 980px) { .phase8-studio-grid, .phase8-two-col, .phase8-three-col { grid-template-columns: 1fr; } .phase8-list-card { max-height: none; } }


    .archive-gateways { padding-top: 38px; padding-bottom: 54px; }
    .archive-portal {
      position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(220px,.7fr);
      gap: 24px; align-items: center; margin-bottom: 18px; padding: 30px;
      border: 1px solid #314b35; border-radius: 8px; color: #fffaf0;
      background: #233a2a; box-shadow: 0 24px 56px rgba(31,55,36,.16);
    }
    .archive-portal::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.52; background: radial-gradient(circle at 86% 20%, rgba(218,181,91,.3), transparent 27%); }
    .archive-gateways-head { position:relative; z-index:1; max-width: 720px; text-align: left; }
    .archive-eyebrow,
    .music-eyebrow {
      display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px;
      color: #486149; font-size: .76rem; font-weight: 850; text-transform: uppercase;
    }
    .archive-eyebrow svg,
    .music-eyebrow svg { width: 17px; height: 17px; }
    .archive-gateways-head h2 { color: #fffaf0; font-size: clamp(1.75rem, 4vw, 2.65rem); margin: 0 0 8px; }
    .archive-gateways-head p { color: #d5ded3; font-weight: 650; }
    .archive-gateways-head .archive-eyebrow { color:#edcf7e; }
    .archive-enter-action { min-height:46px; display:inline-flex; align-items:center; gap:10px; margin-top:16px; padding:12px 17px; border:0; border-radius:8px; background:#f1d27b; color:#26372b; font:inherit; font-weight:850; cursor:pointer; transition:transform .2s ease, background .2s ease; }
    .archive-enter-action:hover { transform:translateY(-2px); background:#f8dfa0; }
    .archive-portal-art { position:relative; z-index:1; min-height:150px; display:grid; place-items:center; }
    .archive-portal-rings { position:relative; width:170px; aspect-ratio:1; border:1px solid rgba(255,255,255,.18); border-radius:50%; }
    .archive-portal-rings::before, .archive-portal-rings::after { content:''; position:absolute; border:1px solid rgba(255,255,255,.2); border-radius:50%; }
    .archive-portal-rings::before { inset:20px; }
    .archive-portal-rings::after { inset:42px; background:rgba(255,255,255,.06); }
    .archive-portal-icons { position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr); align-items:center; color:#f3d98f; }
    .archive-portal-icons span { width:46px; height:46px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.2); border-radius:50%; background:#304c36; box-shadow:0 12px 26px rgba(0,0,0,.18); }
    .archive-portal-icons span:nth-child(1) { justify-self:start; }
    .archive-portal-icons span:nth-child(2) { justify-self:center; }
    .archive-portal-icons span:nth-child(3) { justify-self:end; }
    .archive-portal-icons svg { width:21px; height:21px; }
    .archive-gateway-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
    .archive-gateway {
      min-height: 142px; display: grid; grid-template-columns: 52px minmax(0,1fr) 26px;
      gap: 14px; align-items: center; padding: 20px; border: 1px solid #d8e0cf;
      border-radius: 8px; background: #fffdf8; color: #273c2d; text-align: left;
      cursor: pointer; box-shadow: 0 12px 34px rgba(35,58,38,.08);
      transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
    }
    .archive-gateway:hover,
    .archive-gateway:focus-visible { transform: translateY(-4px); border-color: #779270; box-shadow: 0 18px 42px rgba(35,58,38,.14); }
    .archive-gateway-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 8px; }
    .archive-gateway.story .archive-gateway-icon { background: #edf4e9; color: #315c3a; }
    .archive-gateway.film .archive-gateway-icon { background: #2c312d; color: #fff7e5; }
    .archive-gateway.music .archive-gateway-icon { background: #efe3c7; color: #6d4429; }
    .archive-gateway-icon svg { width: 25px; height: 25px; }
    .archive-gateway strong { display: block; margin-bottom: 5px; font-family: var(--heading-font); font-size: 1.02rem; }
    .archive-gateway small { display: block; color: #687465; font-size: .78rem; line-height: 1.45; font-weight: 650; }
    .archive-gateway-arrow { width: 20px; height: 20px; color: #6c7867; transition: transform .2s ease; }
    .archive-gateway:hover .archive-gateway-arrow { transform: translate(2px,-2px); }

    .connected-experience { display: none; padding-top: 26px; padding-bottom: 44px; }
    .connected-experience.show { display: block; }
    .connected-experience-shell {
      display: grid; grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr); gap: 22px; align-items: center;
      padding: 24px; border: 1px solid #d9e1d3; border-radius: 8px; background: #fffdf8;
      box-shadow: 0 16px 40px rgba(37,62,40,.08);
    }
    .connected-experience-copy h2 { margin: 6px 0 7px; color: #223d29; font-size: clamp(1.35rem, 3vw, 2rem); }
    .connected-experience-copy p { margin: 0; color: #687464; font-size: .84rem; line-height: 1.6; }
    .connected-experience-path { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
    .connected-media-link {
      min-height: 108px; display: grid; align-content: space-between; gap: 12px; padding: 15px;
      border: 1px solid #dce3d7; border-radius: 8px; background: #f8fbf5; color: #2e4934; text-align: left;
      font: inherit; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .connected-media-link:hover,
    .connected-media-link:focus-visible { transform: translateY(-3px); border-color: #8ca283; box-shadow: 0 12px 28px rgba(37,62,40,.11); outline: 3px solid rgba(244,196,48,.34); outline-offset: 2px; }
    .connected-media-link svg { width: 22px; height: 22px; color: #6d4429; }
    .connected-media-link strong { display: -webkit-box; overflow: hidden; color: #263d2c; font-size: .82rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .connected-media-link small { display: block; margin-top: 6px; color: #667360; font-size: .68rem; font-weight: 750; line-height: 1.35; }

    .music-archive-section {
      position: relative; overflow: hidden; margin-top: 20px; margin-bottom: 54px; padding-top: 58px; padding-bottom: 64px;
      border-radius: 8px; background: #202b24; color: #fffaf0;
      box-shadow: 0 24px 60px rgba(21,35,25,.16);
    }
    .music-archive-section::before {
      content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .42;
      background: radial-gradient(circle at 12% 8%, rgba(194,158,79,.26), transparent 34%), radial-gradient(circle at 88% 92%, rgba(87,128,94,.25), transparent 38%);
    }
    .music-section-head,
    .music-feature,
    .music-shelf-head,
    .music-shelf,
    .music-empty { position: relative; z-index: 1; }
    .music-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
    .music-section-head .section-title { color: #fffaf0; text-align: left; margin: 0 0 6px; }
    .music-section-head .section-subtitle { color: #c8d2c5; text-align: left; margin: 0; }
    .music-eyebrow { color: #e9c979; }
    .music-surprise-btn {
      min-height: 44px; display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
      padding: 11px 15px; border: 1px solid rgba(255,255,255,.24); border-radius: 8px;
      background: rgba(255,255,255,.09); color: #fffaf0; font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer;
    }
    .music-surprise-btn:hover { background: rgba(255,255,255,.15); }
    .music-feature {
      min-height: 330px; display: grid; grid-template-columns: minmax(230px, .72fr) 1.28fr; overflow: hidden;
      margin-bottom: 28px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px;
      background: rgba(255,255,255,.07); backdrop-filter: blur(12px);
    }
    .music-feature-art { min-height: 330px; position: relative; overflow: hidden; background: #151c18; }
    .music-feature-art img { width: 100%; height: 100%; object-fit: cover; }
    .music-feature-art::after { content:''; position:absolute; inset:0; background: linear-gradient(90deg, transparent 60%, rgba(32,43,36,.88)); }
    .music-feature-copy { align-self: center; padding: 32px; }
    .music-feature-copy h3 { margin: 8px 0 6px; color: #fff; font-size: clamp(1.65rem,3.3vw,2.75rem); }
    .music-feature-copy p { max-width: 620px; color: #cdd7ca; line-height: 1.65; }
    .music-feature-credit { color: #f0d993; font-weight: 800; }
    .music-feature-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
    .music-play-action,
    .music-open-action {
      min-height: 44px; display:inline-flex; align-items:center; gap:9px; padding:11px 16px;
      border:0; border-radius:8px; font:inherit; font-size:.84rem; font-weight:850; cursor:pointer;
    }
    .music-play-action { background:#f2d483; color:#26362a; }
    .music-open-action { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); }
    .music-shelf-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 13px; }
    .music-shelf-head > div:first-child { display:flex; align-items:baseline; gap:10px; }
    .music-shelf-head strong { font-family:var(--heading-font); }
    .music-shelf-head span { color:#aebbaa; font-size:.75rem; font-weight:750; }
    .music-shelf-controls { display:flex; gap:7px; }
    .music-shelf-controls button { width:40px; height:40px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:8px; background:rgba(255,255,255,.08); color:white; cursor:pointer; }
    .music-shelf-controls svg { width:18px; height:18px; }
    .music-shelf {
      display:flex; gap:14px; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x proximity;
      padding:2px 2px 14px; scrollbar-width:thin; scrollbar-color:#718074 transparent;
    }
    .music-card {
      --music-accent:#d6b55f; width:min(270px,78vw); flex:0 0 min(270px,78vw); scroll-snap-align:start;
      position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.15); border-radius:8px;
      background:#2a352d; box-shadow:0 15px 36px rgba(0,0,0,.24); color:#fff;
      transition:transform .23s ease, border-color .23s ease;
    }
    .music-card:hover { transform:translateY(-4px); border-color:var(--music-accent); }
    .music-card-art { aspect-ratio:1/1; position:relative; overflow:hidden; background:#131a15; }
    .music-card-art img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
    .music-card:hover .music-card-art img { transform:scale(1.025); }
    .music-card-art::after { content:''; position:absolute; inset:42% 0 0; background:linear-gradient(transparent,rgba(24,31,26,.94)); }
    .music-card-type { position:absolute; top:12px; left:12px; z-index:2; padding:6px 9px; border-radius:999px; background:rgba(255,250,240,.92); color:#354437; font-size:.62rem; font-weight:900; text-transform:uppercase; }
    .music-card-play {
      position:absolute; right:12px; bottom:12px; z-index:3; width:48px; height:48px; display:grid; place-items:center;
      border:0; border-radius:50%; background:var(--music-accent); color:#213026; cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,.3);
    }
    .music-card-play svg { width:21px; height:21px; }
    .music-card.is-loading .music-card-play svg { animation:busySpin .8s linear infinite; }
    .music-card.is-playing .music-card-play { animation:musicPulse 1.8s ease-in-out infinite; }
    .music-card-copy { padding:15px; }
    .music-card-mood { margin-bottom:6px; color:var(--music-accent); font-size:.65rem; font-weight:900; text-transform:uppercase; }
    .music-card-title { min-height:2.5em; margin-bottom:4px; font-family:var(--heading-font); font-size:1rem; line-height:1.25; font-weight:800; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .music-card-artist { color:#c8d2c5; font-size:.75rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .music-card-meta { display:flex; justify-content:space-between; gap:10px; margin-top:12px; color:#9faf9f; font-size:.68rem; font-weight:750; }
    .music-card-wave { height:22px; display:flex; align-items:center; gap:3px; margin-top:12px; overflow:hidden; }
    .music-card-wave span { width:3px; height:var(--bar,40%); border-radius:4px; background:var(--music-accent); opacity:.66; }
    .music-card.is-playing .music-card-wave span { animation:musicBars .8s ease-in-out infinite alternate; animation-delay:var(--delay,0s); }
    .music-empty { display:grid; place-items:center; gap:9px; min-height:210px; text-align:center; color:#c8d2c5; }
    .music-empty svg { width:34px; height:34px; color:#e7c66f; }
    .music-empty strong { color:white; font-family:var(--heading-font); }
    .music-empty span { max-width:460px; font-size:.82rem; }

    .music-player-modal { position:fixed; inset:0; z-index:230; display:grid; place-items:center; padding:24px; background:rgba(12,17,14,.76); backdrop-filter:blur(18px); }
    .music-player-modal[hidden] { display:none; }
    .music-player-shell {
      --player-accent:#e0bd62; width:min(960px,100%); max-height:min(760px,calc(100dvh - 48px)); overflow:auto;
      display:grid; grid-template-columns:minmax(280px,.85fr) 1.15fr; position:relative; border:1px solid rgba(255,255,255,.15);
      border-radius:8px; background:#1d2721; color:#fffaf0; box-shadow:0 34px 90px rgba(0,0,0,.48);
    }
    .music-player-close { position:absolute; top:14px; right:14px; z-index:4; width:44px; height:44px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.2); border-radius:50%; background:rgba(12,18,14,.64); color:white; cursor:pointer; }
    .music-player-art-wrap { min-height:560px; position:relative; overflow:hidden; background:#121814; }
    .music-player-art { width:100%; height:100%; object-fit:cover; }
    .music-player-art-placeholder { position:absolute; inset:0; display:grid; place-items:center; color:#d9bb68; }
    .music-player-art-placeholder svg { width:60px; height:60px; }
    .music-player-orbit { position:absolute; width:62%; aspect-ratio:1; left:19%; bottom:-30%; border:1px solid rgba(255,255,255,.24); border-radius:50%; box-shadow:0 0 70px var(--player-accent); opacity:.32; }
    .music-player-shell.is-playing .music-player-orbit { animation:musicOrbit 10s linear infinite; }
    .music-player-copy { align-self:center; min-width:0; padding:58px 46px 38px; }
    .music-player-kicker { color:var(--player-accent); font-size:.7rem; font-weight:900; text-transform:uppercase; }
    .music-player-copy h2 { margin:9px 0 5px; color:white; font-size:clamp(1.8rem,4vw,3.4rem); line-height:1.06; }
    .music-player-copy > p { color:#c9d3c7; }
    .music-player-moods { display:flex; flex-wrap:wrap; gap:7px; margin:16px 0; }
    .music-player-moods span { padding:6px 9px; border:1px solid rgba(255,255,255,.16); border-radius:999px; color:#dbe2d8; font-size:.66rem; font-weight:800; }
    .music-waveform { height:48px; display:flex; align-items:center; gap:4px; overflow:hidden; }
    .music-waveform span { flex:1 1 3px; max-width:5px; height:var(--bar,35%); border-radius:5px; background:var(--player-accent); opacity:.7; }
    .music-player-shell.is-playing .music-waveform span { animation:musicBars .72s ease-in-out infinite alternate; animation-delay:var(--delay,0s); }
    .music-progress-row { display:grid; grid-template-columns:38px minmax(0,1fr) 38px; align-items:center; gap:9px; margin:8px 0 18px; color:#aebbad; font-size:.68rem; font-weight:800; }
    .music-progress-row input { width:100%; accent-color:var(--player-accent); }
    .music-player-controls { display:flex; align-items:center; justify-content:center; gap:16px; }
    .music-player-controls button { width:46px; height:46px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:rgba(255,255,255,.08); color:white; cursor:pointer; }
    .music-player-controls .primary { width:64px; height:64px; border:0; background:var(--player-accent); color:#1d2a21; }
    .music-volume-control { width:min(260px,100%); display:grid; grid-template-columns:20px minmax(0,1fr); align-items:center; gap:10px; margin:16px auto 0; color:#aebbad; }
    .music-volume-control svg { width:18px; height:18px; }
    .music-volume-control input { width:100%; accent-color:var(--player-accent); }
    .music-player-story { margin-top:20px; line-height:1.6; font-size:.84rem; white-space:pre-line; }
    .music-related-actions,
    .music-player-secondary { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
    .music-related-actions button,
    .music-player-secondary button { min-height:40px; display:inline-flex; align-items:center; gap:7px; padding:9px 11px; border:1px solid rgba(255,255,255,.16); border-radius:8px; background:rgba(255,255,255,.07); color:#fff; font:inherit; font-size:.72rem; font-weight:800; cursor:pointer; }
    .music-related-actions svg,
    .music-player-secondary svg { width:16px; height:16px; }

    .music-mini-player {
      position:fixed; left:max(16px,env(safe-area-inset-left)); bottom:max(16px,env(safe-area-inset-bottom)); z-index:205;
      width:min(430px,calc(100vw - 32px)); min-height:68px; display:grid; grid-template-columns:minmax(0,1fr) 44px 44px;
      align-items:center; gap:4px; overflow:hidden; padding:7px; border:1px solid #536458; border-radius:8px;
      background:#1e2922; color:white; box-shadow:0 22px 52px rgba(17,29,20,.35);
    }
    .music-mini-player[hidden] { display:none; }
    .music-mini-main { min-width:0; display:flex; align-items:center; gap:10px; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
    .music-mini-art { width:52px; height:52px; flex:0 0 auto; display:grid; place-items:center; overflow:hidden; border-radius:6px; background:#344338; color:#e4c36e; }
    .music-mini-art img { width:100%; height:100%; object-fit:cover; }
    .music-mini-copy { min-width:0; display:block; }
    .music-mini-copy strong,
    .music-mini-copy small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .music-mini-copy strong { font-size:.8rem; }
    .music-mini-copy small { margin-top:3px; color:#bec9bc; font-size:.67rem; }
    .music-mini-player > button:not(.music-mini-main) { width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(255,255,255,.08); color:white; cursor:pointer; }
    .music-mini-progress { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.09); }
    .music-mini-progress span { display:block; width:0; height:100%; background:#e3bf65; }
    .music-upload-panel { margin:0 0 16px; padding:16px; border:1px solid #d6dfcf; border-radius:8px; background:#f7faf4; }
    .music-upload-panel > div:first-child { display:flex; flex-direction:column; gap:3px; margin-bottom:10px; color:#3a533d; }
    .music-upload-panel span,
    #form-audio-status { color:#6a7565; font-size:.75rem; font-weight:650; }
    .music-upload-panel input { margin-bottom:8px; }

    @keyframes musicBars { from { transform:scaleY(.55); opacity:.48; } to { transform:scaleY(1.15); opacity:1; } }
    @keyframes musicPulse { 0%,100% { box-shadow:0 8px 20px rgba(0,0,0,.3),0 0 0 0 rgba(226,190,99,.28); } 50% { box-shadow:0 8px 20px rgba(0,0,0,.3),0 0 0 9px rgba(226,190,99,0); } }
    @keyframes musicOrbit { to { transform:rotate(360deg); } }
    @media (max-width: 1180px) {
      .archive-portal {
        gap: 18px;
        padding: 24px;
      }
      .archive-gateways-head h2 {
        font-size: clamp(1.5rem, 3.3vw, 2.2rem);
      }
      .archive-gateways-head p {
        font-size: 0.94rem;
        line-height: 1.55;
      }
      .archive-enter-action {
        min-height: 42px;
        padding: 10px 14px;
        font-size: 0.8rem;
      }
      .music-section-head {
        align-items: flex-start;
        flex-wrap: wrap;
        margin-bottom: 18px;
      }
      .music-surprise-btn {
        min-height: 42px;
        padding: 10px 13px;
        font-size: 0.78rem;
      }
      .music-feature {
        min-height: 0;
      }
      .music-feature-copy {
        padding: 26px;
      }
      .music-feature-copy h3 {
        font-size: clamp(1.4rem, 3vw, 2.2rem);
      }
      .music-feature-copy p {
        font-size: 0.92rem;
        line-height: 1.55;
      }
    }
    @media (max-width: 1100px) {
      .archive-gateway-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
      }
      .connected-experience-shell {
        grid-template-columns: 1fr;
      }
      .connected-experience-path {
        grid-template-columns: repeat(2, minmax(0,1fr));
      }
    }
    @media (max-width: 900px) {
      .archive-portal { grid-template-columns:1fr; }
      .archive-portal-art { display:none; }
      .archive-gateway-grid { grid-template-columns:1fr; }
      .archive-gateway { min-height:104px; }
      .connected-experience-shell { grid-template-columns: 1fr; }
      .music-feature { grid-template-columns:1fr; }
      .music-feature-art { min-height:270px; max-height:420px; }
      .music-feature-art::after { background:linear-gradient(transparent 55%,rgba(32,43,36,.94)); }
      .music-player-shell { grid-template-columns:1fr; }
      .music-player-art-wrap { min-height:0; aspect-ratio:16/9; }
      .music-player-copy { padding:30px 24px 28px; }
    }
    @media (max-width: 700px) {
.archive-gateways { padding-top:24px; padding-bottom:38px; }
      .archive-portal { padding:22px 18px; }
      .archive-gateways-head { text-align:left; }
      .archive-gateway { grid-template-columns:46px minmax(0,1fr) 22px; padding:15px; }
      .archive-gateway-icon { width:46px; height:46px; }
      .archive-gateway small { -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
      .connected-experience { padding-top: 12px; padding-bottom: 32px; }
      .connected-experience-shell { padding: 18px; gap: 16px; }
      .connected-experience-path { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
      .connected-media-link { min-height: 88px; padding: 11px; }
      .connected-media-link strong { font-size: .72rem; }
      .connected-media-link small { font-size: .62rem; }
      .music-archive-section { width:auto; margin:12px 12px 42px; padding:34px 16px 42px; }
      .music-section-head { align-items:flex-start; }
      .music-surprise-btn span { display:none; }
      .music-feature { min-height:0; }
      .music-feature-art { min-height:220px; }
      .music-feature-copy { padding:22px; }
      .music-feature-copy p { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
      .music-shelf-controls { display:none; }
      .music-card { width:72vw; flex-basis:72vw; max-width:248px; }
      .music-card-title { min-height:auto; }
      .music-player-modal { padding:0; align-items:stretch; }
      .music-player-shell { width:100%; max-height:100dvh; min-height:100dvh; border:0; border-radius:0; }
      .music-player-art-wrap { aspect-ratio:1/1; max-height:44dvh; }
      .music-player-copy { align-self:start; padding:24px 20px calc(28px + env(safe-area-inset-bottom)); }
      .music-player-copy h2 { font-size:clamp(1.7rem,8vw,2.5rem); }
      .music-player-story { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
      .music-mini-player { left:10px; bottom:calc(10px + env(safe-area-inset-bottom)); width:calc(100vw - 20px); }
    }
    @media (max-width: 520px) {
      .connected-experience-path { grid-template-columns: 1fr; }
    }
    @media (max-width: 380px) {
      .archive-gateway { grid-template-columns:42px minmax(0,1fr); }
      .archive-gateway-arrow { display:none; }
      .connected-experience-path { grid-template-columns: 1fr; }
      .connected-media-link { min-height: 72px; grid-template-columns: 24px minmax(0,1fr); align-items: center; }
      .music-card { width:78vw; flex-basis:78vw; }
      .music-player-secondary button span { display:none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .music-card,
      .music-card-art img,
      .archive-gateway,
      .archive-gateway-arrow,
      .music-player-orbit,
      .music-waveform span,
      .music-card-wave span,
      .music-card-play { animation:none !important; transition:none !important; }
    }
  


    body:not(.admin-mode) #about {
      padding-top: 16px;
      padding-bottom: 20px;
    }
    body:not(.admin-mode) #about .about-lower-band {
      max-width: 1040px;
      margin: 0 auto;
      gap: 12px;
      padding-top: 0;
    }
    body:not(.admin-mode) #about .about-lower-head {
      max-width: 660px;
      gap: 6px;
    }
    body:not(.admin-mode) #about .about-meta-pill {
      min-height: 30px;
      padding: 6px 10px;
      font-size: 0.72rem;
      box-shadow: 0 8px 18px rgba(36, 67, 43, 0.06);
    }
    body:not(.admin-mode) #about #why-title {
      font-size: clamp(1.18rem, 2.2vw, 1.6rem);
      margin-bottom: 0;
    }
    body:not(.admin-mode) #about #why-subtitle {
      max-width: 520px;
      margin: 0 auto;
      font-size: 0.82rem;
      line-height: 1.45;
    }
    body:not(.admin-mode) #about .why-choose-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }
    body:not(.admin-mode) #about .why-choose-card {
      min-height: 0;
      grid-template-columns: 38px minmax(0, 1fr);
      align-items: start;
      gap: 10px;
      padding: 13px;
      border-radius: 14px;
      border: 1px solid rgba(54, 87, 58, 0.12);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 244, 0.94)),
        radial-gradient(circle at 92% 12%, rgba(244, 196, 48, 0.15), transparent 28%);
      box-shadow: 0 12px 24px rgba(36, 67, 43, 0.07);
    }
    body:not(.admin-mode) #about .why-choose-card::after {
      left: 0;
      right: auto;
      top: 10px;
      bottom: 10px;
      width: 3px;
      height: auto;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(54, 87, 58, 0.95), var(--why-accent-color));
    }
    body:not(.admin-mode) #about .why-choose-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 28px rgba(36, 67, 43, 0.1);
    }
    body:not(.admin-mode) #about .why-choose-card .feature-icon {
      width: 38px;
      height: 38px;
      margin: 0;
      border-radius: 12px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }
    body:not(.admin-mode) #about .why-choose-card .feature-icon svg {
      width: 19px;
      height: 19px;
    }
    body:not(.admin-mode) #about .why-choose-card .feature-title {
      margin: 2px 0 4px;
      font-size: 0.9rem;
      line-height: 1.18;
    }
    body:not(.admin-mode) #about .why-choose-card .feature-desc {
      color: #5f6c59;
      display: -webkit-box;
      font-size: 0.74rem;
      line-height: 1.38;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    @media (max-width: 700px) {
      body:not(.admin-mode) #about .about-lower-head {
        align-items: flex-start;
        justify-items: start;
        text-align: left;
      }
      body:not(.admin-mode) #about #why-subtitle {
        margin: 0;
      }
      body:not(.admin-mode) #about .why-choose-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      body:not(.admin-mode) #about .why-choose-card {
        grid-template-columns: 32px minmax(0, 1fr);
        padding: 10px;
        gap: 8px;
        border-radius: 12px;
      }
      body:not(.admin-mode) #about .why-choose-card .feature-icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
      }
      body:not(.admin-mode) #about .why-choose-card .feature-icon svg {
        width: 16px;
        height: 16px;
      }
      body:not(.admin-mode) #about .why-choose-card .feature-title {
        font-size: 0.78rem;
      }
      body:not(.admin-mode) #about .why-choose-card .feature-desc {
        font-size: 0.68rem;
      }
    }
    @media (max-width: 360px) {
      body:not(.admin-mode) #about .why-choose-grid {
        grid-template-columns: 1fr;
      }
    }
  


    body:not(.admin-mode) #archive-gateways {
      padding-top: 34px;
      padding-bottom: 50px;
    }
    body:not(.admin-mode) #archive-gateways .archive-compass-shell {
      max-width: 760px;
      margin: 0 auto 24px;
      display: grid;
      justify-items: center;
      text-align: center;
    }
    body:not(.admin-mode) #archive-gateways .archive-gateways-head {
      max-width: 680px;
      text-align: center;
    }
    body:not(.admin-mode) #archive-gateways .archive-eyebrow {
      color: #526b50;
    }
    body:not(.admin-mode) #archive-gateways .archive-gateways-head h2 {
      color: #213927;
      font-size: clamp(1.55rem, 3.4vw, 2.2rem);
      margin: 0 0 7px;
    }
    body:not(.admin-mode) #archive-gateways .archive-gateways-head p {
      color: #65715f;
      font-size: 0.9rem;
      font-weight: 650;
      line-height: 1.6;
    }
    body:not(.admin-mode) #archive-gateways .archive-compass {
      position: relative;
      width: 218px;
      aspect-ratio: 1;
      margin: 18px auto 6px;
      border-radius: 50%;
      isolation: isolate;
    }
    body:not(.admin-mode) #archive-gateways .archive-compass::before,
    body:not(.admin-mode) #archive-gateways .archive-compass::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }
    body:not(.admin-mode) #archive-gateways .archive-compass::before {
      inset: 22px;
      border: 1px solid rgba(50, 85, 57, 0.2);
    }
    body:not(.admin-mode) #archive-gateways .archive-compass::after {
      inset: 52px;
      border: 1px dashed rgba(184, 145, 55, 0.36);
      animation: archiveCompassDrift 18s linear infinite;
    }
    body:not(.admin-mode) #archive-gateways .archive-compass-node {
      position: absolute;
      z-index: 2;
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border: 1px solid #d7dfd0;
      border-radius: 50%;
      background: #fffdf8;
      color: #355b3c;
      box-shadow: 0 12px 28px rgba(34, 61, 39, 0.12);
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    }
    body:not(.admin-mode) #archive-gateways .archive-compass-node i {
      width: 21px;
      height: 21px;
    }
    body:not(.admin-mode) #archive-gateways .archive-compass-node:hover,
    body:not(.admin-mode) #archive-gateways .archive-compass-node:focus-visible {
      transform: scale(1.08);
      border-color: #81977b;
      box-shadow: 0 15px 34px rgba(34, 61, 39, 0.18);
      outline: 3px solid rgba(244, 196, 48, 0.48);
      outline-offset: 3px;
    }
    body:not(.admin-mode) #archive-gateways .archive-compass-node::after {
      content: attr(data-label);
      position: absolute;
      top: calc(100% + 7px);
      left: 50%;
      width: max-content;
      max-width: 150px;
      padding: 5px 8px;
      border-radius: 7px;
      background: #233a2a;
      color: #fffdf5;
      font-size: 0.66rem;
      font-weight: 800;
      opacity: 0;
      pointer-events: none;
      transform: translateX(-50%) translateY(-2px);
      transition: opacity 0.18s ease, transform 0.18s ease;
    }
    body:not(.admin-mode) #archive-gateways .archive-compass-node:hover::after,
    body:not(.admin-mode) #archive-gateways .archive-compass-node:focus-visible::after {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
    body:not(.admin-mode) #archive-gateways .archive-compass-node.center {
      inset: 50% auto auto 50%;
      width: 78px;
      height: 78px;
      border: 0;
      background: #294b31;
      color: #fff8e7;
      box-shadow: 0 18px 38px rgba(34, 61, 39, 0.24);
      transform: translate(-50%, -50%);
      animation: archiveCompassPulse 3.6s ease-in-out infinite;
    }
    body:not(.admin-mode) #archive-gateways .archive-compass-node.center:hover,
    body:not(.admin-mode) #archive-gateways .archive-compass-node.center:focus-visible {
      transform: translate(-50%, -50%) scale(1.04);
    }
    body:not(.admin-mode) #archive-gateways .archive-compass-node.center i {
      width: 30px;
      height: 30px;
    }
    body:not(.admin-mode) #archive-gateways .archive-compass-node.story {
      left: 7px;
      top: 50%;
      transform: translateY(-50%);
    }
    body:not(.admin-mode) #archive-gateways .archive-compass-node.story:hover,
    body:not(.admin-mode) #archive-gateways .archive-compass-node.story:focus-visible {
      transform: translateY(-50%) scale(1.08);
    }
    body:not(.admin-mode) #archive-gateways .archive-compass-node.film {
      left: 50%;
      top: 7px;
      transform: translateX(-50%);
    }
    body:not(.admin-mode) #archive-gateways .archive-compass-node.film:hover,
    body:not(.admin-mode) #archive-gateways .archive-compass-node.film:focus-visible {
      transform: translateX(-50%) scale(1.08);
    }
    body:not(.admin-mode) #archive-gateways .archive-compass-node.music {
      right: 7px;
      top: 50%;
      color: #70482e;
      transform: translateY(-50%);
    }
    body:not(.admin-mode) #archive-gateways .archive-compass-node.music:hover,
    body:not(.admin-mode) #archive-gateways .archive-compass-node.music:focus-visible {
      transform: translateY(-50%) scale(1.08);
    }
    body:not(.admin-mode) #archive-gateways .archive-view-all {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 2px;
      padding: 8px 10px;
      border: 0;
      background: transparent;
      color: #355b3c;
      font: inherit;
      font-size: 0.76rem;
      font-weight: 850;
      text-decoration: underline;
      text-underline-offset: 4px;
      cursor: pointer;
    }
    body:not(.admin-mode) #archive-gateways .archive-gateway-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }
    body:not(.admin-mode) #archive-gateways .archive-gateway {
      min-height: 128px;
      grid-template-columns: 48px minmax(0, 1fr) 24px;
      padding: 20px;
    }
    body:not(.admin-mode) #archive-gateways .archive-gateway-icon {
      width: 48px;
      height: 48px;
    }
    body:not(.admin-mode) #archive-gateways .archive-gateway-icon i {
      width: 24px;
      height: 24px;
    }
    body:not(.admin-mode) #music .music-shelf {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x proximity;
    }
    body:not(.admin-mode) #music .music-card {
      width: min(270px, 78vw);
      max-width: none;
      flex: 0 0 min(270px, 78vw);
      border-radius: 8px;
    }
    body:not(.admin-mode) #music .music-card-art {
      aspect-ratio: 1 / 1;
    }
    @media (max-width: 700px) {
      body:not(.admin-mode) #archive-gateways {
        padding-top: 22px;
        padding-bottom: 34px;
      }
      body:not(.admin-mode) #archive-gateways .archive-compass-shell {
        margin-bottom: 18px;
      }
      body:not(.admin-mode) #archive-gateways .archive-compass {
        width: 188px;
        margin-top: 13px;
      }
      body:not(.admin-mode) #archive-gateways .archive-compass-node {
        width: 44px;
        height: 44px;
      }
      body:not(.admin-mode) #archive-gateways .archive-compass-node.center {
        width: 68px;
        height: 68px;
      }
      body:not(.admin-mode) #archive-gateways .archive-compass-node::after {
        display: none;
      }
      body:not(.admin-mode) #archive-gateways .archive-gateway-grid {
        grid-template-columns: 1fr;
      }
      body:not(.admin-mode) #archive-gateways .archive-gateway {
        min-height: 92px;
        grid-template-columns: 42px minmax(0, 1fr) 20px;
        padding: 13px;
        gap: 12px;
      }
      body:not(.admin-mode) #archive-gateways .archive-gateway-icon {
        width: 42px;
        height: 42px;
      }
    }
    @media (max-width: 900px) and (max-height: 560px) and (orientation: landscape) {
      body:not(.admin-mode) #archive-gateways .archive-compass-shell {
        grid-template-columns: minmax(0, 1fr) 170px;
        align-items: center;
        max-width: 720px;
      }
      body:not(.admin-mode) #archive-gateways .archive-compass {
        width: 154px;
        margin: 0;
      }
      body:not(.admin-mode) #archive-gateways .archive-gateway-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
    @keyframes archiveCompassPulse {
      0%, 100% { box-shadow: 0 18px 38px rgba(34, 61, 39, 0.24), 0 0 0 0 rgba(212, 177, 87, 0.2); }
      50% { box-shadow: 0 18px 38px rgba(34, 61, 39, 0.24), 0 0 0 9px rgba(212, 177, 87, 0); }
    }
    @keyframes archiveCompassDrift { to { transform: rotate(360deg); } }
  


    body:not(.admin-mode) #user-view {
      display: flex;
      flex-direction: column;
    }
    body:not(.admin-mode) #home { order: 1; }
    body:not(.admin-mode) #archive-gateways { order: 2; }
    body:not(.admin-mode) #announcement-section { order: 3; }
    body:not(.admin-mode) #showcase-band { order: 4; }
    body:not(.admin-mode) #latest-spotlight { order: 5; }
    body:not(.admin-mode) #recent-shelf { order: 6; }
    body:not(.admin-mode) #stories { order: 7; }
    body:not(.admin-mode) #connected-experience { order: 8; }
    body:not(.admin-mode) #music { order: 9; }
    body:not(.admin-mode) #impact-highlight { order: 10; }
    body:not(.admin-mode) #discovery-studio { order: 11; }
    body:not(.admin-mode) #saved-shelf { order: 12; }
    body:not(.admin-mode) #about { order: 13; }
    body:not(.admin-mode) #links { order: 14; }
    body:not(.admin-mode) #contact { order: 15; }
  


    @media (min-width: 1024px) {
      body:not(.admin-mode) #stories.section {
        width: min(96vw, 1760px);
        max-width: none;
        padding-left: clamp(18px, 2vw, 34px);
        padding-right: clamp(18px, 2vw, 34px);
      }
      body:not(.admin-mode) #stories .content-shelf-controls {
        max-width: min(1120px, 100%);
        margin-left: auto;
        margin-right: auto;
      }
      body:not(.admin-mode) #stories-container.content-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(16px, 1.35vw, 24px);
        width: 100%;
        align-items: stretch;
      }
      body:not(.admin-mode) #stories-container .storybook-card {
        aspect-ratio: 4 / 5;
        width: 100%;
        max-width: none;
        margin: 0;
        border-radius: 18px;
      }
      body:not(.admin-mode) #stories-container .storybook-card .story-body {
        min-height: 50%;
        padding: clamp(14px, 1.35vw, 20px);
      }
      body:not(.admin-mode) #stories-container .storybook-card .story-title {
        font-size: clamp(0.98rem, 1.08vw, 1.24rem);
      }
      body:not(.admin-mode) #stories-container .storybook-card .story-desc {
        display: -webkit-box;
        font-size: 0.72rem;
        -webkit-line-clamp: 2;
      }
      body:not(.admin-mode) #stories-container .storybook-card .read-more {
        min-height: 34px;
        padding: 8px 10px;
        font-size: 0.7rem;
      }
      body:not(.admin-mode) #stories-container .storybook-card .story-author,
      body:not(.admin-mode) #stories-container .storybook-card .storybook-meta-row {
        font-size: 0.62rem;
      }
    }
    @media (min-width: 1024px) and (max-width: 1180px) {
      body:not(.admin-mode) #stories-container .storybook-card .story-desc {
        display: none;
      }
      body:not(.admin-mode) #stories-container .storybook-card .read-more {
        width: 36px;
        min-width: 36px;
        padding: 0;
        font-size: 0;
      }
    }
    @media (max-width: 900px) and (orientation: landscape) {
      body:not(.admin-mode) #stories.section {
        max-width: none;
        width: 100%;
        padding-left: 14px;
        padding-right: 14px;
      }
      body:not(.admin-mode) #stories-container.content-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
      }
      body:not(.admin-mode) #stories-container .storybook-card {
        aspect-ratio: 4 / 5;
        max-width: none;
        margin: 0;
      }
      body:not(.admin-mode) #stories-container .storybook-card .story-body {
        padding: 10px;
      }
      body:not(.admin-mode) #stories-container .storybook-card .story-title {
        font-size: 0.8rem;
      }
      body:not(.admin-mode) #stories-container .storybook-card .story-desc,
      body:not(.admin-mode) #stories-container .storybook-card .credit-line {
        display: none !important;
      }
    }
    @media (max-width: 600px) and (orientation: portrait) {
      body:not(.admin-mode) #stories-container.content-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
  


    body:not(.admin-mode) .protected-source-action { display: none !important; }
    .admin-source-action[hidden],
    .protected-source-action[hidden] { display: none !important; }
    .creator-protection-notice { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; padding: 11px 12px; border: 1px solid rgba(55, 87, 58, .18); border-radius: 12px; background: rgba(255, 248, 226, .72); color: #40523d; font-size: .76rem; font-weight: 750; line-height: 1.45; }
    .creator-protection-notice i { flex: 0 0 auto; color: #6f7f09; margin-top: 1px; }
    .preview-fullscreen-float { display: none !important; }
    .document-viewer.is-fullscreen-preview .preview-fullscreen-float,
    .document-viewer:fullscreen .preview-fullscreen-float { display: none !important; }
    #qr-modal {
      z-index: 260;
      align-items: center;
      justify-content: center;
      isolation: isolate;
      background: rgba(0, 0, 0, 0.62);
    }
    #qr-modal.show { display: flex; }
    .qr-modal {
      position: relative;
      z-index: 1;
      width: min(420px, calc(100vw - 28px));
      max-height: calc(100dvh - 40px);
      overflow: auto;
      padding: 22px;
      border-radius: 24px;
    }
    .qr-modal-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
    .qr-modal h2 { margin: 10px 0 4px; color: #233b29; font-size: clamp(1.35rem, 4vw, 1.85rem); }
    .qr-modal p { margin: 0; color: #64715e; font-weight: 750; line-height: 1.45; }
    .qr-card { margin-top: 18px; display: grid; justify-items: center; gap: 12px; padding: 18px; border-radius: 18px; background: #fffdf4; border: 1px solid rgba(55,87,58,.16); }
    .qr-brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #0b1710; color: #fff8db; font-weight: 950; overflow: hidden; }
    .qr-brand-mark img { width: 100%; height: 100%; object-fit: cover; }
    #qr-code-image { width: min(248px, 70vw); aspect-ratio: 1; border-radius: 12px; background: white; }
    #qr-resource-url { max-width: 100%; color: #36573a; font-size: .78rem; font-weight: 800; overflow-wrap: anywhere; text-align: center; }
    .qr-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
    .qr-actions .btn-primary, .qr-actions .btn-secondary { flex: 1 1 150px; justify-content: center; }
    @media (max-width: 540px) { #qr-modal { align-items: flex-end; } .qr-modal { align-self: end; width: 100%; max-height: calc(100dvh - 20px); border-radius: 24px 24px 0 0; } .document-modal.mobile-preview-mode .document-actions { gap: 7px; } }
  


    .document-modal[data-preview-kind="iframe"] .preview-image-zoom-controls { display: none !important; }

    .document-viewer.is-fullscreen-preview,
    .document-viewer:fullscreen {
      width: 100dvw;
      height: 100dvh;
      padding: 0 !important;
      overflow: hidden;
      background: #000 !important;
      touch-action: auto;
    }
    .document-viewer.is-fullscreen-preview .preview-zoom-content,
    .document-viewer:fullscreen .preview-zoom-content {
      width: 100%;
      height: 100%;
      min-height: 0;
      display: grid;
      place-items: center;
      transform: none !important;
    }
    .document-viewer.is-fullscreen-preview iframe,
    .document-viewer:fullscreen iframe {
      width: 100dvw !important;
      height: 100dvh !important;
      min-height: 0 !important;
      max-height: none !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      object-fit: contain;
      background: #000;
    }
    .document-viewer.is-fullscreen-preview .preview-fullscreen-float,
    .document-viewer.is-fullscreen-preview .preview-image-zoom-controls,
    .document-viewer:fullscreen .preview-fullscreen-float,
    .document-viewer:fullscreen .preview-image-zoom-controls { display: none !important; }
  


    body.resource-fullscreen-active #chat-launcher,
    body.resource-fullscreen-active #chat-panel,
    body.resource-fullscreen-active #companion-bubble,
    body.resource-fullscreen-active .companion-bubble,
    body.resource-fullscreen-active .poopo-bubble {
      display: none !important;
    }

    body:not(.admin-mode) #modal-open-link,
    body:not(.admin-mode) #modal-download-link,
    body:not(.admin-mode) .protected-source-action {
      display: none !important;
    }

    .document-modal .document-actions #modal-toggle-details-btn.secondary-preview-action,
    .document-modal .document-actions #modal-copy-citation.secondary-preview-action,
    .document-modal .document-actions #modal-ask-companion.secondary-preview-action {
      display: none;
    }
    .document-modal.tools-expanded .document-actions #modal-toggle-details-btn.secondary-preview-action,
    .document-modal.tools-expanded .document-actions #modal-copy-citation.secondary-preview-action,
    .document-modal.tools-expanded .document-actions #modal-ask-companion.secondary-preview-action {
      display: inline-flex;
    }

    .document-modal[data-preview-kind="iframe"] .preview-image-zoom-controls,
    .document-modal[data-preview-kind="iframe"] .preview-fullscreen-float {
      display: none !important;
    }

    .document-viewer.is-fullscreen-preview,
    .document-viewer:fullscreen {
      inset: 0 !important;
      width: 100dvw !important;
      height: 100dvh !important;
      max-width: none !important;
      max-height: none !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      background: #000 !important;
      overflow: hidden !important;
      padding: 0 !important;
    }

    #qr-modal {
      position: fixed !important;
      inset: 0 !important;
      z-index: 1000 !important;
    }
    #qr-modal .qr-modal {
      z-index: 1001 !important;
    }

    @media (max-width: 620px) {
      .document-actions .doc-action {
        min-height: 38px;
        padding-inline: 10px;
      }
      .document-actions .doc-action span {
        font-size: .78rem;
      }
    }
  


    body:not(.admin-mode) #latest-spotlight {
      max-width: none;
      width: 100%;
      padding: clamp(34px, 3.6vw, 54px) max(24px, calc((100vw - 1560px) / 2 + 24px));
      background:
        linear-gradient(180deg, rgba(255, 250, 240, 0.82), rgba(242, 249, 238, 0.92));
      border-top: 1px solid rgba(130, 136, 38, 0.18);
      border-bottom: 1px solid rgba(54, 87, 58, 0.08);
    }
    body:not(.admin-mode) #latest-spotlight .section-title {
      font-size: clamp(1.85rem, 3vw, 3rem);
      margin-bottom: 6px;
      line-height: 1.08;
    }
    body:not(.admin-mode) #latest-spotlight .section-subtitle {
      max-width: 54rem;
      margin-bottom: clamp(18px, 2vw, 28px);
      font-size: clamp(0.92rem, 1vw, 1.05rem);
      line-height: 1.45;
    }
    body:not(.admin-mode) #latest-spotlight .spotlight-rail {
      justify-content: center;
      margin-bottom: 14px;
    }
    body:not(.admin-mode) #latest-spotlight .spotlight-rail-card {
      min-width: 108px;
      padding: 9px 12px;
      border-radius: 14px;
    }
    body:not(.admin-mode) #latest-spotlight .user-spotlight-grid {
      grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
      gap: clamp(14px, 1.5vw, 22px);
      align-items: stretch;
    }
    body:not(.admin-mode) #latest-spotlight .spotlight-feature-card {
      min-height: 0;
      grid-template-columns: minmax(220px, 40%) minmax(0, 1fr);
      border-radius: 18px;
      box-shadow: 0 16px 34px rgba(43, 64, 38, 0.08);
    }
    body:not(.admin-mode) #latest-spotlight .spotlight-cover-art {
      min-height: 280px;
      max-height: 360px;
    }
    body:not(.admin-mode) #latest-spotlight .spotlight-feature-copy {
      padding: clamp(16px, 1.5vw, 24px);
    }
    body:not(.admin-mode) #latest-spotlight .spotlight-pill {
      margin-bottom: 9px;
      padding: 6px 10px;
      font-size: 0.72rem;
    }
    body:not(.admin-mode) #latest-spotlight .spotlight-kicker {
      margin-bottom: 5px;
      font-size: 0.68rem;
    }
    body:not(.admin-mode) #latest-spotlight .spotlight-feature-card .spotlight-title {
      font-size: clamp(1.1rem, 1.45vw, 1.55rem);
      line-height: 1.2;
      margin-bottom: 7px;
    }
    body:not(.admin-mode) #latest-spotlight .spotlight-feature-card .spotlight-summary {
      margin-top: 8px;
      line-height: 1.46;
      -webkit-line-clamp: 3;
    }
    body:not(.admin-mode) #latest-spotlight .spotlight-cta {
      padding-top: 12px;
      font-size: 0.82rem;
    }
    body:not(.admin-mode) #latest-spotlight .spotlight-side-stack {
      display: grid;
      grid-template-rows: repeat(3, minmax(0, 1fr));
      gap: clamp(10px, 1vw, 14px);
    }
    body:not(.admin-mode) #latest-spotlight .spotlight-side-card {
      display: grid;
      align-content: center;
      min-height: 0;
      padding: clamp(14px, 1.2vw, 18px);
      border-radius: 18px;
      box-shadow: 0 12px 26px rgba(43, 64, 38, 0.07);
    }
    body:not(.admin-mode) #latest-spotlight .spotlight-side-top {
      margin-bottom: 7px;
    }
    body:not(.admin-mode) #latest-spotlight .spotlight-side-icon {
      width: 40px;
      height: 40px;
      border-radius: 11px;
    }
    body:not(.admin-mode) #latest-spotlight .spotlight-side-card .spotlight-title {
      font-size: clamp(0.92rem, 1vw, 1.08rem) !important;
      line-height: 1.22;
    }
    body:not(.admin-mode) #latest-spotlight .spotlight-side-card .spotlight-meta {
      font-size: 0.78rem;
      line-height: 1.35;
    }
    body:not(.admin-mode) #latest-spotlight .spotlight-side-card .spotlight-summary {
      margin-top: 6px !important;
      font-size: 0.82rem;
      line-height: 1.38;
      -webkit-line-clamp: 2;
    }
    @media (max-width: 980px) {
      body:not(.admin-mode) #latest-spotlight {
        padding-inline: 18px;
      }
      body:not(.admin-mode) #latest-spotlight .user-spotlight-grid {
        grid-template-columns: 1fr;
      }
      body:not(.admin-mode) #latest-spotlight .spotlight-feature-card {
        grid-template-columns: minmax(180px, 38%) minmax(0, 1fr);
      }
      body:not(.admin-mode) #latest-spotlight .spotlight-cover-art {
        min-height: 220px;
        max-height: 280px;
      }
      body:not(.admin-mode) #latest-spotlight .spotlight-side-stack {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: none;
      }
      body:not(.admin-mode) #latest-spotlight .spotlight-side-card .spotlight-summary {
        display: none;
      }
    }
    @media (max-width: 700px) {
      body:not(.admin-mode) #latest-spotlight {
        padding: 28px 14px 32px;
      }
      body:not(.admin-mode) #latest-spotlight .section-title,
      body:not(.admin-mode) #latest-spotlight .section-subtitle {
        text-align: left;
      }
      body:not(.admin-mode) #latest-spotlight .spotlight-rail {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
      }
      body:not(.admin-mode) #latest-spotlight .spotlight-feature-card {
        grid-template-columns: 1fr;
      }
      body:not(.admin-mode) #latest-spotlight .spotlight-cover-art {
        min-height: 170px;
        max-height: 210px;
        aspect-ratio: 16 / 9;
      }
      body:not(.admin-mode) #latest-spotlight .spotlight-side-stack {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 8px;
        scroll-snap-type: x proximity;
      }
      body:not(.admin-mode) #latest-spotlight .spotlight-side-card {
        flex: 0 0 min(78vw, 300px);
        scroll-snap-align: start;
      }
    }
  


    body:not(.admin-mode) #user-view { display: flex; flex-direction: column; }
    body:not(.admin-mode) #home { order: 1; }
    body:not(.admin-mode) #archive-gateways { order: 2; }
    body:not(.admin-mode) #stories { order: 3; }
    body:not(.admin-mode) #latest-spotlight { order: 4; }
    body:not(.admin-mode) #music { order: 5; }
    body:not(.admin-mode) #connected-experience { order: 6; }
    body:not(.admin-mode) #links { order: 7; }
    body:not(.admin-mode) #recent-shelf { order: 8; }
    body:not(.admin-mode) #saved-shelf { order: 9; }
    body:not(.admin-mode) #about { order: 10; }
    body:not(.admin-mode) #contact { order: 11; }
    body:not(.admin-mode) #beta-notice-section { order: 12; }
    body:not(.admin-mode) #announcement-section { order: 13; }
    body:not(.admin-mode) #showcase-band { order: 14; }
    body:not(.admin-mode) #impact-highlight { order: 15; }
    body:not(.admin-mode) #discovery-studio { order: 16; }

    body:not(.admin-mode) #home.hero {
      min-height: clamp(430px, 58vh, 640px);
      padding-block: clamp(48px, 7vw, 92px);
    }
    body:not(.admin-mode) #home .hero-container { max-width: 860px; }
    body:not(.admin-mode) #home #hero-title { font-size: clamp(2.35rem, 5.2vw, 5.6rem); }
    body:not(.admin-mode) #home #hero-subtitle { max-width: 680px; margin-inline: auto; }
    body:not(.admin-mode) #home .notice-panel { max-width: 640px; margin-inline: auto; }

    body:not(.admin-mode) #archive-gateways {
      padding-top: clamp(30px, 4vw, 58px);
      padding-bottom: clamp(34px, 4.6vw, 66px);
    }
    body:not(.admin-mode) #archive-gateways .archive-compass-shell { margin-bottom: clamp(16px, 2vw, 28px); }
    body:not(.admin-mode) #archive-gateways .archive-gateways-head h2 { font-size: clamp(1.8rem, 3.6vw, 3.2rem); }
    body:not(.admin-mode) #archive-gateways .archive-gateway-grid {
      grid-template-columns: minmax(0, 1.18fr) minmax(0, 1.18fr) minmax(220px, 0.82fr);
      align-items: stretch;
    }
    body:not(.admin-mode) #archive-gateways .archive-gateway.story,
    body:not(.admin-mode) #archive-gateways .archive-gateway.film {
      min-height: 150px;
      background: linear-gradient(135deg, #fffdf8 0%, #f3f8ed 100%);
      border-color: rgba(54, 87, 58, 0.22);
      box-shadow: 0 18px 38px rgba(38, 61, 39, 0.11);
    }
    body:not(.admin-mode) #archive-gateways .archive-gateway.music {
      min-height: 130px;
      background: linear-gradient(135deg, #fffaf0 0%, #f6efd7 100%);
      border-color: rgba(172, 125, 44, 0.22);
    }
    body:not(.admin-mode) #archive-gateways .archive-gateway strong { font-size: clamp(1rem, 1.35vw, 1.24rem); }
    body:not(.admin-mode) #archive-gateways .archive-gateway small { -webkit-line-clamp: 2; }

    body:not(.admin-mode) #stories.section {
      padding-top: clamp(34px, 4vw, 58px);
      padding-bottom: clamp(38px, 4vw, 64px);
    }
    body:not(.admin-mode) #stories .section-title,
    body:not(.admin-mode) #latest-spotlight .section-title,
    body:not(.admin-mode) #music .section-title {
      letter-spacing: 0;
    }
    body:not(.admin-mode) #stories .section-title { font-size: clamp(2rem, 4.5vw, 4.8rem); }
    body:not(.admin-mode) #stories .section-subtitle { max-width: 760px; }

    body:not(.admin-mode) #latest-spotlight {
      padding-top: clamp(28px, 3vw, 46px);
      padding-bottom: clamp(32px, 3.2vw, 50px);
    }
    body:not(.admin-mode) #latest-spotlight .section-title { font-size: clamp(1.75rem, 3vw, 3.2rem); }
    body:not(.admin-mode) #latest-spotlight .spotlight-cover-art { min-height: 220px; max-height: 320px; }
    body:not(.admin-mode) #latest-spotlight .spotlight-feature-card .spotlight-summary { -webkit-line-clamp: 2; }

    body:not(.admin-mode) #music.music-archive-section {
      margin-top: 0;
      margin-bottom: clamp(28px, 4vw, 58px);
      padding-top: clamp(34px, 4vw, 62px);
      padding-bottom: clamp(36px, 4vw, 66px);
    }
    body:not(.admin-mode) #music .music-section-head { margin-bottom: clamp(16px, 2vw, 26px); }
    body:not(.admin-mode) #music .section-title { font-size: clamp(1.75rem, 3.5vw, 4rem); }
    body:not(.admin-mode) #music .music-feature { max-height: none; }

    body:not(.admin-mode) #connected-experience {
      padding-top: clamp(22px, 3vw, 38px);
      padding-bottom: clamp(24px, 3vw, 42px);
    }
    body:not(.admin-mode) #connected-experience .connected-experience-shell {
      padding: clamp(18px, 2.4vw, 30px);
      gap: clamp(14px, 2vw, 24px);
    }
    body:not(.admin-mode) #connected-experience h2 { font-size: clamp(1.35rem, 2.5vw, 2.2rem); }

    body:not(.admin-mode) #links.section,
    body:not(.admin-mode) #about.section,
    body:not(.admin-mode) #contact.section,
    body:not(.admin-mode) #impact-highlight.section,
    body:not(.admin-mode) #beta-notice-section.section,
    body:not(.admin-mode) #announcement-section.section,
    body:not(.admin-mode) #showcase-band.section,
    body:not(.admin-mode) #saved-shelf.section,
    body:not(.admin-mode) #recent-shelf.section {
      padding-top: clamp(20px, 2.5vw, 38px);
      padding-bottom: clamp(22px, 2.8vw, 42px);
    }
    body:not(.admin-mode) #links .section-title,
    body:not(.admin-mode) #about .section-title,
    body:not(.admin-mode) #contact .section-title,
    body:not(.admin-mode) #recent-shelf .section-title,
    body:not(.admin-mode) #saved-shelf .section-title {
      font-size: clamp(1.35rem, 2.4vw, 2.25rem) !important;
      line-height: 1.12;
    }
    body:not(.admin-mode) #links .section-subtitle,
    body:not(.admin-mode) #about p,
    body:not(.admin-mode) #contact .section-subtitle,
    body:not(.admin-mode) #recent-shelf .saved-shelf-note,
    body:not(.admin-mode) #saved-shelf .saved-shelf-note {
      font-size: 0.92rem;
      line-height: 1.45;
    }
    body:not(.admin-mode) #links .portal-grid {
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 12px;
    }
    body:not(.admin-mode) #links .portal-card {
      min-height: 82px;
      padding: 14px;
      border-radius: 12px;
      box-shadow: 0 10px 22px rgba(38, 61, 39, 0.08);
    }
    body:not(.admin-mode) #about .about-story-shell { gap: 18px; }
    body:not(.admin-mode) #about .about-copy-band,
    body:not(.admin-mode) #about .about-lower-band { padding: clamp(18px, 2.5vw, 30px); }
    body:not(.admin-mode) #about .why-choose-grid { gap: 12px; }
    body:not(.admin-mode) #about .why-choose-card { min-height: 0; padding: 16px; }
    body:not(.admin-mode) #about .feature-icon { width: 42px; height: 42px; }
    body:not(.admin-mode) #contact .contact-section-head { margin-bottom: 16px; }
    body:not(.admin-mode) #contact .contact-intake { gap: 0; }
    body:not(.admin-mode) #contact .contact-intro { padding: clamp(18px, 2.5vw, 30px); }
    body:not(.admin-mode) #contact .contact-intro h3 { font-size: clamp(1.25rem, 2.4vw, 2rem); }
    body:not(.admin-mode) #contact .contact-intro-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    body:not(.admin-mode) #contact .contact-form-panel { padding: clamp(18px, 2.5vw, 30px); }
    body:not(.admin-mode) #impact-highlight .impact-feature-shell,
    body:not(.admin-mode) #impact-highlight .impact-board { padding: clamp(16px, 2vw, 24px); }
    body:not(.admin-mode) #impact-highlight .impact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    body:not(.admin-mode) #impact-highlight .impact-card { min-height: 0; padding: 14px; }
    body:not(.admin-mode) #impact-highlight .impact-number { font-size: clamp(1.7rem, 3vw, 2.6rem); }

    @media (max-width: 900px) {
      body:not(.admin-mode) #archive-gateways .archive-gateway-grid { grid-template-columns: 1fr; }
      body:not(.admin-mode) #archive-gateways .archive-gateway.story,
      body:not(.admin-mode) #archive-gateways .archive-gateway.film,
      body:not(.admin-mode) #archive-gateways .archive-gateway.music { min-height: 92px; }
      body:not(.admin-mode) #contact .contact-intro-list,
      body:not(.admin-mode) #impact-highlight .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 620px) {
      body:not(.admin-mode) #home.hero { min-height: auto; padding-block: 36px; }
      body:not(.admin-mode) #stories .section-title { font-size: clamp(2rem, 12vw, 3.1rem); }
      body:not(.admin-mode) #contact .contact-intro-list,
      body:not(.admin-mode) #impact-highlight .impact-grid { grid-template-columns: 1fr; }
      body:not(.admin-mode) #links .portal-card { min-height: 72px; }
    }
  


    body:not(.admin-mode) #stories.section,
    body:not(.admin-mode) #music.music-archive-section {
      width: min(96vw, 1760px);
      max-width: none;
      margin-left: auto;
      margin-right: auto;
      padding-left: clamp(14px, 2vw, 34px);
      padding-right: clamp(14px, 2vw, 34px);
      overflow-x: clip;
    }

    body:not(.admin-mode) #stories-container.content-grid {
      display: grid;
      width: 100%;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(14px, 1.35vw, 24px);
      align-items: stretch;
    }
    body:not(.admin-mode) #stories-container .storybook-card {
      aspect-ratio: 16 / 10;
      min-height: 0;
      width: 100%;
      max-width: none;
      margin: 0;
      display: grid;
      grid-template-rows: 1fr;
      border-radius: 16px;
      overflow: hidden;
      contain: layout paint;
    }
    body:not(.admin-mode) #stories-container .storybook-card .story-cover,
    body:not(.admin-mode) #stories-container .storybook-card .story-cover img {
      width: 100%;
      height: 100%;
      min-height: 0;
      object-fit: cover;
    }
    body:not(.admin-mode) #stories-container .storybook-card .story-body {
      min-height: auto;
      padding: clamp(12px, 1.1vw, 18px);
      gap: 6px;
    }
    body:not(.admin-mode) #stories-container .storybook-card .story-title {
      font-size: clamp(0.92rem, 1.05vw, 1.18rem);
      line-height: 1.12;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    body:not(.admin-mode) #stories-container .storybook-card .story-desc {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      font-size: clamp(0.68rem, 0.72vw, 0.78rem);
      line-height: 1.3;
    }
    body:not(.admin-mode) #stories-container .storybook-card .story-author,
    body:not(.admin-mode) #stories-container .storybook-card .storybook-meta-row {
      font-size: clamp(0.62rem, 0.66vw, 0.72rem);
      min-width: 0;
    }
    body:not(.admin-mode) #stories-container .storybook-card .read-more {
      min-height: 36px;
      padding: 8px 11px;
      font-size: clamp(0.68rem, 0.72vw, 0.78rem);
      white-space: nowrap;
    }

    body:not(.admin-mode) #latest-spotlight {
      overflow-x: clip;
    }
    body:not(.admin-mode) #latest-spotlight .user-spotlight-grid {
      max-width: 1560px;
      margin-inline: auto;
      grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
      gap: clamp(14px, 1.4vw, 22px);
    }
    body:not(.admin-mode) #latest-spotlight .spotlight-feature-card {
      min-height: 0;
      grid-template-columns: minmax(210px, 38%) minmax(0, 1fr);
    }
    body:not(.admin-mode) #latest-spotlight .spotlight-cover-art {
      aspect-ratio: 16 / 10;
      min-height: 0;
      max-height: 300px;
    }
    body:not(.admin-mode) #latest-spotlight .spotlight-title {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    body:not(.admin-mode) #latest-spotlight .spotlight-summary {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    body:not(.admin-mode) #latest-spotlight .spotlight-side-stack {
      grid-template-rows: repeat(3, minmax(0, 1fr));
    }
    body:not(.admin-mode) #latest-spotlight .spotlight-side-card {
      min-height: 108px;
    }

    body:not(.admin-mode) #music .music-feature {
      max-width: 1240px;
      margin-inline: auto;
      grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
    }
    body:not(.admin-mode) #music .music-feature-art {
      aspect-ratio: 1 / 1;
      min-height: 0;
      max-height: min(520px, 48vw);
    }
    body:not(.admin-mode) #music .music-feature-copy p {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    body:not(.admin-mode) #music .music-shelf {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(14px, 1.25vw, 22px);
      overflow: visible;
      scroll-snap-type: none;
      max-width: 1560px;
      margin-inline: auto;
    }
    body:not(.admin-mode) #music .music-card {
      width: 100%;
      max-width: none;
      flex: none;
      min-width: 0;
      border-radius: 14px;
    }
    body:not(.admin-mode) #music .music-card-art { aspect-ratio: 1 / 1; }
    body:not(.admin-mode) #music .music-card-copy { padding: clamp(12px, 1vw, 15px); }
    body:not(.admin-mode) #music .music-card-title {
      min-height: 0;
      -webkit-line-clamp: 2;
    }
    body:not(.admin-mode) #music .music-card-artist,
    body:not(.admin-mode) #music .music-card-meta {
      min-width: 0;
    }
    body:not(.admin-mode) #music .music-shelf-controls { display: none; }

    @media (min-width: 1024px) and (max-width: 1279px) {
      body:not(.admin-mode) #stories-container.content-grid,
      body:not(.admin-mode) #music .music-shelf {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      body:not(.admin-mode) #stories-container .storybook-card {
        aspect-ratio: 16 / 10;
      }
    }

    @media (min-width: 768px) and (max-width: 1023px) {
      body:not(.admin-mode) #stories-container.content-grid,
      body:not(.admin-mode) #music .music-shelf {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      body:not(.admin-mode) #stories-container .storybook-card {
        aspect-ratio: 16 / 11;
      }
      body:not(.admin-mode) #latest-spotlight .user-spotlight-grid,
      body:not(.admin-mode) #music .music-feature {
        grid-template-columns: 1fr;
      }
      body:not(.admin-mode) #latest-spotlight .spotlight-side-stack {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: none;
      }
    }

    @media (max-width: 767px) and (orientation: landscape) {
      body:not(.admin-mode) #stories.section,
      body:not(.admin-mode) #music.music-archive-section {
        width: 100%;
        padding-left: 12px;
        padding-right: 12px;
      }
      body:not(.admin-mode) #stories-container.content-grid,
      body:not(.admin-mode) #music .music-shelf {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      body:not(.admin-mode) #stories-container .storybook-card {
        aspect-ratio: 16 / 9;
        border-radius: 12px;
      }
      body:not(.admin-mode) #stories-container .storybook-card .story-body { padding: 10px; }
      body:not(.admin-mode) #stories-container .storybook-card .story-desc,
      body:not(.admin-mode) #stories-container .storybook-card .credit-line { display: none !important; }
      body:not(.admin-mode) #latest-spotlight .user-spotlight-grid { grid-template-columns: 1fr; }
      body:not(.admin-mode) #latest-spotlight .spotlight-feature-card { grid-template-columns: minmax(180px, 38%) minmax(0, 1fr); }
      body:not(.admin-mode) #latest-spotlight .spotlight-side-stack {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
      }
      body:not(.admin-mode) #music .music-card-wave { display: none; }
    }

    @media (max-width: 767px) and (orientation: portrait) {
      body:not(.admin-mode) #stories.section,
      body:not(.admin-mode) #music.music-archive-section {
        width: 100%;
        padding-left: 14px;
        padding-right: 14px;
      }
      body:not(.admin-mode) #stories-container.content-grid {
        grid-template-columns: 1fr;
        gap: 14px;
      }
      body:not(.admin-mode) #stories-container .storybook-card {
        aspect-ratio: 16 / 11;
        border-radius: 14px;
      }
      body:not(.admin-mode) #stories-container .storybook-card .story-body {
        padding: 13px;
      }
      body:not(.admin-mode) #stories-container .storybook-card .story-desc {
        -webkit-line-clamp: 1;
      }
      body:not(.admin-mode) #latest-spotlight .spotlight-feature-card {
        grid-template-columns: 1fr;
      }
      body:not(.admin-mode) #latest-spotlight .spotlight-cover-art {
        aspect-ratio: 16 / 9;
        min-height: 0;
        max-height: none;
      }
      body:not(.admin-mode) #latest-spotlight .spotlight-side-stack {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        padding-bottom: 8px;
      }
      body:not(.admin-mode) #latest-spotlight .spotlight-side-card {
        flex: 0 0 min(78vw, 300px);
        scroll-snap-align: start;
      }
      body:not(.admin-mode) #music .music-feature {
        grid-template-columns: 1fr;
      }
      body:not(.admin-mode) #music .music-feature-art {
        max-height: 320px;
      }
      body:not(.admin-mode) #music .music-shelf {
        display: flex;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        gap: 12px;
        padding-bottom: 8px;
      }
      body:not(.admin-mode) #music .music-card {
        flex: 0 0 min(76vw, 285px);
        scroll-snap-align: start;
      }
    }

    @media (max-width: 390px) {
      body:not(.admin-mode) #stories-container .storybook-card { aspect-ratio: 4 / 3; }
      body:not(.admin-mode) #stories-container .storybook-card .story-title { font-size: 0.95rem; }
      body:not(.admin-mode) #stories-container .storybook-card .story-author,
      body:not(.admin-mode) #stories-container .storybook-card .storybook-meta-row { font-size: 0.64rem; }
      body:not(.admin-mode) #music .music-card { flex-basis: 82vw; }
    }
  


    body:not(.admin-mode) #stories-container .storybook-card { position: relative; isolation: isolate; background: #10170f; box-shadow: 0 14px 32px rgba(25, 38, 24, 0.14); }
    body:not(.admin-mode) #stories-container .storybook-card .story-cover,
    body:not(.admin-mode) #stories-container .storybook-card .story-cover img,
    body:not(.admin-mode) #stories-container .storybook-card .story-cover-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    body:not(.admin-mode) #stories-container .storybook-card .story-cover img { object-position: center 42%; transform: scale(1.001); transition: transform .35s ease, filter .35s ease; }
    body:not(.admin-mode) #stories-container .storybook-card:hover .story-cover img,
    body:not(.admin-mode) #stories-container .storybook-card:focus-visible .story-cover img { transform: scale(1.026); filter: saturate(1.04) contrast(1.02); }
    body:not(.admin-mode) #stories-container .storybook-card .story-cover-placeholder { display: grid; place-items: center; color: rgba(255, 248, 224, .92); background: radial-gradient(circle at 22% 18%, rgba(237, 207, 126, .26), transparent 34%), linear-gradient(135deg, #243527, #0d170f 72%); font-size: clamp(2.2rem, 5vw, 4rem); }
    body:not(.admin-mode) #stories-container .storybook-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(7, 13, 8, .12) 0%, rgba(7, 13, 8, .02) 48%, rgba(7, 13, 8, .36) 70%, rgba(7, 13, 8, .88) 100%); transition: opacity .25s ease; }
    body:not(.admin-mode) #stories-container .storybook-card:hover .storybook-vignette,
    body:not(.admin-mode) #stories-container .storybook-card:focus-visible .storybook-vignette { background: linear-gradient(180deg, rgba(7, 13, 8, .08) 0%, rgba(7, 13, 8, .01) 50%, rgba(7, 13, 8, .42) 72%, rgba(7, 13, 8, .92) 100%); }
    body:not(.admin-mode) #stories-container .storybook-badges { position: absolute; z-index: 3; top: clamp(10px, 1vw, 14px); left: clamp(10px, 1vw, 14px); right: clamp(10px, 1vw, 14px); display: flex; align-items: flex-start; gap: 7px; pointer-events: none; }
    body:not(.admin-mode) #stories-container .storybook-badges .resource-badge-row { display: flex; flex-wrap: wrap; gap: 7px; }
    body:not(.admin-mode) #stories-container .storybook-badges .resource-badge { min-height: 0; padding: 6px 9px; border-radius: 999px; background: rgba(255, 253, 244, .94); color: #243728; border: 0; box-shadow: 0 8px 18px rgba(0,0,0,.12); font-size: clamp(.58rem, .68vw, .72rem); line-height: 1; }
    body:not(.admin-mode) #stories-container .storybook-badges .resource-badge:not(.type):not(.featured):not(.new):not(.popular) { display: none; }
    body:not(.admin-mode) #stories-container .storybook-card > .bookmark-btn { display: none; }
    body:not(.admin-mode) #stories-container .storybook-card .story-body { position: absolute; z-index: 2; inset: auto 0 0 0; min-height: 0; padding: clamp(14px, 1.45vw, 22px); color: #fffdf5; display: grid; gap: 8px; background: transparent; }
    body:not(.admin-mode) #stories-container .storybook-card .story-title { max-width: min(80%, 30rem); color: #fffdf5; text-shadow: 0 2px 10px rgba(0,0,0,.42); font-size: clamp(1.02rem, 1.35vw, 1.46rem); line-height: 1.08; -webkit-line-clamp: 2; }
    body:not(.admin-mode) #stories-container .storybook-card .story-desc,
    body:not(.admin-mode) #stories-container .storybook-card .storybook-meta-row,
    body:not(.admin-mode) #stories-container .storybook-card .content-views,
    body:not(.admin-mode) #stories-container .storybook-card .credit-line,
    body:not(.admin-mode) #stories-container .storybook-card .library-card-meta-dot { display: none !important; }
    body:not(.admin-mode) #stories-container .storybook-card .story-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; margin: 0; }
    body:not(.admin-mode) #stories-container .storybook-card .storybook-credit-block { min-width: 0; }
    body:not(.admin-mode) #stories-container .storybook-card .story-author { max-width: min(72%, 26rem); color: rgba(255, 253, 245, .88); font-size: clamp(.68rem, .82vw, .86rem); font-weight: 850; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 8px rgba(0,0,0,.45); }
    body:not(.admin-mode) #stories-container .storybook-card .read-more { justify-self: end; align-self: end; min-height: 34px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 253, 244, .94); color: #223427; box-shadow: 0 8px 20px rgba(0,0,0,.16); font-size: clamp(.68rem, .74vw, .82rem); font-weight: 950; line-height: 1; white-space: nowrap; transition: background .2s ease, transform .2s ease; }
    body:not(.admin-mode) #stories-container .storybook-card:hover .read-more,
    body:not(.admin-mode) #stories-container .storybook-card:focus-visible .read-more { background: #f4d36d; transform: translateY(-1px); }
    body:not(.admin-mode) #stories-container .storybook-card .read-more i { width: 14px; height: 14px; }
    .music-archive-action-row { display: flex; justify-content: center; margin-top: clamp(16px, 2vw, 26px); }
    .music-view-all-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border: 1px solid rgba(237, 207, 126, .36); border-radius: 999px; background: #f0c85f; color: #162418; font-weight: 950; box-shadow: 0 12px 26px rgba(0,0,0,.18); cursor: pointer; }
    .music-view-all-btn svg { width: 18px; height: 18px; }
    .music-archive-modal { position: fixed; inset: 0; z-index: 235; display: none; align-items: center; justify-content: center; padding: clamp(12px, 2vw, 24px); background: rgba(10, 15, 11, .74); backdrop-filter: blur(16px); }
    .music-archive-modal.show { display: flex; }
    .music-archive-dialog { width: min(1480px, calc(100vw - 28px)); max-height: min(88dvh, 980px); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 16px; overflow: hidden; border: 1px solid rgba(237, 207, 126, .28); border-radius: 22px; background: linear-gradient(135deg, #17261d, #0d1710 82%); color: #fffdf5; box-shadow: 0 28px 70px rgba(0,0,0,.42); }
    .music-archive-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: clamp(18px, 2vw, 28px) clamp(18px, 2vw, 28px) 0; }
    .music-archive-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: #edcf7e; font-size: .72rem; font-weight: 950; text-transform: uppercase; letter-spacing: .04em; }
    .music-archive-head h2 { margin: 7px 0 5px; font-size: clamp(1.7rem, 4vw, 3.5rem); line-height: 1.02; }
    .music-archive-head p { margin: 0; max-width: 720px; color: #d8e0d5; font-weight: 700; line-height: 1.45; }
    .music-archive-close { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(255,255,255,.08); color: #fffdf5; cursor: pointer; }
    .music-archive-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 clamp(18px, 2vw, 28px); flex-wrap: wrap; }
    .music-archive-search { min-width: min(100%, 360px); flex: 1 1 320px; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 13px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.08); color: #fffdf5; }
    .music-archive-search input { width: 100%; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-weight: 750; }
    .music-archive-search input::placeholder { color: rgba(255,253,245,.62); }
    .music-archive-count { color: #cbd8c6; font-weight: 850; font-size: .88rem; }
    .music-archive-grid { min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.3vw, 18px); padding: 0 clamp(18px, 2vw, 28px) 4px; }
    .music-archive-grid .music-card { width: 100%; max-width: none; flex: none; border-radius: 14px; }
    .music-archive-grid .music-card-art { aspect-ratio: 1 / 1; }
    .music-archive-footer { display: flex; justify-content: center; padding: 0 clamp(18px, 2vw, 28px) clamp(18px, 2vw, 28px); }
    .music-archive-load-more { min-height: 42px; padding: 9px 15px; border: 1px solid rgba(237,207,126,.32); border-radius: 999px; background: rgba(255,255,255,.08); color: #fffdf5; font-weight: 900; cursor: pointer; }
    .music-archive-empty { grid-column: 1 / -1; display: grid; place-items: center; min-height: 220px; padding: 24px; border: 1px dashed rgba(255,255,255,.22); border-radius: 18px; color: #d8e0d5; text-align: center; font-weight: 850; }
    @media (min-width: 1024px) and (max-width: 1279px) { .music-archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (min-width: 768px) and (max-width: 1023px) { .music-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 767px) and (orientation: landscape) { .music-archive-modal { padding: 8px; } .music-archive-dialog { max-height: calc(100dvh - 16px); } .music-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 767px) and (orientation: portrait) { body:not(.admin-mode) #stories-container .storybook-card .story-title { max-width: 100%; } body:not(.admin-mode) #stories-container .storybook-card .story-author { max-width: 100%; } body:not(.admin-mode) #stories-container .storybook-card .story-body { padding: 14px; } .music-archive-modal { align-items: stretch; padding: 0; } .music-archive-dialog { width: 100%; max-height: 100dvh; border-radius: 18px 18px 0 0; align-self: flex-end; } .music-archive-head { padding-top: 16px; } .music-archive-grid { grid-template-columns: 1fr; } }
  


    body:not(.admin-mode) #stories-container .storybook-card {
      aspect-ratio: 16 / 9;
      border-radius: clamp(18px, 1.4vw, 22px);
      background:
        radial-gradient(circle at 76% 18%, rgba(237, 207, 126, .22), transparent 34%),
        linear-gradient(135deg, #213626 0%, #101a12 68%, #09100b 100%);
    }
    body:not(.admin-mode) #stories-container .storybook-card .story-cover-placeholder {
      overflow: hidden;
      place-items: start end;
      padding: clamp(18px, 2vw, 26px);
      color: rgba(255, 253, 244, .18);
      background:
        linear-gradient(135deg, rgba(255,255,255,.08) 0 1px, transparent 1px 20px),
        radial-gradient(circle at 22% 20%, rgba(237, 207, 126, .26), transparent 32%),
        radial-gradient(circle at 78% 14%, rgba(255, 253, 244, .13), transparent 28%),
        linear-gradient(135deg, #31482b 0%, #172715 58%, #090f0a 100%);
      font-size: clamp(2.2rem, 4vw, 3.6rem);
    }
    body:not(.admin-mode) #stories-container .video-story-card .story-cover-placeholder {
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 9px, transparent 9px 31px),
        radial-gradient(circle at 72% 18%, rgba(237, 207, 126, .24), transparent 30%),
        linear-gradient(135deg, #303f25 0%, #162114 58%, #080f0a 100%);
    }
    body:not(.admin-mode) #stories-container .storybook-card .story-cover-placeholder::before {
      content: 'NS';
      position: absolute;
      left: clamp(18px, 2vw, 26px);
      top: clamp(18px, 2vw, 26px);
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: rgba(255, 253, 244, .9);
      color: #223427;
      font-size: .72rem;
      font-weight: 950;
      letter-spacing: .04em;
      box-shadow: 0 10px 24px rgba(0,0,0,.16);
    }
    body:not(.admin-mode) #stories-container .storybook-card .story-cover-placeholder::after {
      content: '';
      position: absolute;
      right: -8%;
      top: 12%;
      width: 46%;
      aspect-ratio: 1;
      border: 2px solid rgba(255, 253, 244, .12);
      border-radius: 28px;
      transform: rotate(-8deg);
    }
    body:not(.admin-mode) #stories-container .video-story-card .story-cover-placeholder::after {
      border-radius: 16px;
      background: linear-gradient(90deg, transparent 0 18%, rgba(255,253,244,.10) 18% 24%, transparent 24% 42%, rgba(255,253,244,.10) 42% 48%, transparent 48% 66%, rgba(255,253,244,.10) 66% 72%, transparent 72%);
    }
    body:not(.admin-mode) #stories-container .storybook-vignette {
      background:
        linear-gradient(180deg, rgba(7, 13, 8, .06) 0%, rgba(7, 13, 8, .00) 50%, rgba(7, 13, 8, .26) 68%, rgba(7, 13, 8, .9) 100%);
    }
    body:not(.admin-mode) #stories-container .storybook-card:hover .storybook-vignette,
    body:not(.admin-mode) #stories-container .storybook-card:focus-visible .storybook-vignette {
      background:
        linear-gradient(180deg, rgba(7, 13, 8, .04) 0%, rgba(7, 13, 8, .00) 50%, rgba(7, 13, 8, .32) 69%, rgba(7, 13, 8, .93) 100%);
    }
    body:not(.admin-mode) #stories-container .storybook-badges {
      top: clamp(12px, 1vw, 16px);
      left: clamp(12px, 1vw, 16px);
      right: clamp(12px, 1vw, 16px);
    }
    body:not(.admin-mode) #stories-container .storybook-badges .resource-badge {
      padding: 6px 9px;
      font-size: clamp(.68rem, .72vw, .76rem);
      font-weight: 950;
    }
    body:not(.admin-mode) #stories-container .storybook-card .story-body {
      padding: clamp(18px, 1.35vw, 20px);
      gap: 7px;
    }
    body:not(.admin-mode) #stories-container .storybook-card .story-title {
      max-width: 100%;
      padding-right: clamp(58px, 5.5vw, 88px);
      font-size: clamp(1.25rem, 1.32vw, 1.44rem);
      line-height: 1.06;
      letter-spacing: 0;
    }
    body:not(.admin-mode) #stories-container .storybook-card .story-footer {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: end;
    }
    body:not(.admin-mode) #stories-container .storybook-card .story-author {
      max-width: 100%;
      font-size: clamp(.82rem, .82vw, .94rem);
      line-height: 1.2;
      color: rgba(255, 253, 245, .9);
    }
    body:not(.admin-mode) #stories-container .storybook-card .read-more {
      min-height: 32px;
      padding: 7px 10px;
      font-size: clamp(.76rem, .74vw, .86rem);
      box-shadow: 0 7px 16px rgba(0,0,0,.15);
      opacity: .96;
    }
    body:not(.admin-mode) #stories-container .storybook-card .read-more i {
      width: 13px;
      height: 13px;
    }
    @media (min-width: 1024px) and (max-width: 1279px) {
      body:not(.admin-mode) #stories-container .storybook-card { aspect-ratio: 16 / 9; }
      body:not(.admin-mode) #stories-container .storybook-card .story-title { font-size: clamp(1.05rem, 1.45vw, 1.28rem); padding-right: 62px; }
      body:not(.admin-mode) #stories-container .storybook-card .story-author { font-size: .8rem; }
    }
    @media (min-width: 768px) and (max-width: 1023px) {
      body:not(.admin-mode) #stories-container .storybook-card { aspect-ratio: 16 / 9; }
      body:not(.admin-mode) #stories-container .storybook-card .story-title { font-size: clamp(1.05rem, 2vw, 1.3rem); padding-right: 64px; }
      body:not(.admin-mode) #stories-container .storybook-card .story-author { font-size: .82rem; }
    }
    @media (max-width: 767px) and (orientation: landscape) {
      body:not(.admin-mode) #stories-container .storybook-card { aspect-ratio: 16 / 9; }
      body:not(.admin-mode) #stories-container .storybook-card .story-body { padding: 11px; }
      body:not(.admin-mode) #stories-container .storybook-card .story-title { font-size: .9rem; padding-right: 48px; }
      body:not(.admin-mode) #stories-container .storybook-card .story-author { font-size: .68rem; }
      body:not(.admin-mode) #stories-container .storybook-card .read-more { min-height: 28px; padding: 6px 8px; font-size: .68rem; }
      body:not(.admin-mode) #stories-container .storybook-badges .resource-badge { font-size: .58rem; padding: 5px 7px; }
    }
    @media (max-width: 767px) and (orientation: portrait) {
      body:not(.admin-mode) #stories-container .storybook-card { aspect-ratio: 16 / 10; }
      body:not(.admin-mode) #stories-container .storybook-card .story-title { font-size: clamp(1.08rem, 5vw, 1.35rem); padding-right: 62px; }
      body:not(.admin-mode) #stories-container .storybook-card .story-author { font-size: .82rem; }
    }
    @media (max-width: 390px) {
      body:not(.admin-mode) #stories-container .storybook-card { aspect-ratio: 16 / 10; }
      body:not(.admin-mode) #stories-container .storybook-card .story-title { font-size: 1rem; padding-right: 56px; }
      body:not(.admin-mode) #stories-container .storybook-card .story-author { font-size: .74rem; }
      body:not(.admin-mode) #stories-container .storybook-card .read-more { min-height: 30px; padding: 6px 8px; }
    }
  


    body:not(.admin-mode) #stories-container .storybook-card .story-cover-placeholder {
      place-items: start end;
      justify-items: end;
      align-items: start;
      padding: clamp(24px, 3vw, 38px);
      font-size: 0;
    }
    body:not(.admin-mode) #stories-container .storybook-card .story-cover-placeholder::before {
      content: '';
      left: auto;
      top: 16%;
      right: 12%;
      width: min(34%, 132px);
      height: auto;
      aspect-ratio: 1;
      border-radius: 28px;
      background:
        linear-gradient(135deg, rgba(255,253,244,.10), rgba(255,253,244,.02)),
        radial-gradient(circle at 50% 50%, rgba(255,253,244,.26), transparent 58%);
      color: transparent;
      opacity: .55;
      box-shadow: none;
      transform: rotate(-8deg);
    }
    body:not(.admin-mode) #stories-container .video-story-card .story-cover-placeholder::before {
      border-radius: 18px;
      background:
        repeating-linear-gradient(90deg, rgba(255,253,244,.18) 0 8px, transparent 8px 22px),
        linear-gradient(135deg, rgba(255,253,244,.12), rgba(255,253,244,.02));
      opacity: .45;
    }
    body:not(.admin-mode) #stories-container .storybook-card .story-cover-placeholder::after {
      right: 8%;
      top: 22%;
      width: min(42%, 170px);
      opacity: .5;
      border-color: rgba(255, 253, 244, .10);
    }
    body:not(.admin-mode) #stories-container .storybook-badges {
      top: clamp(12px, 1vw, 16px);
      left: clamp(12px, 1vw, 16px);
      right: clamp(12px, 1vw, 16px);
      gap: 6px;
    }
    body:not(.admin-mode) #stories-container .storybook-badges .resource-badge-row { gap: 6px; }
    body:not(.admin-mode) #stories-container .storybook-card .story-body {
      padding: clamp(16px, 1.25vw, 18px);
      gap: 4px;
    }
    body:not(.admin-mode) #stories-container .storybook-card .story-title {
      max-width: none;
      width: calc(100% - clamp(54px, 5.2vw, 78px));
      padding-right: 0;
      font-size: clamp(1.12rem, 1.18vw, 1.36rem);
      font-weight: 700;
      line-height: 1.1;
      margin: 0;
    }
    body:not(.admin-mode) #stories-container .storybook-card .story-footer {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 8px;
      margin-top: 4px;
    }
    body:not(.admin-mode) #stories-container .storybook-card .storybook-credit-block {
      min-width: 0;
      max-width: 100%;
    }
    body:not(.admin-mode) #stories-container .storybook-card .story-author {
      max-width: 100%;
      width: 100%;
      color: rgba(255, 253, 245, .78);
      font-size: clamp(.76rem, .76vw, .86rem);
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0;
    }
    body:not(.admin-mode) #stories-container .storybook-card .read-more {
      min-height: 30px;
      padding: 6px 9px;
      font-size: clamp(.7rem, .68vw, .8rem);
      font-weight: 800;
      box-shadow: 0 6px 14px rgba(0,0,0,.14);
    }
    body:not(.admin-mode) #stories-container .storybook-card .read-more i {
      width: 12px;
      height: 12px;
    }
    @media (min-width: 1024px) and (max-width: 1279px) {
      body:not(.admin-mode) #stories-container .storybook-card .story-title { width: calc(100% - 60px); font-size: clamp(1rem, 1.25vw, 1.18rem); }
      body:not(.admin-mode) #stories-container .storybook-card .story-author { font-size: .76rem; }
    }
    @media (min-width: 768px) and (max-width: 1023px) {
      body:not(.admin-mode) #stories-container .storybook-card .story-title { width: calc(100% - 62px); font-size: clamp(1rem, 1.9vw, 1.22rem); }
      body:not(.admin-mode) #stories-container .storybook-card .story-author { font-size: .78rem; }
    }
    @media (max-width: 767px) and (orientation: landscape) {
      body:not(.admin-mode) #stories-container .storybook-card .story-body { padding: 10px; gap: 3px; }
      body:not(.admin-mode) #stories-container .storybook-card .story-title { width: calc(100% - 48px); font-size: .84rem; line-height: 1.08; }
      body:not(.admin-mode) #stories-container .storybook-card .story-footer { margin-top: 3px; gap: 6px; }
      body:not(.admin-mode) #stories-container .storybook-card .story-author { font-size: .62rem; font-weight: 500; }
      body:not(.admin-mode) #stories-container .storybook-card .read-more { min-height: 26px; padding: 5px 7px; font-size: .64rem; }
      body:not(.admin-mode) #stories-container .storybook-card .story-cover-placeholder::before { top: 18%; right: 10%; width: 28%; }
    }
    @media (max-width: 767px) and (orientation: portrait) {
      body:not(.admin-mode) #stories-container .storybook-card .story-body { padding: 14px 16px; }
      body:not(.admin-mode) #stories-container .storybook-card .story-title { width: calc(100% - 58px); font-size: clamp(1rem, 4.5vw, 1.22rem); }
      body:not(.admin-mode) #stories-container .storybook-card .story-footer { margin-top: 4px; }
      body:not(.admin-mode) #stories-container .storybook-card .story-author { font-size: .76rem; font-weight: 500; }
      body:not(.admin-mode) #stories-container .storybook-card .read-more { min-height: 29px; padding: 6px 8px; font-size: .68rem; }
      body:not(.admin-mode) #stories-container .storybook-card .story-cover-placeholder::before { top: 18%; right: 12%; width: 30%; }
    }
    @media (max-width: 390px) {
      body:not(.admin-mode) #stories-container .storybook-card .story-title { width: calc(100% - 52px); font-size: .96rem; }
      body:not(.admin-mode) #stories-container .storybook-card .story-author { font-size: .7rem; }
      body:not(.admin-mode) #stories-container .storybook-card .read-more { min-height: 28px; padding: 5px 7px; }
    }
  


    body:not(.admin-mode) #stories-container .storybook-card .read-more.story-card-icon-action {
      width: 42px;
      height: 42px;
      min-width: 42px;
      min-height: 42px;
      max-width: 42px;
      max-height: 42px;
      padding: 0;
      border: 1px solid rgba(255, 253, 244, .74);
      border-radius: 999px;
      display: inline-grid;
      place-items: center;
      justify-self: end;
      align-self: end;
      flex: 0 0 42px;
      background: rgba(255, 253, 244, .94);
      color: #223427;
      box-shadow: 0 8px 18px rgba(0,0,0,.16);
      line-height: 1;
      cursor: pointer;
      touch-action: manipulation;
      transform: none;
      transition: background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    body:not(.admin-mode) #stories-container .storybook-card .read-more.story-card-icon-action i,
    body:not(.admin-mode) #stories-container .storybook-card .read-more.story-card-icon-action svg {
      width: 17px;
      height: 17px;
      stroke-width: 2.35;
    }
    body:not(.admin-mode) #stories-container .storybook-card:hover .read-more.story-card-icon-action,
    body:not(.admin-mode) #stories-container .storybook-card .read-more.story-card-icon-action:hover {
      background: #f4d36d;
      color: #1b2a20;
      border-color: rgba(244, 211, 109, .92);
      box-shadow: 0 10px 22px rgba(0,0,0,.18);
      transform: none;
    }
    body:not(.admin-mode) #stories-container .storybook-card .read-more.story-card-icon-action:focus-visible {
      outline: 3px solid rgba(244, 211, 109, .84);
      outline-offset: 3px;
      background: #f4d36d;
      color: #1b2a20;
      box-shadow: 0 0 0 5px rgba(35, 59, 41, .28), 0 10px 22px rgba(0,0,0,.2);
    }
    @media (max-width: 767px) and (orientation: landscape) {
      body:not(.admin-mode) #stories-container .storybook-card .read-more.story-card-icon-action {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        max-width: 40px;
        max-height: 40px;
        flex-basis: 40px;
      }
      body:not(.admin-mode) #stories-container .storybook-card .read-more.story-card-icon-action i,
      body:not(.admin-mode) #stories-container .storybook-card .read-more.story-card-icon-action svg {
        width: 16px;
        height: 16px;
      }
    }
    @media (max-width: 390px) {
      body:not(.admin-mode) #stories-container .storybook-card .read-more.story-card-icon-action {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        max-width: 40px;
        max-height: 40px;
        flex-basis: 40px;
      }
    }
  


    body:not(.admin-mode) #stories-container .storybook-card .story-body {
      grid-template-rows: minmax(calc(2.2em + 2px), auto) auto;
      align-content: end;
      justify-items: stretch;
      text-align: left;
    }
    body:not(.admin-mode) #stories-container .storybook-card .story-title {
      width: calc(100% - clamp(54px, 5.2vw, 78px));
      min-height: calc(2.2em + 2px);
      max-height: calc(2.2em + 2px);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-align: left;
      justify-self: start;
      align-self: end;
    }
    body:not(.admin-mode) #stories-container .storybook-card .story-footer {
      width: 100%;
      min-height: 42px;
      align-items: end;
    }
    body:not(.admin-mode) #stories-container .storybook-card .storybook-credit-block {
      min-width: 0;
      align-self: end;
      padding-right: 2px;
    }
    body:not(.admin-mode) #stories-container .storybook-card .story-author {
      width: 100%;
      max-width: 100%;
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: left;
    }
    body:not(.admin-mode) #stories-container .storybook-card .read-more.story-card-icon-action {
      margin: 0;
      align-self: end;
      justify-self: end;
    }
    body:not(.admin-mode) #stories-container .storybook-card .story-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      width: 100%;
      box-sizing: border-box;
      justify-content: stretch;
      justify-items: start;
      align-items: end;
      place-items: end start;
    }
    body:not(.admin-mode) #stories-container .storybook-card .story-title {
      max-width: none;
      margin: 0;
      margin-inline: 0 auto;
      padding-inline: 0;
      transform: none;
      place-self: end start;
    }
    body:not(.admin-mode) #stories-container .storybook-card .story-footer {
      justify-self: stretch;
      justify-content: stretch;
      justify-items: start;
      place-items: end stretch;
      text-align: left;
    }
    body:not(.admin-mode) #stories-container .storybook-card .storybook-credit-block {
      justify-self: start;
      text-align: left;
      max-width: 100%;
    }
    body:not(.admin-mode) #stories-container .storybook-card .story-author {
      margin: 0;
      margin-inline: 0;
      transform: none;
    }
    @media (max-width: 767px) and (orientation: landscape) {
      body:not(.admin-mode) #stories-container .storybook-card .story-body {
        grid-template-rows: minmax(calc(2.16em + 1px), auto) auto;
      }
      body:not(.admin-mode) #stories-container .storybook-card .story-title {
        width: calc(100% - 48px);
        min-height: calc(2.16em + 1px);
        max-height: calc(2.16em + 1px);
      }
      body:not(.admin-mode) #stories-container .storybook-card .story-footer {
        min-height: 40px;
      }
    }
    @media (max-width: 767px) and (orientation: portrait) {
      body:not(.admin-mode) #stories-container .storybook-card .story-title {
        width: calc(100% - 58px);
      }
    }
    @media (max-width: 390px) {
      body:not(.admin-mode) #stories-container .storybook-card .story-title {
        width: calc(100% - 52px);
      }
      body:not(.admin-mode) #stories-container .storybook-card .story-footer {
        min-height: 40px;
      }
    }
  


    body:not(.admin-mode) .chat-launcher { z-index: 68; width: clamp(48px, 4.8vw, 58px); height: clamp(48px, 4.8vw, 58px); padding: 5px; border-radius: 18px; box-shadow: 0 12px 26px rgba(20,35,21,.16); touch-action: manipulation; }
    body:not(.admin-mode) .chat-launcher:hover { transform: translateY(-1px); box-shadow: 0 15px 30px rgba(20,35,21,.18); }
    body:not(.admin-mode) .chat-launcher:focus-visible,
    body:not(.admin-mode) .chat-window-btn:focus-visible,
    body:not(.admin-mode) .chat-close:focus-visible,
    body:not(.admin-mode) .chat-form button:focus-visible { outline: 3px solid rgba(244,211,109,.84); outline-offset: 3px; }
    body:not(.admin-mode) .chat-launcher-text { display: inline-flex; max-width: 128px; padding: 7px 10px; font-size: .74rem; opacity: .94; }
    body:not(.admin-mode).chat-open .chat-launcher,
    body:not(.admin-mode).modal-open .chat-launcher,
    body:not(.admin-mode).modal-open .chat-panel,
    body:not(.admin-mode).modal-open .companion-bubble,
    body:not(.admin-mode).resource-fullscreen-active .chat-launcher,
    body:not(.admin-mode).resource-fullscreen-active .chat-panel,
    body:not(.admin-mode).resource-fullscreen-active .companion-bubble { opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; }
    body:not(.admin-mode) .chat-panel { width: min(360px, calc(100vw - 24px)); height: min(520px, calc(100dvh - 92px)); max-height: calc(100dvh - 72px); border-radius: 20px; z-index: 72; box-shadow: 0 20px 48px rgba(20,35,21,.24); }
    body:not(.admin-mode) .chat-head { min-height: 62px; padding: 10px 12px; }
    body:not(.admin-mode) .chat-messages { padding: 12px; gap: 8px; }
    body:not(.admin-mode) .chat-helper-strip { padding: 8px 12px; font-size: .76rem; }
    body:not(.admin-mode) .chat-form { padding: 10px; gap: 8px; }
    body:not(.admin-mode) .chat-form button { min-width: 42px; min-height: 42px; }
    body:not(.admin-mode) .companion-bubble { z-index: 67; max-width: min(220px, calc(100vw - 96px)); padding: 9px 11px; border-radius: 14px; font-size: .78rem; line-height: 1.36; box-shadow: 0 12px 24px rgba(20,35,21,.14); }
    body:not(.admin-mode) .companion-bubble::after { width: 12px; height: 12px; bottom: 13px; right: -7px; border-top: 1px solid var(--companion-panel-border, #d8d0b8); border-left: 0; border-right: 1px solid var(--companion-panel-border, #d8d0b8); border-bottom: 0; }
    body:not(.admin-mode) .companion-bubble.bubble-left::after { right: auto; left: -7px; border-right: 0; border-left: 1px solid var(--companion-panel-border, #d8d0b8); }
    body:not(.admin-mode) .companion-bubble.bubble-bottom::after { top: -7px; bottom: auto; left: calc(50% - 6px); right: auto; border-left: 1px solid var(--companion-panel-border, #d8d0b8); border-top: 1px solid var(--companion-panel-border, #d8d0b8); border-right: 0; border-bottom: 0; }
    @media (max-width: 900px), (max-height: 620px) { body:not(.admin-mode) .chat-launcher-text { display: none !important; } body:not(.admin-mode) .chat-launcher { width: 50px; height: 50px; border-radius: 16px; } body:not(.admin-mode) .chat-launcher > .companion-icon-shell { width: 38px; height: 38px; } body:not(.admin-mode) .companion-bubble { max-width: min(188px, calc(100vw - 78px)); font-size: .74rem; } }
    @media (max-width: 640px) { body:not(.admin-mode) .chat-panel { width: calc(100vw - 16px) !important; height: min(68dvh, 520px) !important; max-height: calc(100dvh - max(86px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 54px)); border-radius: 18px 18px 12px 12px; } body:not(.admin-mode) .chat-head { min-height: 54px; padding: 8px 10px; } body:not(.admin-mode) .chat-quick { padding-inline: 10px; gap: 6px; } body:not(.admin-mode) .chat-chip { padding: 6px 9px; font-size: .78rem; } body:not(.admin-mode) .chat-bubble { font-size: .82rem; } }
    @media (orientation: landscape) and (max-height: 560px) { body:not(.admin-mode) .chat-panel { width: min(420px, calc(100vw - 18px)) !important; height: calc(100dvh - 18px) !important; max-height: calc(100dvh - 18px); border-radius: 16px; } body:not(.admin-mode) .chat-helper-strip, body:not(.admin-mode) .chat-context-note { display: none !important; } body:not(.admin-mode) .chat-messages { padding: 8px; } body:not(.admin-mode) .chat-form { padding: 8px; } }
    @media (prefers-reduced-motion: reduce) { .chat-launcher, .chat-launcher.has-hopped, .chat-launcher.is-speaking, .companion-frame-stack.animation-breathe, .bot-avatar, .bot-status-dot, .companion-bubble { animation: none !important; transition-duration: .01ms !important; } }
  


    body:not(.admin-mode) .chat-launcher { z-index: 74; min-width: 54px; min-height: 54px; touch-action: none; }
    body:not(.admin-mode) .chat-launcher.is-drag-armed,
    body:not(.admin-mode) .chat-launcher.is-dragging { touch-action: none; cursor: grabbing; user-select: none; }
    body:not(.admin-mode) .chat-launcher.is-drag-armed { box-shadow: 0 0 0 4px rgba(244, 211, 109, .28), 0 16px 34px rgba(20,35,21,.22); }
    body:not(.admin-mode) .chat-launcher .companion-frame-stack,
    body:not(.admin-mode) .chat-launcher .companion-frame-stack img,
    body:not(.admin-mode) .chat-launcher .companion-frame-stack svg { width: 100%; height: 100%; }
    body:not(.admin-mode) .companion-bubble { max-width: min(300px, calc(100vw - 34px)); padding: 12px 14px; padding-right: 48px; min-height: 48px; overflow-wrap: anywhere; z-index: 73; }
    body:not(.admin-mode) .companion-bubble .companion-bubble-text { display: block; min-width: 0; }
    body:not(.admin-mode) .companion-bubble .companion-bubble-action { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 999px; border: 1px solid rgba(122, 77, 29, .34); background: rgba(255, 244, 214, .94); color: #7a4d1d; display: inline-grid; place-items: center; cursor: pointer; }
    body:not(.admin-mode) .companion-bubble .companion-bubble-action:focus-visible { outline: 3px solid rgba(244, 211, 109, .9); outline-offset: 2px; }
    body:not(.admin-mode) .chat-edge-tab { z-index: 66; }
    body:not(.admin-mode) .chat-edge-tab .companion-mini-face { width: 26px; height: 26px; border-radius: 9px; overflow: hidden; display: inline-grid; place-items: center; }
    body:not(.admin-mode) .chat-edge-tab .companion-mini-face .companion-frame-stack,
    body:not(.admin-mode) .chat-edge-tab .companion-mini-face img,
    body:not(.admin-mode) .chat-edge-tab .companion-mini-face svg { width: 100%; height: 100%; }
    body:not(.admin-mode) .chat-window-btn[data-chat-action="hide"] { color: inherit; }
    @media (max-width: 640px) { body:not(.admin-mode) .companion-bubble { max-width: min(260px, calc(100vw - 32px)); padding: 10px 12px; padding-right: 44px; } }
    @media (orientation: landscape) and (max-height: 560px) { body:not(.admin-mode) .companion-bubble { max-width: min(280px, calc(100vw - 120px)); } }
    #music-action-modal { position: fixed; inset: 0; z-index: 1300; display: none; align-items: center; justify-content: center; padding: clamp(14px, 3vw, 28px); background: rgba(9, 14, 10, .66); backdrop-filter: blur(14px); }
    #music-action-modal.show { display: flex; }
    .music-action-dialog { width: min(440px, calc(100vw - 28px)); max-height: min(680px, calc(100dvh - 28px)); overflow: auto; border-radius: 22px; border: 1px solid rgba(244, 211, 109, .32); background: #fffaf0; color: #253822; box-shadow: 0 28px 74px rgba(0,0,0,.32); padding: clamp(18px, 3vw, 26px); }
    .music-action-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
    .music-action-kicker { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; background: #eef4e7; color: #36573a; font-size: .78rem; font-weight: 900; }
    .music-action-dialog h3 { margin: 10px 0 4px; font-size: clamp(1.5rem, 4vw, 2.2rem); color: #29452f; letter-spacing: 0; }
    .music-action-dialog p { color: #536450; line-height: 1.55; margin: 0 0 14px; }
    .music-action-close { width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(38, 49, 31, .14); background: #f8f1d6; display: inline-grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
    .music-action-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
    .music-action-row button, .music-action-row a { min-height: 44px; border-radius: 12px; border: 1px solid rgba(54, 87, 58, .2); background: #36573a; color: #fffaf0; padding: 10px 14px; display: inline-flex; align-items: center; gap: 8px; font-weight: 900; text-decoration: none; cursor: pointer; }
    .music-action-row .secondary { background: #fffaf0; color: #36573a; }
    #toast { z-index: 1400; }
  


    body:not(.admin-mode) .chat-launcher.is-speaking .chat-launcher-text,
    body:not(.admin-mode) .chat-launcher.is-dragging .chat-launcher-text,
    body:not(.admin-mode) .chat-launcher.is-drag-armed .chat-launcher-text {
      display: none !important;
    }
    body:not(.admin-mode) .companion-bubble {
      display: none;
      align-items: center;
      gap: 12px;
      width: max-content;
      max-width: min(340px, calc(100vw - 56px));
      padding: 12px 14px !important;
      padding-right: 14px !important;
      min-height: 54px;
      border-radius: 15px;
      overflow: visible;
      transform-origin: var(--bubble-origin, 100% 50%);
    }
    body:not(.admin-mode) .companion-bubble.show {
      display: flex;
      animation: poopoBubbleArrive .24s ease-out both;
    }
    body:not(.admin-mode) .companion-bubble .companion-bubble-text {
      flex: 1 1 auto;
      min-width: 0;
      max-width: 230px;
      line-height: 1.32;
      overflow-wrap: anywhere;
    }
    body:not(.admin-mode) .companion-bubble .companion-bubble-action {
      position: static !important;
      transform: none !important;
      flex: 0 0 auto;
      width: auto;
      min-width: 106px;
      height: 38px;
      padding: 0 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: .82rem;
      font-weight: 900;
      white-space: nowrap;
    }
    body:not(.admin-mode) .companion-bubble .companion-bubble-action i,
    body:not(.admin-mode) .companion-bubble .companion-bubble-action svg {
      width: 16px;
      height: 16px;
      flex: 0 0 auto;
    }
    body:not(.admin-mode) .companion-bubble.bubble-left { --bubble-origin: 0% 50%; }
    body:not(.admin-mode) .companion-bubble.bubble-bottom { --bubble-origin: 50% 0%; }
    body:not(.admin-mode) .chat-launcher.is-speaking:not(.is-dragging):not(.is-drag-armed) {
      animation: poopoSoftFloat 4.8s ease-in-out infinite;
    }
    @keyframes poopoBubbleArrive {
      from { opacity: 0; transform: translateY(5px) scale(.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes poopoSoftFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-2px); }
    }
    @media (max-width: 720px), (max-height: 520px) {
      body:not(.admin-mode) .companion-bubble {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
        max-width: min(250px, calc(100vw - 36px));
        min-height: 0;
      }
      body:not(.admin-mode) .companion-bubble .companion-bubble-text { max-width: 100%; }
      body:not(.admin-mode) .companion-bubble .companion-bubble-action {
        min-width: 0;
        width: 100%;
        height: 36px;
      }
    }
    @media (max-width: 380px) {
      body:not(.admin-mode) .companion-bubble { max-width: min(232px, calc(100vw - 32px)); }
      body:not(.admin-mode) .companion-bubble .companion-bubble-action span { display: none; }
      body:not(.admin-mode) .companion-bubble .companion-bubble-action { width: 38px; padding: 0; border-radius: 999px; }
    }
    @media (prefers-reduced-motion: reduce) {
      body:not(.admin-mode) .companion-bubble.show,
      body:not(.admin-mode) .chat-launcher.is-speaking:not(.is-dragging):not(.is-drag-armed) {
        animation: none !important;
      }
    }
  


    body:not(.admin-mode) #chat-launcher.chat-launcher:not(.is-dragging):not(.is-drag-armed):not(.has-hopped) {
      animation: poopoSingleImageIdle 5.4s cubic-bezier(.42, 0, .22, 1) infinite;
      transform-origin: 50% 60%;
      will-change: transform, filter;
    }
    body:not(.admin-mode) #chat-launcher.chat-launcher:not(.is-dragging):not(.is-drag-armed):hover,
    body:not(.admin-mode) #chat-launcher.chat-launcher:not(.is-dragging):not(.is-drag-armed):focus-visible {
      animation-play-state: paused;
      transform: translateY(-3px) rotate(-1deg) scale(1.025);
      filter: drop-shadow(0 12px 16px rgba(20,35,21,.18));
    }
    body:not(.admin-mode) #chat-launcher.chat-launcher:not(.is-dragging):not(.is-drag-armed):active {
      animation: poopoTapNod .36s ease-out both;
    }
    body:not(.admin-mode) #chat-launcher.chat-launcher.is-dragging,
    body:not(.admin-mode) #chat-launcher.chat-launcher.is-drag-armed {
      animation: none !important;
      transform: none !important;
      filter: none !important;
      will-change: auto;
    }
    body:not(.admin-mode) #chat-launcher-avatar .companion-frame-stack.animation-breathe {
      animation: none !important;
    }
    body:not(.admin-mode) #chat-launcher-avatar .companion-frame-stack.frames-1 img,
    body:not(.admin-mode) #chat-launcher-avatar .companion-frame-stack.animation-none img,
    body:not(.admin-mode) #chat-launcher-avatar .companion-frame-stack.animation-breathe img {
      opacity: 1 !important;
      animation: none !important;
    }
    body:not(.admin-mode) #chat-launcher-avatar .companion-frame-stack,
    body:not(.admin-mode) #chat-edge-avatar .companion-frame-stack {
      position: relative;
      z-index: 1;
      opacity: 1;
      visibility: visible;
    }
    body:not(.admin-mode) #chat-edge-avatar .companion-frame-stack {
      clip: auto;
      white-space: normal;
      margin: 0;
      padding: 0;
      overflow: visible;
    }
    body:not(.admin-mode) #chat-edge-tab .companion-mini-face {
      position: static;
      clip: auto;
      white-space: normal;
      margin: 0;
      padding: 0;
      overflow: hidden;
      opacity: 1;
      visibility: visible;
    }
    @keyframes poopoSingleImageIdle {
      0%, 16%, 100% { transform: translateY(0) rotate(0deg) scale(1); filter: drop-shadow(0 9px 12px rgba(20,35,21,.10)); }
      36% { transform: translateY(-4px) rotate(-1.1deg) scale(1.012); filter: drop-shadow(0 13px 15px rgba(20,35,21,.14)); }
      54% { transform: translateY(-2px) rotate(.8deg) scale(1.022); filter: drop-shadow(0 11px 14px rgba(20,35,21,.13)); }
      74% { transform: translateY(0) rotate(0deg) scale(1); filter: drop-shadow(0 9px 12px rgba(20,35,21,.10)); }
    }
    @keyframes poopoTapNod {
      0% { transform: translateY(0) rotate(0deg) scale(1); }
      45% { transform: translateY(-2px) rotate(1deg) scale(1.026); }
      100% { transform: translateY(0) rotate(0deg) scale(1); }
    }
    @media (max-width: 640px), (max-height: 560px) {
      body:not(.admin-mode) #chat-launcher.chat-launcher:not(.is-dragging):not(.is-drag-armed):not(.has-hopped) {
        animation-duration: 5.9s;
      }
      @keyframes poopoSingleImageIdle {
        0%, 18%, 100% { transform: translateY(0) rotate(0deg) scale(1); filter: drop-shadow(0 8px 11px rgba(20,35,21,.10)); }
        40% { transform: translateY(-3px) rotate(-.8deg) scale(1.01); filter: drop-shadow(0 11px 13px rgba(20,35,21,.13)); }
        58% { transform: translateY(-1px) rotate(.6deg) scale(1.016); filter: drop-shadow(0 10px 12px rgba(20,35,21,.12)); }
        76% { transform: translateY(0) rotate(0deg) scale(1); filter: drop-shadow(0 8px 11px rgba(20,35,21,.10)); }
      }
    }
    @media (prefers-reduced-motion: reduce) {
      body:not(.admin-mode) #chat-launcher.chat-launcher,
      body:not(.admin-mode) #chat-launcher.chat-launcher:hover,
      body:not(.admin-mode) #chat-launcher.chat-launcher:focus-visible,
      body:not(.admin-mode) #chat-launcher.chat-launcher:active {
        animation: none !important;
        transform: none !important;
        filter: none !important;
        transition-duration: .01ms !important;
        will-change: auto;
      }
    }
  


    body:not(.admin-mode) #user-view {
      display: flex;
      flex-direction: column;
      background: linear-gradient(180deg, #fffaf0 0%, #f3f8ed 48%, #fffaf0 100%);
    }
    body:not(.admin-mode) .navbar { min-height: 62px; border-bottom: 1px solid rgba(60, 83, 47, .16); background: rgba(255, 250, 239, .94); backdrop-filter: blur(14px); }
    body:not(.admin-mode) .navbar-inner { min-height: 62px; gap: 14px; }
    body:not(.admin-mode) .navbar-brand { flex: 0 0 auto; gap: 9px; }
    body:not(.admin-mode) .navbar-brand-icon { width: 42px; height: 42px; }
    body:not(.admin-mode) .nav-links { flex: 1 1 auto; justify-content: flex-end; gap: 3px; overflow-x: auto; scrollbar-width: thin; }
    body:not(.admin-mode) .nav-link { min-height: 40px; padding: 8px 10px; border-radius: 999px; white-space: nowrap; font-size: .9rem; }
    body:not(.admin-mode) .nav-link svg { width: 16px; height: 16px; }

    body:not(.admin-mode) #home { order: 1; }
    body:not(.admin-mode) #editorial-discovery { order: 2; }
    body:not(.admin-mode) #editorial-people { order: 3; }
    body:not(.admin-mode) #editorial-bulletin { order: 4; }
    body:not(.admin-mode) #editorial-browse { order: 5; }
    body:not(.admin-mode) #editorial-featured { order: 6; }
    body:not(.admin-mode) #editorial-connected { order: 7; }
    body:not(.admin-mode) #editorial-collections { order: 8; }
    body:not(.admin-mode) #showcase-band { order: 9; }
    body:not(.admin-mode) #latest-spotlight { order: 10; }
    body:not(.admin-mode) #recent-shelf { order: 11; }
    body:not(.admin-mode) #stories { order: 12; }
    body:not(.admin-mode) #music { order: 13; }
    body:not(.admin-mode) #saved-shelf { order: 14; }
    body:not(.admin-mode) #about { order: 15; }
    body:not(.admin-mode) #links { order: 16; }
    body:not(.admin-mode) #contact { order: 17; }
    body:not(.admin-mode) #beta-notice-section { order: 18; }
    body:not(.admin-mode) #announcement-section { display: none !important; }

    body:not(.admin-mode) #home.hero {
      width: min(1180px, calc(100vw - 32px));
      min-height: clamp(360px, 35vw, 430px) !important;
      margin: clamp(12px, 2vw, 22px) auto clamp(18px, 2vw, 28px);
      padding: clamp(24px, 3.2vw, 42px);
      border-radius: clamp(22px, 2.4vw, 34px);
      overflow: hidden;
      box-shadow: 0 22px 52px rgba(23, 46, 28, .18);
      border: 1px solid rgba(244, 205, 103, .22);
    }
    body:not(.admin-mode) #home .hero-container {
      width: 100%;
      max-width: 1120px;
      min-height: 0;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, .95fr) minmax(300px, .82fr);
      align-items: center;
      gap: clamp(22px, 4vw, 52px);
      text-align: left;
    }
    body:not(.admin-mode) #home #hero-logo { width: 56px; height: 56px; margin: 0 0 14px; border-radius: 18px; }
    body:not(.admin-mode) #home #hero-title { max-width: 680px; margin: 0; font-size: clamp(2.45rem, 4.6vw, 4.9rem) !important; line-height: .98; letter-spacing: 0; }
    body:not(.admin-mode) #home #hero-division { margin-top: 12px; color: #f4cd67; font-size: clamp(1rem, 1.5vw, 1.32rem); }
    body:not(.admin-mode) #home #hero-subtitle { max-width: 600px; margin: 12px 0 0; font-size: clamp(.98rem, 1.25vw, 1.12rem); line-height: 1.65; }
    body:not(.admin-mode) #home .flex.flex-wrap { grid-column: 1; justify-content: flex-start; gap: 12px; margin-top: 20px; }
    body:not(.admin-mode) #home .btn-light,
    body:not(.admin-mode) #home .btn-secondary { min-height: 44px; border-radius: 999px; padding: 10px 18px; font-size: .94rem; }
    body:not(.admin-mode) #home .notice-panel {
      grid-column: 2;
      grid-row: 1 / span 5;
      justify-self: stretch;
      align-self: stretch;
      min-height: 300px;
      max-width: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      border-radius: 24px;
      border: 1px solid rgba(255, 246, 218, .24);
      background: rgba(255, 250, 235, .08);
    }
    body:not(.admin-mode) .phase8b-hero-visual { position: relative; width: 100%; height: 100%; min-height: 300px; display: grid; align-content: end; padding: 18px; isolation: isolate; }
    body:not(.admin-mode) .phase8b-hero-visual img,
    body:not(.admin-mode) .phase8b-hero-visual .phase8b-art-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
    body:not(.admin-mode) .phase8b-hero-visual::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 28, 18, .08), rgba(14, 28, 18, .76)); }
    body:not(.admin-mode) .phase8b-hero-caption { display: grid; gap: 4px; max-width: 92%; color: #fffdf4; font-weight: 800; }
    body:not(.admin-mode) .phase8b-hero-caption strong { font-size: clamp(1.05rem, 1.5vw, 1.34rem); line-height: 1.12; }
    body:not(.admin-mode) .phase8b-hero-caption span { color: rgba(255,253,244,.82); font-size: .86rem; }

    body:not(.admin-mode) .phase8b-editorial-section { width: min(1180px, calc(100vw - 32px)); max-width: none; padding-block: clamp(20px, 3vw, 42px); }
    body:not(.admin-mode) .phase8b-section-head { gap: 7px; margin-bottom: 16px; }
    body:not(.admin-mode) .phase8b-section-head h2 { font-size: clamp(1.55rem, 2.7vw, 2.45rem); }
    body:not(.admin-mode) .phase8b-section-head p { font-size: .96rem; line-height: 1.52; }
    body:not(.admin-mode) .phase8b-eyebrow { padding: 6px 10px; font-size: .7rem; }
    body:not(.admin-mode) .phase8b-discovery-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .95fr); gap: 16px; align-items: stretch; }
    body:not(.admin-mode) .phase8b-editorial-panel { border: 1px solid rgba(42, 78, 48, .13); border-radius: 22px; background: rgba(255, 253, 245, .88); box-shadow: 0 16px 38px rgba(41, 62, 39, .09); padding: 16px; min-width: 0; }
    body:not(.admin-mode) .phase8b-panel-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    body:not(.admin-mode) .phase8b-panel-title { margin: 0; color: #233829; font-size: clamp(1.25rem, 2vw, 1.8rem); line-height: 1.05; font-weight: 900; }
    body:not(.admin-mode) .phase8b-panel-note { margin: 4px 0 0; color: #63705d; font-size: .86rem; font-weight: 700; line-height: 1.45; }
    body:not(.admin-mode) .phase8b-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    body:not(.admin-mode) .phase8b-category-card { position: relative; min-height: 220px; border: 1px solid rgba(42, 78, 48, .16); border-radius: 18px; overflow: hidden; background: #1c3224; display: flex; align-items: end; padding: 14px; color: #fffdf4; cursor: pointer; isolation: isolate; }
    body:not(.admin-mode) .phase8b-category-card img,
    body:not(.admin-mode) .phase8b-category-card .phase8b-art-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
    body:not(.admin-mode) .phase8b-category-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(17, 31, 20, .12), rgba(13, 25, 16, .84)); }
    body:not(.admin-mode) .phase8b-category-copy { display: grid; gap: 7px; min-width: 0; }
    body:not(.admin-mode) .phase8b-category-title { margin: 0; font-size: 1.12rem; font-weight: 900; line-height: 1.08; }
    body:not(.admin-mode) .phase8b-category-copy p { margin: 0; color: rgba(255,253,244,.82); font-size: .8rem; line-height: 1.35; font-weight: 700; }
    body:not(.admin-mode) .phase8b-count-pill { width: fit-content; border: 1px solid rgba(255,253,244,.25); border-radius: 999px; padding: 5px 8px; background: rgba(255,250,235,.12); color: #fff7cf; font-size: .72rem; font-weight: 900; }
    body:not(.admin-mode) .phase8b-weekly-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    body:not(.admin-mode) .phase8b-weekly-card { border: 1px solid rgba(42, 78, 48, .13); border-radius: 16px; background: #fffdf7; padding: 10px; display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 10px; align-items: center; cursor: pointer; min-width: 0; }
    body:not(.admin-mode) .phase8b-weekly-thumb { overflow: hidden; border-radius: 12px; background: #182719; aspect-ratio: 1; }
    body:not(.admin-mode) .phase8b-weekly-card.film .phase8b-weekly-thumb { aspect-ratio: 16 / 10; }
    body:not(.admin-mode) .phase8b-weekly-thumb img,
    body:not(.admin-mode) .phase8b-weekly-thumb .phase8b-art-placeholder { width: 100%; height: 100%; object-fit: cover; font-size: 2rem; }
    body:not(.admin-mode) .phase8b-weekly-copy { min-width: 0; display: grid; gap: 5px; }
    body:not(.admin-mode) .phase8b-weekly-title { color: #233829; font-weight: 900; line-height: 1.12; font-size: .96rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    body:not(.admin-mode) .phase8b-weekly-copy .phase8b-meta { font-size: .78rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    body:not(.admin-mode) .phase8b-people-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body:not(.admin-mode) .phase8b-person-card { padding: 13px; border-radius: 18px; }
    body:not(.admin-mode) .phase8b-person-top { grid-template-columns: 58px minmax(0, 1fr); gap: 10px; }
    body:not(.admin-mode) .phase8b-person-image { width: 58px; height: 58px; border-radius: 16px; }
    body:not(.admin-mode) .phase8b-person-bio { font-size: .82rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    body:not(.admin-mode) .phase8b-bulletin-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 12px; }
    body:not(.admin-mode) .phase8b-bulletin-card { border: 1px solid rgba(42, 78, 48, .13); border-radius: 20px; background: linear-gradient(135deg, rgba(255,253,245,.96), rgba(246,241,223,.92)); padding: 15px; display: grid; gap: 10px; min-width: 0; }
    body:not(.admin-mode) .phase8b-bulletin-card.lead { min-height: 210px; grid-template-columns: minmax(0, 1fr) minmax(180px, .55fr); align-items: stretch; }
    body:not(.admin-mode) .phase8b-bulletin-stack { display: grid; gap: 12px; }
    body:not(.admin-mode) .phase8b-bulletin-title { margin: 0; color: #233829; font-size: clamp(1.1rem, 2vw, 1.65rem); line-height: 1.12; font-weight: 900; }
    body:not(.admin-mode) .phase8b-bulletin-summary { margin: 0; color: #5a6855; font-weight: 650; line-height: 1.48; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    body:not(.admin-mode) .phase8b-bulletin-media { overflow: hidden; border-radius: 15px; background: #edf3e4; min-height: 120px; }
    body:not(.admin-mode) .phase8b-bulletin-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
    body:not(.admin-mode) #editorial-connected .phase8b-connected-shell { padding: clamp(16px, 2vw, 22px); }
    body:not(.admin-mode) #editorial-connected .phase8b-section-head { margin-bottom: 14px; }
    @media (max-width: 1180px) {
      body:not(.admin-mode) .nav-link { padding-inline: 8px; font-size: .84rem; }
      body:not(.admin-mode) .phase8b-discovery-grid { grid-template-columns: 1.2fr .8fr; }
      body:not(.admin-mode) .phase8b-category-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
      body:not(.admin-mode) .phase8b-people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 1023px) {
      body:not(.admin-mode) #home .hero-container,
      body:not(.admin-mode) .phase8b-discovery-grid,
      body:not(.admin-mode) .phase8b-bulletin-grid { grid-template-columns: 1fr; }
      body:not(.admin-mode) #home .notice-panel { grid-column: 1; grid-row: auto; min-height: 240px; }
      body:not(.admin-mode) .phase8b-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      body:not(.admin-mode) .phase8b-weekly-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      body:not(.admin-mode) .phase8b-weekly-card { grid-template-columns: 1fr; align-content: start; }
      body:not(.admin-mode) .phase8b-people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 700px) {
      body:not(.admin-mode) .navbar-inner { min-height: 58px; gap: 8px; }
      body:not(.admin-mode) .navbar-brand #brand-name { max-width: 136px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      body:not(.admin-mode) .nav-links { display: none; }
      body:not(.admin-mode) #home.hero { width: calc(100vw - 20px); min-height: auto !important; margin-top: 10px; padding: 20px; border-radius: 22px; }
      body:not(.admin-mode) #home #hero-title { font-size: clamp(2rem, 10vw, 2.2rem) !important; }
      body:not(.admin-mode) #home #hero-logo { width: 48px; height: 48px; }
      body:not(.admin-mode) #home .notice-panel,
      body:not(.admin-mode) .phase8b-hero-visual { min-height: 190px; }
      body:not(.admin-mode) #home .flex.flex-wrap { gap: 9px; }
      body:not(.admin-mode) #home .btn-light,
      body:not(.admin-mode) #home .btn-secondary { flex: 1 1 160px; padding-inline: 12px; }
      body:not(.admin-mode) .phase8b-editorial-section { width: calc(100vw - 20px); max-width: calc(100vw - 20px); padding-block: 22px; }
      body:not(.admin-mode) .phase8b-panel-head { align-items: flex-start; flex-direction: column; }
      body:not(.admin-mode) .phase8b-category-grid,
      body:not(.admin-mode) .phase8b-weekly-row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 10px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
      body:not(.admin-mode) .phase8b-category-card { flex: 0 0 min(78vw, 280px); min-height: 166px; scroll-snap-align: start; }
      body:not(.admin-mode) .phase8b-weekly-card { flex: 0 0 min(74vw, 250px); grid-template-columns: 76px minmax(0, 1fr); scroll-snap-align: start; }
      body:not(.admin-mode) .phase8b-people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
      body:not(.admin-mode) .phase8b-person-card { padding: 11px; gap: 9px; }
      body:not(.admin-mode) .phase8b-person-top { grid-template-columns: 46px minmax(0, 1fr); }
      body:not(.admin-mode) .phase8b-person-image { width: 46px; height: 46px; border-radius: 13px; }
      body:not(.admin-mode) .phase8b-person-bio { -webkit-line-clamp: 2; }
      body:not(.admin-mode) .phase8b-bulletin-card.lead { grid-template-columns: 1fr; min-height: auto; }
      body:not(.admin-mode) .phase8b-bulletin-media { min-height: 140px; order: -1; }
    }
    @media (max-width: 430px) {
      body:not(.admin-mode) .phase8b-category-card { flex-basis: min(76vw, 260px); }
      body:not(.admin-mode) .phase8b-weekly-card { flex-basis: min(78vw, 246px); }
      body:not(.admin-mode) .phase8b-people-grid { grid-template-columns: 1fr 1fr; }
    }
  


    body:not(.admin-mode) #user-view {
      display: flex;
      flex-direction: column;
      background: linear-gradient(180deg, #fffaf0 0%, #f3f8ed 46%, #fffaf0 100%);
    }
    body:not(.admin-mode) #home { order: 1; }
    body:not(.admin-mode) #stories { order: 2; }
    body:not(.admin-mode) #editorial-people { order: 3; }
    body:not(.admin-mode) #music { order: 4; }
    body:not(.admin-mode) #about { order: 5; }
    body:not(.admin-mode) #links { order: 6; }
    body:not(.admin-mode) #contact { order: 7; }
    body:not(.admin-mode) #beta-notice-section { order: 8; }
    body:not(.admin-mode) #editorial-discovery,
    body:not(.admin-mode) #editorial-featured,
    body:not(.admin-mode) #editorial-browse,
    body:not(.admin-mode) #editorial-connected,
    body:not(.admin-mode) #editorial-collections,
    body:not(.admin-mode) #editorial-bulletin,
    body:not(.admin-mode) #showcase-band,
    body:not(.admin-mode) #latest-spotlight,
    body:not(.admin-mode) #recent-shelf,
    body:not(.admin-mode) #saved-shelf,
    body:not(.admin-mode) #announcement-section {
      display: none !important;
    }
    body:not(.admin-mode) #home.hero {
      width: 100%;
      max-width: none;
      min-height: clamp(430px, 55vw, 760px) !important;
      margin: 0 auto;
      padding: clamp(42px, 7vw, 112px) clamp(24px, 6vw, 72px);
      border-radius: 0;
      border: 0;
      box-shadow: none;
      background-position: center !important;
      background-size: cover !important;
    }
    body:not(.admin-mode) #home.hero::after {
      content: none !important;
      display: none !important;
      background: none !important;
    }
    body:not(.admin-mode) #home .hero-container {
      position: relative;
      z-index: 1;
      max-width: 1180px;
      display: block;
      text-align: left;
    }
    body:not(.admin-mode) #home #hero-logo {
      width: 54px;
      height: 54px;
      margin: 0 0 22px;
      border-radius: 16px;
    }
    body:not(.admin-mode) #home #hero-title {
      max-width: 560px;
      font-size: clamp(3rem, 7vw, 6.6rem) !important;
      line-height: .9;
      margin: 0;
      letter-spacing: 0;
    }
    body:not(.admin-mode) #home #hero-division {
      margin-top: 28px;
      color: #f4cd67;
      font-size: clamp(1rem, 1.6vw, 1.35rem);
    }
    body:not(.admin-mode) #home #hero-subtitle {
      max-width: 520px;
      margin: 52px 0 0;
      color: rgba(255,253,244,.9);
      font-size: clamp(.95rem, 1.15vw, 1.08rem);
      line-height: 1.7;
    }
    body:not(.admin-mode) #home .notice-panel { display: none !important; }
    body:not(.admin-mode) #home .flex.flex-wrap {
      justify-content: flex-start;
      margin-top: 28px;
      gap: 12px;
    }
    body:not(.admin-mode) #home .btn-light,
    body:not(.admin-mode) #home .btn-secondary {
      min-height: 42px;
      border-radius: 999px;
      padding: 10px 18px;
      font-size: .9rem;
    }
    body:not(.admin-mode) #stories.section {
      padding-top: clamp(34px, 5vw, 70px);
      padding-bottom: clamp(32px, 5vw, 70px);
    }
    body:not(.admin-mode) #stories .section-title {
      font-size: clamp(2.2rem, 4.8vw, 5rem);
      color: #273c2a;
    }
    body:not(.admin-mode) #editorial-people.phase8b-editorial-section {
      width: 100%;
      max-width: none;
      padding: clamp(20px, 3vw, 34px) 0;
      background: #fffaf0;
      border-top: 1px solid rgba(64, 88, 52, .12);
      border-bottom: 1px solid rgba(64, 88, 52, .12);
      overflow: hidden;
    }
    body:not(.admin-mode) #editorial-people .phase8b-section-head {
      width: min(1180px, calc(100vw - 32px));
      margin-inline: auto;
      margin-bottom: 12px;
    }
    body:not(.admin-mode) #editorial-people .phase8b-section-head h2 {
      font-size: clamp(1.25rem, 2.2vw, 1.9rem);
    }
    body:not(.admin-mode) #editorial-people .phase8b-people-grid {
      width: min(1180px, calc(100vw - 32px));
      margin-inline: auto;
      display: flex;
      gap: 14px;
      overflow-x: auto;
      padding: 4px 0 12px;
      scroll-snap-type: x proximity;
      -webkit-overflow-scrolling: touch;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card {
      flex: 0 0 min(260px, 72vw);
      scroll-snap-align: start;
      border-radius: 18px;
      box-shadow: 0 12px 28px rgba(37, 58, 38, .08);
    }
    body:not(.admin-mode) #music.music-archive-section {
      width: 100%;
      max-width: none;
      margin: 0;
      border-radius: 0;
      padding-top: clamp(34px, 4.5vw, 64px);
      padding-bottom: clamp(34px, 4.5vw, 66px);
      background: linear-gradient(180deg, #172b1e, #102117);
    }
    body:not(.admin-mode) #music .music-section-head,
    body:not(.admin-mode) #music .music-feature,
    body:not(.admin-mode) #music .music-track-grid,
    body:not(.admin-mode) #music .music-pagination {
      width: min(1180px, calc(100vw - 32px));
      margin-left: auto;
      margin-right: auto;
    }
    body:not(.admin-mode) #music .section-title {
      font-size: clamp(1.85rem, 3.4vw, 3.8rem);
    }
    body:not(.admin-mode) #music .music-feature {
      max-height: 460px;
    }
    body:not(.admin-mode) #about.section {
      padding-top: clamp(34px, 4vw, 64px);
      padding-bottom: clamp(30px, 4vw, 58px);
    }
    body:not(.admin-mode) #links.section {
      padding-top: clamp(26px, 3vw, 48px);
      padding-bottom: clamp(26px, 3vw, 48px);
    }
    body:not(.admin-mode) #links .portal-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }
    body:not(.admin-mode) #links .portal-card {
      min-height: 96px;
      border-radius: 10px;
      background: linear-gradient(135deg, #1b3424, #0f2418);
      color: #fffdf4;
    }
    body:not(.admin-mode) #links .portal-title,
    body:not(.admin-mode) #links .portal-desc { color: inherit; }
    body:not(.admin-mode) #contact.section {
      padding-top: clamp(28px, 3vw, 46px);
      padding-bottom: clamp(40px, 5vw, 76px);
    }
    body:not(.admin-mode) #contact .contact-toggle-row {
      display: flex;
      justify-content: center;
      margin: 14px 0 18px;
    }
    body:not(.admin-mode) #contact .contact-toggle-btn {
      min-height: 44px;
      border-radius: 999px;
      padding: 10px 18px;
      border: 1px solid rgba(123, 91, 48, .32);
      background: #f4cd67;
      color: #26351f;
      font-weight: 900;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 12px 24px rgba(38, 49, 31, .1);
    }
    body:not(.admin-mode) #contact.contact-collapsed .contact-intake {
      display: none;
    }
    body:not(.admin-mode) #contact .contact-intake {
      animation: contactReveal .28s ease both;
    }
    @keyframes contactReveal {
      from { opacity: 0; transform: translateY(-8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @media (max-width: 900px) {
      body:not(.admin-mode) #links .portal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      body:not(.admin-mode) #music .music-feature { max-height: none; }
    }
    @media (max-width: 700px) {
      body:not(.admin-mode) #home.hero {
        min-height: 520px !important;
        padding: 34px 20px;
      }
      body:not(.admin-mode) #home #hero-title {
        max-width: 330px;
        font-size: clamp(2.5rem, 13vw, 3.6rem) !important;
      }
      body:not(.admin-mode) #home #hero-subtitle {
        margin-top: 28px;
        max-width: 330px;
      }
      body:not(.admin-mode) #home .btn-light,
      body:not(.admin-mode) #home .btn-secondary {
        flex: 0 1 auto;
      }
      body:not(.admin-mode) #links .portal-grid { grid-template-columns: 1fr; }
      body:not(.admin-mode) #editorial-people .phase8b-person-card { flex-basis: min(76vw, 230px); }
      body:not(.admin-mode) #contact .section-title { font-size: clamp(1.9rem, 9vw, 2.7rem); }
    }


    /* Creator strip, compact soundtrack shelf, and Phase 8 profile admin polish */
    body:not(.admin-mode) #editorial-people .phase8b-people-grid { padding: 5px clamp(42px, 5vw, 78px) 12px; mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
    body:not(.admin-mode) #editorial-people .phase8b-person-card { flex: 0 0 min(236px, 72vw); }
    body:not(.admin-mode) #editorial-people .phase8b-person-image { width: 62px; height: 62px; border-radius: 50%; flex: 0 0 62px; overflow: hidden; }
    body:not(.admin-mode) #editorial-people .phase8b-person-bio { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    body:not(.admin-mode) #music.music-archive-section { padding-top: clamp(30px, 3.5vw, 52px); padding-bottom: clamp(28px, 3.5vw, 50px); overflow: hidden; }
    body:not(.admin-mode) #music .music-section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px; margin-bottom: 18px; }
    body:not(.admin-mode) #music .section-title { font-size: clamp(1.8rem, 3vw, 3.35rem); }
    body:not(.admin-mode) #music .music-feature { display: none !important; }
    body:not(.admin-mode) #music .music-shelf { width: min(1180px, calc(100vw - 32px)); margin-inline: auto; display: flex; gap: 16px; overflow-x: auto; padding: 4px clamp(50px, 6vw, 92px) 18px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
    body:not(.admin-mode) #music .music-card { flex: 0 0 clamp(188px, 16vw, 235px); scroll-snap-align: center; min-width: 0; }
    body:not(.admin-mode) #music .music-card-art { aspect-ratio: 4 / 5; }
    body:not(.admin-mode) #music .music-card-copy { padding: 11px; }
    body:not(.admin-mode) #music .music-card-title { font-size: .92rem; }
    body:not(.admin-mode) #music .music-search-btn { min-height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fffdf4; padding: 9px 13px; font-weight: 900; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
    body:not(.admin-mode) #music .music-head-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
    .phase8-profile-studio-v2 .phase8-studio-grid { grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); align-items: start; gap: 18px; }
    .phase8-profile-studio-v2 .phase8-form-card { display: grid; gap: 18px; }
    .phase8-profile-editor-card { border: 1px solid #d8e4d1; border-radius: 18px; padding: 18px; background: #fbfdf8; box-shadow: 0 12px 30px rgba(43, 63, 39, .06); }
    .phase8-profile-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
    .phase8-profile-editor-head h4 { font-weight: 900; margin: 0; }
    .phase8-profile-preview-row { display: grid; grid-template-columns: 86px minmax(0, 1fr); align-items: center; gap: 14px; margin: 10px 0 12px; }
    .phase8-image-preview { width: 82px; height: 82px; border-radius: 22px; border: 1px solid #cfddc7; background: linear-gradient(135deg, #fff7df, #edf5e8); display: grid; place-items: center; color: #315b3c; font-weight: 900; overflow: hidden; }
    .phase8-image-preview img { width: 100%; height: 100%; object-fit: cover; }
    .phase8-profile-list-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
    .phase8-profile-list-head h4 { margin: 0; font-weight: 900; }
    .phase8-profile-list-scroll { max-height: 520px; overflow: auto; padding-right: 6px; }
    .phase8-profile-studio-v2 .phase8-entry { border-radius: 16px; padding: 13px; background: #fff; }
    .phase8-profile-studio-v2 .phase8-entry-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
    .phase8-profile-studio-v2 .btn-secondary.is-danger-soft { border-color: rgba(123, 68, 42, .34); color: #704127; background: #fff8ef; }
    @media (max-width: 960px) { .phase8-profile-studio-v2 .phase8-studio-grid { grid-template-columns: 1fr; } .phase8-profile-list-scroll { max-height: none; } }
    @media (max-width: 700px) { body:not(.admin-mode) #editorial-people .phase8b-people-grid, body:not(.admin-mode) #music .music-shelf { width: 100%; padding-inline: 22px; } body:not(.admin-mode) #music .music-section-head { grid-template-columns: 1fr; align-items: start; } body:not(.admin-mode) #music .music-card { flex-basis: min(64vw, 218px); } }
    @media (max-width: 560px) { .phase8-profile-preview-row { grid-template-columns: 1fr; } .phase8-profile-studio-v2 .phase8-entry-actions { grid-template-columns: 1fr; } }



    /* UX polish: creator cards, compact contact form, admin compression, stable upload wizard */
    body:not(.admin-mode) #editorial-people.phase8b-editorial-section { background: linear-gradient(180deg, #fffaf0, #f7f4e7); }
    body:not(.admin-mode) #editorial-people .phase8b-people-grid { justify-content: flex-start; }
    body:not(.admin-mode) #editorial-people .phase8b-person-card { cursor: pointer; border: 1px solid rgba(54,87,58,.16); background: rgba(255,253,244,.78); backdrop-filter: blur(10px); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
    body:not(.admin-mode) #editorial-people .phase8b-person-card:hover { transform: translateY(-3px); border-color: rgba(137,143,24,.35); box-shadow: 0 18px 34px rgba(37,58,38,.14); }
    body:not(.admin-mode) #editorial-people .phase8b-person-card:focus-within { outline: 3px solid rgba(244,196,48,.45); outline-offset: 3px; }
    body:not(.admin-mode) #editorial-people .phase8b-person-top { align-items: center; }
    body:not(.admin-mode) #music .music-shelf { position: relative; }
    body:not(.admin-mode) #music .music-card { transition: transform .22s ease, filter .22s ease, opacity .22s ease; }
    body:not(.admin-mode) #music .music-card:hover { transform: translateY(-4px) scale(1.01); }
    body:not(.admin-mode) #music .music-card:first-child,
    body:not(.admin-mode) #music .music-card:last-child { filter: blur(2px) saturate(.85); opacity: .62; }
    body:not(.admin-mode) #music .music-card:first-child:hover,
    body:not(.admin-mode) #music .music-card:last-child:hover { filter: none; opacity: 1; }
    body:not(.admin-mode) #contact.section { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(30px, 4vw, 54px); }
    body:not(.admin-mode) #contact .contact-section-head { margin-bottom: 10px; }
    body:not(.admin-mode) #contact .section-title { font-size: clamp(1.8rem, 3.2vw, 3.1rem); }
    body:not(.admin-mode) #contact .contact-intake { width: min(880px, calc(100vw - 28px)); margin-inline: auto; grid-template-columns: minmax(190px,.72fr) minmax(0,1.28fr); border-radius: 18px; overflow: hidden; }
    body:not(.admin-mode) #contact .contact-intro { padding: clamp(18px,2.2vw,26px); min-height: auto; }
    body:not(.admin-mode) #contact .contact-intro h3 { font-size: clamp(1.15rem,2vw,1.55rem); line-height: 1.22; }
    body:not(.admin-mode) #contact .contact-intro-list { grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
    body:not(.admin-mode) #contact .contact-intro-item { font-size: .78rem; line-height: 1.22; }
    body:not(.admin-mode) #contact .contact-response-note { display: none; }
    body:not(.admin-mode) #contact .contact-form { padding: clamp(18px,2.4vw,28px); }
    body:not(.admin-mode) #contact .contact-purpose-help,
    body:not(.admin-mode) #contact .contact-purpose-select { display: none; }
    body:not(.admin-mode) #contact .contact-public-optional { display: none; }
    body:not(.admin-mode) #contact .contact-purpose-choices { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
    body:not(.admin-mode) #contact .contact-purpose-choice { min-height: 54px; padding: 10px; }
    body:not(.admin-mode) #contact #contact-message { min-height: 118px; }
    body:not(.admin-mode) #contact .contact-submit-row { grid-template-columns: minmax(0,1fr); }
    body:not(.admin-mode) #contact .contact-submit-note { max-width: none; text-align: center; }
    body.admin-mode .admin-view { background: #f4f8ef; }
    body.admin-mode .admin-panel { padding: clamp(14px,1.6vw,22px); border-radius: 16px; }
    body.admin-mode .admin-panel-header { gap: 12px; }
    body.admin-mode .form-grid,
    body.admin-mode .phase8-two-col { gap: 12px; }
    body.admin-mode textarea { min-height: 92px; }
    body.admin-mode .admin-nav-scroll-wrap { position: sticky; top: 0; z-index: 80; background: rgba(244,248,239,.94); backdrop-filter: blur(14px); padding-block: 6px; }
    body.admin-mode .upload-step-shell { position: sticky; top: 74px; z-index: 70; background: #fffaf0; border-radius: 14px; box-shadow: 0 10px 24px rgba(32,48,28,.08); }
    body.admin-mode .upload-step-panel { min-height: 370px; }
    body.admin-mode .upload-step-footer { position: sticky; bottom: 0; z-index: 65; background: rgba(251,253,248,.94); backdrop-filter: blur(12px); border-top: 1px solid #dfe8d6; padding-top: 12px; margin-top: 12px; }
    body.admin-mode .upload-nav-actions { width: 100%; display: flex; justify-content: space-between; }
    body.admin-mode #upload-prev-btn,
    body.admin-mode #upload-next-btn { min-width: 132px; justify-content: center; }
    @media (max-width: 760px) {
      body:not(.admin-mode) #contact .contact-intake { grid-template-columns: 1fr; }
      body:not(.admin-mode) #contact .contact-intro-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
      body:not(.admin-mode) #contact .contact-purpose-choices { grid-template-columns: 1fr; }
      body.admin-mode .upload-step-panel { min-height: 420px; }
    }

  


    body:not(.admin-mode) #home.home-carousel-v2 { padding: 0; min-height: clamp(600px, 76vh, 840px); overflow: hidden; background: #10251a; }
    body:not(.admin-mode) #home.home-carousel-v2 .hero-container { width: 100%; max-width: none; padding: 0; }
    .home-carousel-shell { position: relative; min-height: clamp(600px, 76vh, 840px); overflow: hidden; color: #fffdf4; background: #10251a; isolation: isolate; }
    .home-carousel-slide { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0,.95fr) minmax(300px,.82fr); gap: clamp(24px,5vw,76px); align-items: center; padding: clamp(86px,8vw,138px) clamp(28px,6vw,96px) clamp(70px,7vw,106px); opacity: 0; pointer-events: none; transform: translateX(5%) scale(1.015); filter: blur(18px); transition: opacity .78s ease, transform .86s cubic-bezier(.2,.72,.18,1), filter .78s ease; }
    .home-carousel-slide.is-active { opacity: 1; pointer-events: auto; transform: none; filter: blur(0); z-index: 2; }
    .home-carousel-bg { position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 68% 34%, rgba(255,244,207,.48), transparent 33%), linear-gradient(90deg, rgba(5,18,12,.98), rgba(16,47,32,.84) 48%, rgba(255,253,244,.2)), var(--home-slide-image, none) center/cover no-repeat; transform: scale(1.035); }
    .home-carousel-slide::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6,18,12,.88), rgba(14,43,29,.68), rgba(255,253,244,.14)); backdrop-filter: blur(1.5px); }
    .home-carousel-copy { max-width: 760px; display: grid; gap: clamp(16px,2.2vw,28px); justify-items: start; }
    .home-carousel-kicker { color: #f6d565; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; font-size: clamp(.78rem,1.1vw,.95rem); }
    .home-carousel-title { margin: 0; max-width: 12ch; font-size: clamp(3.3rem,7.2vw,8.1rem); line-height: .88; font-weight: 950; letter-spacing: 0; color: #fffdf4; text-shadow: 0 22px 44px rgba(0,0,0,.34); }
    .home-carousel-summary { max-width: 620px; margin: 0; color: rgba(255,253,244,.86); font-size: clamp(1rem,1.35vw,1.24rem); line-height: 1.6; font-weight: 650; }
    .home-carousel-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
    .home-carousel-action { min-height: 46px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 0 21px; display: inline-flex; align-items: center; gap: 10px; color: #173524; background: rgba(255,253,244,.94); font-weight: 900; text-decoration: none; box-shadow: 0 20px 42px rgba(0,0,0,.18); }
    .home-carousel-action.secondary { color: #fffdf4; background: rgba(255,255,255,.12); backdrop-filter: blur(18px) saturate(1.2); }
    .home-carousel-action:hover, .home-carousel-action:focus-visible { transform: translateY(-2px); outline: 3px solid rgba(246,213,101,.38); outline-offset: 3px; }
    .home-carousel-media { min-height: clamp(260px,42vw,560px); border-radius: clamp(28px,4vw,52px); display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, rgba(255,253,244,.72), rgba(255,253,244,.18)); border: 1px solid rgba(255,255,255,.34); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 38px 80px rgba(0,0,0,.28); backdrop-filter: blur(22px) saturate(1.35); }
    .home-carousel-media img, .home-carousel-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
    .home-carousel-mark { font-size: clamp(3.8rem,9vw,8rem); font-weight: 950; color: rgba(25,58,38,.18); }
    .home-carousel-arrow { position: absolute; z-index: 8; top: 50%; transform: translateY(-50%); width: clamp(46px,4vw,60px); height: clamp(46px,4vw,60px); border-radius: 999px; border: 1px solid rgba(255,255,255,.32); background: rgba(255,253,244,.16); color: #fffdf4; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(18px) saturate(1.25); }
    .home-carousel-arrow.prev { left: clamp(12px,2.2vw,32px); } .home-carousel-arrow.next { right: clamp(12px,2.2vw,32px); }
    .home-carousel-dots { position: absolute; z-index: 8; left: 50%; bottom: clamp(22px,3vw,42px); transform: translateX(-50%); display: flex; gap: 10px; padding: 10px 14px; border-radius: 999px; background: rgba(255,253,244,.13); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(16px); }
    .home-carousel-dot { width: 10px; height: 10px; border: 0; border-radius: 999px; background: rgba(255,255,255,.45); cursor: pointer; padding: 0; }
    .home-carousel-dot.is-active { width: 30px; background: #f6d565; }
    .phase8b-person-card { position: relative; min-height: 206px; overflow: hidden; background: linear-gradient(145deg, rgba(255,253,244,.92), rgba(239,247,230,.74)); box-shadow: 0 18px 42px rgba(28,58,38,.11); transition: transform .2s ease, box-shadow .2s ease; }
    .phase8b-person-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 72px; background: var(--person-cover, linear-gradient(115deg, rgba(46,92,60,.18), rgba(246,213,101,.2))) center/cover no-repeat; z-index: 0; }
    .phase8b-person-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,253,244,0), rgba(255,253,244,.78) 72px, rgba(255,253,244,.94)); pointer-events: none; z-index: 0; }
    .phase8b-person-card > * { position: relative; z-index: 1; }
    .phase8b-person-card:hover, .phase8b-person-card:focus-visible { transform: translateY(-4px); box-shadow: 0 26px 56px rgba(28,58,38,.18); outline: none; }
    .phase8b-person-top { align-items: end; padding-top: 28px; }
    .phase8b-person-image { width: 74px; height: 74px; flex: 0 0 74px; border: 4px solid rgba(255,253,244,.9); box-shadow: 0 12px 28px rgba(0,0,0,.16); }
    .phase8b-person-name { font-size: 1.08rem; line-height: 1.08; overflow-wrap: anywhere; }
    .phase8b-person-bio { min-height: 48px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .phase8b-type-indicators { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
    .phase8b-type-pill { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 9px; border-radius: 999px; background: rgba(46,92,60,.09); color: #2f533a; font-size: .76rem; font-weight: 900; }
    .phase8b-view-profile { margin-top: auto; justify-content: center; background: rgba(47,83,58,.95); color: #fffdf4; border-color: rgba(47,83,58,.2); }
    .creator-profile-overlay { position: fixed; inset: 0; z-index: 10020; display: none; align-items: center; justify-content: center; padding: clamp(14px,3vw,34px); background: rgba(7,18,12,.58); backdrop-filter: blur(14px); }
    .creator-profile-overlay.is-open { display: flex; }
    .creator-profile-shell { width: min(1080px,100%); max-height: min(88vh,900px); overflow: auto; border-radius: clamp(22px,3vw,36px); background: #fffdf4; color: #203528; box-shadow: 0 44px 100px rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.5); }
    .creator-profile-hero { position: relative; min-height: 280px; display: grid; align-items: end; padding: clamp(22px,4vw,42px); color: #fffdf4; overflow: hidden; background: #173524 var(--profile-cover, none) center/cover no-repeat; }
    .creator-profile-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,27,17,.92), rgba(9,27,17,.58), rgba(9,27,17,.2)); backdrop-filter: blur(var(--profile-blur, 0px)); }
    .creator-profile-close { position: absolute; top: 18px; right: 18px; z-index: 3; width: 46px; height: 46px; border: 0; border-radius: 999px; background: rgba(255,253,244,.92); color: #203528; display: grid; place-items: center; cursor: pointer; }
    .creator-profile-head { position: relative; z-index: 2; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 18px; align-items: end; max-width: 780px; }
    .creator-profile-avatar { width: clamp(86px,11vw,124px); height: clamp(86px,11vw,124px); border-radius: 28px; overflow: hidden; background: rgba(255,253,244,.92); color: #2f533a; display: grid; place-items: center; font-weight: 950; font-size: 1.5rem; border: 4px solid rgba(255,253,244,.92); box-shadow: 0 22px 42px rgba(0,0,0,.25); }
    .creator-profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .creator-profile-title { margin: 0; font-size: clamp(2rem,5vw,4.6rem); line-height: .98; letter-spacing: 0; }
    .creator-profile-role { font-weight: 900; color: #f6d565; margin-top: 8px; }
    .creator-profile-body { display: grid; grid-template-columns: minmax(0,.95fr) minmax(280px,.65fr); gap: clamp(18px,3vw,34px); padding: clamp(22px,4vw,42px); }
    .creator-profile-panel { border: 1px solid rgba(47,83,58,.15); border-radius: 22px; background: rgba(255,255,255,.72); padding: 18px; display: grid; gap: 14px; }
    .creator-profile-bio { color: #4f614f; line-height: 1.65; font-weight: 650; margin: 0; }
    .creator-profile-stats, .creator-profile-actions { display: flex; flex-wrap: wrap; gap: 9px; }
    .creator-profile-pill, .creator-profile-button { min-height: 38px; border-radius: 999px; border: 1px solid rgba(47,83,58,.16); background: rgba(47,83,58,.08); color: #2f533a; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; font-weight: 900; text-decoration: none; }
    .creator-profile-button.primary { background: #2f533a; color: #fffdf4; }
    .creator-profile-work-list { display: grid; gap: 10px; }
    .creator-profile-work { width: 100%; border: 1px solid rgba(47,83,58,.14); border-radius: 16px; background: #fffdf4; padding: 12px; display: grid; grid-template-columns: 58px minmax(0,1fr) auto; gap: 12px; align-items: center; text-align: left; cursor: pointer; color: #203528; }
    .creator-profile-work-thumb { width: 58px; height: 58px; border-radius: 12px; overflow: hidden; background: #eaf2e5; }
    .creator-profile-work-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    @media (max-width: 900px) {
      body:not(.admin-mode) #home.home-carousel-v2, .home-carousel-shell { min-height: auto; }
      .home-carousel-slide { position: relative; min-height: 720px; grid-template-columns: 1fr; align-content: center; padding: 88px 22px 82px; }
      .home-carousel-slide:not(.is-active) { display: none; }
      .home-carousel-title { font-size: clamp(3.2rem,16vw,5.4rem); max-width: 11ch; }
      .home-carousel-media { min-height: 260px; max-height: 330px; }
      .home-carousel-arrow { top: auto; bottom: 20px; transform: none; }
      .home-carousel-arrow.prev { left: 20px; } .home-carousel-arrow.next { right: 20px; }
      .home-carousel-dots { bottom: 28px; }
      .phase8b-people-grid { grid-template-columns: 1fr !important; }
      .creator-profile-body, .creator-profile-head { grid-template-columns: 1fr; }
      .creator-profile-work { grid-template-columns: 50px minmax(0,1fr); }
      .creator-profile-work i { display: none; }
    }
  


    body:not(.admin-mode) #home.home-carousel-v2 {
      --home-carousel-height: clamp(560px, calc(100svh - 82px), 760px);
      height: var(--home-carousel-height);
      min-height: var(--home-carousel-height);
    }
    .home-carousel-shell {
      height: var(--home-carousel-height, clamp(560px, 76vh, 760px));
      min-height: var(--home-carousel-height, clamp(560px, 76vh, 760px));
      overflow: hidden;
      contain: layout paint;
    }
    .home-carousel-track { position: absolute; inset: 0; overflow: hidden; }
    .home-carousel-slide {
      height: 100%;
      min-height: 100%;
      grid-template-columns: minmax(0, 1fr);
      align-content: center;
      padding: clamp(82px, 7vw, 132px) clamp(28px, 8vw, 120px) clamp(76px, 6vw, 104px);
      transform: translate3d(34px, 0, 0) scale(1.012);
      filter: blur(12px) saturate(.88);
      transition: opacity .78s cubic-bezier(.22,1,.36,1), transform .84s cubic-bezier(.22,1,.36,1), filter .72s cubic-bezier(.22,1,.36,1);
      will-change: opacity, transform, filter;
    }
    .home-carousel-slide.is-active {
      transform: translate3d(0, 0, 0) scale(1);
      filter: blur(0) saturate(1);
      will-change: auto;
    }
    .home-carousel-slide.is-prev,
    .home-carousel-slide.is-next {
      opacity: .26;
      pointer-events: none;
      z-index: 1;
      filter: blur(12px) saturate(.72);
    }
    .home-carousel-slide.is-prev { transform: translate3d(-78%, 0, 0) scale(.9); }
    .home-carousel-slide.is-next { transform: translate3d(78%, 0, 0) scale(.9); }
    .home-carousel-slide::before {
      background:
        radial-gradient(circle at 12% 50%, rgba(8, 31, 19, .96), rgba(8, 31, 19, .64) 28%, transparent 56%),
        linear-gradient(90deg, rgba(4, 18, 11, .9), rgba(13, 39, 26, .74) 42%, rgba(13, 39, 26, .34));
      backdrop-filter: blur(.8px);
    }
    .home-carousel-bg {
      background:
        radial-gradient(circle at 68% 34%, rgba(255,244,207,.42), transparent 34%),
        linear-gradient(90deg, rgba(5,18,12,.96), rgba(16,47,32,.76) 48%, rgba(6,22,14,.22)),
        var(--home-slide-image, none) center/cover no-repeat;
    }
    .home-carousel-copy {
      position: relative;
      z-index: 4;
      max-width: min(660px, 88vw);
      padding: clamp(18px, 2.4vw, 34px);
      border: 1px solid rgba(255,253,244,.18);
      border-radius: clamp(24px, 3vw, 42px);
      background: linear-gradient(135deg, rgba(4, 22, 13, .62), rgba(19, 54, 34, .24));
      box-shadow: 0 28px 80px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08);
      backdrop-filter: blur(10px) saturate(1.1);
    }
    .home-carousel-title { font-size: clamp(2.85rem, 6vw, 6.85rem); max-width: 13ch; }
    .home-carousel-summary {
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .home-carousel-media { display: none !important; }
    .home-carousel-arrow { transition: transform .22s ease, background .22s ease, opacity .22s ease; }
    .home-carousel-arrow:hover { background: rgba(255,253,244,.26); transform: translateY(-50%) scale(1.04); }
    @media (max-width: 900px) {
      body:not(.admin-mode) #home.home-carousel-v2 {
        --home-carousel-height: clamp(540px, 80svh, 680px);
        height: var(--home-carousel-height);
        min-height: var(--home-carousel-height);
      }
      .home-carousel-slide,
      .home-carousel-slide:not(.is-active) {
        position: absolute;
        display: grid;
        min-height: 100%;
        height: 100%;
        padding: 72px 22px 76px;
      }
      .home-carousel-copy { max-width: min(560px, 92vw); padding: 18px; }
      .home-carousel-title { font-size: clamp(2.55rem, 13vw, 4.9rem); max-width: 11ch; }
      .home-carousel-summary { -webkit-line-clamp: 4; font-size: .98rem; }
      .home-carousel-arrow { top: auto; bottom: 18px; transform: none; }
      .home-carousel-arrow:hover { transform: scale(1.04); }
      .home-carousel-arrow.prev { left: 18px; }
      .home-carousel-arrow.next { right: 18px; }
      .home-carousel-dots { bottom: 25px; }
    }
    @media (max-width: 930px) and (orientation: landscape), (max-height: 480px) and (orientation: landscape) {
      body:not(.admin-mode) #home.home-carousel-v2 {
        --home-carousel-height: clamp(330px, calc(100svh - 64px), 440px);
      }
      .home-carousel-slide {
        padding: 24px 72px 42px;
        align-content: center;
      }
      .home-carousel-copy {
        max-width: min(560px, 57vw);
        padding: 14px 16px;
        gap: 10px;
      }
      .home-carousel-kicker { font-size: .72rem; }
      .home-carousel-title { font-size: clamp(2rem, 8.8vh, 3.4rem); max-width: 12ch; line-height: .92; }
      .home-carousel-summary { -webkit-line-clamp: 3; font-size: .86rem; line-height: 1.45; }
      .home-carousel-action { min-height: 44px; padding-inline: 16px; }
      .home-carousel-arrow { top: 50%; bottom: auto; transform: translateY(-50%); }
      .home-carousel-arrow:hover { transform: translateY(-50%) scale(1.04); }
      .home-carousel-dots { bottom: 12px; }
    }
    @media (max-width: 460px) {
      body:not(.admin-mode) #home.home-carousel-v2 {
        --home-carousel-height: clamp(520px, 78svh, 640px);
      }
      .home-carousel-copy { border-radius: 24px; }
      .home-carousel-title { font-size: clamp(2.4rem, 12.5vw, 4rem); }
      .home-carousel-actions { gap: 9px; }
      .home-carousel-action { width: 100%; justify-content: center; }
    }
  


    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-copy {
      opacity: 1 !important;
      visibility: visible !important;
      z-index: 30 !important;
      background: linear-gradient(135deg, rgba(3, 18, 11, .84), rgba(20, 55, 34, .54)) !important;
      border: 1px solid rgba(255, 253, 244, .28) !important;
      box-shadow: 0 30px 90px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12) !important;
      backdrop-filter: blur(8px) saturate(1.12) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-copy *,
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-title,
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-summary {
      opacity: 1 !important;
      visibility: visible !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-title {
      color: #fffdf4 !important;
      text-shadow: 0 22px 52px rgba(0,0,0,.58), 0 2px 0 rgba(0,0,0,.18) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-summary {
      color: rgba(255,253,244,.94) !important;
      text-shadow: 0 12px 28px rgba(0,0,0,.42) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-kicker {
      color: #f8d767 !important;
      text-shadow: 0 10px 24px rgba(0,0,0,.42) !important;
    }
    body:not(.admin-mode) #stories { order: 4 !important; }
    body:not(.admin-mode) #editorial-people { order: 5 !important; }
    body:not(.admin-mode) #music { order: 6 !important; }
    body:not(.admin-mode) #editorial-people.phase8b-editorial-section {
      padding-block: clamp(26px, 4vw, 52px) !important;
      background: linear-gradient(180deg, #fffaf0, #f8f5e9) !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-section-head {
      max-width: min(1120px, calc(100vw - 36px)) !important;
      margin: 0 auto 16px !important;
      text-align: left !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-section-head h2 {
      font-size: clamp(1.55rem, 2.5vw, 2.25rem) !important;
      margin-bottom: 4px !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-section-head p {
      max-width: 720px !important;
      font-size: clamp(.92rem, 1.2vw, 1rem) !important;
      line-height: 1.45 !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-people-grid {
      width: min(1120px, calc(100vw - 36px)) !important;
      max-width: min(1120px, calc(100vw - 36px)) !important;
      margin-inline: auto !important;
      display: grid !important;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
      gap: 12px !important;
      padding: 0 !important;
      overflow: visible !important;
      mask-image: none !important;
      -webkit-mask-image: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card {
      min-height: 168px !important;
      padding: 13px !important;
      border-radius: 18px !important;
      gap: 8px !important;
      background: linear-gradient(145deg, rgba(255,253,244,.96), rgba(240,247,231,.86)) !important;
      box-shadow: 0 12px 28px rgba(31, 54, 34, .1) !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card::before {
      height: 46px !important;
      opacity: .46 !important;
      filter: blur(1px) !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card::after {
      background: linear-gradient(180deg, rgba(255,253,244,.22), rgba(255,253,244,.93) 52px, rgba(255,253,244,.98)) !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-top {
      display: grid !important;
      grid-template-columns: 50px minmax(0, 1fr) !important;
      gap: 10px !important;
      align-items: center !important;
      padding-top: 6px !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-image {
      width: 50px !important;
      height: 50px !important;
      border-radius: 14px !important;
      border-width: 3px !important;
      box-shadow: 0 8px 18px rgba(0,0,0,.12) !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-chip {
      display: inline-flex !important;
      margin-bottom: 3px !important;
      font-size: .68rem !important;
      line-height: 1 !important;
      padding: 6px 8px !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-name {
      font-size: 1rem !important;
      line-height: 1.08 !important;
      overflow-wrap: anywhere !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-meta {
      font-size: .82rem !important;
      line-height: 1.2 !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-bio {
      min-height: 0 !important;
      font-size: .83rem !important;
      line-height: 1.35 !important;
      color: #5e6d58 !important;
      -webkit-line-clamp: 2 !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-linked-works {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 6px !important;
      margin-top: auto !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-mini-link,
    body:not(.admin-mode) #editorial-people .phase8b-type-pill {
      min-height: 30px !important;
      padding: 0 9px !important;
      font-size: .75rem !important;
      white-space: normal !important;
    }
    @media (max-width: 640px) {
      body:not(.admin-mode) #editorial-people .phase8b-people-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-card { min-height: 0 !important; }
    }
  


    body:not(.admin-mode) #home.home-carousel-v2 {
      --home-carousel-height: clamp(520px, 72svh, 700px) !important;
      height: var(--home-carousel-height) !important;
      min-height: var(--home-carousel-height) !important;
      display: block !important;
      width: 100% !important;
      max-width: none !important;
      grid-template-columns: none !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .hero-container {
      display: block !important;
      width: 100% !important;
      max-width: none !important;
      min-width: 100% !important;
      height: 100% !important;
      justify-self: stretch !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-shell {
      height: var(--home-carousel-height) !important;
      min-height: var(--home-carousel-height) !important;
      width: 100% !important;
      max-width: none !important;
      min-width: 100% !important;
      overflow: hidden !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-track {
      width: 100% !important;
      min-width: 100% !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide {
      inset: 0 !important;
      width: 100% !important;
      max-width: none !important;
      min-width: 100% !important;
      height: 100% !important;
      min-height: 100% !important;
      padding: clamp(58px, 5.8vw, 92px) clamp(22px, 5.2vw, 86px) clamp(54px, 5vw, 82px) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-bg {
      background:
        radial-gradient(circle at 66% 34%, rgba(246, 213, 101, .38), transparent 34%),
        linear-gradient(90deg, rgba(4, 19, 11, .98) 0%, rgba(8, 31, 19, .9) 31%, rgba(13, 43, 28, .58) 54%, rgba(13, 43, 28, .22) 100%),
        var(--home-slide-image, none) center/cover no-repeat !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide::before {
      background:
        radial-gradient(circle at 18% 50%, rgba(3, 18, 11, .9), rgba(3, 18, 11, .42) 28%, transparent 58%),
        linear-gradient(90deg, rgba(3, 18, 11, .62), transparent 78%) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-copy {
      position: absolute !important;
      left: clamp(24px, 6vw, 92px) !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      display: grid !important;
      width: min(610px, calc(100vw - 48px)) !important;
      max-width: min(610px, calc(100vw - 48px)) !important;
      padding: clamp(18px, 2.8vw, 34px) !important;
      gap: clamp(11px, 1.5vw, 18px) !important;
      opacity: 1 !important;
      visibility: visible !important;
      z-index: 40 !important;
      color: #fffdf4 !important;
      border-radius: clamp(22px, 3vw, 34px) !important;
      background: linear-gradient(135deg, rgba(3, 18, 11, .9), rgba(16, 50, 32, .6)) !important;
      border: 1px solid rgba(255, 253, 244, .28) !important;
      box-shadow: 0 26px 74px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
      backdrop-filter: blur(12px) saturate(1.16) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-title {
      max-width: 12.5ch !important;
      font-size: clamp(2.35rem, 5.45vw, 5.9rem) !important;
      line-height: .9 !important;
      color: #fffdf4 !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-summary {
      max-width: 48ch !important;
      font-size: clamp(.94rem, 1.16vw, 1.12rem) !important;
      line-height: 1.5 !important;
      color: rgba(255, 253, 244, .93) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-kicker {
      color: #f6d565 !important;
      font-size: clamp(.72rem, .9vw, .86rem) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-actions {
      gap: 10px !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-action {
      min-height: 42px !important;
      padding-inline: 17px !important;
      font-size: .9rem !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide.is-prev {
      transform: translate3d(-74%, 0, 0) scale(.92) !important;
      opacity: .18 !important;
      filter: blur(14px) saturate(.72) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide.is-next {
      transform: translate3d(74%, 0, 0) scale(.92) !important;
      opacity: .18 !important;
      filter: blur(14px) saturate(.72) !important;
    }
    body:not(.admin-mode) #stories { order: 2 !important; }
    body:not(.admin-mode) #editorial-people { order: 3 !important; }
    body:not(.admin-mode) #music { order: 4 !important; }
    body:not(.admin-mode) #about { order: 5 !important; }
    body:not(.admin-mode) #links { order: 6 !important; }
    body:not(.admin-mode) #contact { order: 7 !important; }

    body:not(.admin-mode) #editorial-people.phase8b-editorial-section {
      padding-block: clamp(18px, 2.8vw, 34px) !important;
      background: linear-gradient(180deg, #fffaf0, #f8f5e9) !important;
      overflow: hidden !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-section-head {
      width: min(1120px, calc(100vw - 30px)) !important;
      max-width: min(1120px, calc(100vw - 30px)) !important;
      margin: 0 auto 10px !important;
      text-align: left !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-section-head .phase8b-eyebrow {
      font-size: .68rem !important;
      padding: 5px 10px !important;
      min-height: 0 !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-section-head h2 {
      font-size: clamp(1.16rem, 1.75vw, 1.55rem) !important;
      margin: 5px 0 2px !important;
      line-height: 1.08 !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-section-head p {
      max-width: 680px !important;
      font-size: clamp(.76rem, 1vw, .9rem) !important;
      line-height: 1.35 !important;
      margin: 0 !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-people-grid {
      width: min(1120px, calc(100vw - 30px)) !important;
      max-width: min(1120px, calc(100vw - 30px)) !important;
      margin-inline: auto !important;
      display: flex !important;
      flex-wrap: nowrap !important;
      justify-content: flex-start !important;
      align-items: stretch !important;
      gap: 9px !important;
      padding: 0 0 8px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      scroll-snap-type: x proximity !important;
      mask-image: none !important;
      -webkit-mask-image: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card {
      flex: 0 0 clamp(118px, 10vw, 146px) !important;
      width: clamp(118px, 10vw, 146px) !important;
      min-height: 126px !important;
      max-height: 146px !important;
      padding: 10px !important;
      gap: 5px !important;
      border-radius: 14px !important;
      scroll-snap-align: start !important;
      background: linear-gradient(150deg, rgba(255, 253, 244, .98), rgba(240, 247, 231, .88)) !important;
      border: 1px solid rgba(54, 87, 58, .14) !important;
      box-shadow: 0 8px 18px rgba(31, 54, 34, .09) !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 12px 24px rgba(31, 54, 34, .12) !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card::before {
      height: 36px !important;
      opacity: .28 !important;
      filter: blur(1px) !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card::after {
      background: linear-gradient(180deg, rgba(255,253,244,.2), rgba(255,253,244,.92) 40px, rgba(255,253,244,.98)) !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-top {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 6px !important;
      align-items: start !important;
      padding-top: 2px !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-image {
      width: 46px !important;
      height: 46px !important;
      flex: 0 0 46px !important;
      border-radius: 11px !important;
      border-width: 2px !important;
      box-shadow: 0 5px 12px rgba(0,0,0,.1) !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-chip {
      display: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-name {
      font-size: .82rem !important;
      line-height: 1.05 !important;
      max-height: 2.1em !important;
      overflow: hidden !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-meta {
      display: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-bio {
      display: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-type-indicators,
    body:not(.admin-mode) #editorial-people .phase8b-type-pill {
      display: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-linked-works {
      display: flex !important;
      justify-content: flex-end !important;
      align-items: center !important;
      min-height: 30px !important;
      margin-top: auto !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-linked-works > * {
      display: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-linked-works .phase8b-view-profile {
      display: inline-grid !important;
      place-items: center !important;
      width: 30px !important;
      height: 30px !important;
      min-height: 30px !important;
      padding: 0 !important;
      font-size: 0 !important;
      border-radius: 999px !important;
      margin-left: auto !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-linked-works .phase8b-view-profile i {
      width: 15px !important;
      height: 15px !important;
    }
    @media (max-width: 900px) {
      body:not(.admin-mode) #home.home-carousel-v2 {
        --home-carousel-height: clamp(500px, 72svh, 620px) !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        display: block !important;
        padding: 0 !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide:not(.is-active) {
        display: block !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-copy {
        left: 18px !important;
        top: 50% !important;
        width: min(420px, calc(100vw - 36px)) !important;
        max-width: min(420px, calc(100vw - 36px)) !important;
        padding: 16px !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-title {
        font-size: clamp(2rem, 10vw, 3.8rem) !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-summary {
        font-size: .86rem !important;
        -webkit-line-clamp: 2 !important;
      }
    }
    @media (max-width: 640px) {
      body:not(.admin-mode) #editorial-people .phase8b-people-grid {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        overflow-x: auto !important;
        padding-bottom: 8px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-card {
        flex-basis: min(138px, 42vw) !important;
        width: min(138px, 42vw) !important;
        min-height: 124px !important;
      }
    }
  


    body:not(.admin-mode) #home.home-carousel-v2 {
      --home-carousel-height: clamp(520px, 70svh, 720px) !important;
      --home-safe-bottom: clamp(72px, 8svh, 104px);
      overflow: hidden !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .hero-container,
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-shell,
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-track,
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide {
      width: 100% !important;
      max-width: none !important;
      min-width: 0 !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide {
      transition: opacity .72s ease, transform .72s cubic-bezier(.2,.8,.2,1), filter .72s ease !important;
      filter: blur(7px) saturate(.92);
      transform: translateX(4%) scale(1.012);
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide.is-active {
      filter: blur(0) saturate(1);
      transform: translateX(0) scale(1);
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide.is-prev {
      transform: translateX(-4%) scale(1.012);
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide.is-transitioning {
      will-change: opacity, transform, filter;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        radial-gradient(circle at 17% 37%, rgba(1, 14, 8, .86) 0 22%, rgba(1, 14, 8, .56) 39%, transparent 62%),
        linear-gradient(90deg, rgba(1, 14, 8, .9) 0%, rgba(5, 24, 15, .68) 34%, rgba(5, 24, 15, .18) 67%, rgba(5, 24, 15, .46) 100%);
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-copy {
      position: absolute !important;
      left: clamp(28px, 6vw, 96px) !important;
      top: clamp(76px, 11svh, 118px) !important;
      bottom: auto !important;
      transform: none !important;
      width: min(650px, 53vw) !important;
      max-width: min(650px, 53vw) !important;
      max-height: calc(100% - var(--home-safe-bottom) - clamp(76px, 11svh, 118px)) !important;
      padding: 0 !important;
      display: grid !important;
      align-content: start !important;
      justify-items: start !important;
      gap: clamp(14px, 2.1vw, 24px) !important;
      background: transparent !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      overflow: visible !important;
      z-index: 5 !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-title {
      max-width: 10.5ch !important;
      font-size: clamp(4rem, 7.1vw, 8.2rem) !important;
      line-height: .88 !important;
      letter-spacing: 0 !important;
      color: #fffdf4 !important;
      text-shadow: 0 18px 42px rgba(0,0,0,.42) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-summary {
      max-width: 600px !important;
      color: rgba(255,253,244,.9) !important;
      font-size: clamp(1rem, 1.2vw, 1.2rem) !important;
      line-height: 1.5 !important;
      text-shadow: 0 10px 30px rgba(0,0,0,.36) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-kicker {
      color: #f6d565 !important;
      text-shadow: 0 10px 24px rgba(0,0,0,.34) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-media {
      z-index: 2 !important;
      pointer-events: none !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-action,
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-arrow,
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-dot {
      pointer-events: auto !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-arrow {
      width: clamp(42px, 4.3vw, 62px) !important;
      height: clamp(42px, 4.3vw, 62px) !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      z-index: 12 !important;
      background: rgba(255,253,244,.13) !important;
      border: 1px solid rgba(255,253,244,.24) !important;
      backdrop-filter: blur(8px) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-arrow.prev { left: clamp(12px, 2.4vw, 30px) !important; }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-arrow.next { right: clamp(12px, 2.4vw, 30px) !important; }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-dots {
      bottom: clamp(22px, 3.2svh, 34px) !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      z-index: 12 !important;
      background: rgba(255,253,244,.14) !important;
      backdrop-filter: blur(8px) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .poopo-launcher,
    body:not(.admin-mode) #home.home-carousel-v2 .poopo-widget,
    body:not(.admin-mode) #home.home-carousel-v2 .poopo-float,
    body:not(.admin-mode) #home.home-carousel-v2 .poopo-floating {
      max-width: min(220px, 40vw) !important;
    }
    body:not(.admin-mode) #editorial-people.phase8b-editorial-section {
      padding-block: clamp(26px, 3.5vw, 48px) !important;
      background: linear-gradient(180deg, #fffaf0 0%, #f8f5e9 100%) !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-section-head {
      width: min(1120px, calc(100vw - 36px)) !important;
      max-width: min(1120px, calc(100vw - 36px)) !important;
      margin-inline: auto !important;
      margin-bottom: 14px !important;
      text-align: left !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-people-grid {
      width: min(1120px, calc(100vw - 36px)) !important;
      max-width: min(1120px, calc(100vw - 36px)) !important;
      margin-inline: auto !important;
      padding: 0 0 8px !important;
      display: grid !important;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
      gap: 14px !important;
      overflow: visible !important;
      mask-image: none !important;
      justify-content: stretch !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card {
      width: auto !important;
      min-width: 0 !important;
      min-height: 236px !important;
      padding: 18px 16px !important;
      display: grid !important;
      align-content: start !important;
      justify-items: center !important;
      gap: 9px !important;
      text-align: center !important;
      border-radius: 18px !important;
      border: 1px solid rgba(54,87,58,.16) !important;
      background: linear-gradient(180deg, rgba(255,253,244,.92), rgba(250,248,238,.76)) !important;
      box-shadow: 0 14px 32px rgba(37,58,38,.09) !important;
      backdrop-filter: none !important;
      overflow: hidden !important;
      cursor: pointer !important;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card:hover,
    body:not(.admin-mode) #editorial-people .phase8b-person-card:focus-within {
      transform: translateY(-3px) !important;
      border-color: rgba(137,143,24,.32) !important;
      box-shadow: 0 20px 38px rgba(37,58,38,.15) !important;
      outline: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card::before {
      height: 86px !important;
      opacity: .34 !important;
      filter: none !important;
      background: var(--person-cover, linear-gradient(115deg, rgba(46,92,60,.14), rgba(246,213,101,.18))) center/cover no-repeat !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card::after {
      background: linear-gradient(180deg, rgba(255,253,244,.12), rgba(255,253,244,.86) 80px, rgba(255,253,244,.98)) !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-top {
      width: 100% !important;
      display: grid !important;
      grid-template-columns: 1fr !important;
      justify-items: center !important;
      align-items: start !important;
      gap: 8px !important;
      padding-top: 8px !important;
      text-align: center !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-image {
      width: 86px !important;
      height: 86px !important;
      border-radius: 24px !important;
      border: 3px solid rgba(255,253,244,.94) !important;
      box-shadow: 0 12px 26px rgba(31,54,34,.18) !important;
      flex: 0 0 auto !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-chip {
      display: inline-flex !important;
      width: auto !important;
      margin: 2px auto 4px !important;
      justify-content: center !important;
      font-size: .68rem !important;
      letter-spacing: .04em !important;
      text-transform: uppercase !important;
      color: #36573d !important;
      background: rgba(246, 244, 229, .84) !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-name {
      display: block !important;
      max-width: 100% !important;
      font-size: 1.05rem !important;
      line-height: 1.08 !important;
      color: #1f3b2a !important;
      overflow-wrap: anywhere !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-meta {
      display: block !important;
      color: rgba(49,78,58,.78) !important;
      font-size: .88rem !important;
      line-height: 1.05 !important;
      font-weight: 850 !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-bio {
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
      max-width: 100% !important;
      min-height: 2.7em !important;
      margin: 2px 0 0 !important;
      color: rgba(49,78,58,.78) !important;
      font-size: .82rem !important;
      line-height: 1.35 !important;
      text-align: center !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-type-indicators {
      display: flex !important;
      gap: 6px !important;
      justify-content: center !important;
      min-height: 26px !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-type-pill {
      min-height: 24px !important;
      padding: 0 8px !important;
      font-size: .7rem !important;
      background: rgba(47,83,58,.08) !important;
      color: #35583d !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-linked-works {
      width: 100% !important;
      display: flex !important;
      justify-content: center !important;
      margin-top: auto !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-linked-works > :not(.phase8b-view-profile) {
      display: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-linked-works .phase8b-view-profile {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 6px !important;
      width: auto !important;
      min-width: 0 !important;
      height: 34px !important;
      min-height: 34px !important;
      padding: 0 12px !important;
      border-radius: 999px !important;
      font-size: .76rem !important;
      font-weight: 900 !important;
      color: #fffdf4 !important;
      background: #2f533a !important;
      border-color: rgba(47,83,58,.2) !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-linked-works .phase8b-view-profile i {
      width: 14px !important;
      height: 14px !important;
    }
    @media (max-width: 900px) {
      body:not(.admin-mode) #home.home-carousel-v2 { --home-carousel-height: clamp(520px, 78svh, 700px) !important; }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-copy {
        width: min(560px, calc(100vw - 44px)) !important;
        max-width: min(560px, calc(100vw - 44px)) !important;
        top: clamp(62px, 9svh, 92px) !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-title {
        font-size: clamp(3rem, 12vw, 5.1rem) !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-arrow {
        top: auto !important;
        bottom: 18px !important;
        transform: none !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-dots {
        bottom: 24px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-people-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }
    @media (max-width: 560px) {
      body:not(.admin-mode) #home.home-carousel-v2 { --home-carousel-height: clamp(540px, 82svh, 680px) !important; }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-copy {
        left: 20px !important;
        top: 54px !important;
        width: calc(100vw - 40px) !important;
        max-width: calc(100vw - 40px) !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-title {
        max-width: 11ch !important;
        font-size: clamp(2.55rem, 15vw, 4rem) !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-summary {
        max-width: 33ch !important;
        font-size: .96rem !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-actions {
        gap: 8px !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-action {
        min-height: 42px !important;
        padding-inline: 15px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-section-head,
      body:not(.admin-mode) #editorial-people .phase8b-people-grid {
        width: calc(100vw - 28px) !important;
        max-width: calc(100vw - 28px) !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-people-grid {
        grid-template-columns: 1fr !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-card {
        min-height: 0 !important;
      }
    }
  


    body:not(.admin-mode) #home.home-carousel-v2 {
      --home-carousel-height: clamp(560px, 72svh, 760px) !important;
      height: var(--home-carousel-height) !important;
      min-height: var(--home-carousel-height) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide {
      opacity: 0 !important;
      filter: none !important;
      transform: translate3d(2.5%,0,0) scale(1.006) !important;
      transition: opacity 420ms ease, transform 520ms cubic-bezier(.22,.75,.22,1) !important;
      pointer-events: none !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide.is-active {
      opacity: 1 !important;
      filter: none !important;
      transform: translate3d(0,0,0) scale(1) !important;
      pointer-events: auto !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide.is-prev {
      transform: translate3d(-2.5%,0,0) scale(1.006) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide.is-transitioning {
      will-change: opacity, transform !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide:not(.is-transitioning) {
      will-change: auto !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-media {
      display: none !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-bg {
      background-color: #0a2816 !important;
      background-size: cover !important;
      background-position: center !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide::before {
      backdrop-filter: none !important;
      background:
        linear-gradient(90deg, rgba(0,18,10,.92) 0%, rgba(2,24,14,.74) 34%, rgba(2,24,14,.18) 68%, rgba(2,24,14,.48) 100%),
        radial-gradient(circle at 18% 44%, rgba(0,12,7,.82) 0 22%, transparent 58%) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-copy {
      top: clamp(84px, 12svh, 124px) !important;
      width: min(600px, 48vw) !important;
      max-width: min(600px, 48vw) !important;
      gap: clamp(14px, 1.8vw, 22px) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-kicker:empty {
      display: none !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-title {
      font-size: clamp(2.8rem, 6vw, 6.5rem) !important;
      line-height: .94 !important;
      max-width: 12ch !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-summary {
      max-width: 44ch !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-arrow,
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-dot {
      min-width: 44px !important;
      min-height: 44px !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-dots {
      min-height: 44px !important;
      align-items: center !important;
      padding: 0 13px !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-people-grid,
    body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: clamp(14px, 1.6vw, 20px) !important;
      width: min(1180px, calc(100vw - 36px)) !important;
      max-width: min(1180px, calc(100vw - 36px)) !important;
      margin-inline: auto !important;
      padding: 0 0 10px !important;
      overflow: visible !important;
      mask-image: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-card {
      display: grid !important;
      grid-template-columns: minmax(150px, 40%) minmax(0, 60%) !important;
      align-items: stretch !important;
      justify-items: stretch !important;
      gap: 0 !important;
      min-height: clamp(190px, 18vw, 245px) !important;
      aspect-ratio: 16 / 7 !important;
      padding: 0 !important;
      text-align: left !important;
      overflow: hidden !important;
      border-radius: 18px !important;
      background: rgba(255,253,244,.92) !important;
      border: 1px solid rgba(54,87,58,.16) !important;
      box-shadow: 0 16px 34px rgba(37,58,38,.1) !important;
      backdrop-filter: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card::before,
    body:not(.admin-mode) #editorial-people .phase8b-person-card::after,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-card::before,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-card::after {
      display: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-image,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-image {
      width: 100% !important;
      height: 100% !important;
      min-height: 100% !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      background: linear-gradient(135deg, #eef5e6, #fff4cc) !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-image img,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-image img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: center !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-copy,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-copy {
      min-width: 0 !important;
      padding: clamp(15px, 1.9vw, 24px) !important;
      display: grid !important;
      align-content: center !important;
      gap: 7px !important;
      background: linear-gradient(135deg, rgba(255,253,244,.98), rgba(247,244,231,.9)) !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-chip,
    body:not(.admin-mode) #editorial-collaborators .phase8b-chip {
      width: fit-content !important;
      margin: 0 0 2px !important;
      font-size: .68rem !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-name,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-name {
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
      font-size: clamp(1.12rem, 1.5vw, 1.45rem) !important;
      line-height: 1.05 !important;
      text-align: left !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-meta,
    body:not(.admin-mode) #editorial-collaborators .phase8b-meta {
      display: block !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      font-size: .85rem !important;
      text-align: left !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-bio,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-bio {
      display: -webkit-box !important;
      -webkit-line-clamp: 3 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
      min-height: 0 !important;
      margin: 0 !important;
      text-align: left !important;
      font-size: .86rem !important;
      line-height: 1.38 !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-type-indicators,
    body:not(.admin-mode) #editorial-collaborators .phase8b-type-indicators {
      justify-content: flex-start !important;
      min-height: 0 !important;
      flex-wrap: wrap !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-linked-works,
    body:not(.admin-mode) #editorial-collaborators .phase8b-linked-works {
      justify-content: flex-start !important;
      gap: 8px !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-linked-works .phase8b-view-profile,
    body:not(.admin-mode) #editorial-collaborators .phase8b-linked-works .phase8b-view-profile {
      background: transparent !important;
      color: #1f3b2a !important;
      border: 0 !important;
      padding: 0 !important;
      height: auto !important;
      min-height: 28px !important;
    }
    @media (max-width: 760px) {
      body:not(.admin-mode) #editorial-people .phase8b-people-grid,
      body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 14px 12px !important;
        width: 100% !important;
        max-width: 100% !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-card,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-card {
        flex: 0 0 min(88vw, 430px) !important;
        grid-template-columns: minmax(120px, 40%) minmax(0, 60%) !important;
        min-height: 190px !important;
        aspect-ratio: auto !important;
        scroll-snap-align: start !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-copy,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-copy {
        padding: 14px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-bio,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-bio {
        -webkit-line-clamp: 2 !important;
        font-size: .8rem !important;
      }
    }
    @media (max-width: 560px) {
      body:not(.admin-mode) #home.home-carousel-v2 {
        --home-carousel-height: clamp(520px, 76svh, 680px) !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-title {
        font-size: clamp(2.35rem, 11vw, 4rem) !important;
        line-height: .96 !important;
      }
    }
    @media (orientation: landscape) and (max-height: 520px) {
      body:not(.admin-mode) #home.home-carousel-v2 {
        --home-carousel-height: calc(100svh - var(--navbar-height, 64px)) !important;
        max-height: 520px !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-copy {
        top: 46px !important;
        width: min(520px, 56vw) !important;
        max-width: min(520px, 56vw) !important;
        gap: 8px !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-title {
        font-size: clamp(1.8rem, 8.5vh, 3.4rem) !important;
        line-height: .94 !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-summary {
        -webkit-line-clamp: 3 !important;
        font-size: .84rem !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-action {
        min-height: 38px !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-dots {
        bottom: 12px !important;
      }
    }
  


    body:not(.admin-mode) #home.home-carousel-v2 {
      --home-carousel-height: clamp(620px, 82svh, 920px) !important;
      min-height: var(--home-carousel-height) !important;
      height: var(--home-carousel-height) !important;
      background: #0d2419 !important;
      overflow: hidden !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .hero-container,
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-shell,
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-track,
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide {
      min-height: var(--home-carousel-height) !important;
      height: 100% !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-track {
      isolation: isolate !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide {
      opacity: 0 !important;
      filter: none !important;
      transform: translate3d(1.8%, 0, 0) scale(1.003) !important;
      transition: opacity .52s ease, transform .62s cubic-bezier(.22,.72,.22,1) !important;
      pointer-events: none !important;
      will-change: opacity, transform !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide.is-active {
      opacity: 1 !important;
      transform: translate3d(0, 0, 0) scale(1) !important;
      pointer-events: auto !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide.is-prev {
      transform: translate3d(-1.8%, 0, 0) scale(1.003) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide.is-next,
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide.is-prev {
      opacity: .08 !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide::before {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      z-index: 1 !important;
      pointer-events: none !important;
      background:
        radial-gradient(circle at 17% 20%, rgba(161, 158, 31, .22) 0 0, rgba(161, 158, 31, .18) 0 18%, transparent 46%),
        linear-gradient(90deg, rgba(6, 28, 18, .88) 0%, rgba(8, 34, 22, .72) 36%, rgba(9, 31, 21, .32) 66%, rgba(9, 31, 21, .58) 100%) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide--home::before {
      background:
        radial-gradient(circle at 20% 18%, rgba(188, 184, 48, .28) 0 18%, transparent 50%),
        linear-gradient(90deg, rgba(10, 33, 22, .84) 0%, rgba(12, 38, 25, .68) 30%, rgba(15, 42, 28, .26) 58%, rgba(15, 42, 28, .56) 100%) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-bg {
      z-index: 0 !important;
      background-size: cover !important;
      background-position: center center !important;
      filter: saturate(.92) contrast(.95) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-media {
      display: none !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-copy {
      position: absolute !important;
      z-index: 5 !important;
      width: min(720px, calc(100vw - 88px)) !important;
      max-width: min(720px, calc(100vw - 88px)) !important;
      left: 50% !important;
      top: 53% !important;
      transform: translate(-50%, -50%) !important;
      display: grid !important;
      justify-items: center !important;
      align-content: center !important;
      gap: clamp(16px, 2vw, 24px) !important;
      padding: 0 !important;
      text-align: center !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide--bulletin .home-carousel-copy {
      left: clamp(38px, 7vw, 110px) !important;
      top: 50% !important;
      transform: translate(0, -50%) !important;
      width: min(560px, calc(100vw - 120px)) !important;
      max-width: min(560px, calc(100vw - 120px)) !important;
      justify-items: start !important;
      text-align: left !important;
      padding: clamp(24px, 2.5vw, 32px) !important;
      border-radius: 36px !important;
      background: linear-gradient(180deg, rgba(9, 29, 20, .84), rgba(7, 24, 17, .7)) !important;
      border: 1px solid rgba(255, 248, 230, .14) !important;
      box-shadow: 0 20px 48px rgba(4, 16, 11, .32) !important;
      backdrop-filter: blur(18px) saturate(1.05) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-kicker {
      color: #f3c85b !important;
      font-size: .88rem !important;
      letter-spacing: .11em !important;
      text-transform: uppercase !important;
      font-weight: 900 !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-title {
      position: relative !important;
      z-index: 2 !important;
      max-width: 9.4ch !important;
      margin: 0 !important;
      color: #fffdf5 !important;
      font-size: clamp(4rem, 8vw, 7.9rem) !important;
      line-height: .9 !important;
      letter-spacing: 0 !important;
      text-shadow: 0 18px 40px rgba(0, 0, 0, .32) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide--bulletin .home-carousel-title {
      max-width: 15ch !important;
      font-size: clamp(2.2rem, 4vw, 4rem) !important;
      line-height: .96 !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-summary {
      max-width: 34ch !important;
      margin: 0 !important;
      color: rgba(255, 251, 241, .92) !important;
      font-size: clamp(1.02rem, 1.35vw, 1.28rem) !important;
      line-height: 1.52 !important;
      text-shadow: 0 10px 24px rgba(0, 0, 0, .24) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide--bulletin .home-carousel-summary {
      max-width: 46ch !important;
      font-size: clamp(.96rem, 1.2vw, 1.08rem) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-actions {
      display: flex !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
      gap: 12px !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide--bulletin .home-carousel-actions {
      justify-content: flex-start !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-action,
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-arrow,
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-dot {
      pointer-events: auto !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-arrow {
      top: 50% !important;
      transform: translateY(-50%) !important;
      z-index: 10 !important;
      width: 54px !important;
      height: 54px !important;
      background: rgba(255, 250, 236, .14) !important;
      border: 1px solid rgba(255, 250, 236, .26) !important;
      box-shadow: 0 12px 26px rgba(3, 15, 10, .24) !important;
      backdrop-filter: blur(12px) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-arrow.prev {
      left: clamp(18px, 2vw, 34px) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-arrow.next {
      right: clamp(18px, 2vw, 34px) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-dots {
      left: 50% !important;
      bottom: clamp(22px, 3vh, 34px) !important;
      transform: translateX(-50%) !important;
      z-index: 10 !important;
      min-height: 42px !important;
      padding: 0 16px !important;
      background: rgba(255, 249, 233, .16) !important;
      border: 1px solid rgba(255, 249, 233, .2) !important;
      backdrop-filter: blur(12px) !important;
    }
    body:not(.admin-mode) #editorial-people.phase8b-editorial-section,
    body:not(.admin-mode) #editorial-collaborators.phase8b-editorial-section {
      padding-block: clamp(26px, 4vw, 42px) !important;
      background: linear-gradient(180deg, #fffaf0 0%, #f8f4e6 100%) !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-section-head,
    body:not(.admin-mode) #editorial-collaborators .phase8b-section-head {
      width: min(1180px, calc(100vw - 44px)) !important;
      max-width: min(1180px, calc(100vw - 44px)) !important;
      margin-inline: auto !important;
      margin-bottom: 16px !important;
      text-align: left !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-people-grid,
    body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid {
      width: min(1180px, calc(100vw - 44px)) !important;
      max-width: min(1180px, calc(100vw - 44px)) !important;
      margin-inline: auto !important;
      padding: 0 0 10px !important;
      display: grid !important;
      grid-auto-flow: column !important;
      grid-auto-columns: minmax(168px, 1fr) !important;
      gap: 14px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      scroll-snap-type: x proximity !important;
      -webkit-overflow-scrolling: touch !important;
      scrollbar-width: thin !important;
      mask-image: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-card {
      position: relative !important;
      width: 176px !important;
      min-width: 176px !important;
      max-width: 176px !important;
      min-height: 188px !important;
      aspect-ratio: 1 / 1.04 !important;
      padding: 14px !important;
      display: grid !important;
      grid-template-columns: 1fr !important;
      grid-template-rows: auto 1fr auto !important;
      justify-items: center !important;
      align-items: start !important;
      gap: 10px !important;
      border-radius: 24px !important;
      border: 1px solid rgba(61, 92, 67, .14) !important;
      background: linear-gradient(180deg, rgba(255, 253, 245, .98), rgba(249, 245, 233, .94)) !important;
      box-shadow: 0 14px 28px rgba(32, 52, 36, .08) !important;
      overflow: hidden !important;
      cursor: pointer !important;
      scroll-snap-align: start !important;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card::before,
    body:not(.admin-mode) #editorial-people .phase8b-person-card::after,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-card::before,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-card::after {
      display: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card:hover,
    body:not(.admin-mode) #editorial-people .phase8b-person-card:focus-within,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:hover,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:focus-within {
      transform: translateY(-2px) !important;
      box-shadow: 0 18px 32px rgba(32, 52, 36, .12) !important;
      border-color: rgba(132, 140, 38, .34) !important;
      outline: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-image,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-image {
      width: 82px !important;
      height: 82px !important;
      min-height: 82px !important;
      border-radius: 24px !important;
      border: 3px solid rgba(255, 253, 245, .96) !important;
      box-shadow: 0 12px 24px rgba(22, 40, 28, .14) !important;
      background: linear-gradient(135deg, #eff4e8, #fff0c4) !important;
      overflow: hidden !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-copy,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-copy {
      width: 100% !important;
      min-height: 0 !important;
      display: grid !important;
      grid-template-columns: 1fr auto !important;
      grid-template-rows: 1fr auto !important;
      align-items: end !important;
      gap: 8px !important;
      padding: 0 !important;
      text-align: left !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-chip,
    body:not(.admin-mode) #editorial-people .phase8b-meta,
    body:not(.admin-mode) #editorial-people .phase8b-person-bio,
    body:not(.admin-mode) #editorial-people .phase8b-type-indicators,
    body:not(.admin-mode) #editorial-collaborators .phase8b-chip,
    body:not(.admin-mode) #editorial-collaborators .phase8b-meta,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-bio,
    body:not(.admin-mode) #editorial-collaborators .phase8b-type-indicators {
      display: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-name,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-name {
      grid-column: 1 / 2 !important;
      grid-row: 2 / 3 !important;
      align-self: end !important;
      margin: 0 !important;
      font-size: 1.02rem !important;
      line-height: 1.08 !important;
      color: #23422f !important;
      font-weight: 900 !important;
      overflow-wrap: anywhere !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-linked-works,
    body:not(.admin-mode) #editorial-collaborators .phase8b-linked-works {
      grid-column: 2 / 3 !important;
      grid-row: 2 / 3 !important;
      align-self: end !important;
      justify-self: end !important;
      width: auto !important;
      margin: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: flex-end !important;
      gap: 0 !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-linked-works > :not(.phase8b-view-profile),
    body:not(.admin-mode) #editorial-collaborators .phase8b-linked-works > :not(.phase8b-view-profile) {
      display: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-view-profile,
    body:not(.admin-mode) #editorial-collaborators .phase8b-view-profile {
      width: 40px !important;
      height: 40px !important;
      min-width: 40px !important;
      min-height: 40px !important;
      padding: 0 !important;
      border-radius: 999px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: rgba(35, 66, 47, .08) !important;
      color: #23422f !important;
      border: 1px solid rgba(35, 66, 47, .08) !important;
      box-shadow: none !important;
      font-size: 0 !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-view-profile i,
    body:not(.admin-mode) #editorial-collaborators .phase8b-view-profile i {
      width: 18px !important;
      height: 18px !important;
    }
    body.admin-mode .final-studio-shell {
      grid-template-columns: minmax(320px, .88fr) minmax(0, 1.12fr) !important;
      gap: 18px !important;
      align-items: start !important;
    }
    body.admin-mode .final-studio-panel {
      padding: 18px !important;
      border-radius: 20px !important;
    }
    body.admin-mode .final-profile-list {
      max-height: calc(100vh - 260px) !important;
      overflow: auto !important;
      padding-right: 4px !important;
    }
    body.admin-mode .final-profile-card {
      padding: 12px !important;
      gap: 8px !important;
      border-radius: 16px !important;
    }
    body.admin-mode .final-card-top {
      grid-template-columns: 52px 1fr !important;
      gap: 10px !important;
    }
    body.admin-mode .final-thumb {
      width: 52px !important;
      height: 48px !important;
      border-radius: 16px !important;
    }
    body.admin-mode .final-pill-row {
      gap: 6px !important;
      flex-wrap: wrap !important;
    }
    body.admin-mode .final-form-grid {
      gap: 12px !important;
    }
    body.admin-mode .final-preview {
      min-height: 150px !important;
    }
    body.admin-mode .final-connected-list,
    body.admin-mode .final-work-grid {
      max-height: 420px !important;
      overflow: auto !important;
      padding-right: 4px !important;
    }
    body.admin-mode .final-connected-card,
    body.admin-mode .final-work-card {
      gap: 10px !important;
      padding: 10px !important;
      border-radius: 16px !important;
    }
    @media (max-width: 1080px) {
      body:not(.admin-mode) #home.home-carousel-v2 {
        --home-carousel-height: clamp(560px, 78svh, 760px) !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-copy {
        width: min(620px, calc(100vw - 56px)) !important;
        max-width: min(620px, calc(100vw - 56px)) !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-title {
        font-size: clamp(3.2rem, 8vw, 5.7rem) !important;
      }
      body.admin-mode .final-studio-shell {
        grid-template-columns: 1fr !important;
      }
      body.admin-mode .final-profile-list,
      body.admin-mode .final-connected-list,
      body.admin-mode .final-work-grid {
        max-height: none !important;
      }
    }
    @media (max-width: 760px) {
      body:not(.admin-mode) #home.home-carousel-v2 {
        --home-carousel-height: clamp(580px, 80svh, 760px) !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-copy,
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide--bulletin .home-carousel-copy {
        left: 20px !important;
        right: 20px !important;
        top: auto !important;
        bottom: 86px !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        justify-items: start !important;
        text-align: left !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide--home .home-carousel-copy {
        padding: 22px !important;
        border-radius: 28px !important;
        background: linear-gradient(180deg, rgba(8, 28, 18, .86), rgba(10, 33, 21, .72)) !important;
        border: 1px solid rgba(255, 248, 230, .12) !important;
        box-shadow: 0 16px 36px rgba(3, 15, 10, .26) !important;
        backdrop-filter: blur(14px) !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-title,
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide--bulletin .home-carousel-title {
        max-width: 10.6ch !important;
        font-size: clamp(2.3rem, 11vw, 4rem) !important;
        line-height: .96 !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-summary {
        max-width: 32ch !important;
        font-size: .96rem !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-actions {
        justify-content: flex-start !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-arrow {
        width: 46px !important;
        height: 46px !important;
        top: auto !important;
        bottom: 22px !important;
        transform: none !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-arrow.prev {
        left: 16px !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-arrow.next {
        right: 16px !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-dots {
        bottom: 22px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-section-head,
      body:not(.admin-mode) #editorial-collaborators .phase8b-section-head,
      body:not(.admin-mode) #editorial-people .phase8b-people-grid,
      body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid {
        width: calc(100vw - 28px) !important;
        max-width: calc(100vw - 28px) !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-people-grid,
      body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid {
        grid-auto-columns: minmax(144px, 1fr) !important;
        gap: 12px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-card,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-card {
        width: 148px !important;
        min-width: 148px !important;
        max-width: 148px !important;
        min-height: 166px !important;
        padding: 12px !important;
        border-radius: 20px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-image,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-image {
        width: 68px !important;
        height: 68px !important;
        min-height: 68px !important;
        border-radius: 20px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-name,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-name {
        font-size: .96rem !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-view-profile,
      body:not(.admin-mode) #editorial-collaborators .phase8b-view-profile {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
      }
    }
    @media (orientation: landscape) and (max-height: 520px) {
      body:not(.admin-mode) #home.home-carousel-v2 {
        --home-carousel-height: calc(100svh - var(--navbar-height, 64px)) !important;
        max-height: 500px !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-copy,
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide--bulletin .home-carousel-copy {
        bottom: 62px !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-title,
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-slide--bulletin .home-carousel-title {
        font-size: clamp(1.9rem, 7.5vh, 3.4rem) !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2 .home-carousel-summary {
        font-size: .84rem !important;
        line-height: 1.36 !important;
      }
    }
  


    body:not(.admin-mode) #home.hero.home-static-classic {
      min-height: clamp(560px, 78svh, 820px) !important;
      height: auto !important;
      display: grid !important;
      place-items: center !important;
      padding: clamp(74px, 8vw, 118px) clamp(20px, 6vw, 92px) clamp(72px, 8vw, 116px) !important;
      overflow: hidden !important;
      isolation: isolate !important;
      color: #fffdf4 !important;
      background-color: #102d1f !important;
      background-position: center !important;
      background-size: cover !important;
      background-repeat: no-repeat !important;
    }
    body:not(.admin-mode) #home.hero.home-static-classic::before {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      width: auto !important;
      height: auto !important;
      border-radius: 0 !important;
      transform: none !important;
      animation: none !important;
      background:
        radial-gradient(circle at 50% 42%, rgba(255, 253, 244, .13), transparent 30%),
        linear-gradient(135deg, rgba(11, 35, 22, .72), rgba(124, 140, 17, .42), rgba(11, 35, 22, .72)) !important;
      pointer-events: none !important;
      z-index: 0 !important;
    }
    body:not(.admin-mode) #home.hero.home-static-classic::after {
      content: none !important;
      display: none !important;
      background: none !important;
    }
    body:not(.admin-mode) #home.hero.home-static-classic .hero-container {
      position: relative !important;
      z-index: 1 !important;
      width: min(760px, 92vw) !important;
      max-width: min(760px, 92vw) !important;
      margin: 0 auto !important;
      padding: 0 !important;
      display: grid !important;
      justify-items: center !important;
      text-align: center !important;
      gap: clamp(12px, 1.7vw, 20px) !important;
      background: transparent !important;
      box-shadow: none !important;
      border: 0 !important;
      backdrop-filter: none !important;
      transform: none !important;
    }
    body:not(.admin-mode) #home.hero.home-static-classic #hero-logo {
      margin: 0 auto clamp(6px, 1vw, 10px) !important;
      box-shadow: 0 14px 28px rgba(0,0,0,.18) !important;
    }
    body:not(.admin-mode) #home.hero.home-static-classic #hero-title {
      max-width: 10.8ch !important;
      margin: 0 !important;
      color: #fffdf4 !important;
      font-size: clamp(3.1rem, 7.2vw, 7.7rem) !important;
      line-height: .92 !important;
      font-weight: 950 !important;
      letter-spacing: 0 !important;
      text-shadow: 0 18px 48px rgba(0,0,0,.34) !important;
    }
    body:not(.admin-mode) #home.hero.home-static-classic #hero-division {
      margin: 0 !important;
      color: #f6d565 !important;
      font-weight: 950 !important;
      text-shadow: 0 10px 22px rgba(0,0,0,.25) !important;
    }
    body:not(.admin-mode) #home.hero.home-static-classic #hero-subtitle {
      max-width: 560px !important;
      margin: 0 auto !important;
      color: rgba(255,253,244,.93) !important;
      font-size: clamp(.98rem, 1.25vw, 1.18rem) !important;
      line-height: 1.58 !important;
      font-weight: 800 !important;
    }
    body:not(.admin-mode) #home.hero.home-static-classic .notice-panel {
      display: none !important;
    }
    body:not(.admin-mode) #home.hero.home-static-classic .flex {
      justify-content: center !important;
      margin-top: clamp(8px, 1.4vw, 18px) !important;
    }
    body:not(.admin-mode) #home.hero.home-static-classic .btn-light,
    body:not(.admin-mode) #home.hero.home-static-classic .btn-secondary {
      min-height: 44px !important;
      border-radius: 999px !important;
      white-space: nowrap !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero {
      --home-carousel-height: clamp(540px, 72svh, 760px) !important;
      min-height: var(--home-carousel-height) !important;
      height: var(--home-carousel-height) !important;
      padding: 0 !important;
      overflow: hidden !important;
      background: #102d1f !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero .hero-container,
    body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero .home-carousel-shell,
    body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero .home-carousel-track,
    body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero .home-carousel-slide {
      width: 100% !important;
      max-width: none !important;
      min-height: var(--home-carousel-height) !important;
      height: var(--home-carousel-height) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero .home-carousel-shell {
      position: relative !important;
      overflow: hidden !important;
      background: #102d1f !important;
      color: #fffdf4 !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero .home-carousel-track {
      position: relative !important;
      inset: auto !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero .home-carousel-slide {
      position: relative !important;
      inset: auto !important;
      display: grid !important;
      place-items: center !important;
      padding: clamp(76px, 8vw, 116px) clamp(20px, 6vw, 92px) clamp(66px, 7vw, 96px) !important;
      opacity: 1 !important;
      filter: none !important;
      transform: none !important;
      transition: none !important;
      pointer-events: auto !important;
      isolation: isolate !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero .home-carousel-slide:not(.is-active) {
      display: none !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero .home-carousel-bg {
      position: absolute !important;
      inset: 0 !important;
      z-index: -3 !important;
      background:
        radial-gradient(circle at 50% 38%, rgba(157, 170, 55, .24), transparent 36%),
        linear-gradient(90deg, rgba(11, 39, 26, .96), rgba(90, 115, 25, .72), rgba(16, 47, 30, .9)),
        var(--home-slide-image, none) center / cover no-repeat !important;
      filter: saturate(.86) contrast(.94) brightness(.88) !important;
      transform: none !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero .home-carousel-slide::before {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      z-index: -2 !important;
      background:
        radial-gradient(circle at 50% 46%, rgba(255, 253, 244, .13), transparent 28%),
        linear-gradient(180deg, rgba(12, 42, 27, .32), rgba(12, 42, 27, .58)),
        linear-gradient(90deg, rgba(11, 32, 22, .62), rgba(132, 145, 18, .3), rgba(11, 32, 22, .58)) !important;
      backdrop-filter: none !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero .home-carousel-slide::after {
      content: "" !important;
      position: absolute !important;
      inset: auto 0 0 !important;
      z-index: -1 !important;
      height: clamp(62px, 9vw, 112px) !important;
      background: linear-gradient(180deg, transparent, rgba(255, 253, 244, .84)) !important;
      pointer-events: none !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero .home-carousel-copy {
      position: relative !important;
      inset: auto !important;
      width: min(780px, 92vw) !important;
      max-width: min(780px, 92vw) !important;
      margin: 0 auto !important;
      padding: 0 !important;
      display: grid !important;
      justify-items: center !important;
      align-content: center !important;
      gap: clamp(14px, 2vw, 24px) !important;
      text-align: center !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      color: #fffdf4 !important;
      transform: none !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero .home-carousel-kicker {
      margin: 0 !important;
      color: #f4cf5a !important;
      text-shadow: 0 8px 24px rgba(0,0,0,.32) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero .home-carousel-title {
      max-width: 10.8ch !important;
      margin: 0 !important;
      color: #fffdf4 !important;
      font-size: clamp(3.35rem, 7.2vw, 7.8rem) !important;
      line-height: .92 !important;
      letter-spacing: 0 !important;
      text-shadow: 0 18px 48px rgba(0,0,0,.35) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero .home-carousel-summary {
      max-width: 520px !important;
      margin: 0 !important;
      color: rgba(255, 253, 244, .92) !important;
      font-size: clamp(.98rem, 1.22vw, 1.18rem) !important;
      line-height: 1.55 !important;
      font-weight: 800 !important;
      -webkit-line-clamp: 4 !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero .home-carousel-actions {
      display: flex !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
      gap: 10px !important;
      margin-top: clamp(4px, 1vw, 10px) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero .home-carousel-action {
      min-height: 44px !important;
      padding: 0 20px !important;
      border-radius: 999px !important;
      white-space: nowrap !important;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero .home-carousel-action:hover,
    body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero .home-carousel-action:focus-visible {
      transform: translateY(-1px) !important;
    }
    body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero .home-carousel-media,
    body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero .home-carousel-arrow,
    body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero .home-carousel-dots,
    body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero .home-carousel-dot {
      display: none !important;
    }

    body:not(.admin-mode) #editorial-people,
    body:not(.admin-mode) #editorial-collaborators {
      order: 4 !important;
      padding-block: clamp(24px, 4vw, 46px) !important;
      background: #fff9ea !important;
    }
    body:not(.admin-mode) #stories {
      order: 3 !important;
    }
    body:not(.admin-mode) #music {
      order: 5 !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-section-head,
    body:not(.admin-mode) #editorial-collaborators .phase8b-section-head {
      width: min(1120px, calc(100vw - 34px)) !important;
      max-width: min(1120px, calc(100vw - 34px)) !important;
      margin: 0 auto 14px !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      align-items: end !important;
      gap: 12px !important;
      text-align: left !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-section-head > p,
    body:not(.admin-mode) #editorial-collaborators .phase8b-section-head > p {
      max-width: 680px !important;
      margin: 2px 0 0 !important;
      font-size: clamp(.88rem, 1vw, 1rem) !important;
      line-height: 1.45 !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-section-head .section-title,
    body:not(.admin-mode) #editorial-collaborators .phase8b-section-head .section-title {
      font-size: clamp(1.35rem, 2.2vw, 2rem) !important;
      margin: 6px 0 0 !important;
    }
    body:not(.admin-mode) .phase8b-view-all-people {
      display: inline-flex !important;
      align-items: center !important;
      gap: 7px !important;
      min-height: 38px !important;
      padding: 0 14px !important;
      border: 1px solid rgba(52, 78, 50, .18) !important;
      border-radius: 999px !important;
      background: rgba(255, 253, 244, .74) !important;
      color: #213d2b !important;
      font-weight: 900 !important;
      cursor: pointer !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-people-grid,
    body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid {
      width: min(1120px, calc(100vw - 34px)) !important;
      max-width: min(1120px, calc(100vw - 34px)) !important;
      margin: 0 auto !important;
      padding: 4px 2px 12px !important;
      display: flex !important;
      grid-template-columns: none !important;
      gap: clamp(18px, 3vw, 34px) !important;
      align-items: start !important;
      justify-content: flex-start !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      scroll-snap-type: x proximity !important;
      -webkit-overflow-scrolling: touch !important;
      mask-image: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-card {
      flex: 0 0 112px !important;
      min-width: 112px !important;
      max-width: 112px !important;
      min-height: 126px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      display: grid !important;
      justify-items: center !important;
      align-content: start !important;
      gap: 8px !important;
      text-align: center !important;
      overflow: visible !important;
      scroll-snap-align: start !important;
      transition: transform .18s ease !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card:hover,
    body:not(.admin-mode) #editorial-people .phase8b-person-card:focus-visible,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:hover,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:focus-visible {
      transform: none !important;
      outline: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card::before,
    body:not(.admin-mode) #editorial-people .phase8b-person-card::after,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-card::before,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-card::after {
      content: none !important;
      display: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-image,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-image {
      width: 72px !important;
      height: 72px !important;
      min-width: 72px !important;
      min-height: 72px !important;
      border-radius: 999px !important;
      border: 3px solid rgba(255, 253, 244, .95) !important;
      background: #edf5e5 !important;
      box-shadow: 0 8px 20px rgba(25, 52, 34, .14) !important;
      overflow: hidden !important;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card:hover .phase8b-person-image,
    body:not(.admin-mode) #editorial-people .phase8b-person-card:focus-visible .phase8b-person-image,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:hover .phase8b-person-image,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:focus-visible .phase8b-person-image {
      transform: translateY(-2px) scale(1.035) !important;
      border-color: rgba(246, 213, 101, .95) !important;
      box-shadow: 0 13px 24px rgba(29, 58, 37, .24), inset 0 0 0 2px rgba(255,253,244,.68) !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-image img,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-image img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-copy,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-copy {
      width: 100% !important;
      min-width: 0 !important;
      padding: 0 !important;
      display: grid !important;
      grid-template-columns: 1fr !important;
      justify-items: center !important;
      gap: 5px !important;
      background: transparent !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-name,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-name {
      width: 100% !important;
      max-width: 112px !important;
      color: #203b29 !important;
      font-size: .84rem !important;
      line-height: 1.1 !important;
      font-weight: 900 !important;
      white-space: normal !important;
      display: -webkit-box !important;
      -webkit-box-orient: vertical !important;
      -webkit-line-clamp: 2 !important;
      overflow: hidden !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-linked-works,
    body:not(.admin-mode) #editorial-collaborators .phase8b-linked-works {
      width: auto !important;
      display: flex !important;
      justify-content: center !important;
      gap: 0 !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-view-profile,
    body:not(.admin-mode) #editorial-collaborators .phase8b-view-profile {
      width: 26px !important;
      height: 26px !important;
      min-width: 26px !important;
      min-height: 26px !important;
      border-radius: 999px !important;
      padding: 0 !important;
      display: inline-grid !important;
      place-items: center !important;
      background: rgba(255, 253, 244, .9) !important;
      border: 1px solid rgba(52, 78, 50, .18) !important;
      color: #31583a !important;
      box-shadow: 0 5px 12px rgba(25, 52, 34, .08) !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-view-profile svg,
    body:not(.admin-mode) #editorial-collaborators .phase8b-view-profile svg {
      width: 15px !important;
      height: 15px !important;
    }

    body.admin-mode #admin-view.show {
      background: #f7f8ef !important;
    }
    body.admin-mode #admin-view > .admin-nav-pane {
      background: linear-gradient(180deg, #0f3d28, #12351f) !important;
      border: 1px solid rgba(255,253,244,.14) !important;
      border-radius: 24px !important;
      box-shadow: 0 24px 55px rgba(21, 48, 29, .18) !important;
    }
    body.admin-mode .admin-command,
    body.admin-mode .admin-panel {
      border-radius: 24px !important;
      border-color: rgba(52, 78, 50, .13) !important;
      box-shadow: 0 18px 44px rgba(32, 56, 41, .08) !important;
    }
    body.admin-mode .admin-command-title {
      letter-spacing: 0 !important;
      color: #163c27 !important;
    }
    body.admin-mode .admin-command-actions {
      gap: 8px !important;
    }

    body.admin-mode .quality-table-card {
      max-height: 520px !important;
      overflow: auto !important;
      border-radius: 18px !important;
    }
    body.admin-mode .quality-table-card .analytics-table {
      table-layout: fixed !important;
      min-width: 880px !important;
      font-size: .82rem !important;
    }
    body.admin-mode .quality-table-card .analytics-table td,
    body.admin-mode .quality-table-card .analytics-table th {
      padding: 9px 10px !important;
      vertical-align: top !important;
    }
    body.admin-mode .quality-table-card .analytics-table td:nth-child(2) {
      max-width: 420px !important;
    }
    body.admin-mode .quality-table-card .analytics-meta {
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
      max-width: 100% !important;
    }
    body.admin-mode .quality-list {
      max-height: 420px !important;
      overflow: auto !important;
      padding-right: 6px !important;
    }
    .creator-directory-shell {
      width: min(980px, 100%) !important;
      max-height: min(88svh, 860px) !important;
      overflow: auto !important;
      border-radius: clamp(20px, 3vw, 32px) !important;
      background: #fffdf4 !important;
      border: 1px solid rgba(52, 78, 50, .16) !important;
      box-shadow: 0 40px 90px rgba(0,0,0,.28) !important;
      padding: clamp(18px, 3vw, 30px) !important;
      color: #203829 !important;
    }
    .creator-directory-head {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      gap: 14px !important;
      align-items: start !important;
      margin-bottom: 16px !important;
    }
    .creator-directory-title {
      margin: 10px 0 4px !important;
      font-size: clamp(1.75rem, 3vw, 2.8rem) !important;
      line-height: 1 !important;
      color: #173421 !important;
    }
    .creator-directory-head p {
      margin: 0 !important;
      max-width: 62ch !important;
      color: #60715f !important;
      font-weight: 760 !important;
      line-height: 1.45 !important;
    }
    .creator-directory-search {
      min-height: 48px !important;
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      padding: 0 15px !important;
      border: 1px solid rgba(52, 78, 50, .18) !important;
      border-radius: 999px !important;
      background: rgba(242, 247, 235, .88) !important;
      color: #294832 !important;
      margin-bottom: 18px !important;
    }
    .creator-directory-search input {
      border: 0 !important;
      outline: 0 !important;
      background: transparent !important;
      width: 100% !important;
      font: inherit !important;
      font-weight: 800 !important;
      color: #203829 !important;
    }
    .creator-directory-grid {
      display: grid !important;
      grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) !important;
      gap: 14px !important;
    }
    .creator-directory-card {
      min-height: 154px !important;
      border: 1px solid rgba(52, 78, 50, .16) !important;
      border-radius: 20px !important;
      background: linear-gradient(145deg, rgba(255,253,244,.96), rgba(239,247,229,.82)) !important;
      display: grid !important;
      justify-items: center !important;
      align-content: center !important;
      gap: 7px !important;
      color: #203829 !important;
      cursor: pointer !important;
      box-shadow: 0 14px 28px rgba(32, 56, 41, .08) !important;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
    }
    .creator-directory-card:hover,
    .creator-directory-card:focus-visible {
      transform: translateY(-2px) !important;
      border-color: rgba(138, 143, 24, .42) !important;
      box-shadow: 0 22px 38px rgba(32, 56, 41, .14) !important;
      outline: none !important;
    }
    .creator-directory-avatar {
      width: 68px !important;
      height: 68px !important;
      border-radius: 999px !important;
      overflow: hidden !important;
      display: grid !important;
      place-items: center !important;
      background: #eef6e8 !important;
      border: 3px solid #fffdf4 !important;
      box-shadow: 0 8px 18px rgba(32, 56, 41, .12) !important;
      color: #31583a !important;
      font-weight: 950 !important;
    }
    .creator-directory-avatar img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
    }
    .creator-directory-card strong {
      max-width: 100% !important;
      font-size: .95rem !important;
      line-height: 1.08 !important;
      text-align: center !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
    }
    .creator-directory-card small {
      color: #63745f !important;
      font-weight: 850 !important;
      line-height: 1.15 !important;
      text-align: center !important;
    }
    .creator-directory-counts {
      display: inline-flex !important;
      align-items: center !important;
      gap: 4px !important;
      font-size: .76rem !important;
      font-weight: 900 !important;
      color: #3f6046 !important;
    }
    .creator-directory-counts svg {
      width: 13px !important;
      height: 13px !important;
    }
    .creator-directory-empty {
      grid-column: 1 / -1 !important;
      padding: 24px !important;
      border-radius: 18px !important;
      background: #f5f8ef !important;
      color: #52644f !important;
      font-weight: 850 !important;
      text-align: center !important;
    }

    @media (min-width: 1100px) {
      body.admin-mode #admin-view.show {
        display: grid !important;
        grid-template-columns: 106px minmax(0, 1fr) !important;
        gap: 16px !important;
        align-items: start !important;
      }
      body.admin-mode #admin-view > .admin-header,
      body.admin-mode #admin-view > .admin-command,
      body.admin-mode #admin-view > .admin-control-row,
      body.admin-mode #admin-view > .admin-search-status,
      body.admin-mode #admin-view > .admin-kpis,
      body.admin-mode #admin-view > .admin-panel {
        grid-column: 2 !important;
        min-width: 0 !important;
      }
      body.admin-mode #admin-view > .admin-nav-pane {
        grid-column: 1 !important;
        grid-row: 1 / span 999 !important;
        position: sticky !important;
        top: 12px !important;
        height: calc(100svh - 24px) !important;
        overflow: auto !important;
        padding: 10px 8px !important;
      }
      body.admin-mode .admin-nav-intro,
      body.admin-mode .admin-nav-mobile-context,
      body.admin-mode .admin-nav-scroll {
        display: none !important;
      }
      body.admin-mode .admin-nav-row {
        display: block !important;
      }
      body.admin-mode .admin-nav-track {
        display: flex !important;
        flex-direction: column !important;
        gap: 7px !important;
        overflow: visible !important;
      }
      body.admin-mode .admin-nav-group-label {
        margin: 8px 0 2px !important;
        text-align: center !important;
        font-size: .62rem !important;
        letter-spacing: .08em !important;
      }
      body.admin-mode .admin-nav-btn {
        width: 100% !important;
        min-height: 54px !important;
        display: grid !important;
        justify-items: center !important;
        gap: 4px !important;
        padding: 7px 5px !important;
        border-radius: 16px !important;
      }
      body.admin-mode .admin-nav-btn svg {
        width: 20px !important;
        height: 20px !important;
      }
      body.admin-mode .admin-nav-label {
        font-size: .65rem !important;
        line-height: 1.05 !important;
        max-width: 74px !important;
        white-space: normal !important;
        text-align: center !important;
      }
    }

    @media (max-width: 760px) {
      body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero {
        --home-carousel-height: clamp(520px, 78svh, 680px) !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero .home-carousel-slide {
        padding: 70px 20px 72px !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero .home-carousel-title {
        font-size: clamp(3rem, 13vw, 5rem) !important;
      }
      body:not(.admin-mode) #home.home-carousel-v2.home-plain-hero .home-carousel-summary {
        font-size: .96rem !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-section-head,
      body:not(.admin-mode) #editorial-collaborators .phase8b-section-head {
        grid-template-columns: 1fr auto !important;
        width: calc(100vw - 28px) !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-people-grid,
      body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid {
        width: calc(100vw - 28px) !important;
        gap: 18px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-card,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-card {
        flex-basis: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-image,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-image {
        width: 66px !important;
        height: 66px !important;
        min-width: 66px !important;
        min-height: 66px !important;
      }
    }
  


    /* Desktop homepage hero: one clear, centered reading order.
       Wide brand mark -> title -> archive label -> description -> actions. */
    @media (min-width: 821px) {
      body:not(.admin-mode) #home.hero.home-static-classic {
        min-height: clamp(620px, calc(100svh - var(--navbar-height)), 900px) !important;
        height: auto !important;
        padding: clamp(54px, 6vw, 88px) 24px clamp(68px, 7vw, 104px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
      }

      body:not(.admin-mode) #home.hero.home-static-classic .hero-container {
        position: relative !important;
        z-index: 2 !important;
        width: min(940px, calc(100vw - 48px)) !important;
        max-width: min(940px, calc(100vw - 48px)) !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        text-align: center !important;
      }

      body:not(.admin-mode) #home.hero.home-static-classic #hero-logo {
        order: 1 !important;
        margin: 0 auto clamp(18px, 2.2vw, 30px) !important;
      }

      body:not(.admin-mode) #home.hero.home-static-classic #hero-logo.wide-logo {
        width: clamp(230px, 24vw, 380px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        box-shadow: none !important;
        animation: none !important;
      }

      body:not(.admin-mode) #home.hero.home-static-classic #hero-logo.wide-logo img {
        width: 100% !important;
        height: auto !important;
        max-height: 132px !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
      }

      body:not(.admin-mode) #home.hero.home-static-classic #hero-title {
        order: 2 !important;
        width: 100% !important;
        max-width: 13ch !important;
        margin: 0 auto !important;
        text-align: center !important;
        font-size: clamp(3.4rem, 6.35vw, 7rem) !important;
        line-height: .94 !important;
        text-wrap: balance !important;
      }

      body:not(.admin-mode) #home.hero.home-static-classic #hero-division {
        order: 3 !important;
        width: 100% !important;
        max-width: 720px !important;
        margin: clamp(18px, 2vw, 28px) auto 0 !important;
        text-align: center !important;
        font-size: clamp(1rem, 1.25vw, 1.22rem) !important;
        line-height: 1.35 !important;
      }

      body:not(.admin-mode) #home.hero.home-static-classic #hero-subtitle {
        order: 4 !important;
        width: 100% !important;
        max-width: 680px !important;
        margin: clamp(10px, 1.15vw, 16px) auto 0 !important;
        text-align: center !important;
        font-size: clamp(1rem, 1.15vw, 1.16rem) !important;
        line-height: 1.62 !important;
        text-wrap: balance !important;
      }

      body:not(.admin-mode) #home.hero.home-static-classic .notice-panel {
        order: 5 !important;
        display: none !important;
      }

      body:not(.admin-mode) #home.hero.home-static-classic .hero-container > .flex.flex-wrap {
        order: 6 !important;
        width: 100% !important;
        margin: clamp(24px, 2.6vw, 34px) auto 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
      }

      body:not(.admin-mode) #home.hero.home-static-classic .hero-container > .flex.flex-wrap .btn-light,
      body:not(.admin-mode) #home.hero.home-static-classic .hero-container > .flex.flex-wrap .btn-secondary {
        flex: 0 0 auto !important;
        min-width: 150px !important;
      }
    }
  


    /* Mobile and tablet portrait: keep the uploaded hero brand mark wide,
       transparent, centered, and proportional instead of forcing it into
       the old square logo dimensions. */
    @media (max-width: 820px) {
      body:not(.admin-mode) #home.hero.home-static-classic #hero-logo.wide-logo {
        order: 1 !important;
        width: clamp(210px, 54vw, 330px) !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: calc(100vw - 40px) !important;
        max-height: none !important;
        margin: 0 auto clamp(16px, 3vw, 24px) !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        box-shadow: none !important;
        animation: none !important;
      }

      body:not(.admin-mode) #home.hero.home-static-classic #hero-logo.wide-logo img {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 108px !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
      }
    }

    @media (max-width: 560px) {
      body:not(.admin-mode) #home.hero.home-static-classic #hero-logo.wide-logo {
        width: min(72vw, 280px) !important;
        max-width: calc(100vw - 32px) !important;
        margin-bottom: 16px !important;
      }

      body:not(.admin-mode) #home.hero.home-static-classic #hero-logo.wide-logo img {
        max-height: 92px !important;
      }
    }
  


    /* Keep the uploaded wide brand mark first on every public hero layout,
       then gently animate it and add restrained light to the hero copy. */
    @keyframes narraWideLogoBreathe {
      0%, 100% {
        transform: translateY(0) scale(1);
        filter: brightness(1) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.18));
      }
      50% {
        transform: translateY(-5px) scale(1.025);
        filter: brightness(1.08) drop-shadow(0 16px 28px rgba(0, 0, 0, 0.25));
      }
    }

    @keyframes narraHeroTitleGlow {
      0%, 100% {
        filter: brightness(1);
        text-shadow:
          0 2px 8px rgba(255, 255, 255, 0.08),
          0 16px 42px rgba(0, 0, 0, 0.36);
      }
      50% {
        filter: brightness(1.07);
        text-shadow:
          0 0 13px rgba(255, 253, 244, 0.18),
          0 18px 46px rgba(0, 0, 0, 0.4);
      }
    }

    @keyframes narraHeroCopyGlow {
      0%, 100% {
        filter: brightness(1);
        text-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
      }
      50% {
        filter: brightness(1.055);
        text-shadow:
          0 0 10px rgba(255, 253, 244, 0.12),
          0 10px 26px rgba(0, 0, 0, 0.3);
      }
    }

    body:not(.admin-mode) #home.hero.home-static-classic .hero-container {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
    }

    body:not(.admin-mode) #home.hero.home-static-classic #hero-logo {
      order: 1 !important;
    }

    body:not(.admin-mode) #home.hero.home-static-classic #hero-title {
      order: 2 !important;
      animation: narraHeroTitleGlow 5.8s ease-in-out infinite !important;
    }

    body:not(.admin-mode) #home.hero.home-static-classic #hero-division {
      order: 3 !important;
      animation: narraHeroCopyGlow 6.4s ease-in-out infinite !important;
    }

    body:not(.admin-mode) #home.hero.home-static-classic #hero-subtitle {
      order: 4 !important;
      animation: narraHeroCopyGlow 6.8s ease-in-out infinite !important;
    }

    body:not(.admin-mode) #home.hero.home-static-classic .notice-panel {
      order: 5 !important;
    }

    body:not(.admin-mode) #home.hero.home-static-classic .hero-container > .flex.flex-wrap {
      order: 6 !important;
    }

    body:not(.admin-mode) #home.hero.home-static-classic #hero-logo.wide-logo {
      width: clamp(300px, max(var(--hero-wide-logo-width), 31vw), 520px) !important;
      max-width: calc(100vw - 48px) !important;
      height: auto !important;
      min-width: 0 !important;
      min-height: 0 !important;
      max-height: none !important;
      margin: 0 auto clamp(14px, 1.8vw, 24px) !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      overflow: visible !important;
      background: transparent !important;
      box-shadow: none !important;
      transform-origin: center !important;
      animation: narraWideLogoBreathe 4.8s ease-in-out infinite !important;
      will-change: transform, filter;
    }

    body:not(.admin-mode) #home.hero.home-static-classic #hero-logo.wide-logo img {
      width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      max-height: 150px !important;
      object-fit: contain !important;
      object-position: center !important;
      display: block !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    @media (max-width: 820px) {
      body:not(.admin-mode) #home.hero.home-static-classic #hero-logo.wide-logo {
        width: min(76vw, 460px) !important;
        max-width: calc(100vw - 36px) !important;
        margin-bottom: clamp(12px, 2.8vw, 20px) !important;
      }

      body:not(.admin-mode) #home.hero.home-static-classic #hero-logo.wide-logo img {
        max-height: 130px !important;
      }
    }

    @media (max-width: 560px) {
      body:not(.admin-mode) #home.hero.home-static-classic #hero-logo.wide-logo {
        width: min(88vw, 360px) !important;
        max-width: calc(100vw - 24px) !important;
        margin-bottom: 12px !important;
      }

      body:not(.admin-mode) #home.hero.home-static-classic #hero-logo.wide-logo img {
        max-height: 110px !important;
      }

      body:not(.admin-mode) #home.hero.home-static-classic #hero-title {
        text-shadow:
          0 0 10px rgba(255, 253, 244, 0.12),
          0 12px 30px rgba(0, 0, 0, 0.38) !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      body:not(.admin-mode) #home.hero.home-static-classic #hero-logo.wide-logo,
      body:not(.admin-mode) #home.hero.home-static-classic #hero-title,
      body:not(.admin-mode) #home.hero.home-static-classic #hero-division,
      body:not(.admin-mode) #home.hero.home-static-classic #hero-subtitle {
        animation: none !important;
        filter: none !important;
      }
    }
  


    /* The public overlay percentage is already applied by JavaScript as part
       of the hero background-image. An older decorative pseudo-element was
       adding a second permanent green/yellow wash, even when the setting was
       zero. Remove only that hidden layer so 0% shows the source artwork. */
    body:not(.admin-mode) #home.hero.home-static-classic {
      background-blend-mode: normal !important;
      filter: none !important;
    }

    body:not(.admin-mode) #home.hero.home-static-classic::before {
      content: none !important;
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      background: none !important;
      background-image: none !important;
      filter: none !important;
      backdrop-filter: none !important;
      box-shadow: none !important;
      animation: none !important;
    }
  


    /* NarraSpace ambient fireflies: deliberately visible on real devices while
       staying lightweight. Only transform and opacity are animated. */
    body:not(.admin-mode) #home.hero {
      isolation: isolate !important;
    }

    body:not(.admin-mode) #home.hero .narra-fireflies {
      position: absolute !important;
      inset: 0 !important;
      z-index: 4 !important;
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      overflow: hidden !important;
      pointer-events: none !important;
      user-select: none !important;
      contain: layout paint style;
    }

    /* A very small backup star field guarantees that the ambience remains
       visible even while individual drifting particles are between pulses. */
    body:not(.admin-mode) #home.hero .narra-fireflies::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 11% 27%, rgba(255,250,214,.96) 0 1.5px, rgba(244,196,48,.48) 2px, transparent 5px),
        radial-gradient(circle at 18% 61%, rgba(255,246,196,.90) 0 1.2px, rgba(244,196,48,.38) 2px, transparent 5px),
        radial-gradient(circle at 36% 18%, rgba(255,253,231,.92) 0 1.4px, rgba(244,196,48,.36) 2px, transparent 5px),
        radial-gradient(circle at 67% 15%, rgba(255,250,214,.94) 0 1.3px, rgba(244,196,48,.40) 2px, transparent 5px),
        radial-gradient(circle at 82% 33%, rgba(255,253,231,.96) 0 1.5px, rgba(244,196,48,.42) 2px, transparent 5px),
        radial-gradient(circle at 91% 67%, rgba(255,246,196,.90) 0 1.2px, rgba(244,196,48,.34) 2px, transparent 5px);
      opacity: .72;
      filter: drop-shadow(0 0 5px rgba(244,196,48,.62));
      animation: narraAmbientStarPulse 4.8s ease-in-out infinite !important;
      will-change: opacity;
    }

    body:not(.admin-mode) #home.hero .hero-container {
      position: relative !important;
      z-index: 6 !important;
    }

    body:not(.admin-mode) #home.hero .narra-firefly {
      --ff-size: 6px;
      --ff-duration: 9s;
      position: absolute !important;
      left: var(--particle-x, 50%) !important;
      top: var(--particle-y, 70%) !important;
      width: var(--ff-size) !important;
      height: var(--ff-size) !important;
      display: block !important;
      visibility: visible !important;
      opacity: .32;
      transform: translate3d(0, 16px, 0) scale(.8);
      transform-origin: center;
      mix-blend-mode: screen;
      animation-name: narraFireflyGuaranteedDrift !important;
      animation-duration: var(--ff-duration) !important;
      animation-timing-function: cubic-bezier(.37, 0, .63, 1) !important;
      animation-delay: var(--particle-delay, 0s) !important;
      animation-iteration-count: infinite !important;
      animation-fill-mode: both !important;
      animation-play-state: running;
      will-change: transform, opacity;
    }

    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(1)  { --ff-duration: 8.2s; --ff-size: 6px; }
    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(2)  { --ff-duration: 9.4s; --ff-size: 5px; }
    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(3)  { --ff-duration: 7.8s; }
    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(4)  { --ff-duration: 10.1s; --ff-size: 7px; }
    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(5)  { --ff-duration: 8.8s; --ff-size: 6px; }
    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(6)  { --ff-duration: 9.8s; }
    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(7)  { --ff-duration: 8.5s; --ff-size: 5px; }
    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(8)  { --ff-duration: 10.4s; --ff-size: 6px; }
    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(9)  { --ff-duration: 9.1s; }
    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(10) { --ff-duration: 8.4s; --ff-size: 5px; }
    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(11) { --ff-duration: 10.7s; --ff-size: 6px; }
    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(12) { --ff-duration: 8.9s; }
    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(13) { --ff-duration: 9.7s; --ff-size: 5px; }
    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(14) { --ff-duration: 10.2s; --ff-size: 6px; }

    body:not(.admin-mode) #home.hero .narra-firefly::before {
      content: '';
      position: absolute;
      inset: -3px;
      border-radius: 999px;
      background: radial-gradient(circle,
        #fffef0 0 16%,
        #ffe9a1 22%,
        rgba(255,211,82,.96) 34%,
        rgba(244,196,48,.52) 54%,
        rgba(244,196,48,.12) 72%,
        transparent 78%);
      box-shadow:
        0 0 7px rgba(255,248,205,.98),
        0 0 17px rgba(244,196,48,.76),
        0 0 30px rgba(244,196,48,.28);
    }

    body:not(.admin-mode) #home.hero .narra-firefly.is-glint {
      --ff-size: 12px;
      animation-name: narraGlintGuaranteedDrift !important;
    }

    body:not(.admin-mode) #home.hero .narra-firefly.is-glint::before {
      inset: -2px;
      border-radius: 0;
      clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
      background: #fff8c9;
      box-shadow:
        0 0 8px rgba(255,250,220,.98),
        0 0 20px rgba(244,196,48,.72),
        0 0 34px rgba(244,196,48,.24);
    }

    body:not(.admin-mode) #home.hero .narra-fireflies.is-paused .narra-firefly {
      animation-play-state: paused !important;
    }

    @keyframes narraAmbientStarPulse {
      0%, 100% { opacity: .42; }
      48% { opacity: .88; }
      68% { opacity: .58; }
    }

    @keyframes narraFireflyGuaranteedDrift {
      0% {
        opacity: .22;
        transform: translate3d(0, 18px, 0) scale(.72);
      }
      14% { opacity: .92; }
      30% {
        opacity: .58;
        transform: translate3d(var(--particle-drift-mid, 8px), -7px, 0) scale(1.18);
      }
      47% { opacity: .96; }
      64% {
        opacity: .48;
        transform: translate3d(0, -48px, 0) scale(.92);
      }
      80% { opacity: .86; }
      100% {
        opacity: .20;
        transform: translate3d(var(--particle-drift-end, 18px), -104px, 0) scale(.64);
      }
    }

    @keyframes narraGlintGuaranteedDrift {
      0% {
        opacity: .18;
        transform: translate3d(0, 13px, 0) rotate(0deg) scale(.42);
      }
      18% {
        opacity: .94;
        transform: translate3d(var(--particle-drift-mid, 7px), -3px, 0) rotate(45deg) scale(1.08);
      }
      29% { opacity: .28; }
      42% {
        opacity: .90;
        transform: translate3d(0, -30px, 0) rotate(92deg) scale(.86);
      }
      58% { opacity: .24; }
      72% { opacity: .82; }
      100% {
        opacity: .16;
        transform: translate3d(var(--particle-drift-end, 16px), -84px, 0) rotate(160deg) scale(.38);
      }
    }

    @media (max-width: 820px) {
      body:not(.admin-mode) #home.hero .narra-firefly:nth-child(n+10) {
        display: none !important;
      }
    }

    @media (max-width: 560px) {
      body:not(.admin-mode) #home.hero .narra-firefly:nth-child(n+7) {
        display: none !important;
      }
      body:not(.admin-mode) #home.hero .narra-firefly:not(.is-glint) {
        --ff-size: 5px;
      }
      body:not(.admin-mode) #home.hero .narra-firefly.is-glint {
        --ff-size: 10px;
      }
      body:not(.admin-mode) #home.hero .narra-fireflies::before {
        opacity: .64;
      }
    }

    @media (orientation: landscape) and (max-height: 520px) {
      body:not(.admin-mode) #home.hero .narra-firefly:nth-child(n+8) {
        display: none !important;
      }
    }

    /* Reduced-motion devices keep a slower, gentler drift instead of freezing.
       This also prevents some desktop/laptop accessibility settings from
       making the NarraSpace fireflies appear completely static. */
    @media (prefers-reduced-motion: reduce) {
      body:not(.admin-mode) #home.hero .narra-fireflies::before {
        animation: narraAmbientStarPulse 9s ease-in-out infinite !important;
        opacity: .66 !important;
      }
      body:not(.admin-mode) #home.hero .narra-firefly {
        animation-play-state: running !important;
      }
      body:not(.admin-mode) #home.hero .narra-firefly:nth-child(even) {
        animation-delay: -6s !important;
      }
    }

    body.admin-mode #home .narra-fireflies,
    .admin-view #home .narra-fireflies {
      display: none !important;
    }
  


    /* More noticeable roaming paths while retaining GPU-friendly transform
       and opacity animation only. */
    body:not(.admin-mode) #home.hero .narra-firefly {
      --ff-x-one: 26px;
      --ff-x-two: -14px;
      --ff-x-three: 34px;
      animation-name: narraFireflyRoamV8 !important;
      animation-duration: var(--ff-duration, 8s) !important;
      animation-timing-function: ease-in-out !important;
      animation-direction: alternate !important;
      animation-play-state: running;
    }

    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(even) {
      --ff-x-one: -28px;
      --ff-x-two: 17px;
      --ff-x-three: -36px;
    }

    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(3n) {
      --ff-x-one: 15px;
      --ff-x-two: -30px;
      --ff-x-three: 22px;
    }

    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(4n) {
      --ff-x-one: -18px;
      --ff-x-two: 32px;
      --ff-x-three: -24px;
    }

    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(1)  { --ff-duration: 6.8s; }
    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(2)  { --ff-duration: 8.1s; }
    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(3)  { --ff-duration: 7.2s; }
    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(4)  { --ff-duration: 8.7s; }
    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(5)  { --ff-duration: 7.6s; }
    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(6)  { --ff-duration: 9.1s; }
    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(7)  { --ff-duration: 6.5s; }
    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(8)  { --ff-duration: 8.4s; }
    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(9)  { --ff-duration: 7.9s; }
    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(10) { --ff-duration: 9.4s; }
    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(11) { --ff-duration: 7.1s; }
    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(12) { --ff-duration: 8.8s; }
    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(13) { --ff-duration: 7.4s; }
    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(14) { --ff-duration: 9.0s; }

    body:not(.admin-mode) #home.hero .narra-firefly::before {
      animation: narraFireflyGlowV8 1.9s ease-in-out infinite alternate !important;
    }

    body:not(.admin-mode) #home.hero .narra-firefly:nth-child(even)::before {
      animation-delay: -0.8s !important;
    }

    body:not(.admin-mode) #home.hero .narra-firefly.is-glint {
      animation-name: narraGlintRoamV8 !important;
    }

    @keyframes narraFireflyRoamV8 {
      0% {
        opacity: .30;
        transform: translate3d(0, 28px, 0) scale(.70);
      }
      17% {
        opacity: .98;
        transform: translate3d(var(--ff-x-one), -10px, 0) scale(1.16);
      }
      39% {
        opacity: .54;
        transform: translate3d(var(--ff-x-two), -66px, 0) scale(.86);
      }
      61% {
        opacity: 1;
        transform: translate3d(var(--ff-x-three), -122px, 0) scale(1.22);
      }
      79% {
        opacity: .50;
        transform: translate3d(calc(var(--ff-x-one) * -.45), -164px, 0) scale(.80);
      }
      100% {
        opacity: .24;
        transform: translate3d(calc(var(--ff-x-two) * -.65), -210px, 0) scale(.62);
      }
    }

    @keyframes narraGlintRoamV8 {
      0% {
        opacity: .20;
        transform: translate3d(0, 22px, 0) rotate(0deg) scale(.45);
      }
      20% {
        opacity: 1;
        transform: translate3d(var(--ff-x-one), -18px, 0) rotate(55deg) scale(1.08);
      }
      42% {
        opacity: .26;
        transform: translate3d(var(--ff-x-two), -72px, 0) rotate(108deg) scale(.68);
      }
      63% {
        opacity: .94;
        transform: translate3d(var(--ff-x-three), -126px, 0) rotate(172deg) scale(1.02);
      }
      82% {
        opacity: .22;
        transform: translate3d(calc(var(--ff-x-one) * -.5), -166px, 0) rotate(228deg) scale(.56);
      }
      100% {
        opacity: .16;
        transform: translate3d(calc(var(--ff-x-two) * -.7), -198px, 0) rotate(295deg) scale(.38);
      }
    }

    @keyframes narraFireflyGlowV8 {
      from { opacity: .55; transform: scale(.82); }
      to { opacity: 1; transform: scale(1.18); }
    }

    /* Keep motion visible on phones, but shorten the path slightly to avoid
       crossing too much of the title area. */
    @media (max-width: 560px) {
      body:not(.admin-mode) #home.hero .narra-firefly {
        --ff-x-one: 18px;
        --ff-x-two: -10px;
        --ff-x-three: 23px;
      }
      body:not(.admin-mode) #home.hero .narra-firefly:nth-child(even) {
        --ff-x-one: -18px;
        --ff-x-two: 11px;
        --ff-x-three: -24px;
      }
    }

    /* Reduced-motion preference receives a much slower, smaller drift rather
       than a completely frozen decorative field. */
    @media (prefers-reduced-motion: reduce) {
      body:not(.admin-mode) #home.hero .narra-firefly {
        animation-name: narraFireflyReducedV8 !important;
        animation-duration: 22s !important;
        animation-direction: alternate !important;
      }
      body:not(.admin-mode) #home.hero .narra-firefly::before {
        animation-duration: 4.5s !important;
      }
      @keyframes narraFireflyReducedV8 {
        from { opacity: .46; transform: translate3d(0, 4px, 0) scale(.88); }
        to { opacity: .72; transform: translate3d(8px, -18px, 0) scale(1); }
      }
    }
  


    /* Desktop/laptop compatibility: keeps particles roaming even when the OS
       exposes a reduced-motion preference, while using a slower gentle path. */
    @media (min-width: 821px) {
      body:not(.admin-mode) #home.hero .narra-fireflies:not(.is-paused) .narra-firefly {
        animation-play-state: running !important;
      }
    }

    @media (min-width: 821px) and (prefers-reduced-motion: reduce) {
      body:not(.admin-mode) #home.hero .narra-firefly {
        animation-name: narraFireflyDesktopGentleV9 !important;
        animation-duration: 13s !important;
        animation-timing-function: ease-in-out !important;
        animation-direction: alternate !important;
        animation-iteration-count: infinite !important;
        animation-fill-mode: both !important;
      }
      body:not(.admin-mode) #home.hero .narra-firefly.is-glint {
        animation-name: narraGlintDesktopGentleV9 !important;
      }
      body:not(.admin-mode) #home.hero .narra-firefly::before {
        animation: narraFireflyGlowV8 3.2s ease-in-out infinite alternate !important;
      }
    }

    @keyframes narraFireflyDesktopGentleV9 {
      0%   { opacity: .38; transform: translate3d(0, 12px, 0) scale(.78); }
      28%  { opacity: .88; transform: translate3d(18px, -24px, 0) scale(1.05); }
      55%  { opacity: .52; transform: translate3d(-12px, -62px, 0) scale(.88); }
      78%  { opacity: .94; transform: translate3d(24px, -96px, 0) scale(1.08); }
      100% { opacity: .34; transform: translate3d(-8px, -132px, 0) scale(.70); }
    }

    @keyframes narraGlintDesktopGentleV9 {
      0%   { opacity: .28; transform: translate3d(0, 10px, 0) rotate(0deg) scale(.48); }
      30%  { opacity: .92; transform: translate3d(-16px, -28px, 0) rotate(72deg) scale(1); }
      58%  { opacity: .30; transform: translate3d(14px, -68px, 0) rotate(150deg) scale(.66); }
      80%  { opacity: .86; transform: translate3d(-20px, -102px, 0) rotate(228deg) scale(.92); }
      100% { opacity: .22; transform: translate3d(10px, -130px, 0) rotate(310deg) scale(.42); }
    }
  


    /* Live public archive cards: compact cinematic title/credit stack at bottom-left. */
    body:not(.admin-mode) #stories-container .storybook-card .story-body {
      position: absolute !important;
      z-index: 2 !important;
      inset: auto 0 0 0 !important;
      width: 100% !important;
      min-height: 0 !important;
      height: auto !important;
      padding: clamp(16px, 1.35vw, 21px) !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      justify-content: flex-end !important;
      gap: clamp(5px, .42vw, 7px) !important;
      text-align: left !important;
      background: transparent !important;
    }

    body:not(.admin-mode) #stories-container .storybook-card .story-title {
      order: 1 !important;
      width: calc(100% - clamp(58px, 5.4vw, 76px)) !important;
      max-width: none !important;
      min-height: 0 !important;
      height: auto !important;
      max-height: calc(2.18em + 2px) !important;
      margin: 0 !important;
      padding: 0 !important;
      display: -webkit-box !important;
      -webkit-box-orient: vertical !important;
      -webkit-line-clamp: 2 !important;
      overflow: hidden !important;
      align-self: flex-start !important;
      font-size: clamp(1.06rem, 1.18vw, 1.32rem) !important;
      font-weight: 850 !important;
      line-height: 1.09 !important;
      letter-spacing: -.012em !important;
      color: #fffdf5 !important;
      text-align: left !important;
      text-shadow: 0 2px 12px rgba(0,0,0,.58) !important;
    }

    body:not(.admin-mode) #stories-container .storybook-card .story-footer {
      order: 2 !important;
      display: block !important;
      width: 100% !important;
      min-height: 0 !important;
      height: auto !important;
      margin: 0 !important;
      padding: 0 clamp(58px, 5.4vw, 76px) 0 0 !important;
      align-self: stretch !important;
      text-align: left !important;
    }

    body:not(.admin-mode) #stories-container .storybook-card .storybook-credit-block {
      display: block !important;
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      text-align: left !important;
    }

    body:not(.admin-mode) #stories-container .storybook-card .story-author {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      font-size: clamp(.72rem, .74vw, .84rem) !important;
      font-weight: 650 !important;
      line-height: 1.18 !important;
      color: rgba(255,253,245,.84) !important;
      text-align: left !important;
      text-shadow: 0 2px 9px rgba(0,0,0,.56) !important;
    }

    body:not(.admin-mode) #stories-container .storybook-card .read-more.story-card-icon-action {
      position: absolute !important;
      right: clamp(16px, 1.35vw, 21px) !important;
      bottom: clamp(16px, 1.35vw, 21px) !important;
      margin: 0 !important;
      z-index: 4 !important;
    }

    body:not(.admin-mode) #stories-container .storybook-vignette {
      background: linear-gradient(
        180deg,
        rgba(7,13,8,.01) 0%,
        rgba(7,13,8,0) 48%,
        rgba(7,13,8,.24) 67%,
        rgba(7,13,8,.93) 100%
      ) !important;
    }

    @media (max-width: 767px) and (orientation: landscape) {
      body:not(.admin-mode) #stories-container .storybook-card .story-body {
        padding: 10px 11px !important;
        gap: 4px !important;
      }
      body:not(.admin-mode) #stories-container .storybook-card .story-title {
        width: calc(100% - 50px) !important;
        font-size: .84rem !important;
      }
      body:not(.admin-mode) #stories-container .storybook-card .story-footer {
        padding-right: 50px !important;
      }
      body:not(.admin-mode) #stories-container .storybook-card .story-author {
        font-size: .62rem !important;
      }
      body:not(.admin-mode) #stories-container .storybook-card .read-more.story-card-icon-action {
        right: 10px !important;
        bottom: 10px !important;
      }
    }

    @media (max-width: 767px) and (orientation: portrait) {
      body:not(.admin-mode) #stories-container .storybook-card .story-body {
        padding: 14px 16px !important;
        gap: 5px !important;
      }
      body:not(.admin-mode) #stories-container .storybook-card .story-title {
        width: calc(100% - 58px) !important;
        font-size: clamp(1rem, 4.5vw, 1.2rem) !important;
      }
      body:not(.admin-mode) #stories-container .storybook-card .story-footer {
        padding-right: 58px !important;
      }
      body:not(.admin-mode) #stories-container .storybook-card .story-author {
        font-size: .75rem !important;
      }
      body:not(.admin-mode) #stories-container .storybook-card .read-more.story-card-icon-action {
        right: 15px !important;
        bottom: 15px !important;
      }
    }
  


    /* NarraSpace Film Viewer: compact header, cinematic player, clean details. */
    #story-modal {
      padding: clamp(12px, 2vw, 28px);
      align-items: center;
      justify-content: center;
    }
    #story-modal .document-modal {
      width: min(96vw, 1380px);
      height: min(92dvh, 860px);
      max-width: none;
      max-height: none;
      border-radius: 26px;
      border: 1px solid rgba(255, 248, 220, 0.42);
      background: #f8f1dc;
      box-shadow: 0 34px 100px rgba(7, 14, 9, 0.46);
      overflow: hidden;
      isolation: isolate;
    }
    #story-modal .document-topbar {
      position: relative;
      z-index: 6;
      flex: 0 0 auto;
      min-height: 72px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 16px;
      padding: 13px 18px;
      background:
        radial-gradient(circle at 0 0, rgba(244, 196, 48, 0.18), transparent 34%),
        linear-gradient(180deg, #fffbe9 0%, #f7efd7 100%);
      border-bottom: 1px solid rgba(54, 87, 58, 0.16);
      box-shadow: 0 10px 28px rgba(31, 48, 33, 0.08);
    }
    #story-modal .document-title-wrap {
      min-width: 0;
      max-width: none;
      flex: 0 1 auto;
      gap: 12px;
    }
    #story-modal .document-title-copy { min-width: 0; }
    #story-modal .document-icon {
      width: 44px;
      height: 44px;
      border-radius: 13px;
      background: #fff4c8;
      color: #24442c;
      border: 1px solid rgba(54, 87, 58, 0.14);
      box-shadow: 0 10px 24px rgba(54, 87, 58, 0.10);
    }
    #story-modal .document-icon::after { border-color: rgba(255,255,255,0.72); }
    #story-modal .document-modal .document-title {
      color: #17291d;
      font-size: clamp(1.02rem, 1.45vw, 1.28rem);
      line-height: 1.2;
      letter-spacing: -0.015em;
    }
    #story-modal .document-subtitle {
      color: #6d7437;
      font-size: 0.8rem;
      line-height: 1.35;
      margin-top: 4px;
    }
    #story-modal .document-actions {
      width: auto;
      max-width: 100%;
      flex: 0 0 auto;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;
      flex-wrap: nowrap;
      overflow: visible;
      padding: 0;
    }
    #story-modal .doc-action {
      min-height: 42px;
      border-radius: 999px;
      border: 1px solid rgba(54, 87, 58, 0.15);
      background: rgba(255,255,255,0.76);
      color: #243b2a;
      box-shadow: 0 8px 18px rgba(43,64,38,0.08);
      backdrop-filter: blur(8px);
    }
    #story-modal .doc-action:hover {
      background: #ffffff;
      filter: none;
      box-shadow: 0 10px 24px rgba(43,64,38,0.12);
    }
    #story-modal #modal-focus-preview-btn {
      min-width: max-content;
      padding-inline: 16px;
      background: #fff8dc;
      border-color: rgba(192, 151, 45, 0.28);
    }
    #story-modal #modal-share-link,
    #story-modal #modal-qr-link,
    #story-modal #modal-review-link,
    #story-modal #modal-more-tools-btn,
    #story-modal .document-actions > .doc-action.square {
      width: 42px;
      min-width: 42px;
      padding: 0;
    }
    #story-modal #modal-share-link span,
    #story-modal #modal-qr-link span,
    #story-modal #modal-review-link span,
    #story-modal #modal-more-tools-btn span,
    #story-modal .document-actions > .doc-action.square span { display: none; }
    #story-modal .document-modal.tools-expanded .document-actions {
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    #story-modal .document-modal.tools-expanded .secondary-preview-action {
      width: 42px;
      min-width: 42px;
      padding: 0;
    }
    #story-modal .document-modal.tools-expanded .secondary-preview-action span { display: none; }
    #story-modal .document-toolbar { display: none !important; }

    #story-modal .document-shell {
      flex: 1 1 auto;
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
      overflow: hidden;
      background: #0c1510;
    }
    #story-modal .document-info {
      min-width: 0;
      min-height: 0;
      padding: 20px;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: rgba(244,196,48,0.5) transparent;
      border: 0;
      border-right: 1px solid rgba(255,255,255,0.08);
      background:
        radial-gradient(circle at 0 0, rgba(244,196,48,0.11), transparent 30%),
        linear-gradient(180deg, #15351f 0%, #0d2918 100%);
      color: #f7f3df;
      box-shadow: none;
    }
    #story-modal .document-info::-webkit-scrollbar { width: 6px; }
    #story-modal .document-info::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: rgba(244,196,48,0.42);
    }
    #story-modal .document-cover {
      width: min(100%, 236px);
      aspect-ratio: 4 / 5;
      max-height: 300px;
      margin: 0 auto 16px;
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 16px;
      box-shadow: 0 18px 38px rgba(0,0,0,0.30);
      transform: none;
      background: #10291a;
    }
    #story-modal .document-cover img { object-fit: cover; }
    #story-modal .document-info .category-badge {
      margin: 0 0 10px;
      padding: 6px 11px;
      background: rgba(0,0,0,0.38);
      color: #fff8d9;
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: none;
    }
    #story-modal .document-meta-grid {
      gap: 0;
      margin-top: 8px;
    }
    #story-modal .document-meta-chip {
      min-width: 0;
      padding: 9px 0;
      border: 0;
      border-bottom: 1px solid rgba(255,255,255,0.11);
      border-radius: 0;
      background: transparent;
      color: #f0ecd7;
      font-size: 0.83rem;
      line-height: 1.45;
    }
    #story-modal .document-meta-chip i { color: #f4c430; }
    #story-modal .document-overview {
      margin-top: 14px;
      color: rgba(248,245,226,0.88);
      font-size: 0.88rem;
      line-height: 1.62;
    }
    #story-modal .creator-protection-notice {
      margin-top: 14px;
      padding: 10px 11px;
      border-color: rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.07);
      color: rgba(248,245,226,0.76);
      font-size: 0.7rem;
    }
    #story-modal .creator-protection-notice i { color: #f4c430; }

    #story-modal .document-viewer {
      min-width: 0;
      min-height: 0;
      padding: 16px;
      overflow: hidden;
      overscroll-behavior: contain;
      touch-action: auto;
      background:
        linear-gradient(180deg, rgba(244,196,48,0.13), transparent 5px),
        #090e0b;
      box-shadow: inset 0 3px 0 rgba(244,196,48,0.55);
    }
    #story-modal .preview-zoom-content {
      width: 100%;
      height: 100%;
      min-height: 0;
      display: grid;
      place-items: center;
    }
    #story-modal .document-viewer iframe,
    #story-modal .document-viewer img {
      width: 100%;
      height: 100%;
      min-height: 0;
      max-height: 100%;
      border: 0;
      border-radius: 16px;
      background: #000;
      box-shadow: 0 20px 50px rgba(0,0,0,0.36);
    }
    #story-modal .document-viewer img { object-fit: contain; }
    #story-modal .document-modal[data-preview-kind="image"] .document-viewer {
      overflow: auto;
      touch-action: none;
    }
    #story-modal .preview-fallback {
      color: #e9eadf;
      background: #0b120e;
    }
    #story-modal .preview-fallback h3 { color: #fff3b4; }
    #story-modal .preview-fallback p { color: rgba(233,234,223,0.78); }

    /* Medium windows: fixed two-row header and visible player; prevents blank cream modal. */
    @media (min-width: 821px) and (max-width: 1180px) {
      #story-modal .document-modal {
        width: min(96vw, 1120px);
        height: min(91dvh, 760px);
        border-radius: 20px;
      }
      #story-modal .document-topbar {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
          "title close"
          "actions actions";
        gap: 10px 12px;
        padding: 12px 14px;
      }
      #story-modal .document-title-wrap {
        grid-area: title;
        flex: 0 0 auto !important;
        max-width: none;
        padding-right: 8px;
      }
      #story-modal .document-actions {
        grid-area: actions;
        flex: 0 0 auto !important;
        width: 100%;
        min-height: 42px;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 0 0 2px;
        scrollbar-width: none;
      }
      #story-modal .document-actions::-webkit-scrollbar { display: none; }
      #story-modal .document-actions > .doc-action.square {
        position: absolute;
        top: 13px;
        right: 14px;
        z-index: 2;
      }
      #story-modal .document-title-wrap { padding-right: 52px; }
      #story-modal .document-shell {
        display: grid !important;
        grid-template-columns: minmax(230px, 30%) minmax(0, 1fr) !important;
        min-height: 0;
      }
      #story-modal .document-info {
        order: initial;
        max-height: none;
        padding: 16px;
        border-top: 0;
        border-right: 1px solid rgba(255,255,255,0.08);
      }
      #story-modal .document-cover {
        width: min(100%, 190px);
        max-height: 240px;
      }
      #story-modal .document-viewer {
        order: initial;
        min-height: 0 !important;
        height: auto;
        padding: 12px;
      }
    }

    /* Phone and tablet portrait: player first, compact controls, details below when requested. */
    @media (max-width: 820px) {
      #story-modal {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
      }
      #story-modal .document-modal,
      #story-modal .document-modal.mobile-preview-mode {
        width: 100vw;
        height: 100dvh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
      }
      #story-modal .document-modal.mobile-preview-mode .document-topbar,
      #story-modal .document-topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
          "title close"
          "actions actions";
        align-items: center;
        gap: 9px 10px;
        padding: max(10px, env(safe-area-inset-top)) 10px 9px;
      }
      #story-modal .document-modal.mobile-preview-mode .document-title-wrap,
      #story-modal .document-title-wrap {
        grid-area: title;
        flex: 0 0 auto !important;
        max-width: none;
        padding-right: 4px;
      }
      #story-modal .document-title { white-space: normal; }
      #story-modal .document-subtitle {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      #story-modal .document-modal.mobile-preview-mode .document-actions,
      #story-modal .document-actions {
        grid-area: actions;
        flex: 0 0 auto !important;
        width: 100%;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 7px;
        padding: 0 48px 1px 0;
        scrollbar-width: none;
      }
      #story-modal .document-actions::-webkit-scrollbar { display: none; }
      #story-modal .document-actions > .doc-action.square {
        position: absolute;
        top: max(10px, env(safe-area-inset-top));
        right: 10px;
        z-index: 3;
      }
      #story-modal .document-modal.mobile-preview-mode #modal-focus-preview-btn,
      #story-modal #modal-focus-preview-btn {
        flex: 0 0 auto;
        width: auto;
        min-width: max-content;
        padding-inline: 13px;
      }
      #story-modal .document-modal.mobile-preview-mode #modal-focus-preview-btn span,
      #story-modal #modal-focus-preview-btn span { display: inline; }
      #story-modal .document-modal.mobile-preview-mode #modal-toggle-details-btn {
        display: inline-flex !important;
      }
      #story-modal .document-shell,
      #story-modal .document-modal.mobile-preview-mode .document-shell {
        display: flex !important;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
      }
      #story-modal .document-viewer,
      #story-modal .document-modal.mobile-preview-mode .document-viewer {
        order: 1;
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        padding: 8px;
      }
      #story-modal .document-info,
      #story-modal .document-modal.mobile-preview-mode .document-info {
        position: relative;
        inset: auto;
        order: 2;
        flex: 0 1 auto;
        max-height: min(42dvh, 330px);
        padding: 16px;
        border: 0;
        border-top: 1px solid rgba(255,255,255,0.1);
        border-radius: 0;
        box-shadow: none;
        overflow-y: auto;
      }
      #story-modal .document-modal.mobile-preview-mode.details-hidden .document-info,
      #story-modal .document-modal.details-hidden .document-info { display: none; }
      #story-modal .document-cover { display: none !important; }
      #story-modal .document-meta-grid { grid-template-columns: 1fr; }
      #story-modal .modal-mobile-note { display: none; }
    }

    /* Short landscape screens: preserve player height and use a compact control strip. */
    @media (orientation: landscape) and (max-height: 620px) {
      #story-modal { padding: 6px; }
      #story-modal .document-modal.landscape-preview-mode {
        width: min(98vw, 1180px);
        height: calc(100dvh - 12px);
        border-radius: 15px;
      }
      #story-modal .document-modal.landscape-preview-mode .document-topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "title actions";
        min-height: 58px;
        padding: 8px 10px;
      }
      #story-modal .document-modal.landscape-preview-mode .document-title-wrap {
        grid-area: title;
        flex: 0 0 auto !important;
        padding-right: 0;
      }
      #story-modal .document-modal.landscape-preview-mode .document-actions {
        grid-area: actions;
        flex: 0 0 auto !important;
        width: auto;
        max-width: 54vw;
        justify-content: flex-end;
        padding: 0;
      }
      #story-modal .document-modal.landscape-preview-mode .document-actions > .doc-action.square {
        position: static;
      }
      #story-modal .document-modal.landscape-preview-mode .document-shell {
        display: flex !important;
        flex-direction: column;
      }
      #story-modal .document-modal.landscape-preview-mode .document-viewer {
        flex: 1 1 auto;
        min-height: 0;
        padding: 6px;
      }
      #story-modal .document-modal.landscape-preview-mode .document-info {
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: 8px;
        max-height: min(52dvh, 220px);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 14px;
        box-shadow: 0 -18px 36px rgba(0,0,0,0.3);
      }
      #story-modal .document-modal.landscape-preview-mode.details-hidden .document-info { display: none; }
    }
  


    /* Hard responsive frame: the header can never consume the player row. */
    #story-modal .document-modal {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      grid-template-rows: auto minmax(0, 1fr) !important;
      align-content: stretch !important;
    }
    #story-modal .document-topbar {
      grid-column: 1 !important;
      grid-row: 1 !important;
      position: relative !important;
      flex: none !important;
      flex-grow: 0 !important;
      flex-shrink: 0 !important;
      flex-basis: auto !important;
      align-self: start !important;
      width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      overflow: visible !important;
    }
    #story-modal .document-toolbar {
      display: none !important;
    }
    #story-modal .document-shell {
      grid-column: 1 !important;
      grid-row: 2 !important;
      align-self: stretch !important;
      flex: none !important;
      width: 100% !important;
      height: 100% !important;
      min-width: 0 !important;
      min-height: 0 !important;
      max-height: none !important;
      visibility: visible !important;
      opacity: 1 !important;
      overflow: hidden !important;
    }
    #story-modal .document-viewer,
    #story-modal .document-info,
    #story-modal .preview-zoom-content {
      min-width: 0 !important;
      min-height: 0 !important;
    }

    /* Resized desktop, small laptop and browser-zoom range. */
    @media (min-width: 821px) and (max-width: 1320px) {
      #story-modal {
        padding: 12px !important;
      }
      #story-modal .document-modal {
        width: min(97vw, 1220px) !important;
        height: min(92dvh, 780px) !important;
        min-height: min(620px, 92dvh) !important;
        border-radius: 20px !important;
      }
      #story-modal .document-topbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
          "title"
          "actions" !important;
        align-content: start !important;
        align-items: center !important;
        gap: 9px !important;
        padding: 12px 14px 11px !important;
      }
      #story-modal .document-title-wrap {
        grid-area: title !important;
        flex: none !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        padding-right: 50px !important;
      }
      #story-modal .document-actions {
        grid-area: actions !important;
        position: static !important;
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        max-height: 46px !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 0 52px 2px 0 !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch;
      }
      #story-modal .document-actions::-webkit-scrollbar {
        display: none !important;
      }
      #story-modal .document-actions > .doc-action.square {
        position: absolute !important;
        top: 13px !important;
        right: 14px !important;
        z-index: 8 !important;
      }
      #story-modal .document-shell {
        display: grid !important;
        grid-template-columns: minmax(220px, 29%) minmax(0, 1fr) !important;
      }
      #story-modal .document-info {
        display: block;
        padding: 15px !important;
      }
      #story-modal .document-cover {
        width: min(100%, 184px) !important;
        max-height: 230px !important;
      }
      #story-modal .document-viewer {
        display: block !important;
        height: 100% !important;
        padding: 11px !important;
      }
    }

    /* Short laptop screens: preserve the player before anything else. */
    @media (min-width: 821px) and (max-height: 720px) {
      #story-modal {
        padding: 8px !important;
      }
      #story-modal .document-modal {
        width: 98vw !important;
        height: 96dvh !important;
        min-height: 0 !important;
        border-radius: 16px !important;
      }
      #story-modal .document-topbar {
        padding: 8px 10px !important;
        gap: 6px !important;
      }
      #story-modal .document-title-wrap {
        min-height: 38px !important;
      }
      #story-modal .document-icon {
        width: 38px !important;
        height: 38px !important;
      }
      #story-modal .document-actions {
        min-height: 38px !important;
        max-height: 40px !important;
      }
      #story-modal .doc-action {
        min-height: 38px !important;
      }
      #story-modal .document-actions > .doc-action.square {
        top: 8px !important;
        right: 10px !important;
      }
      #story-modal .document-shell {
        grid-template-columns: minmax(190px, 25%) minmax(0, 1fr) !important;
      }
      #story-modal .document-cover {
        display: none !important;
      }
      #story-modal .document-info {
        padding: 12px !important;
      }
    }

    /* Keep the existing phone design, but enforce the two real rows. */
    @media (max-width: 820px) {
      #story-modal .document-modal,
      #story-modal .document-modal.mobile-preview-mode {
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
      }
      #story-modal .document-topbar,
      #story-modal .document-modal.mobile-preview-mode .document-topbar {
        grid-row: 1 !important;
        height: auto !important;
        min-height: 0 !important;
      }
      #story-modal .document-shell,
      #story-modal .document-modal.mobile-preview-mode .document-shell {
        grid-row: 2 !important;
        height: 100% !important;
        min-height: 0 !important;
      }
    }
  


    /* Restore the embedded preview as a full-width stage.
       The preceding redesign centered the iframe as a flex item, which could
       collapse Google Drive previews into a tall portrait-shaped column. */
    #story-modal .document-modal[data-preview-kind="iframe"] .document-viewer {
      position: relative !important;
      display: block !important;
      padding: 0 !important;
      overflow: hidden !important;
      background: #070d09 !important;
    }
    #story-modal .document-modal[data-preview-kind="iframe"] .preview-zoom-content {
      position: absolute !important;
      inset: 12px !important;
      display: block !important;
      width: auto !important;
      height: auto !important;
      min-width: 0 !important;
      min-height: 0 !important;
      max-width: none !important;
      max-height: none !important;
      transform: none !important;
    }
    #story-modal .document-modal[data-preview-kind="iframe"] #modal-preview-frame {
      position: absolute !important;
      inset: 0 !important;
      display: block !important;
      width: 100% !important;
      height: 100% !important;
      min-width: 100% !important;
      min-height: 100% !important;
      max-width: none !important;
      max-height: none !important;
      flex: none !important;
      align-self: stretch !important;
      justify-self: stretch !important;
      aspect-ratio: auto !important;
      margin: 0 !important;
      border: 0 !important;
      border-radius: 14px !important;
      background: #000 !important;
      box-shadow: none !important;
    }

    /* Films retain a dark cinematic stage; the iframe itself fills the stage. */
    #story-modal .document-modal[data-resource-type="film"][data-preview-kind="iframe"] .document-viewer,
    #story-modal .document-modal[data-preview-provider="google-drive"] .document-viewer {
      background: #050a07 !important;
    }

    /* Documents keep the full viewer width so the provider can fit the page
       properly rather than receiving a portrait-sized iframe viewport. */
    #story-modal .document-modal[data-preview-provider="google-drive-document"] .preview-zoom-content,
    #story-modal .document-modal[data-preview-provider="google-docs"] .preview-zoom-content {
      inset: 10px !important;
    }

    /* Full-screen means edge-to-edge, without the normal modal inset. */
    #story-modal .document-viewer.is-fullscreen-preview .preview-zoom-content,
    #story-modal .document-viewer:fullscreen .preview-zoom-content {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
    }
    #story-modal .document-viewer.is-fullscreen-preview #modal-preview-frame,
    #story-modal .document-viewer:fullscreen #modal-preview-frame {
      position: absolute !important;
      inset: 0 !important;
      width: 100dvw !important;
      height: 100dvh !important;
      min-width: 100dvw !important;
      min-height: 100dvh !important;
      border-radius: 0 !important;
    }

    @media (max-width: 820px) {
      #story-modal .document-modal[data-preview-kind="iframe"] .preview-zoom-content {
        inset: 7px !important;
      }
      #story-modal .document-modal[data-preview-kind="iframe"] #modal-preview-frame {
        border-radius: 11px !important;
      }
    }

    @media (orientation: landscape) and (max-height: 620px) {
      #story-modal .document-modal[data-preview-kind="iframe"] .preview-zoom-content {
        inset: 5px !important;
      }
    }
  


    #story-modal .document-viewer:fullscreen {
      position: fixed !important;
      inset: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      max-width: none !important;
      max-height: none !important;
      border-radius: 0 !important;
      background: #061109 !important;
      overflow: hidden !important;
    }

    #story-modal .document-viewer:fullscreen .preview-zoom-content,
    #story-modal .document-viewer:fullscreen #modal-preview-frame,
    #story-modal .document-viewer:fullscreen #modal-preview-image {
      width: 100% !important;
      height: 100% !important;
      min-width: 100% !important;
      min-height: 100% !important;
    }

    /* Reduce NarraSpace-side repainting while a provider preview is active. */
    body.preview-performance-mode #home .narra-fireflies,
    body.preview-performance-mode #home .narra-firefly,
    body.preview-performance-mode #home .hero-icon,
    body.preview-performance-mode .content-card,
    body.preview-performance-mode .feature-card,
    body.preview-performance-mode .portal-card,
    body.preview-performance-mode .impact-card,
    body.preview-performance-mode .notice-slide,
    body.preview-performance-mode .showcase-slide {
      animation-play-state: paused !important;
      transition: none !important;
    }

    body.preview-performance-mode #story-modal {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      background: rgba(5, 11, 7, .72) !important;
    }

    body.preview-performance-mode #story-modal .document-modal,
    body.preview-performance-mode #story-modal .document-topbar,
    body.preview-performance-mode #story-modal .doc-action {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }

    body.preview-performance-mode #story-modal .document-viewer {
      contain: layout paint style;
      isolation: isolate;
    }

    body.preview-performance-mode #story-modal .document-modal {
      box-shadow: 0 18px 54px rgba(0, 0, 0, .32) !important;
    }
  


    /* Responsive NarraSpace Listening Room. Existing audio functions and IDs are preserved. */
    #music-player-modal.music-player-modal {
      padding: clamp(10px, 2vw, 24px) !important;
      background: rgba(8, 13, 10, .78) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      backdrop-filter: blur(10px) !important;
    }

    #music-player-modal .music-player-shell {
      --player-accent: #e0bd62;
      width: min(1080px, 100%) !important;
      max-height: min(820px, calc(100dvh - 28px)) !important;
      min-height: 0 !important;
      display: grid !important;
      grid-template-rows: auto minmax(0, 1fr) auto !important;
      grid-template-columns: minmax(0, 1fr) !important;
      overflow: hidden !important;
      border: 1px solid rgba(236, 204, 115, .24) !important;
      border-radius: 22px !important;
      background: #17241c !important;
      color: #fffaf0 !important;
      box-shadow: 0 30px 78px rgba(0, 0, 0, .46) !important;
      isolation: isolate !important;
    }

    #music-player-modal .music-player-head {
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 18px;
      padding: 20px 22px 18px;
      border-bottom: 1px solid rgba(255, 255, 255, .09);
      background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
    }

    #music-player-modal .music-player-head-copy { min-width: 0; }
    #music-player-modal .music-player-room-label {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 8px;
      color: var(--player-accent);
      font-size: .68rem;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    #music-player-modal .music-player-room-label svg { width: 15px; height: 15px; }
    #music-player-modal .music-player-kicker {
      display: block;
      margin-bottom: 3px;
      color: #b9c7b8 !important;
      font-size: .68rem !important;
      font-weight: 800 !important;
      letter-spacing: .03em !important;
    }
    #music-player-modal .music-player-head h2 {
      margin: 0 !important;
      max-width: 100%;
      color: #fffaf0 !important;
      font-size: clamp(1.45rem, 3vw, 2.4rem) !important;
      line-height: 1.08 !important;
      overflow-wrap: anywhere;
    }
    #music-player-modal .music-player-head p {
      margin: 5px 0 0 !important;
      color: #c8d2c6 !important;
      font-size: .92rem;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #music-player-modal .music-player-close {
      position: static !important;
      width: 44px !important;
      height: 44px !important;
      flex: 0 0 auto;
      border: 1px solid rgba(255,255,255,.16) !important;
      background: rgba(255,255,255,.07) !important;
      color: #fffaf0 !important;
      box-shadow: none !important;
    }

    #music-player-modal .music-player-stage {
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
      gap: clamp(22px, 4vw, 54px);
      align-items: center;
      padding: clamp(22px, 4vw, 48px);
      overflow: hidden;
    }

    #music-player-modal .music-player-art-column {
      min-width: 0;
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 16px;
    }

    #music-player-modal .music-player-art-wrap {
      width: min(100%, 320px) !important;
      min-height: 0 !important;
      aspect-ratio: 1 / 1 !important;
      position: relative !important;
      overflow: hidden !important;
      border-radius: 18px !important;
      border: 1px solid rgba(255,255,255,.12) !important;
      background: #0e1712 !important;
      box-shadow: 0 20px 48px rgba(0,0,0,.32) !important;
    }
    #music-player-modal .music-player-art {
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
      background: #0e1712 !important;
    }
    #music-player-modal .music-player-art-placeholder { position: absolute !important; inset: 0 !important; }
    #music-player-modal .music-player-orbit {
      width: 72% !important;
      left: 14% !important;
      bottom: -42% !important;
      opacity: .18 !important;
      pointer-events: none;
    }
    #music-player-modal .music-player-moods {
      min-height: 0;
      margin: 0 !important;
      justify-content: center;
    }
    #music-player-modal .music-player-moods:empty { display: none !important; }

    #music-player-modal .music-player-copy {
      align-self: stretch !important;
      min-width: 0 !important;
      min-height: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      padding: 0 !important;
      overflow-y: auto !important;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: rgba(224,189,98,.58) transparent;
    }
    #music-player-modal .music-player-copy::-webkit-scrollbar { width: 6px; }
    #music-player-modal .music-player-copy::-webkit-scrollbar-thumb { background: rgba(224,189,98,.48); border-radius: 999px; }

    #music-player-modal .music-player-now {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      width: fit-content;
      margin-bottom: 10px;
      color: #aebbad;
      font-size: .72rem;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: .05em;
    }
    #music-player-modal .music-player-now svg { width: 16px; height: 16px; color: var(--player-accent); }

    #music-player-modal .music-waveform {
      width: 100% !important;
      max-width: 620px;
      height: 62px !important;
      gap: 5px !important;
      margin: 0 auto !important;
      contain: layout paint;
    }
    #music-player-modal .music-waveform span {
      flex: 1 1 3px !important;
      max-width: 7px !important;
      opacity: .76 !important;
      will-change: transform, opacity;
    }

    #music-player-modal .music-progress-row {
      width: 100%;
      max-width: 650px;
      grid-template-columns: 46px minmax(0,1fr) 46px !important;
      margin: 10px auto 22px !important;
      color: #c3cec1 !important;
      font-size: .72rem !important;
    }
    #music-player-modal input[type="range"] { accent-color: var(--player-accent); }

    #music-player-modal .music-player-controls { gap: 18px !important; }
    #music-player-modal .music-player-controls button {
      width: 52px !important;
      height: 52px !important;
      background: rgba(255,255,255,.06) !important;
      border-color: rgba(255,255,255,.16) !important;
      transition: transform .18s ease, background .18s ease;
    }
    #music-player-modal .music-player-controls button:hover { transform: translateY(-2px); background: rgba(255,255,255,.11) !important; }
    #music-player-modal .music-player-controls .primary {
      width: 76px !important;
      height: 76px !important;
      background: var(--player-accent) !important;
      color: #18251d !important;
      box-shadow: 0 14px 30px rgba(0,0,0,.28) !important;
    }

    #music-player-modal .music-volume-control {
      width: min(340px, 100%) !important;
      margin: 20px auto 0 !important;
    }

    #music-player-modal .music-player-details {
      width: min(680px, 100%);
      margin: 24px auto 0;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,.10);
    }
    #music-player-modal .music-player-story {
      margin: 0 !important;
      color: #c8d2c6 !important;
      font-size: .86rem !important;
      line-height: 1.62 !important;
      white-space: pre-line;
    }
    #music-player-modal .music-player-story:empty { display: none !important; }
    #music-player-modal .music-related-actions { justify-content: flex-start; }

    #music-player-modal .music-player-secondary {
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 9px !important;
      margin: 0 !important;
      padding: 14px 18px calc(14px + env(safe-area-inset-bottom)) !important;
      border-top: 1px solid rgba(255,255,255,.09);
      background: rgba(10,18,13,.66);
    }
    #music-player-modal .music-player-secondary button {
      min-height: 42px !important;
      padding: 10px 14px !important;
      border-radius: 12px !important;
      background: rgba(255,255,255,.055) !important;
      font-size: .74rem !important;
    }
    #music-player-modal .music-player-secondary .music-player-expand { opacity: .84; }

    #music-player-modal .music-player-shell:fullscreen {
      width: 100vw !important;
      max-width: none !important;
      height: 100dvh !important;
      max-height: none !important;
      border-radius: 0 !important;
      border: 0 !important;
    }

    @media (max-width: 900px) {
      #music-player-modal .music-player-shell { width: min(760px, 100%) !important; }
      #music-player-modal .music-player-stage {
        grid-template-columns: minmax(210px, 280px) minmax(0, 1fr) !important;
        gap: 24px !important;
        padding: 24px !important;
      }
      #music-player-modal .music-player-art-wrap { width: min(100%, 270px) !important; }
      #music-player-modal .music-waveform { height: 54px !important; }
      #music-player-modal .music-player-controls .primary { width: 68px !important; height: 68px !important; }
    }

    @media (max-width: 700px) {
      #music-player-modal.music-player-modal {
        padding: 0 !important;
        align-items: stretch !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
      }
      #music-player-modal .music-player-shell {
        width: 100% !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow-y: auto !important;
        grid-template-rows: auto auto auto !important;
      }
      #music-player-modal .music-player-head {
        position: sticky;
        top: 0;
        z-index: 6;
        padding: max(14px, env(safe-area-inset-top)) 16px 13px !important;
        background: rgba(23,36,28,.96) !important;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
      }
      #music-player-modal .music-player-room-label { display: none; }
      #music-player-modal .music-player-head h2 { font-size: clamp(1.22rem, 6.2vw, 1.72rem) !important; }
      #music-player-modal .music-player-head p { font-size: .8rem; }
      #music-player-modal .music-player-close { width: 42px !important; height: 42px !important; }
      #music-player-modal .music-player-stage {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        padding: 20px 16px 24px !important;
        overflow: visible !important;
      }
      #music-player-modal .music-player-art-column { width: 100%; gap: 12px; }
      #music-player-modal .music-player-art-wrap {
        width: min(76vw, 300px) !important;
        max-height: none !important;
        aspect-ratio: 1 / 1 !important;
      }
      #music-player-modal .music-player-copy {
        width: 100%;
        overflow: visible !important;
      }
      #music-player-modal .music-player-now { display: none; }
      #music-player-modal .music-waveform { height: 48px !important; max-width: 100%; }
      #music-player-modal .music-progress-row { margin-bottom: 18px !important; }
      #music-player-modal .music-player-details { margin-top: 20px; }
      #music-player-modal .music-player-story {
        display: block !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
      }
      #music-player-modal .music-player-secondary {
        position: static;
        justify-content: flex-start !important;
        padding: 14px 16px calc(18px + env(safe-area-inset-bottom)) !important;
      }
    }

    @media (max-width: 430px) {
      #music-player-modal .music-player-head { grid-template-columns: minmax(0,1fr) 40px; gap: 10px; }
      #music-player-modal .music-player-kicker { font-size: .62rem !important; }
      #music-player-modal .music-player-art-wrap { width: min(72vw, 270px) !important; }
      #music-player-modal .music-player-controls button { width: 48px !important; height: 48px !important; }
      #music-player-modal .music-player-controls .primary { width: 68px !important; height: 68px !important; }
      #music-player-modal .music-player-secondary { gap: 8px !important; }
      #music-player-modal .music-player-secondary button { flex: 1 1 calc(50% - 8px); justify-content: center; }
      #music-player-modal .music-player-secondary button span { display: inline !important; }
    }

    @media (orientation: landscape) and (max-height: 620px) {
      #music-player-modal.music-player-modal { padding: 8px !important; }
      #music-player-modal .music-player-shell {
        width: min(980px, 100%) !important;
        max-height: calc(100dvh - 16px) !important;
        min-height: 0 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
      }
      #music-player-modal .music-player-head { padding: 10px 14px !important; }
      #music-player-modal .music-player-room-label { display: none; }
      #music-player-modal .music-player-head h2 { font-size: 1.25rem !important; }
      #music-player-modal .music-player-head p { margin-top: 2px !important; font-size: .74rem; }
      #music-player-modal .music-player-close { width: 38px !important; height: 38px !important; }
      #music-player-modal .music-player-stage {
        display: grid !important;
        grid-template-columns: minmax(170px, 220px) minmax(0,1fr) !important;
        gap: 20px !important;
        padding: 14px 20px !important;
        overflow: hidden !important;
      }
      #music-player-modal .music-player-art-wrap { width: min(100%, 210px) !important; }
      #music-player-modal .music-player-moods { display: none !important; }
      #music-player-modal .music-player-copy { overflow-y: auto !important; }
      #music-player-modal .music-player-now { display: none; }
      #music-player-modal .music-waveform { height: 36px !important; }
      #music-player-modal .music-progress-row { margin: 4px auto 10px !important; }
      #music-player-modal .music-player-controls button { width: 42px !important; height: 42px !important; }
      #music-player-modal .music-player-controls .primary { width: 56px !important; height: 56px !important; }
      #music-player-modal .music-volume-control { margin-top: 10px !important; }
      #music-player-modal .music-player-details { margin-top: 12px; padding-top: 10px; }
      #music-player-modal .music-player-story { font-size: .74rem !important; line-height: 1.45 !important; }
      #music-player-modal .music-player-secondary {
        justify-content: center !important;
        padding: 8px 12px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
      }
      #music-player-modal .music-player-secondary button { min-height: 36px !important; padding: 8px 10px !important; flex: 0 0 auto; }
    }

    @media (prefers-reduced-motion: reduce) {
      #music-player-modal .music-player-orbit,
      #music-player-modal .music-waveform span { animation: none !important; }
    }
  


    /* Homepage-inspired fireflies for the live Listening Room.
       CSS-only, reduced particle count, transform/opacity animations only. */
    #music-player-modal .music-player-shell {
      position: relative !important;
      overflow: hidden !important;
    }

    #music-player-modal .music-room-fireflies {
      position: absolute !important;
      inset: 0 !important;
      z-index: 0 !important;
      display: block !important;
      overflow: hidden !important;
      border-radius: inherit !important;
      pointer-events: none !important;
      contain: layout paint !important;
    }

    #music-player-modal .music-room-fireflies::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: .28;
      background:
        radial-gradient(circle at 13% 22%, rgba(246,211,116,.68) 0 1px, transparent 2px),
        radial-gradient(circle at 31% 74%, rgba(255,241,188,.56) 0 1px, transparent 2px),
        radial-gradient(circle at 61% 18%, rgba(246,211,116,.62) 0 1px, transparent 2px),
        radial-gradient(circle at 83% 66%, rgba(255,241,188,.52) 0 1px, transparent 2px),
        radial-gradient(circle at 92% 31%, rgba(246,211,116,.58) 0 1px, transparent 2px);
      animation: musicRoomStarBreath 6.8s ease-in-out infinite;
    }

    #music-player-modal .music-room-firefly {
      --size: 5px;
      --drift-x: 28px;
      --drift-y: -84px;
      --duration: 10s;
      --delay: 0s;
      position: absolute !important;
      left: var(--left, 50%) !important;
      top: var(--top, 75%) !important;
      width: var(--size) !important;
      height: var(--size) !important;
      border-radius: 999px !important;
      background: #f2c95f !important;
      opacity: .3;
      box-shadow:
        0 0 6px rgba(246,211,116,.95),
        0 0 16px rgba(246,211,116,.62),
        0 0 30px rgba(246,211,116,.24) !important;
      will-change: transform, opacity;
      animation: musicRoomFireflyDrift var(--duration) cubic-bezier(.37,.03,.28,1) var(--delay) infinite !important;
    }

    #music-player-modal .music-room-firefly::before {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: inherit;
      background: radial-gradient(circle, rgba(255,247,206,.82), transparent 66%);
      opacity: .52;
      animation: musicRoomFireflyPulse 2.7s ease-in-out infinite;
    }

    #music-player-modal .music-room-firefly:nth-child(3n) {
      width: calc(var(--size) + 2px) !important;
      height: calc(var(--size) + 2px) !important;
      border-radius: 1px !important;
      background: #fff0b0 !important;
      transform: rotate(45deg);
      box-shadow:
        0 0 7px rgba(255,245,200,.96),
        0 0 18px rgba(246,211,116,.58) !important;
    }

    #music-player-modal .music-player-head,
    #music-player-modal .music-player-stage,
    #music-player-modal .music-player-secondary {
      position: relative !important;
      z-index: 1 !important;
    }

    @keyframes musicRoomFireflyDrift {
      0% {
        opacity: .14;
        transform: translate3d(0, 12px, 0) scale(.72);
      }
      18% { opacity: .82; }
      48% {
        opacity: 1;
        transform: translate3d(calc(var(--drift-x) * .55), calc(var(--drift-y) * .52), 0) scale(1.12);
      }
      76% { opacity: .54; }
      100% {
        opacity: .08;
        transform: translate3d(var(--drift-x), var(--drift-y), 0) scale(.78);
      }
    }

    @keyframes musicRoomFireflyPulse {
      0%, 100% { opacity: .2; transform: scale(.76); }
      50% { opacity: .9; transform: scale(1.25); }
    }

    @keyframes musicRoomStarBreath {
      0%, 100% { opacity: .15; }
      50% { opacity: .42; }
    }

    @media (max-width: 700px) {
      #music-player-modal .music-room-firefly:nth-child(n+7) { display: none !important; }
      #music-player-modal .music-room-fireflies::before { opacity: .18; }
      #music-player-modal .music-room-firefly {
        --drift-x: 18px;
        --drift-y: -58px;
        box-shadow:
          0 0 5px rgba(246,211,116,.9),
          0 0 12px rgba(246,211,116,.5) !important;
      }
    }

    @media (orientation: landscape) and (max-height: 620px) {
      #music-player-modal .music-room-firefly:nth-child(n+5) { display: none !important; }
      #music-player-modal .music-room-fireflies::before { opacity: .12; }
    }

    @media (prefers-reduced-motion: reduce) {
      #music-player-modal .music-room-firefly,
      #music-player-modal .music-room-fireflies::before {
        animation: none !important;
      }
      #music-player-modal .music-room-firefly { opacity: .34 !important; }
    }
  


    /* Listening Room alignment and full-width waveform. */
    #music-player-modal .music-player-now {
      width: 100% !important;
      margin: 0 auto 10px !important;
      justify-content: center !important;
      text-align: center !important;
    }
    #music-player-modal .music-waveform {
      width: min(100%, 680px) !important;
      max-width: 680px !important;
      gap: 4px !important;
      margin-inline: auto !important;
    }
    #music-player-modal .music-waveform span {
      flex: 1 1 0 !important;
      min-width: 2px !important;
      max-width: 8px !important;
    }
    #music-player-modal .music-progress-row {
      width: min(100%, 680px) !important;
      max-width: 680px !important;
      margin-inline: auto !important;
    }
    #music-player-modal .music-player-secondary {
      width: 100% !important;
      justify-content: center !important;
      align-content: center !important;
      text-align: center !important;
    }
    #music-player-modal .music-player-secondary button {
      flex: 0 0 auto !important;
      justify-content: center !important;
    }

    /* More Listening Room lights, still CSS-only. */
    #music-player-modal .music-room-fireflies::before { opacity: .34 !important; }
    #music-player-modal .music-room-firefly { opacity: .38; }

    /* NarraSpace fireflies for the public Original Soundtracks section. */
    body:not(.admin-mode) #music.music-archive-section {
      position: relative !important;
      isolation: isolate !important;
      overflow: hidden !important;
    }
    body:not(.admin-mode) #music > :not(.music-archive-fireflies) {
      position: relative;
      z-index: 1;
    }
    body:not(.admin-mode) #music .music-archive-fireflies {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
      contain: layout paint;
    }
    body:not(.admin-mode) #music .music-archive-fireflies::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: .3;
      background:
        radial-gradient(circle at 8% 20%, rgba(246,211,116,.7) 0 1px, transparent 2px),
        radial-gradient(circle at 24% 74%, rgba(255,241,188,.55) 0 1px, transparent 2px),
        radial-gradient(circle at 46% 16%, rgba(246,211,116,.65) 0 1px, transparent 2px),
        radial-gradient(circle at 69% 80%, rgba(255,241,188,.5) 0 1px, transparent 2px),
        radial-gradient(circle at 87% 28%, rgba(246,211,116,.62) 0 1px, transparent 2px),
        radial-gradient(circle at 95% 67%, rgba(255,241,188,.55) 0 1px, transparent 2px);
      animation: musicArchiveStarBreath 6.4s ease-in-out infinite;
    }
    body:not(.admin-mode) #music .music-archive-fireflies > span {
      position: absolute;
      left: var(--left);
      top: var(--top);
      width: var(--size);
      height: var(--size);
      border-radius: 999px;
      background: #f2c95f;
      opacity: .18;
      box-shadow: 0 0 6px rgba(246,211,116,.95), 0 0 17px rgba(246,211,116,.58), 0 0 30px rgba(246,211,116,.2);
      will-change: transform, opacity;
      animation: musicArchiveFirefly var(--dur) cubic-bezier(.37,.03,.28,1) var(--delay) infinite;
    }
    body:not(.admin-mode) #music .music-archive-fireflies > span::before {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: inherit;
      background: radial-gradient(circle, rgba(255,247,206,.82), transparent 66%);
      opacity: .45;
    }
    body:not(.admin-mode) #music .music-archive-fireflies > span.glint {
      border-radius: 1px;
      background: #fff0b0;
      transform: rotate(45deg);
    }
    @keyframes musicArchiveFirefly {
      0% { opacity: .08; transform: translate3d(0, 12px, 0) scale(.7); }
      18% { opacity: .78; }
      52% { opacity: 1; transform: translate3d(calc(var(--dx) * .55), calc(var(--dy) * .55), 0) scale(1.12); }
      78% { opacity: .48; }
      100% { opacity: .06; transform: translate3d(var(--dx), var(--dy), 0) scale(.76); }
    }
    @keyframes musicArchiveStarBreath {
      0%,100% { opacity: .16; }
      50% { opacity: .42; }
    }

    @media (max-width: 700px) {
      #music-player-modal .music-waveform { gap: 3px !important; }
      #music-player-modal .music-waveform span { min-width: 1px !important; max-width: 6px !important; }
      #music-player-modal .music-player-secondary {
        justify-content: center !important;
        row-gap: 10px !important;
      }
      #music-player-modal .music-player-secondary button { flex: 0 0 auto !important; }
      #music-player-modal .music-room-firefly:nth-child(n+9) { display: none !important; }
      body:not(.admin-mode) #music .music-archive-fireflies > span:nth-child(n+10) { display: none; }
    }
    @media (max-width: 430px) {
      #music-player-modal .music-player-secondary {
        display: flex !important;
        justify-content: center !important;
      }
      #music-player-modal .music-player-secondary button {
        flex: 0 0 auto !important;
        min-width: 0 !important;
      }
    }
    @media (orientation: landscape) and (max-height: 620px) {
      #music-player-modal .music-room-firefly:nth-child(n+6) { display: none !important; }
      body:not(.admin-mode) #music .music-archive-fireflies > span:nth-child(n+8) { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      body:not(.admin-mode) #music .music-archive-fireflies > span,
      body:not(.admin-mode) #music .music-archive-fireflies::before {
        animation: none !important;
      }
      body:not(.admin-mode) #music .music-archive-fireflies > span { opacity: .28; }
    }
    body.admin-mode #music .music-archive-fireflies { display: none !important; }
  


    /* Make the public soundtrack fireflies visibly drift on desktop. */
    body:not(.admin-mode) #music .music-archive-fireflies,
    body:not(.admin-mode) #music .music-archive-fireflies > span,
    body:not(.admin-mode) #music .music-archive-fireflies::before {
      animation-play-state: running !important;
    }
    body:not(.admin-mode) #music .music-archive-fireflies > span {
      opacity: .42 !important;
      animation-name: nsMusicFireflyDriftV5 !important;
      animation-timing-function: cubic-bezier(.35,.02,.28,1) !important;
    }
    body:not(.admin-mode) #music .music-archive-fireflies::before {
      opacity: .38 !important;
      animation: nsMusicStarfieldMoveV5 9s ease-in-out infinite alternate !important;
    }
    @keyframes nsMusicFireflyDriftV5 {
      0% { opacity: .14; transform: translate3d(0, 20px, 0) scale(.66); }
      16% { opacity: .88; }
      36% { transform: translate3d(calc(var(--dx) * .35), calc(var(--dy) * .34), 0) scale(1.16); }
      58% { opacity: 1; transform: translate3d(calc(var(--dx) * .68), calc(var(--dy) * .66), 0) scale(.92); }
      78% { opacity: .62; }
      100% { opacity: .10; transform: translate3d(var(--dx), var(--dy), 0) scale(.62); }
    }
    @keyframes nsMusicStarfieldMoveV5 {
      0% { transform: translate3d(-5px, 5px, 0) scale(1); opacity: .24; }
      55% { opacity: .52; }
      100% { transform: translate3d(10px, -14px, 0) scale(1.025); opacity: .34; }
    }

    /* Fireflies inside Explore All Music. */
    .music-archive-dialog {
      position: relative !important;
      isolation: isolate !important;
    }
    .music-archive-dialog > :not(.music-archive-modal-fireflies) {
      position: relative;
      z-index: 2;
    }
    .music-archive-modal-fireflies {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
      border-radius: inherit;
      contain: layout paint;
    }
    .music-archive-modal-fireflies::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: .28;
      background:
        radial-gradient(circle at 8% 18%, rgba(247,213,113,.85) 0 1px, transparent 2px),
        radial-gradient(circle at 27% 72%, rgba(255,244,202,.66) 0 1px, transparent 2px),
        radial-gradient(circle at 48% 20%, rgba(247,213,113,.74) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 78%, rgba(255,244,202,.62) 0 1px, transparent 2px),
        radial-gradient(circle at 91% 32%, rgba(247,213,113,.76) 0 1px, transparent 2px);
      animation: nsMusicStarfieldMoveV5 10s ease-in-out infinite alternate;
    }
    .music-archive-modal-fireflies > span {
      position: absolute;
      left: var(--left);
      top: var(--top);
      width: var(--size);
      height: var(--size);
      border-radius: 999px;
      background: #f3cd67;
      opacity: .44;
      box-shadow: 0 0 7px rgba(246,211,116,.95), 0 0 18px rgba(246,211,116,.56), 0 0 32px rgba(246,211,116,.22);
      will-change: transform, opacity;
      animation: nsMusicFireflyDriftV5 var(--dur) cubic-bezier(.35,.02,.28,1) var(--delay) infinite;
      animation-play-state: running !important;
    }
    .music-archive-modal-fireflies > span::before {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: inherit;
      background: radial-gradient(circle, rgba(255,249,220,.88), transparent 66%);
    }
    .music-archive-modal-fireflies > span.glint {
      border-radius: 1px;
      transform: rotate(45deg);
      background: #fff2b7;
    }

    /* Portrait Explore All Music: use full-width compact rows. */
    @media (max-width: 767px) and (orientation: portrait) {
      .music-archive-modal {
        padding: 0 !important;
        align-items: stretch !important;
      }
      .music-archive-dialog {
        width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        grid-template-rows: auto auto minmax(0,1fr) auto !important;
        gap: 12px !important;
      }
      .music-archive-head {
        padding: 18px 18px 0 !important;
        gap: 10px !important;
      }
      .music-archive-head h2 {
        font-size: clamp(1.75rem, 8vw, 2.45rem) !important;
        line-height: 1.03 !important;
      }
      .music-archive-head p {
        font-size: .92rem !important;
        line-height: 1.48 !important;
      }
      .music-archive-close {
        width: 42px !important;
        height: 42px !important;
      }
      .music-archive-tools {
        display: grid !important;
        grid-template-columns: 1fr !important;
        padding: 0 18px !important;
        gap: 10px !important;
      }
      .music-archive-search {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;
      }
      .music-archive-count {
        text-align: center !important;
        font-size: .82rem !important;
      }
      .music-archive-grid {
        grid-template-columns: 1fr !important;
        align-content: start !important;
        gap: 12px !important;
        padding: 0 16px 16px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
      }
      .music-archive-grid .music-card {
        width: 100% !important;
        max-width: none !important;
        min-height: 132px !important;
        display: grid !important;
        grid-template-columns: clamp(112px, 34vw, 148px) minmax(0,1fr) !important;
        align-items: stretch !important;
        border-radius: 16px !important;
        overflow: hidden !important;
      }
      .music-archive-grid .music-card-art {
        width: 100% !important;
        height: 100% !important;
        min-height: 132px !important;
        aspect-ratio: auto !important;
        border-radius: 0 !important;
      }
      .music-archive-grid .music-card-art img {
        object-fit: cover !important;
      }
      .music-archive-grid .music-card-type {
        top: 10px !important;
        left: 10px !important;
        max-width: calc(100% - 20px) !important;
        padding: 6px 8px !important;
        font-size: .58rem !important;
      }
      .music-archive-grid .music-card-play {
        width: 40px !important;
        height: 40px !important;
        right: 10px !important;
        bottom: 10px !important;
      }
      .music-archive-grid .music-card-copy {
        min-width: 0 !important;
        padding: 13px 13px 12px !important;
        display: grid !important;
        align-content: center !important;
        gap: 5px !important;
      }
      .music-archive-grid .music-card-mood {
        margin: 0 !important;
        font-size: .62rem !important;
      }
      .music-archive-grid .music-card-title {
        min-height: 0 !important;
        margin: 0 !important;
        font-size: 1rem !important;
        line-height: 1.2 !important;
        -webkit-line-clamp: 2 !important;
      }
      .music-archive-grid .music-card-artist {
        font-size: .72rem !important;
        line-height: 1.3 !important;
        -webkit-line-clamp: 2 !important;
      }
      .music-archive-grid .music-label-row {
        margin: 3px 0 0 !important;
        gap: 4px !important;
      }
      .music-archive-grid .music-label-chip {
        min-height: 21px !important;
        padding: 4px 6px !important;
        font-size: .54rem !important;
      }
      .music-archive-grid .music-label-row .music-label-chip:nth-child(n+3) {
        display: none !important;
      }
      .music-archive-grid .music-card-wave {
        height: 19px !important;
        margin-top: 2px !important;
      }
      .music-archive-grid .music-card-meta {
        margin-top: 0 !important;
        font-size: .6rem !important;
      }
      .music-archive-footer {
        padding: 0 16px calc(14px + env(safe-area-inset-bottom)) !important;
      }
      .music-archive-modal-fireflies > span:nth-child(n+7) {
        display: none !important;
      }
    }

    @media (max-width: 390px) and (orientation: portrait) {
      .music-archive-grid .music-card {
        grid-template-columns: 106px minmax(0,1fr) !important;
        min-height: 124px !important;
      }
      .music-archive-grid .music-card-art { min-height: 124px !important; }
      .music-archive-grid .music-label-row { display: none !important; }
      .music-archive-grid .music-card-copy { padding: 11px !important; }
    }

    /* Keep a gentle drift even when desktop reports reduced motion, instead of freezing. */
    @media (prefers-reduced-motion: reduce) {
      body:not(.admin-mode) #music .music-archive-fireflies > span,
      .music-archive-modal-fireflies > span {
        animation: nsMusicFireflyDriftV5 calc(var(--dur, 12s) * 1.65) ease-in-out var(--delay, 0s) infinite !important;
      }
      body:not(.admin-mode) #music .music-archive-fireflies::before,
      .music-archive-modal-fireflies::before {
        animation: nsMusicStarfieldMoveV5 16s ease-in-out infinite alternate !important;
      }
    }
  


    /* Full-width soundtrack waves on the public shelf. */
    body:not(.admin-mode) #music .music-card-wave {
      width: 100% !important;
      display: grid !important;
      grid-template-columns: repeat(22, minmax(2px, 1fr)) !important;
      align-items: center !important;
      justify-content: stretch !important;
      gap: 3px !important;
      margin-inline: auto !important;
    }
    body:not(.admin-mode) #music .music-card-wave span {
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
    }

    /* Make desktop fireflies visibly travel instead of only blinking. */
    @keyframes nsMusicDesktopTravelV6 {
      0%   { opacity: .10; transform: translate3d(0, 24px, 0) scale(.65); }
      20%  { opacity: .92; transform: translate3d(18px, -8px, 0) scale(1.10); }
      48%  { opacity: 1; transform: translate3d(-14px, -48px, 0) scale(.92); }
      76%  { opacity: .64; transform: translate3d(22px, -78px, 0) scale(1.06); }
      100% { opacity: .08; transform: translate3d(var(--dx), var(--dy), 0) scale(.62); }
    }
    @keyframes nsMusicDesktopLightsV6 {
      0%   { transform: translate3d(-10px, 10px, 0) scale(1); opacity: .22; }
      50%  { transform: translate3d(8px, -8px, 0) scale(1.025); opacity: .52; }
      100% { transform: translate3d(18px, -20px, 0) scale(1.04); opacity: .30; }
    }
    @media (min-width: 768px) {
      body:not(.admin-mode) #music .music-archive-fireflies > span,
      .music-archive-modal-fireflies > span {
        animation-name: nsMusicDesktopTravelV6 !important;
        animation-duration: var(--dur, 8s) !important;
        animation-timing-function: cubic-bezier(.36,.03,.24,1) !important;
        animation-iteration-count: infinite !important;
        animation-play-state: running !important;
        opacity: .52 !important;
      }
      body:not(.admin-mode) #music .music-archive-fireflies::before,
      .music-archive-modal-fireflies::before {
        animation: nsMusicDesktopLightsV6 7.5s ease-in-out infinite alternate !important;
        opacity: .44 !important;
      }
    }

    /* Explore All Music: clean portrait rows with no artwork overlap. */
    @media (max-width: 767px) and (orientation: portrait) {
      .music-archive-grid .music-card {
        grid-template-columns: clamp(112px, 32vw, 142px) minmax(0, 1fr) !important;
        min-height: 148px !important;
      }
      .music-archive-grid .music-card-art {
        min-height: 148px !important;
        overflow: hidden !important;
      }
      .music-archive-grid .music-card-type {
        display: none !important;
      }
      .music-archive-grid .music-card-play {
        top: 10px !important;
        right: 10px !important;
        bottom: auto !important;
        width: 38px !important;
        height: 38px !important;
        box-shadow: 0 7px 18px rgba(0,0,0,.34) !important;
      }
      .music-archive-grid .music-card-play svg {
        width: 18px !important;
        height: 18px !important;
      }
      .music-archive-grid .music-card-copy {
        min-height: 148px !important;
        padding: 13px 14px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 5px !important;
        overflow: hidden !important;
      }
      .music-archive-grid .music-card-mood {
        margin: 0 !important;
        line-height: 1.1 !important;
      }
      .music-archive-grid .music-card-title {
        margin: 0 !important;
        min-height: 0 !important;
        line-height: 1.16 !important;
      }
      .music-archive-grid .music-card-artist {
        width: 100% !important;
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
      }
      .music-archive-grid .music-label-row {
        width: 100% !important;
        min-height: 27px !important;
        margin: 5px 0 0 !important;
        display: flex !important;
        align-items: center !important;
        overflow: visible !important;
      }
      .music-archive-grid .music-label-row .music-label-chip {
        min-height: 27px !important;
        max-width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 5px 8px !important;
        line-height: 1 !important;
        overflow: hidden !important;
      }
      .music-archive-grid .music-label-row .music-label-chip svg {
        width: 15px !important;
        height: 15px !important;
        min-width: 15px !important;
        flex: 0 0 15px !important;
        overflow: visible !important;
      }
      .music-archive-grid .music-label-row .music-label-chip:nth-child(n+2),
      .music-archive-grid .music-card-wave,
      .music-archive-grid .music-card-meta {
        display: none !important;
      }
      .music-archive-modal-fireflies > span:nth-child(n+7) {
        display: none !important;
      }
    }

    @media (max-width: 390px) and (orientation: portrait) {
      .music-archive-grid .music-card {
        grid-template-columns: 108px minmax(0, 1fr) !important;
        min-height: 138px !important;
      }
      .music-archive-grid .music-card-art,
      .music-archive-grid .music-card-copy { min-height: 138px !important; }
      .music-archive-grid .music-card-copy { padding: 11px 12px !important; }
      .music-archive-grid .music-card-title { font-size: .94rem !important; }
      .music-archive-grid .music-label-row { min-height: 25px !important; }
      .music-archive-grid .music-label-row .music-label-chip { min-height: 25px !important; padding: 4px 7px !important; }
    }

    /* Keep mobile smooth: extra desktop particles remain hidden here. */
    @media (max-width: 767px) {
      body:not(.admin-mode) #music .music-archive-fireflies > span:nth-child(n+10),
      .music-archive-modal-fireflies > span:nth-child(n+7) { display: none !important; }
    }
  


    /* Final, browser-compatible movement lock for all public music fireflies. */
    @keyframes nsMusicFloatV7 {
      0%   { opacity: .10; transform: translate3d(0, 18px, 0) scale(.72); }
      22%  { opacity: .88; transform: translate3d(10px, -8px, 0) scale(1.08); }
      52%  { opacity: 1; transform: translate3d(-8px, -44px, 0) scale(.94); }
      78%  { opacity: .62; transform: translate3d(14px, -72px, 0) scale(1.04); }
      100% { opacity: .08; transform: translate3d(var(--dx, 26px), var(--dy, -96px), 0) scale(.66); }
    }
    @keyframes nsMusicGlintFloatV7 {
      0%   { opacity: .12; transform: translate3d(0, 16px, 0) rotate(45deg) scale(.70); }
      24%  { opacity: .92; transform: translate3d(-8px, -10px, 0) rotate(70deg) scale(1.12); }
      56%  { opacity: 1; transform: translate3d(12px, -48px, 0) rotate(105deg) scale(.92); }
      80%  { opacity: .58; transform: translate3d(-10px, -76px, 0) rotate(135deg) scale(1.06); }
      100% { opacity: .08; transform: translate3d(var(--dx, -24px), var(--dy, -92px), 0) rotate(180deg) scale(.64); }
    }
    @keyframes nsMusicLightFieldV7 {
      0%   { transform: translate3d(-12px, 10px, 0) scale(1); opacity: .22; }
      50%  { transform: translate3d(10px, -10px, 0) scale(1.025); opacity: .48; }
      100% { transform: translate3d(20px, -22px, 0) scale(1.04); opacity: .30; }
    }

    body:not(.admin-mode) #music .music-archive-fireflies > span,
    .music-archive-modal-fireflies > span,
    #music-player-modal .music-room-firefly {
      animation-name: nsMusicFloatV7 !important;
      animation-duration: var(--dur, var(--duration, 9s)) !important;
      animation-delay: var(--delay, 0s) !important;
      animation-timing-function: linear !important;
      animation-iteration-count: infinite !important;
      animation-play-state: running !important;
      transform: translateZ(0);
      will-change: transform, opacity;
    }

    body:not(.admin-mode) #music .music-archive-fireflies > span.glint,
    .music-archive-modal-fireflies > span.glint,
    #music-player-modal .music-room-firefly:nth-child(3n) {
      animation-name: nsMusicGlintFloatV7 !important;
    }

    body:not(.admin-mode) #music .music-archive-fireflies::before,
    .music-archive-modal-fireflies::before,
    #music-player-modal .music-room-fireflies::before {
      animation: nsMusicLightFieldV7 8.5s ease-in-out infinite alternate !important;
      animation-play-state: running !important;
      will-change: transform, opacity;
    }

    @media (min-width: 768px) {
      body:not(.admin-mode) #music .music-archive-fireflies > span,
      .music-archive-modal-fireflies > span,
      #music-player-modal .music-room-firefly {
        opacity: .52 !important;
      }
    }

    /* Keep a slower drift instead of a frozen field on devices that report reduced motion. */
    @media (prefers-reduced-motion: reduce) {
      body:not(.admin-mode) #music .music-archive-fireflies > span,
      .music-archive-modal-fireflies > span,
      #music-player-modal .music-room-firefly {
        animation-duration: 18s !important;
      }
      body:not(.admin-mode) #music .music-archive-fireflies::before,
      .music-archive-modal-fireflies::before,
      #music-player-modal .music-room-fireflies::before {
        animation-duration: 22s !important;
      }
    }
  


    /* Keep soundtrack cards editorial and easy to scan: title, artist, two labels, waveform, duration. */
    body:not(.admin-mode) .music-card .music-card-type,
    body:not(.admin-mode) .music-card .music-card-mood {
      display: none !important;
    }

    body:not(.admin-mode) .music-card .music-card-copy {
      display: flex !important;
      flex-direction: column !important;
      min-width: 0 !important;
    }

    body:not(.admin-mode) .music-card .music-card-title {
      margin: 0 0 4px !important;
    }

    body:not(.admin-mode) .music-card .music-card-artist {
      margin: 0 !important;
    }

    body:not(.admin-mode) .music-card .music-label-row-compact {
      display: flex !important;
      align-items: center !important;
      flex-wrap: wrap !important;
      gap: 6px !important;
      margin: 10px 0 0 !important;
      min-height: 0 !important;
    }

    body:not(.admin-mode) .music-card .music-label-row-compact .music-label-chip {
      display: inline-flex !important;
      align-items: center !important;
      gap: 5px !important;
      width: auto !important;
      max-width: 100% !important;
      min-height: 24px !important;
      padding: 5px 8px !important;
      border: 1px solid rgba(235, 205, 108, .22) !important;
      border-radius: 999px !important;
      background: rgba(255, 255, 255, .055) !important;
      color: #dbe4d8 !important;
      font-size: .61rem !important;
      line-height: 1 !important;
      font-weight: 800 !important;
      text-transform: none !important;
    }

    body:not(.admin-mode) .music-card .music-label-row-compact .music-label-chip svg {
      width: 12px !important;
      height: 12px !important;
      flex: 0 0 auto !important;
      color: var(--music-accent) !important;
    }

    body:not(.admin-mode) .music-card .music-card-wave {
      height: 16px !important;
      gap: 2px !important;
      margin-top: 10px !important;
      opacity: .72 !important;
    }

    body:not(.admin-mode) .music-card .music-card-wave span {
      width: 2px !important;
      opacity: .58 !important;
    }

    body:not(.admin-mode) .music-card .music-card-meta-compact {
      justify-content: flex-start !important;
      margin-top: 8px !important;
      color: #aebaa9 !important;
    }

    @media (max-width: 640px) {
      body:not(.admin-mode) .music-card .music-label-row-compact {
        gap: 5px !important;
        margin-top: 8px !important;
      }
      body:not(.admin-mode) .music-card .music-label-row-compact .music-label-chip {
        min-height: 22px !important;
        padding: 4px 7px !important;
        font-size: .58rem !important;
      }
    }
  


    /* Partners + contact + footer: one intentional closing sequence */
    body:not(.admin-mode) #links.closing-partners {
      width: 100%;
      max-width: none;
      margin: 0;
      padding: clamp(54px, 6vw, 92px) clamp(18px, 5vw, 80px) clamp(58px, 6vw, 96px);
      background:
        radial-gradient(circle at 12% 18%, rgba(244, 205, 103, .12), transparent 26%),
        linear-gradient(180deg, #fffaf0 0%, #f8f3e7 100%);
      color: #173522;
      overflow: hidden;
    }

    body:not(.admin-mode) #links .closing-section-head,
    body:not(.admin-mode) #contact .contact-section-head {
      width: min(840px, 100%);
      margin: 0 auto clamp(28px, 3vw, 44px);
      text-align: center;
      display: grid;
      justify-items: center;
      gap: 10px;
    }

    body:not(.admin-mode) .closing-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 36px;
      padding: 7px 13px;
      border-radius: 999px;
      border: 1px solid rgba(35, 74, 48, .16);
      background: rgba(255, 255, 255, .66);
      color: #36573a;
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .075em;
      text-transform: uppercase;
      box-shadow: 0 8px 20px rgba(40, 59, 36, .05);
    }
    body:not(.admin-mode) .closing-eyebrow svg { width: 17px; height: 17px; }

    body:not(.admin-mode) #links .section-title,
    body:not(.admin-mode) #contact .section-title {
      margin: 0 !important;
      font-size: clamp(2rem, 4vw, 4rem) !important;
      line-height: 1.02;
      letter-spacing: -.045em;
      color: inherit;
    }
    body:not(.admin-mode) #links .section-subtitle,
    body:not(.admin-mode) #contact .section-subtitle {
      max-width: 760px;
      margin: 0 !important;
      color: #66715f;
      font-size: clamp(.98rem, 1.2vw, 1.1rem);
      line-height: 1.6;
      font-weight: 650;
    }

    body:not(.admin-mode) #links .portal-grid {
      width: min(1440px, 100%);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(14px, 1.5vw, 22px);
      align-items: stretch;
    }
    body:not(.admin-mode) #links .portal-card {
      position: relative;
      isolation: isolate;
      min-width: 0;
      min-height: 250px;
      padding: clamp(20px, 2vw, 28px);
      border: 1px solid rgba(244, 205, 103, .14);
      border-radius: 22px;
      background:
        linear-gradient(155deg, rgba(33, 67, 44, .98), rgba(11, 36, 22, .99));
      color: #fffaf0;
      display: grid;
      grid-template-columns: 62px minmax(0, 1fr);
      align-content: start;
      align-items: start;
      gap: 16px;
      text-decoration: none;
      overflow: hidden;
      box-shadow: 0 18px 42px rgba(23, 53, 34, .12);
      transform: translateZ(0);
      transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
    }
    body:not(.admin-mode) #links .portal-card::after {
      content: '';
      position: absolute;
      inset: auto -30% -48% 30%;
      height: 70%;
      z-index: -1;
      background: radial-gradient(circle, rgba(244, 205, 103, .16), transparent 68%);
      pointer-events: none;
    }
    body:not(.admin-mode) #links .portal-card-topline {
      position: absolute;
      top: 0;
      left: 22px;
      right: 22px;
      height: 3px;
      border-radius: 0 0 999px 999px;
      background: linear-gradient(90deg, transparent, #f4cd67, transparent);
      opacity: .75;
    }
    body:not(.admin-mode) #links .portal-icon {
      width: 62px;
      height: 62px;
      min-width: 62px;
      border-radius: 17px;
      border: 1px solid rgba(255, 255, 255, .18);
      background: rgba(255, 255, 255, .09);
      display: grid;
      place-items: center;
      overflow: hidden;
      color: #fffaf0;
      font-size: .72rem;
      font-weight: 950;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }
    body:not(.admin-mode) #links .portal-icon img {
      width: 100%;
      height: 100%;
      padding: 7px;
      object-fit: contain;
      border-radius: inherit;
    }
    body:not(.admin-mode) #links .portal-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      height: 100%;
    }
    body:not(.admin-mode) #links .portal-category {
      display: inline-flex;
      color: #f4cd67;
      font-size: .69rem;
      line-height: 1.2;
      font-weight: 950;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 7px;
    }
    body:not(.admin-mode) #links .portal-title {
      color: #fffdf4 !important;
      font-size: clamp(1rem, 1.2vw, 1.18rem);
      line-height: 1.2;
      font-weight: 900;
      margin-bottom: 9px;
    }
    body:not(.admin-mode) #links .portal-desc {
      color: rgba(255, 253, 244, .76) !important;
      font-size: .9rem;
      line-height: 1.52;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      overflow: hidden;
    }
    body:not(.admin-mode) #links .portal-action {
      margin-top: auto;
      padding-top: 18px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #f8df97;
      font-size: .82rem;
      font-weight: 900;
    }
    body:not(.admin-mode) #links .portal-action svg {
      width: 16px;
      height: 16px;
      transition: transform .22s ease;
    }
    body:not(.admin-mode) #links .portal-empty {
      grid-column: 1 / -1;
      padding: 36px;
      border: 1px dashed rgba(54, 87, 58, .24);
      border-radius: 20px;
      text-align: center;
      color: #66715f;
      font-weight: 800;
    }
    @media (hover:hover) and (pointer:fine) {
      body:not(.admin-mode) #links .portal-card:hover {
        transform: translateY(-7px);
        border-color: rgba(244, 205, 103, .38);
        box-shadow: 0 24px 52px rgba(23, 53, 34, .20);
      }
      body:not(.admin-mode) #links .portal-card:hover .portal-action svg { transform: translate(3px, -3px); }
      body:not(.admin-mode) #links .portal-card:hover .portal-icon { box-shadow: 0 0 0 5px rgba(244,205,103,.08); }
    }

    body:not(.admin-mode) #contact.closing-contact {
      position: relative;
      width: 100%;
      max-width: none;
      margin: 0;
      padding: clamp(58px, 6vw, 100px) clamp(18px, 5vw, 80px) clamp(58px, 6vw, 96px);
      background:
        radial-gradient(circle at 85% 20%, rgba(244,205,103,.11), transparent 25%),
        radial-gradient(circle at 12% 92%, rgba(255,255,255,.05), transparent 27%),
        linear-gradient(145deg, #173522 0%, #0b2617 72%);
      color: #fffaf0;
      overflow: hidden;
    }
    body:not(.admin-mode) #contact .contact-eyebrow {
      color: #f4cd67;
      background: rgba(255,255,255,.07);
      border-color: rgba(255,255,255,.14);
      box-shadow: none;
    }
    body:not(.admin-mode) #contact .section-subtitle { color: rgba(255,253,244,.72); }

    body:not(.admin-mode) #contact .contact-paths {
      width: min(1180px, 100%);
      margin: 0 auto clamp(26px, 3vw, 38px);
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }
    body:not(.admin-mode) #contact .contact-path {
      min-width: 0;
      min-height: 142px;
      padding: 20px;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 20px;
      background: rgba(255,255,255,.065);
      color: #fffaf0;
      text-align: left;
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) 20px;
      align-items: start;
      gap: 13px;
      cursor: pointer;
      transition: transform .22s ease, background .22s ease, border-color .22s ease;
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }
    body:not(.admin-mode) #contact .contact-path-icon {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: rgba(244,205,103,.14);
      color: #f4cd67;
    }
    body:not(.admin-mode) #contact .contact-path-icon svg { width: 21px; height: 21px; }
    body:not(.admin-mode) #contact .contact-path > span:nth-child(2) { min-width: 0; display: grid; gap: 7px; }
    body:not(.admin-mode) #contact .contact-path strong { font-size: 1rem; line-height: 1.25; }
    body:not(.admin-mode) #contact .contact-path small { color: rgba(255,253,244,.68); font-size: .84rem; line-height: 1.45; font-weight: 650; }
    body:not(.admin-mode) #contact .contact-path-arrow { width: 18px; height: 18px; color: rgba(244,205,103,.8); }
    @media (hover:hover) and (pointer:fine) {
      body:not(.admin-mode) #contact .contact-path:hover {
        transform: translateY(-4px);
        background: rgba(255,255,255,.1);
        border-color: rgba(244,205,103,.34);
      }
    }

    body:not(.admin-mode) #contact .contact-toggle-row { margin: 0 auto; }
    body:not(.admin-mode) #contact .contact-toggle-btn {
      min-height: 52px;
      padding: 12px 22px;
      background: #f4cd67;
      color: #173522;
      border: 1px solid rgba(255,255,255,.24);
      border-radius: 999px;
      font-size: .96rem;
      box-shadow: 0 14px 30px rgba(0,0,0,.18);
    }
    body:not(.admin-mode) #contact .contact-intake {
      width: min(1260px, 100%);
      margin: 34px auto 0;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 26px;
      overflow: hidden;
      box-shadow: 0 24px 60px rgba(0,0,0,.2);
    }
    body:not(.admin-mode) #contact .contact-intro { background: rgba(255,255,255,.055); }

    body:not(.admin-mode) .closing-footer.footer {
      width: 100%;
      max-width: none;
      margin: 0;
      padding: clamp(40px, 5vw, 66px) clamp(20px, 5vw, 80px) 28px;
      background: #07180f !important;
      color: #fffaf0 !important;
      text-align: left;
      border-top: 1px solid rgba(244,205,103,.18);
    }
    body:not(.admin-mode) .closing-footer .footer-main {
      width: min(1440px, 100%);
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 40px;
    }
    body:not(.admin-mode) .closing-footer .footer-brand-block { max-width: 450px; }
    body:not(.admin-mode) .closing-footer .footer-brandline {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      font-size: 1.2rem;
      font-weight: 900;
    }
    body:not(.admin-mode) .closing-footer .footer-brand-mark {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      background: #f4cd67;
      color: #173522;
      font-size: .76rem;
      font-weight: 950;
    }
    body:not(.admin-mode) .closing-footer .footer-brand-promise {
      margin: 18px 0 6px;
      font-size: clamp(1.2rem, 2vw, 1.65rem);
      font-weight: 800;
      letter-spacing: -.025em;
    }
    body:not(.admin-mode) .closing-footer .footer-region {
      margin: 0;
      color: rgba(255,253,244,.6);
      font-size: .9rem;
    }
    body:not(.admin-mode) .closing-footer .footer-nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 10px 22px;
      max-width: 560px;
    }
    body:not(.admin-mode) .closing-footer .footer-nav a {
      color: rgba(255,253,244,.8);
      text-decoration: none;
      font-size: .88rem;
      font-weight: 800;
    }
    body:not(.admin-mode) .closing-footer .footer-nav a:hover { color: #f4cd67; }
    body:not(.admin-mode) .closing-footer .footer-closing-line {
      width: min(1440px, 100%);
      margin: 34px auto 0;
      padding-top: 22px;
      border-top: 1px solid rgba(255,255,255,.1);
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 24px;
    }
    body:not(.admin-mode) .closing-footer .footer-text,
    body:not(.admin-mode) .closing-footer .footer-bottom {
      margin: 0;
      color: rgba(255,253,244,.58);
      font-size: .82rem;
      line-height: 1.5;
    }
    body:not(.admin-mode) .closing-footer .footer-bottom { margin-top: 3px; }
    body:not(.admin-mode) .closing-footer .footer-beta-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px 16px;
    }
    body:not(.admin-mode) .closing-footer .footer-beta-links button {
      color: rgba(255,253,244,.62);
      background: none;
      border: 0;
      padding: 0;
      font-size: .78rem;
      font-weight: 750;
    }
    body:not(.admin-mode) .closing-footer .footer-beta-links button:hover { color: #f4cd67; }

    @media (max-width: 1120px) {
      body:not(.admin-mode) #links .portal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      body:not(.admin-mode) #links .portal-card { min-height: 220px; }
    }
    @media (max-width: 820px) {
      body:not(.admin-mode) #contact .contact-paths { grid-template-columns: 1fr; max-width: 680px; }
      body:not(.admin-mode) #contact .contact-path { min-height: 0; }
      body:not(.admin-mode) .closing-footer .footer-main,
      body:not(.admin-mode) .closing-footer .footer-closing-line { flex-direction: column; align-items: flex-start; }
      body:not(.admin-mode) .closing-footer .footer-nav,
      body:not(.admin-mode) .closing-footer .footer-beta-links { justify-content: flex-start; }
    }
    @media (max-width: 620px) {
      body:not(.admin-mode) #links.closing-partners,
      body:not(.admin-mode) #contact.closing-contact { padding-inline: 16px; }
      body:not(.admin-mode) #links .portal-grid {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        padding: 4px 2px 16px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
      }
      body:not(.admin-mode) #links .portal-card {
        flex: 0 0 min(84vw, 320px);
        min-height: 230px;
        scroll-snap-align: center;
        grid-template-columns: 54px minmax(0,1fr);
        padding: 18px;
        border-radius: 19px;
      }
      body:not(.admin-mode) #links .portal-icon { width: 54px; height: 54px; min-width: 54px; border-radius: 15px; }
      body:not(.admin-mode) #contact .contact-path { grid-template-columns: 42px minmax(0,1fr) 18px; padding: 17px; border-radius: 18px; }
      body:not(.admin-mode) .closing-footer.footer { padding-inline: 18px; }
      body:not(.admin-mode) .closing-footer .footer-nav { display: grid; grid-template-columns: repeat(3, auto); gap: 12px 22px; }
    }
  


    /* Equal icon-only partner actions. */
    body:not(.admin-mode) #links .portal-card {
      padding-bottom: 76px !important;
    }
    body:not(.admin-mode) #links .portal-action {
      position: absolute !important;
      right: 20px !important;
      bottom: 18px !important;
      width: 42px !important;
      height: 42px !important;
      min-width: 42px !important;
      min-height: 42px !important;
      margin: 0 !important;
      padding: 0 !important;
      display: grid !important;
      place-items: center !important;
      border: 1px solid rgba(244, 205, 103, .28) !important;
      border-radius: 999px !important;
      background: rgba(255, 255, 255, .075) !important;
      color: #f8df97 !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
      transition: transform .22s ease, background .22s ease, border-color .22s ease !important;
    }
    body:not(.admin-mode) #links .portal-action svg {
      width: 18px !important;
      height: 18px !important;
      margin: 0 !important;
    }
    @media (hover:hover) and (pointer:fine) {
      body:not(.admin-mode) #links .portal-card:hover .portal-action {
        transform: translateY(-2px) !important;
        background: rgba(244, 205, 103, .16) !important;
        border-color: rgba(244, 205, 103, .5) !important;
      }
      body:not(.admin-mode) #links .portal-card:hover .portal-action svg {
        transform: translate(2px, -2px) !important;
      }
    }

    /* Guaranteed contact-option icon rendering. */
    body:not(.admin-mode) #contact .contact-path-icon svg {
      display: block !important;
      width: 22px !important;
      height: 22px !important;
      stroke: currentColor !important;
      overflow: visible !important;
    }

    /* Lightweight NarraSpace fireflies for the closing contact panel. */
    body:not(.admin-mode) #contact.closing-contact > :not(.contact-fireflies) {
      position: relative;
      z-index: 2;
    }
    body:not(.admin-mode) #contact .contact-fireflies {
      position: absolute;
      inset: 0;
      z-index: 1;
      overflow: hidden;
      pointer-events: none;
      contain: layout paint;
    }
    body:not(.admin-mode) #contact .contact-fireflies::before {
      content: '';
      position: absolute;
      inset: -18%;
      background:
        radial-gradient(circle at 18% 76%, rgba(244,205,103,.12) 0 2px, transparent 3px),
        radial-gradient(circle at 76% 24%, rgba(255,247,194,.1) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 58% 68%, rgba(244,205,103,.08) 0 1px, transparent 2px);
      background-size: 180px 180px, 240px 240px, 130px 130px;
      opacity: .34;
      animation: contactAmbientDrift 28s linear infinite;
      will-change: transform;
    }
    body:not(.admin-mode) #contact .contact-fireflies > span {
      position: absolute;
      left: var(--left);
      top: var(--top);
      width: var(--size);
      height: var(--size);
      border-radius: 50%;
      background: #f7d86e;
      box-shadow:
        0 0 7px rgba(247,216,110,.95),
        0 0 18px rgba(247,216,110,.52),
        0 0 32px rgba(247,216,110,.22);
      opacity: 0;
      animation: contactFireflyDrift var(--dur) ease-in-out var(--delay) infinite;
      will-change: transform, opacity;
    }
    body:not(.admin-mode) #contact .contact-fireflies > span::before {
      content: '';
      position: absolute;
      inset: -3px;
      border-radius: inherit;
      background: rgba(255,250,210,.22);
      filter: blur(4px);
    }
    body:not(.admin-mode) #contact .contact-fireflies > span.glint {
      border-radius: 2px;
      background: #fff4ba;
      box-shadow: 0 0 10px rgba(255,244,186,.92), 0 0 22px rgba(244,205,103,.46);
    }
    @keyframes contactFireflyDrift {
      0% { opacity: 0; transform: translate3d(0, 18px, 0) scale(.65) rotate(0deg); }
      14% { opacity: .78; }
      48% { opacity: .48; transform: translate3d(calc(var(--dx) * .45), calc(var(--dy) * .48), 0) scale(1) rotate(55deg); }
      78% { opacity: .82; }
      100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) scale(.7) rotate(110deg); }
    }
    @keyframes contactAmbientDrift {
      from { transform: translate3d(-2%, 2%, 0); }
      to { transform: translate3d(6%, -6%, 0); }
    }
    @media (max-width: 820px) {
      body:not(.admin-mode) #contact .contact-fireflies > span:nth-child(n+9) { display: none; }
    }
    @media (max-width: 620px) {
      body:not(.admin-mode) #links .portal-card { padding-bottom: 68px !important; }
      body:not(.admin-mode) #links .portal-action { right: 16px !important; bottom: 15px !important; width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; }
      body:not(.admin-mode) #contact .contact-fireflies > span:nth-child(n+7) { display: none; }
      body:not(.admin-mode) #contact .contact-fireflies::before { opacity: .24; }
    }
    @media (prefers-reduced-motion: reduce) {
      body:not(.admin-mode) #contact .contact-fireflies > span {
        animation-duration: calc(var(--dur) * 2.2) !important;
      }
      body:not(.admin-mode) #contact .contact-fireflies::before {
        animation-duration: 52s !important;
      }
    }
    body.admin-mode #contact .contact-fireflies { display: none !important; }
  


    /* Closing-sequence content polish: stronger hierarchy, quieter beta note. */
    body:not(.admin-mode) #links .section-title {
      font-size: clamp(2rem, 3.35vw, 3.45rem) !important;
      line-height: 1.04 !important;
    }
    body:not(.admin-mode) #links .portal-desc {
      -webkit-line-clamp: 3 !important;
      line-clamp: 3 !important;
    }

    body:not(.admin-mode) #beta-notice-section.beta-notice-wrap {
      padding: 24px 18px 26px !important;
      background: #f8f3e7 !important;
    }
    body:not(.admin-mode) #beta-notice-section .beta-notice {
      max-width: 980px !important;
      padding: 12px 14px !important;
      gap: 14px !important;
      border-color: rgba(54, 87, 58, .14) !important;
      border-radius: 14px !important;
      background: rgba(255, 253, 247, .72) !important;
      box-shadow: 0 8px 22px rgba(35, 53, 34, .045) !important;
    }
    body:not(.admin-mode) #beta-notice-section .beta-notice-icon {
      width: 32px !important;
      height: 32px !important;
      flex-basis: 32px !important;
      border-radius: 9px !important;
      background: rgba(54, 87, 58, .92) !important;
    }
    body:not(.admin-mode) #beta-notice-section .beta-notice-copy strong {
      font-size: .88rem !important;
    }
    body:not(.admin-mode) #beta-notice-section .beta-notice-copy p {
      font-size: .76rem !important;
      line-height: 1.42 !important;
    }
    body:not(.admin-mode) #beta-notice-section .beta-link-btn,
    body:not(.admin-mode) #beta-notice-section .beta-dismiss-btn {
      min-height: 36px !important;
      padding: 7px 10px !important;
      border-radius: 9px !important;
      font-size: .75rem !important;
      background: rgba(255,255,255,.74) !important;
    }

    @media (max-width: 720px) {
      body:not(.admin-mode) #links .section-title {
        font-size: clamp(1.95rem, 9vw, 2.75rem) !important;
      }
      body:not(.admin-mode) #beta-notice-section .beta-notice {
        align-items: flex-start !important;
      }
      body:not(.admin-mode) #beta-notice-section .beta-notice-actions {
        width: 100% !important;
        justify-content: flex-start !important;
      }
    }
  


    /* Keep the horizontally scrollable desktop/tablet nav from clipping Home. */
    body:not(.admin-mode) #nav-links {
      scroll-padding-inline: 8px;
      overscroll-behavior-inline: contain;
    }

    /* Use one centered underline geometry for every navigation item. */
    body:not(.admin-mode) #nav-links .nav-link::after {
      left: 50% !important;
      right: auto !important;
      bottom: 1px !important;
      width: calc(100% - 20px) !important;
      height: 3px !important;
      transform: translateX(-50%) scaleX(0) !important;
      transform-origin: center !important;
    }

    body:not(.admin-mode) #nav-links .nav-link:hover::after,
    body:not(.admin-mode) #nav-links .nav-link.active::after {
      transform: translateX(-50%) scaleX(1) !important;
    }

    @media (max-width: 1120px) and (min-width: 701px) {
      body:not(.admin-mode) #nav-links .nav-link::after {
        width: calc(100% - 16px) !important;
      }
    }
  


    /* Mobile beta notice: keep copy and controls in separate, readable rows. */
    @media (max-width: 620px) {
      body:not(.admin-mode) #beta-notice-section.beta-notice-wrap {
        padding: 18px 14px 20px !important;
      }
      body:not(.admin-mode) #beta-notice-section .beta-notice {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 14px !important;
        border-radius: 16px !important;
      }
      body:not(.admin-mode) #beta-notice-section .beta-notice-copy {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 11px !important;
      }
      body:not(.admin-mode) #beta-notice-section .beta-notice-copy > div {
        min-width: 0 !important;
      }
      body:not(.admin-mode) #beta-notice-section .beta-notice-copy strong,
      body:not(.admin-mode) #beta-notice-section .beta-notice-copy p {
        width: 100% !important;
        max-width: none !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        text-align: left !important;
      }
      body:not(.admin-mode) #beta-notice-section .beta-notice-copy strong {
        font-size: .9rem !important;
        line-height: 1.25 !important;
      }
      body:not(.admin-mode) #beta-notice-section .beta-notice-copy p {
        margin: 4px 0 0 !important;
        font-size: .76rem !important;
        line-height: 1.45 !important;
      }
      body:not(.admin-mode) #beta-notice-section .beta-notice-actions {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
      }
      body:not(.admin-mode) #beta-notice-section .beta-link-btn,
      body:not(.admin-mode) #beta-notice-section .beta-dismiss-btn {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        flex: 0 0 40px !important;
      }
      body:not(.admin-mode) #beta-notice-section .beta-link-btn span { display: none !important; }
    }

    /* Partner logos: preserve aspect ratio, improve centering, and compensate for transparent padding. */
    body:not(.admin-mode) #links .portal-icon {
      place-items: center !important;
      overflow: hidden !important;
    }
    body:not(.admin-mode) #links .portal-icon img {
      width: 84% !important;
      height: 84% !important;
      max-width: 84% !important;
      max-height: 84% !important;
      padding: 0 !important;
      object-fit: contain !important;
      object-position: center !important;
      border-radius: 10px !important;
      image-rendering: auto !important;
      transform: translateZ(0) scale(1.08);
      transform-origin: center;
    }
    body:not(.admin-mode) #links .portal-icon img[alt*="JCI Bacolod"] {
      transform: translateZ(0) scale(1.38) !important;
    }
    body:not(.admin-mode) #links .portal-icon img[alt*="Istorya Film Creatives"] {
      transform: translateZ(0) scale(1.12) !important;
    }
    body:not(.admin-mode) #links .portal-icon img[alt*="NarraSpace Official"] {
      transform: translateZ(0) scale(.96) !important;
    }
    body:not(.admin-mode) #links .portal-icon img[alt*="Istorya ni Juan"] {
      transform: translateZ(0) scale(1.08) !important;
    }

    /* Footer fireflies: subtle, lightweight, and behind all footer content. */
    body:not(.admin-mode) .closing-footer.footer {
      position: relative !important;
      overflow: hidden !important;
      isolation: isolate !important;
    }
    body:not(.admin-mode) .closing-footer > :not(.footer-fireflies) {
      position: relative;
      z-index: 2;
    }
    body:not(.admin-mode) .closing-footer .footer-fireflies {
      position: absolute;
      inset: 0;
      z-index: 1;
      overflow: hidden;
      pointer-events: none;
      contain: layout paint;
    }
    body:not(.admin-mode) .closing-footer .footer-fireflies::before {
      content: '';
      position: absolute;
      inset: -20%;
      background:
        radial-gradient(circle at 14% 74%, rgba(244,205,103,.11) 0 1.5px, transparent 2.6px),
        radial-gradient(circle at 73% 28%, rgba(255,247,194,.08) 0 1.2px, transparent 2.2px),
        radial-gradient(circle at 48% 62%, rgba(244,205,103,.07) 0 1px, transparent 2px);
      background-size: 190px 190px, 260px 260px, 145px 145px;
      opacity: .3;
      animation: footerAmbientDrift 34s linear infinite;
      will-change: transform;
    }
    body:not(.admin-mode) .closing-footer .footer-fireflies > span {
      position: absolute;
      left: var(--left);
      top: var(--top);
      width: var(--size);
      height: var(--size);
      border-radius: 50%;
      background: #f7d86e;
      box-shadow: 0 0 7px rgba(247,216,110,.88), 0 0 16px rgba(247,216,110,.42);
      opacity: 0;
      animation: footerFireflyDrift var(--dur) ease-in-out var(--delay) infinite;
      will-change: transform, opacity;
    }
    body:not(.admin-mode) .closing-footer .footer-fireflies > span.glint {
      border-radius: 2px;
      background: #fff4ba;
      box-shadow: 0 0 9px rgba(255,244,186,.88), 0 0 19px rgba(244,205,103,.38);
    }
    @keyframes footerFireflyDrift {
      0% { opacity: 0; transform: translate3d(0, 16px, 0) scale(.68) rotate(0deg); }
      16% { opacity: .72; }
      52% { opacity: .46; transform: translate3d(calc(var(--dx) * .52), calc(var(--dy) * .5), 0) scale(1) rotate(55deg); }
      78% { opacity: .76; }
      100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) scale(.72) rotate(112deg); }
    }
    @keyframes footerAmbientDrift {
      from { transform: translate3d(-2%, 3%, 0); }
      to { transform: translate3d(7%, -5%, 0); }
    }
    @media (max-width: 820px) {
      body:not(.admin-mode) .closing-footer .footer-fireflies > span:nth-child(n+7) { display: none; }
    }
    @media (max-width: 620px) {
      body:not(.admin-mode) .closing-footer .footer-fireflies > span:nth-child(n+5) { display: none; }
      body:not(.admin-mode) .closing-footer .footer-fireflies::before { opacity: .2; }
    }
    @media (prefers-reduced-motion: reduce) {
      body:not(.admin-mode) .closing-footer .footer-fireflies > span { animation-duration: calc(var(--dur) * 2.1) !important; }
      body:not(.admin-mode) .closing-footer .footer-fireflies::before { animation-duration: 60s !important; }
    }
    body.admin-mode .closing-footer .footer-fireflies { display: none !important; }
  


    /* NarraSpace Community Review panel */
    #review-modal {
      padding: clamp(10px, 2vw, 24px);
      align-items: center;
      justify-content: center;
    }
    #review-modal .review-modal {
      width: min(920px, 96vw);
      max-height: min(92dvh, 920px);
      padding: 0;
      overflow: hidden;
      border: 1px solid rgba(54, 87, 58, .22);
      border-top: 0;
      border-radius: 26px;
      background: #fffaf0;
      color: #193824;
      box-shadow: 0 30px 90px rgba(5, 22, 13, .34);
    }
    #review-modal .review-modal-head {
      position: relative;
      z-index: 4;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      gap: 18px;
      margin: 0;
      padding: 24px 28px 20px;
      background:
        radial-gradient(circle at 85% 12%, rgba(231, 191, 77, .16), transparent 34%),
        linear-gradient(135deg, #fffdf7 0%, #f8f1dc 100%);
      border-bottom: 1px solid rgba(54, 87, 58, .14);
    }
    #review-modal .review-modal-head .section-pill {
      margin-bottom: 10px;
      background: rgba(255,255,255,.72);
      border-color: rgba(54, 87, 58, .16);
      color: #36573a;
    }
    #review-modal #review-modal-title {
      margin: 0;
      color: #173d27;
      font-size: clamp(1.65rem, 3vw, 2.35rem);
      line-height: 1.05;
      letter-spacing: -.035em;
    }
    #review-modal #review-resource-title {
      margin: 8px 0 0;
      color: #5e6d5b !important;
      font-size: .95rem;
      font-weight: 800 !important;
    }
    #review-modal .review-modal-subtitle {
      max-width: 620px;
      margin: 7px 0 0;
      color: #72806c;
      font-size: .9rem;
      line-height: 1.55;
      font-weight: 650;
    }
    #review-modal .close-btn {
      flex: 0 0 auto;
      width: 46px;
      height: 46px;
      border: 1px solid rgba(54, 87, 58, .18);
      background: rgba(255,255,255,.76);
      color: #244b31;
      box-shadow: 0 10px 26px rgba(25, 56, 36, .1);
    }
    #review-modal .review-modal-scroll {
      max-height: calc(min(92dvh, 920px) - 130px);
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
      padding: 24px 28px 30px;
      background:
        linear-gradient(rgba(255,250,240,.96), rgba(255,250,240,.96)),
        radial-gradient(circle at 15% 20%, rgba(54,87,58,.08), transparent 26%);
    }
    #review-modal .review-summary {
      min-height: 82px;
      margin: 0 0 18px;
      padding: 18px 20px;
      border-radius: 18px;
      border: 1px solid rgba(54, 87, 58, .16);
      background: #edf4e9;
      color: #25472f;
      box-shadow: none;
    }
    #review-modal .review-empty-state {
      width: 100%;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
    }
    #review-modal .review-empty-icon {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: #173d27;
      color: #f1cd62;
    }
    #review-modal .review-empty-copy strong {
      display: block;
      color: #173d27;
      font-size: 1rem;
      margin-bottom: 3px;
    }
    #review-modal .review-empty-copy span {
      color: #66745f;
      font-size: .84rem;
      line-height: 1.45;
      font-weight: 650;
    }
    #review-modal .review-empty-action {
      white-space: nowrap;
      border: 1px solid rgba(54,87,58,.2);
      background: #fffaf0;
      color: #244b31;
      border-radius: 999px;
      padding: 9px 13px;
      font-size: .78rem;
      font-weight: 850;
      cursor: pointer;
    }
    #review-modal .review-average {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    #review-modal .review-average-score {
      font-size: 2rem;
      line-height: 1;
      font-weight: 950;
      color: #173d27;
    }
    #review-modal .review-stars { color: #c28f12; }
    #review-modal .review-list {
      display: grid;
      gap: 12px;
      margin: 0 0 22px;
    }
    #review-modal .review-card {
      padding: 17px 18px;
      border: 1px solid rgba(236, 208, 119, .2);
      border-radius: 18px;
      background: linear-gradient(145deg, #163a25, #0f2d1c);
      color: #fffaf0;
      box-shadow: 0 14px 30px rgba(11, 42, 25, .12);
    }
    #review-modal .review-card-head {
      align-items: flex-start;
    }
    #review-modal .review-card .reviewer-name {
      color: #fffaf0;
      font-weight: 900;
    }
    #review-modal .review-card .reviewer-meta {
      margin-top: 3px;
      color: rgba(255,250,240,.66);
      font-size: .76rem;
      font-weight: 700;
    }
    #review-modal .review-card p {
      color: rgba(255,250,240,.9);
      line-height: 1.65;
      margin: 12px 0 0;
    }
    #review-modal .review-card-reactions {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 13px;
    }
    #review-modal .review-card-reactions span {
      padding: 5px 9px;
      border-radius: 999px;
      border: 1px solid rgba(241,205,98,.28);
      background: rgba(241,205,98,.1);
      color: #f4d878;
      font-size: .7rem;
      font-weight: 850;
    }
    #review-modal .review-form {
      margin-top: 4px;
      padding: 22px;
      border: 1px solid rgba(54,87,58,.16);
      border-top: 1px solid rgba(54,87,58,.16);
      border-radius: 22px;
      background: rgba(255,255,255,.72);
      box-shadow: 0 18px 40px rgba(54,87,58,.07);
    }
    #review-modal .review-form-heading {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 18px;
    }
    #review-modal .review-form-heading h3 {
      margin: 0;
      color: #173d27;
      font-size: 1.25rem;
    }
    #review-modal #review-intro {
      max-width: 620px;
      margin: 5px 0 0 !important;
      color: #697665 !important;
      font-size: .86rem;
      line-height: 1.55;
    }
    #review-modal .review-required-note {
      flex: 0 0 auto;
      color: #7a6a35;
      font-size: .72rem;
      font-weight: 800;
      white-space: nowrap;
    }
    #review-modal .review-field-label,
    #review-modal .form-group > label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: #274a31;
      font-size: .83rem;
      font-weight: 900;
      margin-bottom: 8px;
    }
    #review-modal .review-rating-label {
      color: #9a7314;
      font-size: .76rem;
      font-weight: 850;
    }
    #review-modal .rating-picker {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    #review-modal .rating-picker button {
      width: 46px;
      height: 46px;
      border: 1px solid rgba(54,87,58,.18);
      border-radius: 14px;
      background: #fffdf8;
      color: #b88b1b;
      transition: transform .18s ease, background .18s ease, border-color .18s ease;
    }
    #review-modal .rating-picker button:hover,
    #review-modal .rating-picker button:focus-visible {
      transform: translateY(-2px);
      border-color: #c59a28;
    }
    #review-modal .rating-picker button.active {
      background: #f8e4a4;
      border-color: #bf901c;
      color: #8c6507;
    }
    #review-modal .rating-picker button.active svg { fill: currentColor; }
    #review-modal .review-reaction-picker {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    #review-modal .review-reaction-btn {
      border: 1px solid rgba(54,87,58,.18);
      border-radius: 999px;
      background: #fffdf8;
      color: #3f5f45;
      padding: 8px 12px;
      font-size: .76rem;
      font-weight: 850;
      cursor: pointer;
      transition: transform .16s ease, background .16s ease, color .16s ease;
    }
    #review-modal .review-reaction-btn:hover { transform: translateY(-1px); }
    #review-modal .review-reaction-btn.selected {
      background: #173d27;
      border-color: #173d27;
      color: #f2d36b;
    }
    #review-modal .review-reaction-help {
      margin-top: 7px;
      color: #7a8575;
      font-size: .72rem;
      font-weight: 700;
    }
    #review-modal .review-form input,
    #review-modal .review-form select,
    #review-modal .review-form textarea {
      width: 100%;
      border: 1px solid rgba(54,87,58,.18);
      border-radius: 14px;
      background: #ffffff;
      color: #263c2b;
      box-shadow: none;
    }
    #review-modal .review-form textarea {
      min-height: 128px;
      resize: vertical;
      line-height: 1.55;
    }
    #review-modal .review-form input:focus,
    #review-modal .review-form select:focus,
    #review-modal .review-form textarea:focus {
      border-color: #7a9b70;
      box-shadow: 0 0 0 3px rgba(78,120,78,.12);
      outline: none;
    }
    #review-modal .review-optional-details {
      margin: 4px 0 18px;
      border: 1px solid rgba(54,87,58,.14);
      border-radius: 16px;
      background: #f6f8f1;
      overflow: hidden;
    }
    #review-modal .review-optional-details summary {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 13px 15px;
      color: #36573a;
      font-size: .8rem;
      font-weight: 900;
      cursor: pointer;
      list-style: none;
    }
    #review-modal .review-optional-details summary::-webkit-details-marker { display: none; }
    #review-modal .review-optional-details[open] summary {
      border-bottom: 1px solid rgba(54,87,58,.12);
    }
    #review-modal .review-optional-inner {
      padding: 15px;
    }
    #review-modal .review-form-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 14px;
    }
    #review-modal .review-submit-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 16px;
    }
    #review-modal .review-submit-note {
      color: #6f7c6b;
      font-size: .75rem;
      line-height: 1.45;
      font-weight: 700;
    }
    #review-modal #review-submit-btn {
      width: auto !important;
      min-width: 170px;
      justify-content: center;
      border-radius: 999px;
      box-shadow: 0 10px 24px rgba(26,66,40,.14);
    }
    @media (max-width: 720px) {
      #review-modal { padding: 0; }
      #review-modal .review-modal {
        width: 100vw;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
      }
      #review-modal .review-modal-head {
        position: sticky;
        top: 0;
        padding: 18px 16px 15px;
      }
      #review-modal .review-modal-scroll {
        max-height: calc(100dvh - 116px);
        padding: 16px 14px calc(24px + env(safe-area-inset-bottom));
      }
      #review-modal .review-modal-subtitle { display: none; }
      #review-modal .review-empty-state {
        grid-template-columns: auto minmax(0, 1fr);
      }
      #review-modal .review-empty-action {
        grid-column: 1 / -1;
        justify-self: stretch;
        text-align: center;
      }
      #review-modal .review-form {
        padding: 17px 15px;
        border-radius: 18px;
      }
      #review-modal .review-form-heading {
        display: block;
      }
      #review-modal .review-required-note {
        display: block;
        margin-top: 7px;
      }
      #review-modal .rating-picker {
        justify-content: space-between;
      }
      #review-modal .rating-picker button {
        flex: 1 1 0;
        max-width: 54px;
      }
      #review-modal .review-form-grid {
        grid-template-columns: 1fr;
      }
      #review-modal .review-submit-row {
        grid-template-columns: 1fr;
      }
      #review-modal #review-submit-btn {
        width: 100% !important;
      }
      #review-modal .review-submit-note {
        text-align: center;
        order: 2;
      }
    }
    @media (max-width: 380px) {
      #review-modal .rating-picker { gap: 5px; }
      #review-modal .rating-picker button { height: 43px; }
      #review-modal .review-reaction-btn { padding: 7px 10px; font-size: .71rem; }
    }
  


    .story-subtype-panel,
    .story-text-panel {
      margin: 0 0 18px;
      padding: 16px;
      border: 1px solid rgba(58, 88, 59, 0.16);
      border-radius: 18px;
      background: linear-gradient(145deg, rgba(247, 244, 229, 0.96), rgba(239, 235, 213, 0.78));
      box-shadow: 0 10px 26px rgba(31, 52, 34, 0.06);
    }
    .story-subtype-panel[hidden],
    .story-text-panel[hidden] { display: none !important; }
    .story-text-entry {
      min-height: 260px;
      line-height: 1.75;
      resize: vertical;
      font-family: var(--body-font, inherit);
    }
    .story-metric-grid input[readonly] {
      background: rgba(255, 253, 244, 0.78);
      color: #405343;
      cursor: default;
    }
    .story-text-reader {
      display: none;
      width: 100%;
      min-height: 100%;
      padding: clamp(24px, 4vw, 58px);
      overflow: auto;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      background:
        radial-gradient(circle at 14% 8%, rgba(201, 166, 76, 0.13), transparent 32%),
        linear-gradient(180deg, #fffdf5, #f4efdc);
      color: #263829;
      font-family: var(--body-font, Georgia, serif);
      font-size: clamp(1rem, 1.25vw, 1.18rem);
      line-height: 1.9;
      text-align: left;
      outline: none;
    }
    .story-text-reader.show { display: block; }
    #story-modal .document-modal[data-preview-kind="text"] .document-viewer {
      background: #f4efdc;
    }
    #story-modal .document-modal[data-preview-kind="text"] .preview-zoom-content {
      align-items: stretch;
      justify-content: stretch;
    }
    #story-modal .document-modal[data-preview-kind="text"] #modal-image-zoom-controls { display: none !important; }
    body:not(.admin-mode) .storybook-card.story-subtype-poem .story-cover-placeholder {
      background:
        radial-gradient(circle at 24% 18%, rgba(240, 209, 126, .28), transparent 30%),
        linear-gradient(145deg, #304735, #132016 74%);
    }
    body:not(.admin-mode) .storybook-card.story-subtype-poem::after {
      content: "";
      position: absolute;
      inset: 8px;
      border: 1px solid rgba(245, 216, 138, .36);
      border-radius: inherit;
      pointer-events: none;
      z-index: 1;
    }
    body:not(.admin-mode) .storybook-card.story-subtype-word-story .story-cover-placeholder {
      background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 24px),
        linear-gradient(145deg, #263c2c, #0f1912 78%);
    }
    body:not(.admin-mode) .storybook-card.story-subtype-short-story .story-cover-placeholder {
      background:
        linear-gradient(90deg, rgba(236, 201, 105, .18), transparent 18%, transparent 82%, rgba(236, 201, 105, .14)),
        linear-gradient(145deg, #2d4432, #111c14 76%);
    }
    @media (max-width: 640px) {
      .story-subtype-panel,
      .story-text-panel { padding: 13px; border-radius: 15px; }
      .story-text-entry { min-height: 220px; }
      .story-text-reader { padding: 24px 20px 42px; font-size: 1rem; line-height: 1.78; }
    }
  


    .film-provider-panel {
      margin: 0 0 16px;
      padding: 16px;
      border: 1px solid rgba(54, 87, 58, .16);
      border-radius: 16px;
      background: rgba(246, 242, 218, .66);
    }
    .film-provider-panel[hidden] { display: none !important; }
    .film-provider-check-group .btn-secondary { width: 100%; min-height: 46px; justify-content: center; }
    #form-film-provider-status.is-valid { border-color: rgba(54, 110, 65, .28); background: rgba(228, 244, 224, .82); color: #315b37; }
    #form-film-provider-status.is-warning { border-color: rgba(160, 113, 28, .28); background: rgba(255, 241, 200, .86); color: #77581d; }
    #form-film-provider-status.is-error { border-color: rgba(148, 52, 42, .28); background: rgba(255, 226, 220, .88); color: #863c32; }

    #story-modal .document-modal[data-resource-type="film"] #modal-focus-preview-btn,
    #story-modal .document-modal[data-resource-type="film"] .preview-fullscreen-float,
    #story-modal .document-modal[data-resource-type="film"] .preview-image-zoom-controls {
      display: none !important;
    }
    #story-modal .document-modal[data-resource-type="film"][data-preview-kind="iframe"] .document-viewer {
      display: grid !important;
      place-items: center !important;
      padding: clamp(6px, 1.2vw, 14px) !important;
      overflow: hidden !important;
      background: #050a07 !important;
    }
    #story-modal .document-modal[data-resource-type="film"][data-preview-kind="iframe"] .preview-zoom-content {
      position: relative !important;
      inset: auto !important;
      width: 100% !important;
      height: auto !important;
      max-width: 100% !important;
      max-height: 100% !important;
      aspect-ratio: 16 / 9 !important;
      display: block !important;
      overflow: hidden !important;
      border-radius: 16px !important;
      background: #000 !important;
      transform: none !important;
    }
    #story-modal .document-modal[data-resource-type="film"][data-preview-kind="iframe"] #modal-preview-frame {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      min-width: 0 !important;
      min-height: 0 !important;
      max-width: 100% !important;
      max-height: 100% !important;
      margin: 0 !important;
      border: 0 !important;
      border-radius: inherit !important;
      background: #000 !important;
      box-shadow: none !important;
      transform: none !important;
    }

    @media (max-width: 820px) {
      #story-modal .document-modal[data-resource-type="film"] .document-shell {
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        background: #050a07 !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-viewer {
        order: 1;
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 9 !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-info {
        order: 2;
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
      }
      #story-modal .document-modal[data-resource-type="film"].details-hidden .document-info { display: none !important; }
      #story-modal .document-modal[data-resource-type="film"][data-preview-kind="iframe"] .preview-zoom-content { border-radius: 10px !important; }
    }
  


    #story-modal .document-modal[data-resource-type="film"][data-preview-kind="film-launch"] .document-viewer,
    #story-modal .document-modal[data-resource-type="film"][data-preview-kind="iframe"] .document-viewer {
      display: grid !important;
      place-items: center !important;
      padding: clamp(6px, 1.2vw, 14px) !important;
      overflow: hidden !important;
      background: #050a07 !important;
    }
    #story-modal .document-modal[data-resource-type="film"][data-preview-kind="film-launch"] .preview-zoom-content,
    #story-modal .document-modal[data-resource-type="film"][data-preview-kind="iframe"] .preview-zoom-content {
      position: relative !important;
      inset: auto !important;
      width: 100% !important;
      height: auto !important;
      max-width: 100% !important;
      max-height: 100% !important;
      aspect-ratio: 16 / 9 !important;
      display: block !important;
      overflow: hidden !important;
      border-radius: 16px !important;
      background: #000 !important;
      transform: none !important;
    }
    .film-launch-stage {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      isolation: isolate;
      overflow: hidden;
      border-radius: inherit;
      background: #0a120d;
    }
    .film-launch-stage[hidden] { display: none !important; }
    .film-launch-art {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(180deg, rgba(5, 10, 7, .18), rgba(5, 10, 7, .92)),
        var(--film-launch-poster, linear-gradient(145deg, #29402f, #0b130e));
      background-size: cover;
      background-position: center;
      transform: scale(1.025);
      filter: saturate(.9) contrast(1.03);
    }
    .film-launch-art::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 36%, rgba(244, 205, 105, .18), transparent 36%),
        linear-gradient(90deg, rgba(7, 15, 10, .42), transparent 35%, transparent 65%, rgba(7, 15, 10, .42));
    }
    .film-launch-copy {
      position: relative;
      z-index: 2;
      width: min(92%, 560px);
      padding: clamp(20px, 4vw, 38px);
      text-align: center;
      color: #fff8df;
      border: 1px solid rgba(245, 215, 137, .26);
      border-radius: 22px;
      background: rgba(9, 20, 13, .78);
      box-shadow: 0 22px 54px rgba(0, 0, 0, .32);
      backdrop-filter: blur(10px);
    }
    .film-launch-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      color: #e9ca72;
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .film-launch-copy h3 {
      margin: 0;
      color: #fff9e6;
      font-size: clamp(1.35rem, 3vw, 2.25rem);
      line-height: 1.08;
    }
    .film-launch-copy p {
      max-width: 42rem;
      margin: 12px auto 18px;
      color: rgba(255, 250, 230, .82);
      font-size: clamp(.88rem, 1.5vw, 1rem);
      line-height: 1.55;
    }
    #modal-watch-film-button {
      min-width: min(100%, 220px);
      justify-content: center;
      box-shadow: 0 12px 28px rgba(0, 0, 0, .26);
    }
    #modal-watch-film-button[disabled] { opacity: .68; cursor: wait; }

    .provider-link-shield {
      position: absolute;
      top: clamp(8px, 1.3vw, 14px);
      right: clamp(8px, 1.3vw, 14px);
      z-index: 90;
      display: none;
      align-items: center;
      justify-content: center;
      gap: 7px;
      width: clamp(84px, 10vw, 112px);
      height: clamp(36px, 4.4vw, 46px);
      padding: 5px 9px;
      border: 1px solid rgba(255, 246, 213, .48);
      border-radius: 12px;
      background: rgba(8, 20, 13, .97);
      color: #fff8df;
      box-shadow: 0 10px 24px rgba(0, 0, 0, .34);
      pointer-events: auto;
      user-select: none;
      cursor: default;
      overflow: hidden;
    }
    .document-modal[data-source-shield-active="true"] .provider-link-shield { display: flex; }
    .provider-link-shield span {
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: #8b8f12 center / cover no-repeat;
      color: #fffbe6;
      font-size: .58rem;
      font-weight: 950;
      line-height: 1;
    }
    .provider-link-shield.has-logo span {
      color: transparent;
      text-indent: -999px;
    }
    .provider-link-shield small {
      min-width: 0;
      color: #fff8df;
      font-size: clamp(.58rem, .8vw, .7rem);
      font-weight: 900;
      line-height: 1.05;
      letter-spacing: .015em;
      text-align: left;
    }
    .document-modal[data-preview-provider="google-drive-document"] .provider-link-shield,
    .document-modal[data-preview-provider="google-docs"] .provider-link-shield {
      top: clamp(8px, 1.1vw, 12px);
      right: clamp(8px, 1.1vw, 12px);
    }

    @media (max-width: 820px) {
      #story-modal .document-modal[data-resource-type="film"][data-preview-kind="film-launch"] .preview-zoom-content,
      #story-modal .document-modal[data-resource-type="film"][data-preview-kind="iframe"] .preview-zoom-content {
        border-radius: 10px !important;
      }
      .film-launch-copy {
        width: min(94%, 520px);
        padding: clamp(16px, 4vw, 24px);
        border-radius: 16px;
      }
      .film-launch-copy p { margin-block: 9px 14px; }
      .provider-link-shield {
        width: 80px;
        height: 36px;
        gap: 5px;
        padding: 4px 7px;
        border-radius: 10px;
      }
      .provider-link-shield span { width: 25px; height: 25px; border-radius: 7px; }
      .provider-link-shield small { font-size: .57rem; }
    }
    @media (max-height: 520px) and (orientation: landscape) {
      .film-launch-copy { width: min(86%, 520px); padding: 14px 22px; }
      .film-launch-copy p { display: none; }
      .film-launch-copy h3 { font-size: clamp(1.12rem, 3vw, 1.7rem); }
      .provider-link-shield { top: 7px; right: 7px; }
    }
  


    /* Phase 3.6: portrait phones use one natural-size Google Drive iframe.
       The former transform/scale workaround clipped Drive's native control
       drawer. A slightly taller 4:3 stage gives the provider enough vertical
       room while keeping the film embedded inside NarraSpace. */
    @media (max-width: 600px) and (orientation: portrait) {
      #story-modal .document-modal[data-resource-type="film"][data-preview-provider="google-drive"] .document-viewer {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 3 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #000 !important;
      }

      #story-modal .document-modal[data-resource-type="film"][data-preview-provider="google-drive"] .preview-zoom-content {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 4 / 3 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        background: #000 !important;
        contain: layout paint !important;
      }

      #story-modal .document-modal[data-resource-type="film"][data-preview-provider="google-drive"] #modal-preview-frame {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
        transform-origin: center !important;
        background: #000 !important;
      }

      #story-modal .document-modal[data-resource-type="film"][data-preview-provider="google-drive"] .provider-link-shield {
        top: 8px !important;
        right: 8px !important;
        width: 76px !important;
        height: 32px !important;
        padding: 3px 5px !important;
        gap: 4px !important;
        border-radius: 9px !important;
      }
      #story-modal .document-modal[data-resource-type="film"][data-preview-provider="google-drive"] .provider-link-shield span {
        width: 23px !important;
        height: 23px !important;
      }
      #story-modal .document-modal[data-resource-type="film"][data-preview-provider="google-drive"] .provider-link-shield small {
        font-size: .52rem !important;
      }
    }

    /* Tablets and landscape phones keep the existing responsive 16:9 layout. */
    @media (max-width: 820px) and (orientation: landscape),
           (min-width: 601px) and (max-width: 820px) {
      #story-modal .document-modal[data-resource-type="film"][data-preview-provider="google-drive"] #modal-preview-frame {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        transform: none !important;
      }
    }
  


    /* Phase 3.10: stable cross-device cinema.
       The provider iframe is never rotated, enlarged, or transformed. Apple
       devices use a clean full-viewport NarraSpace layer when native element
       fullscreen is unavailable. Android keeps native fullscreen/landscape as
       a best-effort enhancement and falls back to the same cinema layer. */
    html.film-stable-cinema-active,
    body.film-stable-cinema-active {
      width: 100% !important;
      height: 100% !important;
      overflow: hidden !important;
      overscroll-behavior: none !important;
      background: #020804 !important;
    }

    body.film-stable-cinema-active #story-modal {
      display: block !important;
      position: fixed !important;
      inset: 0 auto auto 0 !important;
      width: var(--film-cinema-vw, 100vw) !important;
      height: var(--film-cinema-vh, 100dvh) !important;
      max-width: none !important;
      max-height: none !important;
      padding: 0 !important;
      margin: 0 !important;
      z-index: 2147483000 !important;
      overflow: hidden !important;
      background: #020804 !important;
      backdrop-filter: none !important;
      transform: none !important;
      box-sizing: border-box !important;
    }

    body.film-stable-cinema-active #story-modal .document-modal,
    body.film-stable-cinema-active #story-modal .document-shell {
      display: block !important;
      position: fixed !important;
      inset: 0 auto auto 0 !important;
      width: var(--film-cinema-vw, 100vw) !important;
      height: var(--film-cinema-vh, 100dvh) !important;
      max-width: none !important;
      max-height: none !important;
      min-width: 0 !important;
      min-height: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      overflow: hidden !important;
      background: #020804 !important;
      box-shadow: none !important;
      transform: none !important;
      box-sizing: border-box !important;
    }

    body.film-stable-cinema-active #story-modal .document-topbar,
    body.film-stable-cinema-active #story-modal .document-toolbar,
    body.film-stable-cinema-active #story-modal .document-info,
    body.film-stable-cinema-active #story-modal .preview-tools,
    body.film-stable-cinema-active #story-modal .preview-toolbar,
    body.film-stable-cinema-active #story-modal .preview-image-zoom-controls,
    body.film-stable-cinema-active #story-modal #modal-film-launch,
    body.film-stable-cinema-active #story-modal .preview-fullscreen-float,
    #story-modal .document-modal[data-resource-type="film"] .provider-link-shield {
      display: none !important;
    }

    body.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"] .document-viewer {
      display: block !important;
      position: fixed !important;
      z-index: 2147483001 !important;
      left: 50% !important;
      top: calc(
        var(--film-cinema-header, 62px) +
        (var(--film-cinema-vh, 100dvh) - var(--film-cinema-header, 62px)) / 2
      ) !important;
      width: var(--film-cinema-stage-w, 100vw) !important;
      height: var(--film-cinema-stage-h, 56.25vw) !important;
      aspect-ratio: auto !important;
      min-width: 0 !important;
      min-height: 0 !important;
      max-width: none !important;
      max-height: calc(var(--film-cinema-vh, 100dvh) - var(--film-cinema-header, 62px)) !important;
      padding: 0 !important;
      margin: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      overflow: hidden !important;
      background: #020804 !important;
      box-shadow: none !important;
      transform: translate(-50%, -50%) !important;
      transform-origin: center center !important;
      box-sizing: border-box !important;
    }

    body.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"] .preview-zoom-content,
    body.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"] #modal-preview-frame {
      display: block !important;
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      min-width: 0 !important;
      min-height: 0 !important;
      max-width: none !important;
      max-height: none !important;
      padding: 0 !important;
      margin: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      transform: none !important;
      transform-origin: center center !important;
      background: #020804 !important;
    }

    .film-stable-cinema-chrome {
      display: none;
    }

    body.film-stable-cinema-active .film-stable-cinema-chrome {
      display: flex !important;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: var(--film-cinema-vw, 100vw) !important;
      min-height: var(--film-cinema-header, 62px) !important;
      padding:
        max(8px, env(safe-area-inset-top))
        max(10px, env(safe-area-inset-right))
        8px
        max(12px, env(safe-area-inset-left)) !important;
      z-index: 2147483645 !important;
      color: #fffdf2 !important;
      background: linear-gradient(180deg, rgba(3, 18, 10, .98), rgba(3, 18, 10, .88)) !important;
      border-bottom: 1px solid rgba(205, 176, 64, .45) !important;
      box-shadow: 0 10px 28px rgba(0,0,0,.28) !important;
      box-sizing: border-box !important;
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
    }

    .film-stable-cinema-brand {
      display: flex;
      align-items: center;
      min-width: 0;
      gap: 10px;
    }

    .film-stable-cinema-logo {
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border-radius: 10px;
      border: 1px solid rgba(205, 176, 64, .55);
      background-color: #0a2416;
      background-size: cover;
      background-position: center;
      color: #f4dc72;
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .03em;
      overflow: hidden;
    }

    .film-stable-cinema-copy {
      min-width: 0;
      display: grid;
      gap: 1px;
    }

    .film-stable-cinema-copy strong {
      font-size: .94rem;
      line-height: 1.15;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .film-stable-cinema-copy small {
      color: rgba(255,253,242,.72);
      font-size: .72rem;
      line-height: 1.25;
    }

    .film-stable-cinema-exit {
      flex: 0 0 auto;
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 40px;
      padding: 0 13px;
      border: 1px solid rgba(255,255,255,.28) !important;
      border-radius: 999px !important;
      background: rgba(255,255,255,.10) !important;
      color: #fffdf2 !important;
      font: inherit;
      font-size: .82rem;
      font-weight: 800;
      cursor: pointer;
      touch-action: manipulation;
    }

    .film-stable-cinema-exit svg {
      width: 20px !important;
      height: 20px !important;
      pointer-events: none;
    }

    @media (max-width: 520px) {
      .film-stable-cinema-copy small {
        max-width: 48vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .film-stable-cinema-exit span {
        display: none;
      }
      .film-stable-cinema-exit {
        width: 40px;
        padding: 0;
      }
    }
  


    /* Phase 3.11: stop the player, not the conversation. */
    #story-modal .film-after-view {
      position: relative;
      z-index: 2;
      width: min(680px, calc(100% - 32px));
      margin: auto;
      padding: clamp(22px, 4vw, 38px);
      border: 1px solid rgba(229, 190, 86, .35);
      border-radius: 28px;
      background: linear-gradient(145deg, rgba(23, 45, 30, .96), rgba(8, 20, 13, .98));
      color: #fffaf0;
      box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
      text-align: center;
    }
    #story-modal .film-after-view[hidden] { display: none !important; }
    #story-modal .film-after-view-icon {
      width: 58px;
      height: 58px;
      margin: 0 auto 14px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      background: #f2d56d;
      color: #17321f;
    }
    #story-modal .film-after-view-icon svg { width: 27px; height: 27px; }
    #story-modal .film-after-view-copy h3 {
      margin: 8px 0 10px;
      font-family: var(--heading-font);
      font-size: clamp(1.55rem, 4vw, 2.35rem);
      color: #fff7d6;
    }
    #story-modal .film-after-view-copy p {
      max-width: 520px;
      margin: 0 auto;
      color: rgba(255, 250, 240, .76);
      line-height: 1.65;
    }
    #story-modal .film-after-view-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-top: 22px;
    }
    #story-modal .film-after-view-actions button { min-height: 46px; }
    #review-modal.post-film-reflection .review-modal {
      border-top-color: #d6ad38;
      box-shadow: 0 28px 90px rgba(8, 26, 15, .38);
    }
    #review-modal.post-film-reflection .review-modal-head {
      background: linear-gradient(135deg, #21432b, #102b1a);
      color: #fffaf0;
    }
    #review-modal.post-film-reflection .review-modal-head h2,
    #review-modal.post-film-reflection #review-resource-title,
    #review-modal.post-film-reflection .review-modal-subtitle { color: inherit; }
    @media (max-width: 600px) {
      #story-modal .film-after-view {
        width: calc(100% - 20px);
        padding: 20px 16px;
        border-radius: 22px;
      }
      #story-modal .film-after-view-actions { display: grid; grid-template-columns: 1fr; }
      #story-modal .film-after-view-actions button { width: 100%; justify-content: center; }
    }
  


  /* Phase 3.17 — restrained profile preview, clean partner cards, and a readable Po-opo landscape desk. */

  /* Remove the decorative gold streak that reads like a stray line beside partner actions. */
  @media (max-width: 950px) {
    body:not(.admin-mode) #links .portal-card-topline,
    body:not(.admin-mode) #links .portal-card::after {
      display: none !important;
      content: none !important;
    }
    body:not(.admin-mode) #links .portal-action {
      border-color: rgba(255, 253, 244, .24) !important;
      background: rgba(255, 253, 244, .09) !important;
      color: #fff2bd !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.09) !important;
    }
  }

  /* Creator / collaborator preview: smaller and balanced on short landscape phones. */
  @media (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
    .creator-profile-overlay {
      padding:
        max(8px, env(safe-area-inset-top))
        max(12px, env(safe-area-inset-right))
        max(8px, env(safe-area-inset-bottom))
        max(12px, env(safe-area-inset-left)) !important;
    }
    .creator-profile-shell {
      width: min(850px, 94vw) !important;
      max-height: calc(100dvh - max(16px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
      border-radius: 20px !important;
      overscroll-behavior: contain;
    }
    .creator-profile-hero {
      min-height: 188px !important;
      padding: 18px 22px !important;
      background-position: center 42% !important;
    }
    .creator-profile-hero::before {
      background: linear-gradient(90deg, rgba(7,24,14,.94), rgba(7,24,14,.63) 56%, rgba(7,24,14,.22)) !important;
    }
    .creator-profile-close {
      top: 12px !important;
      right: 12px !important;
      width: 40px !important;
      height: 40px !important;
    }
    .creator-profile-head {
      max-width: calc(100% - 54px) !important;
      gap: 14px !important;
      align-items: end !important;
    }
    .creator-profile-avatar {
      width: 76px !important;
      height: 76px !important;
      flex-basis: 76px !important;
      border-width: 3px !important;
      border-radius: 20px !important;
    }
    .creator-profile-title {
      max-width: 16ch !important;
      font-size: clamp(1.75rem, 4.8vw, 3rem) !important;
      line-height: .98 !important;
    }
    .creator-profile-role {
      margin-top: 5px !important;
      font-size: .86rem !important;
    }
    .creator-profile-body {
      grid-template-columns: minmax(0, 1fr) minmax(250px, .8fr) !important;
      gap: 12px !important;
      padding: 14px !important;
    }
    .creator-profile-panel {
      padding: 13px !important;
      gap: 10px !important;
      border-radius: 16px !important;
    }
  }

  /* Po-opo immersive desk for iPhone 11-size and nearby short landscape devices. */
  @media (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
    #poopo-guide.poopo-guide {
      overflow: hidden !important;
    }
    #poopo-guide .poopo-guide-topbar {
      min-height: 48px !important;
      height: 48px !important;
      padding:
        max(5px, env(safe-area-inset-top))
        max(10px, env(safe-area-inset-right))
        5px
        max(10px, env(safe-area-inset-left)) !important;
    }
    #poopo-guide .poopo-guide-brand-avatar {
      width: 34px !important;
      height: 34px !important;
      border-radius: 11px !important;
    }
    #poopo-guide .poopo-guide-brand strong { font-size: .88rem !important; }
    #poopo-guide .poopo-guide-brand small { display: none !important; }
    #poopo-guide .poopo-guide-back,
    #poopo-guide .poopo-guide-exit {
      width: 38px !important;
      height: 38px !important;
    }
    #poopo-guide .poopo-guide-stage {
      height: calc(100dvh - 48px) !important;
      min-height: 0 !important;
      overflow: hidden !important;
      padding:
        5px
        max(7px, env(safe-area-inset-right))
        max(6px, env(safe-area-inset-bottom))
        max(7px, env(safe-area-inset-left)) !important;
    }
    #poopo-guide .poopo-guide-shell {
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      grid-template-columns: minmax(260px, 41%) minmax(0, 59%) !important;
      gap: 0 !important;
      border-radius: 18px !important;
      overflow: hidden !important;
    }
    #poopo-guide .poopo-guide-intro {
      position: relative !important;
      min-height: 0 !important;
      height: 100% !important;
      padding: 11px 12px 8px !important;
      overflow: hidden !important;
    }
    #poopo-guide .poopo-guide-copy {
      position: relative !important;
      z-index: 6 !important;
      max-width: 48% !important;
    }
    #poopo-guide .poopo-guide-kicker {
      padding: 4px 7px !important;
      font-size: .47rem !important;
    }
    #poopo-guide .poopo-guide-intro h2 {
      max-width: 100% !important;
      margin: 7px 0 4px !important;
      font-size: clamp(1.14rem, 3vw, 1.55rem) !important;
      line-height: 1.02 !important;
    }
    #poopo-guide .poopo-guide-intro > p {
      max-width: 100% !important;
      display: -webkit-box !important;
      -webkit-box-orient: vertical !important;
      -webkit-line-clamp: 2 !important;
      overflow: hidden !important;
      font-size: .58rem !important;
      line-height: 1.28 !important;
    }
    #poopo-guide .poopo-guide-character {
      left: 36% !important;
      right: auto !important;
      bottom: 42px !important;
      transform: translateX(-50%) !important;
      z-index: 8 !important;
    }
    #poopo-guide .poopo-guide-world .poopo-guide-avatar {
      width: clamp(102px, 27vh, 132px) !important;
      min-width: 102px !important;
      max-width: 132px !important;
    }
    #poopo-guide .poopo-guide-speech {
      width: min(190px, 44vw) !important;
      max-width: 190px !important;
      padding: 9px 10px !important;
      font-size: .62rem !important;
      line-height: 1.25 !important;
      transform: translate(-31%, -8px) !important;
    }
    #poopo-guide .poopo-guide-speech button {
      width: 30px !important;
      height: 30px !important;
      flex-basis: 30px !important;
    }
    #poopo-guide .poopo-guide-touch-hint,
    #poopo-guide .poopo-guide-playdrawer,
    #poopo-guide .poopo-guide-reaction-label {
      display: none !important;
    }
    #poopo-guide .poopo-guide-world .poopo-guide-trail-hotspot {
      bottom: 8px !important;
      left: 50% !important;
      width: max-content !important;
      max-width: 92% !important;
      min-height: 32px !important;
      padding: 6px 12px !important;
      transform: translateX(-50%) !important;
      font-size: .61rem !important;
      white-space: nowrap !important;
    }

    #poopo-guide .poopo-guide-workspace {
      display: flex !important;
      flex-direction: column !important;
      min-width: 0 !important;
      min-height: 0 !important;
      height: 100% !important;
      padding: 10px 12px !important;
      overflow: hidden !important;
      border-left: 1px solid rgba(244,196,48,.20) !important;
      border-radius: 0 !important;
    }
    #poopo-guide .poopo-guide-dialogue-head {
      min-height: 34px !important;
      margin-bottom: 4px !important;
      padding-bottom: 5px !important;
    }
    #poopo-guide .poopo-guide-dialogue-portrait {
      width: 30px !important;
      height: 30px !important;
      border-radius: 9px !important;
    }
    #poopo-guide .poopo-guide-dialogue-head strong { font-size: .82rem !important; }
    #poopo-guide .poopo-guide-dialogue-head small { font-size: .53rem !important; }
    #poopo-guide .poopo-guide-desk-close {
      width: 32px !important;
      height: 32px !important;
    }
    #poopo-guide .poopo-guide-question h3 {
      margin: 0 0 2px !important;
      font-size: 1.04rem !important;
      line-height: 1.05 !important;
    }
    #poopo-guide .poopo-guide-question p {
      margin: 0 !important;
      font-size: .6rem !important;
      line-height: 1.25 !important;
    }
    #poopo-guide .poopo-guide-recent {
      display: none !important;
    }
    #poopo-guide .poopo-guide-actions {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      grid-template-rows: repeat(2, minmax(64px, 1fr)) 40px !important;
      gap: 7px !important;
      margin-top: 8px !important;
    }
    #poopo-guide .poopo-guide-action,
    #poopo-guide .poopo-guide-action.wide {
      grid-column: auto !important;
      min-width: 0 !important;
      min-height: 0 !important;
      height: 100% !important;
      padding: 9px 10px !important;
      grid-template-columns: 25px minmax(0, 1fr) !important;
      gap: 8px !important;
      border-radius: 13px !important;
    }
    #poopo-guide .poopo-guide-action[data-archive-path="surprise"] {
      grid-column: 1 / -1 !important;
      min-height: 40px !important;
    }
    #poopo-guide .poopo-guide-action-icon {
      width: 25px !important;
      height: 25px !important;
      border-radius: 8px !important;
    }
    #poopo-guide .poopo-guide-action-icon svg {
      width: 14px !important;
      height: 14px !important;
    }
    #poopo-guide .poopo-guide-action strong {
      font-size: .82rem !important;
      line-height: 1.08 !important;
      white-space: normal !important;
    }
    #poopo-guide .poopo-guide-action small,
    #poopo-guide .poopo-guide-action > svg,
    #poopo-guide .poopo-guide-action > i {
      display: none !important;
    }
    #poopo-guide .poopo-guide-chat-link {
      flex: 0 0 auto !important;
      min-height: 32px !important;
      margin-top: 6px !important;
      padding: 5px 9px !important;
      font-size: .61rem !important;
      border-radius: 10px !important;
    }
    #poopo-guide .poopo-guide-chat-link svg {
      width: 14px !important;
      height: 14px !important;
    }
    #poopo-guide .poopo-guide-exit-link {
      display: none !important;
    }

    /* Story, film, music and mood result views stay large and visible. */
    #poopo-guide .poopo-guide-moods {
      flex: 1 1 auto !important;
      display: grid !important;
      align-content: start !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 7px !important;
      margin-top: 8px !important;
      overflow: auto !important;
    }
    #poopo-guide .poopo-guide-mood {
      min-height: 40px !important;
      padding: 7px 8px !important;
      font-size: .68rem !important;
    }
    #poopo-guide .poopo-guide-result {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      margin-top: 7px !important;
      overflow: auto !important;
    }
    #poopo-guide .poopo-guide-result-card {
      min-height: 100% !important;
      grid-template-columns: minmax(118px, 38%) minmax(0, 1fr) !important;
      gap: 10px !important;
      padding: 9px !important;
      border-radius: 14px !important;
    }
    #poopo-guide .poopo-guide-result-art {
      min-height: 0 !important;
      height: 100% !important;
      border-radius: 11px !important;
    }
    #poopo-guide .poopo-guide-result-copy {
      align-content: start !important;
    }
    #poopo-guide .poopo-guide-result-copy h4 {
      margin: 3px 0 4px !important;
      font-size: 1.05rem !important;
      line-height: 1.08 !important;
    }
    #poopo-guide .poopo-guide-result-credit {
      font-size: .61rem !important;
    }
    #poopo-guide .poopo-guide-result-summary,
    #poopo-guide .poopo-guide-result-tags {
      display: none !important;
    }
    #poopo-guide .poopo-guide-result-buttons {
      gap: 5px !important;
      padding-top: 7px !important;
    }
    #poopo-guide .poopo-guide-primary,
    #poopo-guide .poopo-guide-secondary {
      min-height: 32px !important;
      padding: 6px 8px !important;
      font-size: .59rem !important;
    }
    #poopo-guide .poopo-guide-thinking {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      margin-top: 8px !important;
      padding: 12px !important;
    }
  }

  /* Extra-tight landscape phones: preserve two readable panels instead of shrinking text. */
  @media (orientation: landscape) and (max-height: 390px) and (max-width: 760px) {
    #poopo-guide .poopo-guide-shell {
      grid-template-columns: minmax(225px, 39%) minmax(0, 61%) !important;
    }
    #poopo-guide .poopo-guide-copy { max-width: 50% !important; }
    #poopo-guide .poopo-guide-intro > p { display: none !important; }
    #poopo-guide .poopo-guide-world .poopo-guide-avatar {
      width: 94px !important;
      min-width: 94px !important;
    }
    #poopo-guide .poopo-guide-speech {
      max-width: 168px !important;
      font-size: .57rem !important;
    }
    #poopo-guide .poopo-guide-actions {
      grid-template-rows: repeat(2, minmax(56px, 1fr)) 36px !important;
    }
    #poopo-guide .poopo-guide-action strong { font-size: .75rem !important; }
    #poopo-guide .poopo-guide-chat-link { display: none !important; }
  }



  /* Phase 3.18 — iOS-safe modal locking, stable centering, and dependable close controls. */
  html.creator-profile-open,
  body.creator-profile-open {
    overscroll-behavior: none !important;
  }
  body.creator-profile-open {
    overflow: hidden !important;
  }
  .creator-profile-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100svh !important;
    display: none !important;
    place-items: center !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding:
      max(10px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
    overscroll-behavior: none !important;
    touch-action: pan-y !important;
  }
  .creator-profile-overlay.is-open {
    display: grid !important;
  }
  .creator-profile-shell,
  .creator-directory-shell {
    position: relative !important;
    width: min(1080px, 100%) !important;
    max-width: 100% !important;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
    margin: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    scrollbar-gutter: stable both-edges;
    isolation: isolate;
  }
  .creator-profile-shell > *,
  .creator-directory-shell > * {
    max-width: 100%;
  }
  .creator-profile-close.creator-profile-close-floating {
    position: sticky !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    right: auto !important;
    z-index: 90 !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    margin: 10px 10px -66px auto !important;
    padding: 0 !important;
    border: 1px solid rgba(32, 53, 40, .14) !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(255, 253, 244, .96) !important;
    color: #173524 !important;
    box-shadow: 0 10px 28px rgba(4, 21, 12, .24) !important;
    backdrop-filter: blur(12px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.15) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .creator-profile-close.creator-profile-close-floating:hover,
  .creator-profile-close.creator-profile-close-floating:focus-visible,
  .creator-profile-close.creator-profile-close-floating:active {
    background: #fffdf4 !important;
    color: #0d2818 !important;
    transform: scale(1.04) !important;
    outline: 3px solid rgba(214, 173, 56, .5) !important;
    outline-offset: 2px !important;
  }
  .creator-profile-close.creator-profile-close-floating svg,
  .creator-profile-close.creator-profile-close-floating i {
    width: 24px !important;
    height: 24px !important;
    pointer-events: none !important;
  }

  /* All principal close controls receive a reliable coarse-pointer hit area. */
  .close-btn,
  .music-player-close,
  .music-action-close,
  .music-archive-close,
  .chat-close,
  .doc-action.square[aria-label="Close"],
  .poopo-guide-exit,
  .film-stable-cinema-exit {
    min-width: 48px !important;
    min-height: 48px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    cursor: pointer !important;
  }
  .close-btn > *,
  .music-player-close > *,
  .music-action-close > *,
  .music-archive-close > *,
  .chat-close > *,
  .doc-action.square[aria-label="Close"] > *,
  .poopo-guide-exit > *,
  .film-stable-cinema-exit > * {
    pointer-events: none !important;
  }

  @media (max-width: 480px) {
    .creator-profile-overlay {
      padding:
        max(8px, env(safe-area-inset-top))
        max(8px, env(safe-area-inset-right))
        max(8px, env(safe-area-inset-bottom))
        max(8px, env(safe-area-inset-left)) !important;
    }
    .creator-profile-shell,
    .creator-directory-shell {
      width: 100% !important;
      max-height: calc(100dvh - max(16px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
      border-radius: 20px !important;
    }
    .creator-profile-close.creator-profile-close-floating {
      width: 54px !important;
      height: 54px !important;
      min-width: 54px !important;
      min-height: 54px !important;
      margin: 8px 8px -62px auto !important;
    }
    .creator-profile-hero {
      min-height: clamp(190px, 31dvh, 245px) !important;
      padding: 22px 18px !important;
    }
    .creator-profile-title {
      max-width: calc(100vw - 46px) !important;
      font-size: clamp(1.85rem, 10vw, 2.75rem) !important;
      overflow-wrap: normal !important;
      word-break: normal !important;
    }
  }

  @media (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
    .creator-profile-overlay {
      padding:
        max(6px, env(safe-area-inset-top))
        max(10px, env(safe-area-inset-right))
        max(6px, env(safe-area-inset-bottom))
        max(10px, env(safe-area-inset-left)) !important;
    }
    .creator-profile-shell,
    .creator-directory-shell {
      width: min(850px, 96vw) !important;
      max-height: calc(100dvh - max(12px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
      border-radius: 18px !important;
    }
    .creator-profile-close.creator-profile-close-floating {
      top: max(7px, env(safe-area-inset-top)) !important;
      width: 52px !important;
      height: 52px !important;
      min-width: 52px !important;
      min-height: 52px !important;
      margin: 7px 7px -59px auto !important;
    }
  }



  /* Phase 3.20 — iPhone 11 / nearby small-screen repair.
     Presentation only: collaborator cards, portal-card spacing, and Po-opo's short-landscape desk. */

  /* Phone portrait: use a deterministic 2 + 2 + 1 collaborator grid.
     This avoids retained carousel scroll positions, clipped edge cards, and uneven centering. */
  @media (orientation: portrait) and (max-width: 480px) and (min-height: 560px) {
    body:not(.admin-mode) #editorial-people,
    body:not(.admin-mode) #editorial-collaborators {
      overflow: visible !important;
      padding-left: max(14px, env(safe-area-inset-left)) !important;
      padding-right: max(14px, env(safe-area-inset-right)) !important;
    }

    body:not(.admin-mode) #editorial-people .phase8b-section-head,
    body:not(.admin-mode) #editorial-collaborators .phase8b-section-head {
      width: 100% !important;
      max-width: 420px !important;
      margin: 0 auto 22px !important;
      padding: 0 !important;
      display: grid !important;
      grid-template-columns: 1fr !important;
      grid-template-areas: "eyebrow" "title" "copy" "action" !important;
      justify-items: center !important;
      gap: 8px !important;
      text-align: center !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-section-head .phase8b-eyebrow,
    body:not(.admin-mode) #editorial-collaborators .phase8b-section-head .phase8b-eyebrow { grid-area: eyebrow !important; }
    body:not(.admin-mode) #editorial-people .phase8b-section-head h2,
    body:not(.admin-mode) #editorial-collaborators .phase8b-section-head h2 {
      grid-area: title !important;
      margin: 0 !important;
      font-size: clamp(1.45rem, 7vw, 1.9rem) !important;
      line-height: 1.08 !important;
      text-wrap: balance !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-section-head p,
    body:not(.admin-mode) #editorial-collaborators .phase8b-section-head p {
      grid-area: copy !important;
      display: block !important;
      width: min(100%, 360px) !important;
      margin: 0 !important;
      font-size: .82rem !important;
      line-height: 1.48 !important;
      text-align: center !important;
      text-wrap: pretty !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-view-all-people,
    body:not(.admin-mode) #editorial-collaborators .phase8b-view-all-people {
      grid-area: action !important;
      justify-self: center !important;
      min-height: 44px !important;
      margin-top: 5px !important;
      padding: 9px 20px !important;
    }

    body:not(.admin-mode) #editorial-people .phase8b-people-grid,
    body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid,
    body:not(.admin-mode) #editorial-people .phase8b-people-grid.phase316-can-center,
    body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid.phase316-can-center {
      box-sizing: border-box !important;
      width: min(100%, 390px) !important;
      max-width: 390px !important;
      margin: 0 auto !important;
      padding: 4px 4px 18px !important;
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      grid-auto-flow: row !important;
      justify-content: center !important;
      justify-items: center !important;
      align-items: start !important;
      gap: 24px 12px !important;
      overflow: visible !important;
      scroll-snap-type: none !important;
      scroll-padding: 0 !important;
      mask-image: none !important;
      -webkit-mask-image: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card,
    body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n),
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-card,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(n) {
      grid-column: auto !important;
      box-sizing: border-box !important;
      flex: none !important;
      width: min(100%, 148px) !important;
      min-width: 0 !important;
      max-width: 148px !important;
      min-height: 164px !important;
      margin: 0 !important;
      padding: 0 3px !important;
      gap: 8px !important;
      scroll-snap-align: none !important;
      transform: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(5),
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(5) {
      grid-column: 1 / -1 !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-image,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-image {
      width: 78px !important;
      height: 78px !important;
      min-width: 78px !important;
      min-height: 78px !important;
      flex-basis: 78px !important;
      margin: 0 auto 7px !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-copy,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-copy {
      width: 100% !important;
      max-width: 148px !important;
      align-items: center !important;
      text-align: center !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-role,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-role {
      width: 100% !important;
      max-width: 148px !important;
      font-size: .61rem !important;
      line-height: 1.18 !important;
      overflow-wrap: normal !important;
      word-break: normal !important;
      hyphens: none !important;
      text-wrap: balance !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-name,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-name {
      width: 100% !important;
      max-width: 148px !important;
      min-height: 0 !important;
      font-size: .84rem !important;
      line-height: 1.18 !important;
      -webkit-line-clamp: 3 !important;
      overflow-wrap: normal !important;
      word-break: normal !important;
      hyphens: none !important;
      text-wrap: balance !important;
    }

    /* Portal cards: reserve a real action zone instead of letting copy run under the arrow. */
    body:not(.admin-mode) #links .portal-grid {
      width: 100% !important;
      max-width: 100% !important;
      grid-template-columns: 1fr !important;
      gap: 14px !important;
      overflow: visible !important;
    }
    body:not(.admin-mode) #links .portal-card {
      width: 100% !important;
      min-width: 0 !important;
      min-height: 188px !important;
      padding: 17px 16px 64px !important;
      grid-template-columns: 54px minmax(0, 1fr) !important;
      gap: 13px !important;
      align-content: start !important;
      overflow: hidden !important;
      border-radius: 19px !important;
    }
    body:not(.admin-mode) #links .portal-icon {
      width: 54px !important;
      height: 54px !important;
      min-width: 54px !important;
      border-radius: 14px !important;
    }
    body:not(.admin-mode) #links .portal-copy {
      min-width: 0 !important;
      width: 100% !important;
      height: auto !important;
      padding-right: 2px !important;
    }
    body:not(.admin-mode) #links .portal-category,
    body:not(.admin-mode) #links .portal-title,
    body:not(.admin-mode) #links .portal-desc {
      width: 100% !important;
      max-width: 100% !important;
      overflow-wrap: break-word !important;
      word-break: normal !important;
      hyphens: none !important;
    }
    body:not(.admin-mode) #links .portal-title {
      margin-bottom: 7px !important;
      font-size: 1rem !important;
      line-height: 1.2 !important;
    }
    body:not(.admin-mode) #links .portal-desc {
      display: -webkit-box !important;
      -webkit-box-orient: vertical !important;
      -webkit-line-clamp: 4 !important;
      overflow: hidden !important;
      font-size: .82rem !important;
      line-height: 1.48 !important;
    }
    body:not(.admin-mode) #links .portal-action {
      position: absolute !important;
      right: 14px !important;
      bottom: 13px !important;
      width: 46px !important;
      height: 46px !important;
      min-width: 46px !important;
      min-height: 46px !important;
      margin: 0 !important;
      padding: 0 !important;
      display: grid !important;
      place-items: center !important;
      border: 1px solid rgba(248,223,151,.36) !important;
      border-radius: 999px !important;
      background: rgba(255,253,244,.08) !important;
      color: #f8df97 !important;
      z-index: 3 !important;
    }
    body:not(.admin-mode) #links .portal-action svg {
      width: 18px !important;
      height: 18px !important;
    }
  }

  /* Short phone landscape: a simplified, stable immersive archive desk.
     Story, Film, and Music are the primary paths; Mood and Surprise are secondary. */
  @media (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
    #poopo-guide.poopo-guide {
      overflow: hidden !important;
      background: #07170d !important;
    }
    #poopo-guide .poopo-guide-topbar {
      min-height: 46px !important;
      height: 46px !important;
      padding:
        max(4px, env(safe-area-inset-top))
        max(9px, env(safe-area-inset-right))
        4px
        max(9px, env(safe-area-inset-left)) !important;
    }
    #poopo-guide .poopo-guide-brand-avatar {
      width: 32px !important;
      height: 32px !important;
      border-radius: 10px !important;
    }
    #poopo-guide .poopo-guide-brand strong { font-size: .84rem !important; }
    #poopo-guide .poopo-guide-brand small { display: none !important; }
    #poopo-guide .poopo-guide-back,
    #poopo-guide .poopo-guide-exit {
      width: 38px !important;
      height: 38px !important;
      min-width: 38px !important;
      min-height: 38px !important;
    }
    #poopo-guide .poopo-guide-stage {
      height: calc(100dvh - 46px) !important;
      min-height: 0 !important;
      padding:
        4px
        max(6px, env(safe-area-inset-right))
        max(5px, env(safe-area-inset-bottom))
        max(6px, env(safe-area-inset-left)) !important;
      overflow: hidden !important;
    }
    #poopo-guide .poopo-guide-shell {
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      display: grid !important;
      grid-template-columns: minmax(220px, 34%) minmax(0, 66%) !important;
      gap: 6px !important;
      overflow: hidden !important;
      border-radius: 16px !important;
    }

    /* Character panel */
    #poopo-guide .poopo-guide-intro {
      position: relative !important;
      min-width: 0 !important;
      min-height: 0 !important;
      height: 100% !important;
      padding: 9px 10px 7px !important;
      overflow: hidden !important;
      border-radius: 14px !important;
    }
    #poopo-guide .poopo-guide-copy {
      position: relative !important;
      z-index: 7 !important;
      width: 52% !important;
      max-width: 52% !important;
    }
    #poopo-guide .poopo-guide-kicker {
      padding: 3px 6px !important;
      font-size: .42rem !important;
      line-height: 1.15 !important;
    }
    #poopo-guide .poopo-guide-intro h2 {
      margin: 5px 0 2px !important;
      font-size: clamp(1.02rem, 2.5vw, 1.34rem) !important;
      line-height: 1.02 !important;
    }
    #poopo-guide .poopo-guide-intro > p {
      display: -webkit-box !important;
      -webkit-box-orient: vertical !important;
      -webkit-line-clamp: 2 !important;
      overflow: hidden !important;
      font-size: .54rem !important;
      line-height: 1.24 !important;
    }
    #poopo-guide .poopo-guide-character {
      left: 42% !important;
      right: auto !important;
      bottom: 28px !important;
      transform: translateX(-50%) !important;
      z-index: 6 !important;
    }
    #poopo-guide .poopo-guide-world .poopo-guide-avatar {
      width: clamp(88px, 28vh, 116px) !important;
      min-width: 88px !important;
      max-width: 116px !important;
    }
    #poopo-guide .poopo-guide-speech {
      left: 49% !important;
      right: auto !important;
      top: 37% !important;
      bottom: auto !important;
      width: min(168px, 25vw) !important;
      max-width: 168px !important;
      padding: 8px 9px !important;
      gap: 6px !important;
      font-size: .57rem !important;
      line-height: 1.22 !important;
      transform: translate(-26%, -50%) !important;
      z-index: 8 !important;
    }
    #poopo-guide .poopo-guide-speech button {
      width: 28px !important;
      height: 28px !important;
      min-width: 28px !important;
      min-height: 28px !important;
      flex-basis: 28px !important;
    }
    #poopo-guide .poopo-guide-trail-hotspot,
    #poopo-guide .poopo-guide-touch-hint,
    #poopo-guide .poopo-guide-playdrawer,
    #poopo-guide .poopo-guide-reaction-label {
      display: none !important;
    }

    /* Archive desk */
    #poopo-guide .poopo-guide-workspace {
      position: relative !important;
      min-width: 0 !important;
      min-height: 0 !important;
      height: 100% !important;
      padding: 8px 9px !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 5px !important;
      overflow: hidden !important;
      border-radius: 14px !important;
      border: 1px solid rgba(244,196,48,.18) !important;
      background: linear-gradient(155deg, rgba(6,25,14,.88), rgba(4,16,9,.72)) !important;
    }
    #poopo-guide .poopo-guide-dialogue-head,
    #poopo-guide #poopo-guide-recent,
    #poopo-guide .poopo-guide-chat-link,
    #poopo-guide .poopo-guide-exit-link {
      display: none !important;
    }
    #poopo-guide .poopo-guide-question {
      order: 1 !important;
      flex: 0 0 auto !important;
      min-height: 0 !important;
      padding: 1px 2px 3px !important;
    }
    #poopo-guide .poopo-guide-question h3 {
      margin: 0 !important;
      font-size: clamp(.92rem, 2.1vw, 1.15rem) !important;
      line-height: 1.05 !important;
      text-wrap: balance !important;
    }
    #poopo-guide .poopo-guide-question p {
      display: none !important;
    }
    #poopo-guide #poopo-guide-thinking {
      order: 2 !important;
      flex: 1 1 auto !important;
      min-height: 0 !important;
      margin: 2px 0 !important;
      padding: 10px !important;
      overflow: hidden !important;
    }
    #poopo-guide #poopo-guide-result {
      order: 2 !important;
      flex: 1 1 auto !important;
      min-height: 0 !important;
      margin: 2px 0 !important;
      overflow: auto !important;
      overscroll-behavior: contain !important;
      -webkit-overflow-scrolling: touch !important;
    }
    #poopo-guide #poopo-guide-actions,
    #poopo-guide.guide-has-result #poopo-guide-actions {
      order: 3 !important;
      flex: 0 0 auto !important;
      width: 100% !important;
      min-height: 0 !important;
      margin: 2px 0 0 !important;
      padding: 0 !important;
      display: grid !important;
      grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
      grid-template-rows: 62px 34px !important;
      gap: 6px !important;
      overflow: visible !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
    }
    #poopo-guide #poopo-guide-actions[hidden] {
      display: none !important;
    }
    #poopo-guide #poopo-guide-actions .poopo-guide-action,
    #poopo-guide #poopo-guide-actions .poopo-guide-action:last-child {
      position: relative !important;
      box-sizing: border-box !important;
      grid-column: span 2 !important;
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
      height: 62px !important;
      min-height: 62px !important;
      padding: 7px 6px !important;
      display: grid !important;
      grid-template-columns: 22px minmax(0, 1fr) !important;
      align-items: center !important;
      justify-items: start !important;
      gap: 6px !important;
      border-radius: 12px !important;
      border: 1px solid rgba(255,255,255,.13) !important;
      border-left: 3px solid var(--poopo-path-accent, #f4c430) !important;
      background: rgba(255,255,255,.065) !important;
      overflow: hidden !important;
      text-align: left !important;
      box-shadow: none !important;
    }
    #poopo-guide #poopo-guide-actions .poopo-guide-action[data-archive-path="story"] { grid-column: 1 / span 2 !important; }
    #poopo-guide #poopo-guide-actions .poopo-guide-action[data-archive-path="film"] { grid-column: 3 / span 2 !important; }
    #poopo-guide #poopo-guide-actions .poopo-guide-action[data-archive-path="music"] { grid-column: 5 / span 2 !important; }
    #poopo-guide #poopo-guide-actions .poopo-guide-action[data-archive-path="mood"],
    #poopo-guide #poopo-guide-actions .poopo-guide-action[data-archive-path="surprise"] {
      grid-row: 2 !important;
      height: 34px !important;
      min-height: 34px !important;
      padding: 4px 7px !important;
      grid-template-columns: 18px minmax(0, 1fr) !important;
      border-left-width: 2px !important;
      border-radius: 10px !important;
    }
    #poopo-guide #poopo-guide-actions .poopo-guide-action[data-archive-path="mood"] { grid-column: 1 / span 3 !important; }
    #poopo-guide #poopo-guide-actions .poopo-guide-action[data-archive-path="surprise"] { grid-column: 4 / span 3 !important; }
    #poopo-guide #poopo-guide-actions .poopo-guide-action::before,
    #poopo-guide #poopo-guide-actions .poopo-guide-action::after {
      display: none !important;
      content: none !important;
    }
    #poopo-guide #poopo-guide-actions .poopo-guide-action-icon {
      width: 22px !important;
      height: 22px !important;
      min-width: 22px !important;
      min-height: 22px !important;
      border-radius: 7px !important;
      background: rgba(244,196,48,.12) !important;
    }
    #poopo-guide #poopo-guide-actions .poopo-guide-action[data-archive-path="mood"] .poopo-guide-action-icon,
    #poopo-guide #poopo-guide-actions .poopo-guide-action[data-archive-path="surprise"] .poopo-guide-action-icon {
      width: 18px !important;
      height: 18px !important;
      min-width: 18px !important;
      min-height: 18px !important;
      border-radius: 6px !important;
    }
    #poopo-guide #poopo-guide-actions .poopo-guide-action-icon svg,
    #poopo-guide #poopo-guide-actions .poopo-guide-action-icon i {
      width: 12px !important;
      height: 12px !important;
    }
    #poopo-guide #poopo-guide-actions .poopo-guide-action > span:not(.poopo-guide-action-icon) {
      position: static !important;
      width: auto !important;
      height: auto !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: visible !important;
      clip: auto !important;
      white-space: normal !important;
      border: 0 !important;
      min-width: 0 !important;
    }
    #poopo-guide #poopo-guide-actions .poopo-guide-action strong {
      display: block !important;
      margin: 0 !important;
      color: #fffaf0 !important;
      font-size: clamp(.59rem, 1.25vw, .71rem) !important;
      line-height: 1.08 !important;
      font-weight: 900 !important;
      text-align: left !important;
      text-wrap: balance !important;
    }
    #poopo-guide #poopo-guide-actions .poopo-guide-action strong::after {
      display: none !important;
      content: none !important;
    }
    #poopo-guide #poopo-guide-actions .poopo-guide-action small,
    #poopo-guide #poopo-guide-actions .poopo-guide-action > i:last-child,
    #poopo-guide #poopo-guide-actions .poopo-guide-action > svg:last-child {
      display: none !important;
    }
    #poopo-guide #poopo-guide-actions .poopo-guide-action.active,
    #poopo-guide #poopo-guide-actions .poopo-guide-action[aria-pressed="true"],
    #poopo-guide #poopo-guide-actions .poopo-guide-action:focus-visible {
      transform: none !important;
      border-color: rgba(244,196,48,.55) !important;
      background: rgba(244,196,48,.15) !important;
      box-shadow: 0 0 0 2px rgba(244,196,48,.10) !important;
      outline: none !important;
    }

    #poopo-guide #poopo-guide-moods,
    #poopo-guide #poopo-guide-moods:not([hidden]) {
      order: 2 !important;
      flex: 1 1 auto !important;
      min-height: 0 !important;
      margin: 2px 0 !important;
      padding: 0 !important;
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 6px !important;
      overflow: auto !important;
    }
    #poopo-guide #poopo-guide-moods[hidden] { display: none !important; }
    #poopo-guide .poopo-guide-mood {
      min-height: 38px !important;
      padding: 6px !important;
      font-size: .62rem !important;
      line-height: 1.1 !important;
      border-radius: 10px !important;
    }

    /* Results stay readable and never cover the path controls. */
    #poopo-guide .poopo-guide-result-card {
      width: 100% !important;
      min-height: 100% !important;
      height: auto !important;
      padding: 8px !important;
      display: grid !important;
      grid-template-columns: minmax(82px, 30%) minmax(0, 1fr) !important;
      gap: 9px !important;
      align-items: stretch !important;
      overflow: hidden !important;
      border-radius: 13px !important;
    }
    #poopo-guide[data-feature-type="video"] .poopo-guide-result-card,
    #poopo-guide[data-feature-type="story"] .poopo-guide-result-card,
    #poopo-guide[data-feature-type="music"] .poopo-guide-result-card {
      grid-template-columns: minmax(82px, 30%) minmax(0, 1fr) !important;
      grid-template-rows: none !important;
    }
    #poopo-guide .poopo-guide-result-art,
    #poopo-guide[data-feature-type="story"] .poopo-guide-result-art,
    #poopo-guide[data-feature-type="music"] .poopo-guide-result-art,
    #poopo-guide[data-feature-type="video"] .poopo-guide-result-art {
      width: 100% !important;
      min-height: 92px !important;
      height: 100% !important;
      max-height: 150px !important;
      aspect-ratio: auto !important;
      border-radius: 10px !important;
    }
    #poopo-guide .poopo-guide-result-copy,
    #poopo-guide[data-feature-type="video"] .poopo-guide-result-copy {
      min-width: 0 !important;
      padding: 1px 0 !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
    }
    #poopo-guide[data-feature-type="video"] .poopo-guide-result-copy > *:not(.poopo-guide-result-buttons),
    #poopo-guide[data-feature-type="video"] .poopo-guide-result-buttons {
      grid-column: auto !important;
      grid-row: auto !important;
      width: auto !important;
    }
    #poopo-guide .poopo-guide-result-type { font-size: .52rem !important; }
    #poopo-guide .poopo-guide-result-copy h4 {
      margin: 3px 0 !important;
      font-size: clamp(.88rem, 2vw, 1.08rem) !important;
      line-height: 1.06 !important;
      text-wrap: balance !important;
    }
    #poopo-guide .poopo-guide-result-credit {
      font-size: .56rem !important;
      line-height: 1.2 !important;
    }
    #poopo-guide .poopo-guide-result-summary,
    #poopo-guide .poopo-guide-result-tags,
    #poopo-guide .poopo-guide-fallback-note {
      display: none !important;
    }
    #poopo-guide .poopo-guide-result-buttons,
    #poopo-guide[data-feature-type="video"] .poopo-guide-result-buttons {
      width: 100% !important;
      margin-top: auto !important;
      padding-top: 6px !important;
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 5px !important;
    }
    #poopo-guide .poopo-guide-result-buttons .poopo-guide-chat-context-btn {
      display: none !important;
    }
    #poopo-guide .poopo-guide-primary,
    #poopo-guide .poopo-guide-secondary {
      min-width: 0 !important;
      min-height: 32px !important;
      padding: 5px 6px !important;
      justify-content: center !important;
      font-size: .56rem !important;
      line-height: 1.05 !important;
      border-radius: 9px !important;
    }
  }

  /* Extra-short landscape phones receive an even tighter but still usable desk. */
  @media (orientation: landscape) and (max-width: 720px) and (max-height: 390px) {
    #poopo-guide .poopo-guide-shell {
      grid-template-columns: minmax(190px, 32%) minmax(0, 68%) !important;
      gap: 4px !important;
    }
    #poopo-guide .poopo-guide-copy { width: 48% !important; max-width: 48% !important; }
    #poopo-guide .poopo-guide-intro > p { display: none !important; }
    #poopo-guide .poopo-guide-character { left: 40% !important; bottom: 20px !important; }
    #poopo-guide .poopo-guide-world .poopo-guide-avatar {
      width: 82px !important;
      min-width: 82px !important;
    }
    #poopo-guide .poopo-guide-speech {
      width: min(145px, 23vw) !important;
      max-width: 145px !important;
      font-size: .52rem !important;
    }
    #poopo-guide #poopo-guide-actions,
    #poopo-guide.guide-has-result #poopo-guide-actions {
      grid-template-rows: 54px 31px !important;
      gap: 4px !important;
    }
    #poopo-guide #poopo-guide-actions .poopo-guide-action,
    #poopo-guide #poopo-guide-actions .poopo-guide-action:last-child {
      height: 54px !important;
      min-height: 54px !important;
      padding: 5px !important;
    }
    #poopo-guide #poopo-guide-actions .poopo-guide-action[data-archive-path="mood"],
    #poopo-guide #poopo-guide-actions .poopo-guide-action[data-archive-path="surprise"] {
      height: 31px !important;
      min-height: 31px !important;
    }
    #poopo-guide #poopo-guide-actions .poopo-guide-action strong {
      font-size: .56rem !important;
    }
  }



  /* 09e: pause decorative animation work outside the visible public viewport.
     This changes animation scheduling only; layout and visual styling are untouched. */
  body:not(.admin-mode) #user-view .ns-perf-offscreen *,
  body:not(.admin-mode) #user-view .ns-perf-offscreen *::before,
  body:not(.admin-mode) #user-view .ns-perf-offscreen *::after,
  body:not(.admin-mode).ns-perf-page-hidden #user-view *,
  body:not(.admin-mode).ns-perf-page-hidden #user-view *::before,
  body:not(.admin-mode).ns-perf-page-hidden #user-view *::after {
    animation-play-state: paused !important;
  }
  @media (prefers-reduced-motion: reduce) {
    body:not(.admin-mode) #user-view .narra-firefly,
    body:not(.admin-mode) #user-view .music-archive-firefly,
    body:not(.admin-mode) #user-view .contact-firefly,
    body:not(.admin-mode) #user-view [class*="glint"],
    body:not(.admin-mode) #user-view [class*="spark"] {
      animation: none !important;
    }
  }



body.admin-mode #chat-launcher,
body.admin-mode #chat-panel,
body.admin-mode #chat-edge-tab,
body.admin-mode #companion-bubble,
body.admin-mode #companion-dismiss-target,
body.admin-mode #poopo-guide,
body.admin-mode .chat-launcher,
body.admin-mode .chat-panel,
body.admin-mode .chat-edge-tab,
body.admin-mode .companion-bubble,
body.admin-mode .companion-dismiss-target,
body.admin-mode .poopo-guide,
body.admin-mode .poopo-widget,
body.admin-mode .poopo-launcher,
body.admin-mode .poopo-floating,
body.admin-mode .poopo-float{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;}



    body:not(.admin-mode) #home .hero-poopo-bridge{
      order:6;
      width:min(760px,100%);
      margin:0 auto 22px;
      display:grid;
      grid-template-columns:auto minmax(0,1fr) auto;
      align-items:center;
      gap:14px;
      padding:13px 14px;
      border:1px solid rgba(255,255,255,.24);
      border-radius:20px;
      background:linear-gradient(135deg,rgba(12,45,26,.42),rgba(255,255,255,.12));
      backdrop-filter:blur(12px);
      box-shadow:0 18px 42px rgba(0,0,0,.20);
      text-align:left;
    }
    body:not(.admin-mode) #home .hero-poopo-face{
      width:48px;height:48px;border-radius:16px;display:grid;place-items:center;overflow:hidden;
      background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.24);box-shadow:0 8px 24px rgba(0,0,0,.18);
    }
    body:not(.admin-mode) #home .hero-poopo-face img{width:100%;height:100%;object-fit:contain;transform:translateY(2px) scale(1.08)}
    body:not(.admin-mode) #home .hero-poopo-copy{min-width:0;display:grid;gap:3px}
    body:not(.admin-mode) #home .hero-poopo-copy strong{font-size:.95rem;font-weight:950;color:#fffdf4;letter-spacing:.01em}
    body:not(.admin-mode) #home .hero-poopo-copy span{font-size:.8rem;font-weight:750;line-height:1.35;color:rgba(255,255,255,.84)}
    body:not(.admin-mode) #home .hero-poopo-actions{display:flex;gap:8px;align-items:center}
    body:not(.admin-mode) #home .hero-poopo-actions button,
    body:not(.admin-mode) #home .hero-poopo-actions .hero-poopo-ar-entry{
      min-height:40px;border:1px solid rgba(255,255,255,.24);border-radius:14px;padding:0 12px;display:inline-flex;align-items:center;gap:7px;
      background:rgba(255,253,244,.94);color:#173d27;font-weight:950;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.12);text-decoration:none;
    }
    body:not(.admin-mode) #home .hero-poopo-actions button:last-of-type{background:rgba(255,255,255,.14);color:#fffdf4}
    body:not(.admin-mode) #home .hero-poopo-actions .hero-poopo-ar-entry{
      background:#f2cd63;color:#173d27;border-color:rgba(255,238,176,.72);box-shadow:0 10px 22px rgba(0,0,0,.14);
    }
    body:not(.admin-mode) #home .hero-poopo-actions .hero-poopo-ar-entry:hover{background:#f6d776;color:#12331f}
    body:not(.admin-mode) #home .hero-poopo-actions button:focus-visible,
    body:not(.admin-mode) #home .hero-poopo-actions .hero-poopo-ar-entry:focus-visible{outline:3px solid rgba(255,224,129,.58);outline-offset:3px}
    body:not(.admin-mode) #home .hero-poopo-actions i,body:not(.admin-mode) #home .hero-poopo-actions svg{width:16px;height:16px}
    body:not(.admin-mode) #home.hero.home-static-classic .hero-container>.flex.flex-wrap{order:7!important}
    body:not(.admin-mode) #poopo-guide .poopo-guide-kicker{letter-spacing:.12em;text-transform:uppercase}
    body:not(.admin-mode) #poopo-guide .poopo-guide-intro h2{letter-spacing:-.03em}
    body:not(.admin-mode) #poopo-guide .poopo-guide-action strong{font-weight:950}
    body:not(.admin-mode) #poopo-guide .poopo-guide-action small{font-weight:760;line-height:1.25}
    body:not(.admin-mode) #poopo-guide .poopo-guide-chat-link,
    body:not(.admin-mode) #poopo-guide .poopo-guide-exit-link{border-radius:999px}
    @media(max-width:720px){
      body:not(.admin-mode) #home .hero-poopo-bridge{grid-template-columns:auto minmax(0,1fr);padding:12px;margin-bottom:18px}
      body:not(.admin-mode) #home .hero-poopo-actions{grid-column:1/-1;width:100%;justify-content:center}
      body:not(.admin-mode) #home .hero-poopo-actions button,
      body:not(.admin-mode) #home .hero-poopo-actions .hero-poopo-ar-entry{flex:1;justify-content:center;min-width:0}
    }
    @media(max-width:460px){
      body:not(.admin-mode) #home .hero-poopo-copy span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
      body:not(.admin-mode) #home .hero-poopo-face{width:42px;height:42px}
      body:not(.admin-mode) #home .hero-poopo-actions span{display:none}
      body:not(.admin-mode) #home .hero-poopo-actions .hero-poopo-ar-entry span{display:inline;font-size:.72rem;letter-spacing:.02em}
      body:not(.admin-mode) #home .hero-poopo-actions button,
      body:not(.admin-mode) #home .hero-poopo-actions .hero-poopo-ar-entry{min-height:42px;padding:0 10px}
    }
  


  /* NarraSpace Smart Status UI: compact, quiet, non-blocking. */
  #toast.toast{
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:calc(max(14px,env(safe-area-inset-bottom)) + 58px)!important;
    z-index:2140!important;
    width:max-content!important;
    max-width:min(460px,calc(100vw - 28px))!important;
    min-height:48px;
    margin:0!important;
    padding:9px 13px 9px 9px!important;
    border-radius:16px!important;
    border:1px solid rgba(255,255,255,.14)!important;
    background:rgba(14,37,27,.94)!important;
    color:#fffdf4!important;
    box-shadow:0 14px 38px rgba(0,0,0,.24)!important;
    display:grid!important;
    grid-template-columns:32px minmax(0,1fr)!important;
    align-items:center!important;
    gap:10px!important;
    font-weight:700!important;
    line-height:1.25!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate(-50%,10px) scale(.985)!important;
    transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1),visibility .18s linear!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
  }
  #toast.toast.show{opacity:1!important;visibility:visible!important;transform:translate(-50%,0) scale(1)!important;}
  #toast .ns-toast-icon{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.09);color:#f4c430;}
  #toast[data-kind="success"] .ns-toast-icon{color:#b9ebbd;background:rgba(115,190,124,.14)}
  #toast[data-kind="warning"] .ns-toast-icon{color:#ffd778;background:rgba(244,196,48,.13)}
  #toast .ns-toast-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.15;stroke-linecap:round;stroke-linejoin:round}
  #toast .ns-toast-spinner{width:15px;height:15px;border:2px solid rgba(255,255,255,.28);border-top-color:#f4c430;border-radius:50%;animation:nsToastSpin .82s linear infinite}
  #toast .ns-toast-copy{min-width:0;display:grid;gap:2px;text-align:left}
  #toast .ns-toast-copy strong{font-size:.88rem;font-weight:850;letter-spacing:-.01em;white-space:normal}
  #toast .ns-toast-copy small{font-size:.76rem;font-weight:650;color:rgba(255,253,244,.72);line-height:1.3}
  @keyframes nsToastSpin{to{transform:rotate(360deg)}}

  #network-status.network-status{
    left:50%!important;
    right:auto!important;
    bottom:max(14px,env(safe-area-inset-bottom))!important;
    top:auto!important;
    transform:translateX(-50%);
    z-index:2130!important;
    width:max-content!important;
    max-width:min(430px,calc(100vw - 28px))!important;
    min-height:44px;
    padding:8px 9px 8px 10px!important;
    border:1px solid rgba(255,255,255,.14)!important;
    border-radius:15px!important;
    background:rgba(20,34,27,.94)!important;
    color:#fffdf4!important;
    box-shadow:0 12px 34px rgba(0,0,0,.22)!important;
    gap:9px!important;
    font-size:.78rem!important;
    font-weight:750!important;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }
  #network-status .network-status-icon{width:28px;height:28px;border-radius:10px;display:grid;place-items:center;background:rgba(244,196,48,.12);color:#ffd778;flex:0 0 auto}
  #network-status .network-status-icon svg,#network-status .network-status-retry svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  #network-status #network-status-text{min-width:0;line-height:1.25}
  #network-status .network-status-retry{margin-left:3px!important;width:32px;height:32px;min-width:32px;padding:0!important;border:0!important;border-radius:10px!important;background:rgba(255,255,255,.09)!important;color:#fffdf4!important;display:grid;place-items:center;cursor:pointer}
  #network-status .network-status-retry:focus-visible{outline:2px solid #f4c430;outline-offset:2px}

  @media(max-width:620px){
    #toast.toast{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 54px)!important;max-width:calc(100vw - 20px)!important;min-height:44px;padding:8px 11px 8px 8px!important;border-radius:14px!important;grid-template-columns:30px minmax(0,1fr)!important;gap:8px!important;}
    #toast .ns-toast-icon{width:30px;height:30px;border-radius:10px}
    #toast .ns-toast-copy strong{font-size:.84rem}
    #toast .ns-toast-copy small{font-size:.72rem}
    #network-status.network-status{bottom:max(10px,env(safe-area-inset-bottom))!important;max-width:calc(100vw - 20px)!important;font-size:.74rem!important;}
  }
  @media(orientation:landscape) and (max-height:560px){
    #toast.toast{bottom:calc(max(8px,env(safe-area-inset-bottom)) + 48px)!important;min-height:40px;padding-top:6px!important;padding-bottom:6px!important;}
    #network-status.network-status{bottom:max(8px,env(safe-area-inset-bottom))!important;min-height:40px;padding-top:6px!important;padding-bottom:6px!important;}
  }
  @media(prefers-reduced-motion:reduce){#toast.toast{transition:none!important}#toast .ns-toast-spinner{animation:none!important}}



  /* 09cc — NarraSpace About: editorial, content-first, no template/SaaS card treatment. */
  body:not(.admin-mode) #about{
    padding-top:clamp(28px,4vw,54px)!important;
    padding-bottom:clamp(42px,6vw,78px)!important;
  }
  body:not(.admin-mode) #about .about-story-shell{
    max-width:1120px;
    margin:0 auto;
    gap:clamp(34px,5vw,58px)!important;
  }
  body:not(.admin-mode) #about .about-main-card{
    min-height:clamp(300px,34vw,410px);
    display:grid;
    align-items:center;
    padding:clamp(32px,6vw,72px)!important;
    border-radius:28px;
    border:1px solid rgba(255,255,255,.12);
    background:
      linear-gradient(90deg,rgba(8,42,25,.97) 0%,rgba(9,44,27,.91) 42%,rgba(9,42,26,.58) 72%,rgba(9,38,24,.34) 100%),
      var(--about-graphic-image),
      linear-gradient(135deg,#0d3823,#274d31)!important;
    background-size:cover,cover,cover!important;
    background-position:center,center,center!important;
    box-shadow:0 26px 62px rgba(31,54,34,.14)!important;
    isolation:isolate;
  }
  body:not(.admin-mode) #about .about-main-card::before,
  body:not(.admin-mode) #about .about-main-card::after{display:none!important;}
  body:not(.admin-mode) #about .about-copy-band{
    width:min(650px,100%);
    padding:0!important;
    gap:16px!important;
    justify-items:start!important;
    text-align:left!important;
  }
  body:not(.admin-mode) #about .about-meta-pill{
    min-height:32px!important;
    padding:7px 12px!important;
    border:1px solid rgba(255,255,255,.14)!important;
    background:rgba(255,252,243,.94)!important;
    color:#24462e!important;
    border-radius:999px!important;
    box-shadow:none!important;
    font-size:.72rem!important;
    letter-spacing:.01em;
  }
  body:not(.admin-mode) #about .about-main-card h2{
    max-width:11ch;
    margin:2px 0 0!important;
    color:#fffdf5!important;
    font-size:clamp(2.35rem,5.4vw,4.45rem)!important;
    line-height:.98!important;
    letter-spacing:-.045em!important;
    font-weight:850!important;
    text-align:left!important;
    text-shadow:0 3px 20px rgba(0,0,0,.18)!important;
  }
  body:not(.admin-mode) #about .about-main-card p{
    max-width:570px!important;
    margin:0!important;
    color:rgba(255,253,245,.78)!important;
    font-size:clamp(.95rem,1.3vw,1.08rem)!important;
    line-height:1.6!important;
    font-weight:600!important;
    text-align:left!important;
    text-shadow:none!important;
  }
  body:not(.admin-mode) #about .about-cta-row{
    margin-top:6px!important;
    justify-content:flex-start!important;
  }
  body:not(.admin-mode) #about .about-main-card .btn-light{
    min-height:48px;
    padding:12px 18px!important;
    border:0!important;
    border-radius:13px!important;
    background:color-mix(in srgb,var(--why-accent-color) 82%,#f4c430 18%)!important;
    color:#173b2a!important;
    box-shadow:0 12px 26px rgba(0,0,0,.14)!important;
    font-size:.84rem!important;
    font-weight:900!important;
  }
  body:not(.admin-mode) #about .about-main-card .btn-light:hover{
    transform:translateY(-1px);
    box-shadow:0 15px 30px rgba(0,0,0,.18)!important;
  }

  body:not(.admin-mode) #about .about-lower-band{
    max-width:none!important;
    margin:0!important;
    padding:0 clamp(6px,1.2vw,14px)!important;
    display:grid!important;
    grid-template-columns:minmax(230px,.78fr) minmax(0,1.55fr)!important;
    align-items:start!important;
    gap:clamp(34px,6vw,82px)!important;
  }
  body:not(.admin-mode) #about .about-lower-head{
    max-width:360px!important;
    margin:0!important;
    display:grid!important;
    justify-items:start!important;
    text-align:left!important;
    gap:9px!important;
  }
  body:not(.admin-mode) #about .about-editorial-kicker{
    color:#8d6b13;
    font-size:.7rem;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
  }
  body:not(.admin-mode) #about #why-title{
    margin:0!important;
    color:#183d27!important;
    font-size:clamp(1.75rem,3vw,2.65rem)!important;
    line-height:1.05!important;
    letter-spacing:-.035em!important;
    font-weight:820!important;
  }
  body:not(.admin-mode) #about #why-subtitle{
    max-width:330px!important;
    margin:2px 0 0!important;
    color:#5e6d5b!important;
    font-size:.94rem!important;
    line-height:1.55!important;
    font-weight:620!important;
  }
  body:not(.admin-mode) #about .about-editorial-note{
    margin-top:7px;
    color:#274a31;
    font-size:.78rem;
    font-weight:850;
    letter-spacing:.015em;
  }
  body:not(.admin-mode) #about .why-choose-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:0!important;
    border-top:1px solid rgba(38,72,44,.14);
  }
  body:not(.admin-mode) #about .why-choose-card{
    position:relative;
    min-height:118px!important;
    margin:0!important;
    padding:21px 22px!important;
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:14px!important;
    row-gap:3px!important;
    align-content:center!important;
    border:0!important;
    border-bottom:1px solid rgba(38,72,44,.14)!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
    transform:none!important;
    animation:none!important;
    transition:background .18s ease!important;
  }
  body:not(.admin-mode) #about .why-choose-card:nth-child(odd){border-right:1px solid rgba(38,72,44,.14)!important;}
  body:not(.admin-mode) #about .why-choose-card::before,
  body:not(.admin-mode) #about .why-choose-card::after{display:none!important;}
  body:not(.admin-mode) #about .why-choose-card:hover{
    transform:none!important;
    background:rgba(54,87,58,.035)!important;
    box-shadow:none!important;
  }
  body:not(.admin-mode) #about .why-choose-card .feature-icon{
    grid-row:1 / 3;
    align-self:center;
    width:42px!important;
    height:42px!important;
    margin:0!important;
    border-radius:13px!important;
    background:#294d32!important;
    color:#fffdf5!important;
    box-shadow:none!important;
  }
  body:not(.admin-mode) #about .why-choose-card .feature-icon svg{width:18px!important;height:18px!important;}
  body:not(.admin-mode) #about .why-choose-card .feature-title{
    align-self:end;
    margin:0!important;
    color:#1f3e28!important;
    font-size:.96rem!important;
    line-height:1.2!important;
    font-weight:850!important;
  }
  body:not(.admin-mode) #about .why-choose-card .feature-desc{
    align-self:start;
    margin:0!important;
    color:#667362!important;
    font-size:.76rem!important;
    line-height:1.4!important;
    display:block!important;
    overflow:visible!important;
    -webkit-line-clamp:unset!important;
  }
  @media(max-width:820px){
    body:not(.admin-mode) #about .about-lower-band{
      grid-template-columns:1fr!important;
      gap:26px!important;
    }
    body:not(.admin-mode) #about .about-lower-head{max-width:520px!important;}
    body:not(.admin-mode) #about #why-subtitle{max-width:470px!important;}
  }
  @media(max-width:620px){
    body:not(.admin-mode) #about{padding-top:20px!important;padding-bottom:46px!important;}
    body:not(.admin-mode) #about .about-story-shell{gap:30px!important;}
    body:not(.admin-mode) #about .about-main-card{
      min-height:360px;
      padding:28px 22px!important;
      border-radius:22px!important;
      background:
        linear-gradient(180deg,rgba(8,42,25,.94) 0%,rgba(8,42,25,.86) 58%,rgba(8,42,25,.62) 100%),
        var(--about-graphic-image),
        linear-gradient(135deg,#0d3823,#274d31)!important;
    }
    body:not(.admin-mode) #about .about-main-card h2{
      max-width:10ch;
      font-size:clamp(2.25rem,12vw,3.35rem)!important;
    }
    body:not(.admin-mode) #about .about-main-card p{max-width:31ch!important;font-size:.92rem!important;}
    body:not(.admin-mode) #about .why-choose-grid{grid-template-columns:1fr!important;}
    body:not(.admin-mode) #about .why-choose-card:nth-child(odd){border-right:0!important;}
    body:not(.admin-mode) #about .why-choose-card{min-height:94px!important;padding:16px 4px!important;grid-template-columns:40px minmax(0,1fr)!important;column-gap:12px!important;}
    body:not(.admin-mode) #about .why-choose-card .feature-icon{width:38px!important;height:38px!important;border-radius:12px!important;}
  }
  @media(orientation:landscape) and (max-height:560px){
    body:not(.admin-mode) #about .about-main-card{min-height:280px;padding:26px 30px!important;}
    body:not(.admin-mode) #about .about-main-card h2{font-size:clamp(2rem,7vw,3rem)!important;}
  }



  /* Contact: intent first, progressive disclosure, NarraSpace-native. */
  body:not(.admin-mode) #contact.closing-contact{
    padding-top:clamp(56px,7vw,96px)!important;
    padding-bottom:clamp(64px,8vw,108px)!important;
  }
  body:not(.admin-mode) #contact .contact-section-head{
    width:min(760px,calc(100% - 32px));margin:0 auto clamp(28px,4vw,42px)!important;text-align:center;
  }
  body:not(.admin-mode) #contact .contact-section-head .section-title{max-width:14ch;margin-inline:auto!important;}
  body:not(.admin-mode) #contact .contact-section-head .section-subtitle{font-size:clamp(.96rem,1.4vw,1.08rem)!important;line-height:1.5!important;}
  body:not(.admin-mode) #contact .contact-paths{
    width:min(1120px,calc(100% - 40px));margin:0 auto!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;
  }
  body:not(.admin-mode) #contact .contact-path{
    min-height:118px!important;padding:18px!important;grid-template-columns:42px minmax(0,1fr) 18px!important;align-items:start!important;border-radius:20px!important;
    background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:none!important;
  }
  body:not(.admin-mode) #contact .contact-path:hover,
  body:not(.admin-mode) #contact .contact-path.active{
    background:rgba(255,255,255,.09)!important;border-color:rgba(244,205,103,.45)!important;transform:translateY(-2px)!important;
  }
  body:not(.admin-mode) #contact .contact-path strong{font-size:.96rem!important;}
  body:not(.admin-mode) #contact .contact-path small{font-size:.78rem!important;line-height:1.38!important;}
  body:not(.admin-mode) #contact .contact-path-icon{width:42px!important;height:42px!important;border-radius:13px!important;}
  body:not(.admin-mode) #contact .contact-toggle-row{display:none!important;}

  body:not(.admin-mode) #contact.contact-collapsed .contact-intake{display:none!important;}
  body:not(.admin-mode) #contact .contact-intake{
    width:min(760px,calc(100% - 40px))!important;margin:30px auto 0!important;display:block!important;border:0!important;border-radius:26px!important;overflow:visible!important;background:transparent!important;animation:contactReveal .24s ease both!important;
  }
  body:not(.admin-mode) #contact .contact-form{
    width:100%!important;padding:clamp(22px,3vw,34px)!important;border-radius:26px!important;background:#fffdf6!important;color:#173b2a!important;border:1px solid rgba(255,255,255,.64)!important;box-shadow:0 22px 64px rgba(0,0,0,.2)!important;
  }
  body:not(.admin-mode) #contact .contact-form-heading{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:18px!important;margin-bottom:24px!important;}
  body:not(.admin-mode) #contact .contact-form-heading-copy{display:flex;align-items:flex-start;gap:13px;min-width:0;}
  body:not(.admin-mode) #contact .contact-selected-icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;background:#eef4e8;color:#315b3a;}
  body:not(.admin-mode) #contact .contact-selected-icon svg{width:19px;height:19px;}
  body:not(.admin-mode) #contact .contact-form-kicker{display:block;margin:1px 0 4px;color:#7b8b72;font-size:.72rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;}
  body:not(.admin-mode) #contact .contact-form-heading h3{font-size:clamp(1.35rem,2.4vw,1.8rem)!important;line-height:1.08!important;margin:0 0 6px!important;color:#173b2a!important;}
  body:not(.admin-mode) #contact .contact-form-heading p{margin:0!important;max-width:480px;color:#66725d!important;font-size:.88rem!important;line-height:1.45!important;}
  body:not(.admin-mode) #contact .contact-change-reason{border:1px solid #dbe4d5;background:#f7f9f2;color:#315b3a;border-radius:999px;min-height:38px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.76rem;font-weight:800;cursor:pointer;flex:0 0 auto;}
  body:not(.admin-mode) #contact .contact-change-reason svg{width:15px;height:15px;}
  body:not(.admin-mode) #contact .contact-form-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:15px!important;}
  body:not(.admin-mode) #contact .form-group{margin:0!important;}
  body:not(.admin-mode) #contact .contact-collaboration-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;}
  body:not(.admin-mode) #contact .contact-collaboration-fields[hidden]{display:none!important;}
  body:not(.admin-mode) #contact .contact-form label{display:block;margin:0 0 7px!important;color:#263f2e;font-size:.82rem!important;font-weight:850!important;}
  body:not(.admin-mode) #contact .contact-optional{color:#859180;font-size:.74rem;font-weight:650;}
  body:not(.admin-mode) #contact .contact-form input,
  body:not(.admin-mode) #contact .contact-form select,
  body:not(.admin-mode) #contact .contact-form textarea{border:1px solid #d4dfcf!important;background:#fff!important;color:#173b2a!important;border-radius:14px!important;box-shadow:none!important;}
  body:not(.admin-mode) #contact .contact-form input:focus,
  body:not(.admin-mode) #contact .contact-form select:focus,
  body:not(.admin-mode) #contact .contact-form textarea:focus{outline:none!important;border-color:#6e916f!important;box-shadow:0 0 0 4px rgba(54,87,58,.10)!important;}
  body:not(.admin-mode) #contact #contact-message{min-height:150px!important;resize:vertical;}
  body:not(.admin-mode) #contact .contact-character-count{margin-top:5px!important;color:#8b9688!important;}
  body:not(.admin-mode) #contact .contact-privacy-note{margin:16px 0 14px!important;padding:0!important;border:0!important;background:transparent!important;color:#788575!important;font-size:.78rem!important;justify-content:flex-start!important;}
  body:not(.admin-mode) #contact .contact-submit-row{display:block!important;margin:0!important;}
  body:not(.admin-mode) #contact .contact-submit-row .btn-primary{width:100%!important;min-height:50px!important;border-radius:15px!important;background:#173b2a!important;color:#fffdf4!important;}
  body:not(.admin-mode) #contact .contact-success-card{min-height:310px!important;border-radius:20px!important;background:#f7faF3!important;border:1px solid #dbe6d7!important;}

  @media(max-width:980px){
    body:not(.admin-mode) #contact .contact-paths{grid-template-columns:repeat(2,minmax(0,1fr))!important;width:min(720px,calc(100% - 32px))!important;}
    body:not(.admin-mode) #contact .contact-path{min-height:104px!important;}
  }
  @media(max-width:620px){
    body:not(.admin-mode) #contact.closing-contact{padding-top:48px!important;padding-bottom:64px!important;}
    body:not(.admin-mode) #contact .contact-section-head{width:calc(100% - 28px)!important;margin-bottom:22px!important;}
    body:not(.admin-mode) #contact .contact-section-head .section-title{font-size:clamp(2rem,10vw,2.7rem)!important;line-height:1.02!important;}
    body:not(.admin-mode) #contact .contact-paths{grid-template-columns:1fr!important;width:calc(100% - 24px)!important;gap:9px!important;}
    body:not(.admin-mode) #contact .contact-path{min-height:0!important;padding:14px 15px!important;grid-template-columns:40px minmax(0,1fr) 18px!important;align-items:center!important;border-radius:17px!important;}
    body:not(.admin-mode) #contact .contact-path-icon{width:40px!important;height:40px!important;border-radius:12px!important;}
    body:not(.admin-mode) #contact .contact-path > span:nth-child(2){gap:2px!important;}
    body:not(.admin-mode) #contact .contact-path strong{font-size:.92rem!important;}
    body:not(.admin-mode) #contact .contact-path small{font-size:.72rem!important;line-height:1.3!important;}
    body:not(.admin-mode) #contact .contact-intake{width:calc(100% - 20px)!important;margin-top:18px!important;}
    body:not(.admin-mode) #contact .contact-form{padding:18px 16px 20px!important;border-radius:22px!important;}
    body:not(.admin-mode) #contact .contact-form-heading{gap:10px!important;margin-bottom:18px!important;}
    body:not(.admin-mode) #contact .contact-selected-icon{width:36px;height:36px;border-radius:12px;}
    body:not(.admin-mode) #contact .contact-form-heading h3{font-size:1.35rem!important;}
    body:not(.admin-mode) #contact .contact-form-heading p{font-size:.8rem!important;}
    body:not(.admin-mode) #contact .contact-change-reason{width:38px;height:38px;padding:0!important;justify-content:center;}
    body:not(.admin-mode) #contact .contact-change-reason span{display:none!important;}
    body:not(.admin-mode) #contact .contact-form-grid{grid-template-columns:1fr!important;gap:13px!important;}
    body:not(.admin-mode) #contact .contact-form .form-span-2{grid-column:auto!important;}
    body:not(.admin-mode) #contact .contact-collaboration-fields{grid-template-columns:1fr!important;gap:13px!important;}
    body:not(.admin-mode) #contact #contact-message{min-height:132px!important;}
  }



  .action-icon-only{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0!important;}
  .action-icon-only .action-label{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;}
  .story-card-icon-action.action-icon-only,
  .music-card-play.action-icon-only,
  .music-play-action.action-icon-only,
  .film-launch-play.action-icon-only,
  .music-surprise-btn.action-icon-only,
  #music-related-actions .action-icon-only{padding-inline:0!important;min-width:44px!important;width:44px!important;}
  .film-launch-actions .film-launch-play.action-icon-only{min-width:48px!important;width:48px!important;}
  .music-feature-actions .music-play-action.action-icon-only{min-width:46px!important;width:46px!important;}
  #music-related-actions .action-icon-only{min-width:42px!important;width:42px!important;}
  .action-icon-only i{margin:0!important;}



  body:not(.admin-mode) #stories-container .archive-loading-grid{
    grid-column:1/-1;
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(12px,1.4vw,20px);
  }
  body:not(.admin-mode) #stories-container .archive-loading-card{
    position:relative;
    overflow:hidden;
    min-height:clamp(210px,27vw,340px);
    border-radius:18px;
    background:linear-gradient(145deg,#e7eadf,#dfe5d8);
    border:1px solid rgba(39,71,49,.08);
  }
  body:not(.admin-mode) #stories-container .archive-loading-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 45%,rgba(22,48,31,.14));
  }
  body:not(.admin-mode) #stories-container .archive-loading-shimmer{
    position:absolute;
    inset:0;
    background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.46) 50%,transparent 62%);
    transform:translateX(-100%);
    animation:narraspaceArchiveShimmer 1.25s ease-in-out infinite;
  }
  body:not(.admin-mode) #stories-container .archive-loading-line{
    position:absolute;
    z-index:1;
    left:18px;
    bottom:18px;
    width:38%;
    height:8px;
    border-radius:999px;
    background:rgba(23,59,42,.16);
  }
  body:not(.admin-mode) #stories-container .archive-loading-line.wide{
    bottom:34px;
    width:64%;
    height:12px;
  }
  @keyframes narraspaceArchiveShimmer{to{transform:translateX(100%)}}
  @media(max-width:700px){
    body:not(.admin-mode) #stories-container .archive-loading-grid{grid-template-columns:1fr;}
    body:not(.admin-mode) #stories-container .archive-loading-card{min-height:220px;}
    body:not(.admin-mode) #stories-container .archive-loading-card:nth-child(n+3){display:none;}
  }
  @media(prefers-reduced-motion:reduce){
    body:not(.admin-mode) #stories-container .archive-loading-shimmer{animation:none;display:none;}
  }



  /* NarraSpace Audience Guide v2 — mature access gate + touch-safe controls; text + icon always accompany color. */
  .audience-guide-badge{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:5px 8px;border:1px solid currentColor;border-radius:999px;font-size:.62rem;font-weight:900;line-height:1;letter-spacing:.015em;white-space:nowrap}
  .audience-guide-badge svg{width:12px;height:12px;flex:0 0 auto}
  .audience-guide-badge.audience-all{color:#2f7240;background:rgba(71,139,84,.12);border-color:rgba(71,139,84,.34)}
  .audience-guide-badge.audience-guidance{color:#9a5f10;background:rgba(205,134,36,.12);border-color:rgba(205,134,36,.38)}
  .audience-guide-badge.audience-mature{color:#9d3838;background:rgba(180,75,75,.12);border-color:rgba(180,75,75,.4)}
  .resource-badge.audience-guide-badge{min-height:22px;padding:4px 7px;font-size:.58rem;text-transform:none}
  body:not(.admin-mode) .storybook-card .resource-badge.audience-guide-badge{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  body:not(.admin-mode) .storybook-card .resource-badge.audience-guide-badge.audience-all{color:#e7ffe9;background:rgba(28,87,44,.72);border-color:rgba(188,239,197,.4)}
  body:not(.admin-mode) .storybook-card .resource-badge.audience-guide-badge.audience-guidance{color:#fff0d4;background:rgba(133,79,13,.76);border-color:rgba(242,193,120,.42)}
  body:not(.admin-mode) .storybook-card .resource-badge.audience-guide-badge.audience-mature{color:#ffe6e6;background:rgba(119,38,38,.78);border-color:rgba(239,166,166,.4)}
  .audience-meta-chip{display:inline-flex;align-items:center;gap:6px}
  .audience-meta-chip svg{width:13px;height:13px}
  .audience-note-chip{display:inline-flex;align-items:center;min-height:24px;padding:5px 8px;border:1px solid rgba(255,255,255,.14);border-radius:999px;font-size:.62rem;font-weight:800}
  .music-card-audience{position:absolute;top:9px;left:9px;z-index:3;max-width:calc(100% - 58px)}
  .music-card-audience .audience-guide-badge{max-width:100%;overflow:hidden;text-overflow:ellipsis;background:rgba(9,14,11,.78);color:#fff;border-color:rgba(255,255,255,.26);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
  .music-feature-audience{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0 2px}
  #music-player-moods .audience-guide-badge{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08)}
  #music-player-moods .audience-guide-badge.audience-all{color:#dff7e2;border-color:rgba(132,215,147,.38)}
  #music-player-moods .audience-guide-badge.audience-guidance{color:#ffe5b8;border-color:rgba(237,181,92,.42)}
  #music-player-moods .audience-guide-badge.audience-mature{color:#ffd5d5;border-color:rgba(226,120,120,.42)}
  .film-launch-meta .audience-guide-badge,.ns09z-story-meta .audience-guide-badge{background:rgba(10,14,11,.64);color:#fff;border-color:rgba(255,255,255,.26)}
  .mobile-library-pick-audience{position:absolute;top:8px;right:8px;z-index:3;max-width:min(44%,92px)}
  .mobile-library-pick-audience .audience-guide-badge{min-height:20px;max-width:100%;padding:4px 6px;background:rgba(8,13,10,.78);color:#fff;border-color:rgba(255,255,255,.24);font-size:.5rem;gap:4px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .mobile-library-pick-audience .audience-guide-badge svg{width:10px;height:10px}
  .mobile-library-pick-audience .audience-guide-badge span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .phase8b-audience{margin-top:8px}

  .audience-gate-backdrop{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px;background:rgba(7,11,8,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);isolation:isolate;pointer-events:auto;overscroll-behavior:contain}
  .audience-gate-backdrop[hidden]{display:none!important}
  .audience-gate-dialog{width:min(540px,100%);max-height:min(88dvh,760px);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:#f7f6f0;color:#172019;box-shadow:0 28px 80px rgba(0,0,0,.34);outline:none;touch-action:pan-y}
  .audience-gate-bar{height:6px;background:#a33f3f}
  .audience-gate-body{padding:28px}
  .audience-gate-kicker{display:inline-flex;align-items:center;gap:7px;color:#943d3d;font-size:.72rem;font-weight:950;letter-spacing:.09em;text-transform:uppercase}
  .audience-gate-kicker svg{width:17px;height:17px}
  .audience-gate-dialog h2{margin:9px 0 8px;color:#1b261d;font-size:clamp(1.55rem,5vw,2.25rem);line-height:1.04}
  .audience-gate-title{margin:0 0 16px;color:#5d675f;font-size:.88rem;font-weight:800}
  .audience-gate-copy{margin:0;color:#3d4940;font-size:.92rem;line-height:1.58}
  .audience-gate-meta{display:flex;flex-wrap:wrap;gap:7px;margin:17px 0 0}
  .audience-gate-meta span{display:inline-flex;align-items:center;min-height:28px;padding:6px 9px;border:1px solid #d9d8d0;border-radius:999px;background:#fff;font-size:.7rem;font-weight:850}
  .audience-gate-confirmation{display:grid;gap:14px;margin-top:20px;padding:16px;border:1px solid #dddcd4;border-radius:14px;background:#fff}
  .audience-gate-dob-wrap{display:grid;gap:8px}
  .audience-gate-dob-wrap>span{font-size:.75rem;font-weight:900;color:#27342a}
  .audience-gate-dob-wrap input{width:100%;min-height:48px;border:1px solid #cfd4cc;border-radius:10px;background:#fbfcf9;color:#172019;padding:10px 12px;font:inherit;font-size:1rem;line-height:1.2;touch-action:manipulation}
  .audience-gate-dob-wrap input:focus{outline:3px solid rgba(143,58,58,.16);border-color:#8f3a3a}
  .audience-gate-dob-wrap small{color:#687168;font-size:.68rem;line-height:1.45}
  .audience-gate-session{display:flex;align-items:center;gap:9px;min-height:42px;padding:10px 12px;border:1px solid #bfd4c3;border-radius:10px;background:#f2f8f3;color:#315b39;font-size:.76rem;font-weight:850}
  .audience-gate-session svg{width:17px;height:17px;flex:0 0 auto}
  .audience-gate-status{min-height:20px;margin:0;color:#677168;font-size:.72rem;line-height:1.45}
  .audience-gate-status[data-state="error"]{color:#983737;font-weight:850}
  .audience-gate-status[data-state="success"]{color:#386443;font-weight:850}
  .audience-gate-acknowledge{display:grid;grid-template-columns:22px 1fr;align-items:start;gap:10px;min-height:48px;padding:11px 12px;border:1px solid #d7d9d4;border-radius:10px;background:#f8f9f6;cursor:pointer;touch-action:manipulation}
  .audience-gate-acknowledge input{width:20px;height:20px;margin:1px 0 0;accent-color:#8f3a3a;cursor:pointer}
  .audience-gate-acknowledge span{color:#344036;font-size:.78rem;font-weight:760;line-height:1.45}
  .audience-gate-actions{display:flex;gap:9px;margin-top:20px}
  .audience-gate-actions button{min-height:48px;border-radius:10px;padding:11px 15px;font:inherit;font-size:.82rem;font-weight:900;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .audience-gate-back{flex:1;border:1px solid #cfd4cc;background:#fff;color:#28332a}
  .audience-gate-continue{flex:1.35;border:1px solid #743131;background:#8f3a3a;color:#fff}
  .audience-gate-continue:disabled{cursor:not-allowed;opacity:.42;filter:saturate(.6)}
  @media(max-width:900px),(pointer:coarse){.audience-gate-backdrop{align-items:end;padding:0}.audience-gate-dialog{width:100%;max-height:92dvh;border-radius:20px 20px 0 0}.audience-gate-body{padding:22px 18px max(22px,calc(env(safe-area-inset-bottom) + 16px))}.audience-gate-dob-wrap input{min-height:52px;font-size:16px}.audience-gate-acknowledge{min-height:54px;padding:13px}.audience-gate-actions button{min-height:52px;font-size:.88rem}}
  @media(max-width:560px){.audience-guide-badge{font-size:.56rem}.audience-gate-dialog h2{font-size:1.65rem}.audience-gate-confirmation{padding:13px}.audience-gate-actions{flex-direction:column-reverse}.audience-gate-actions button{width:100%}}



/* P10 FINAL PUBLIC UX & VISUAL RESTRAINT
   Destinations use words; utilities use symbols. Public-only. */

/* P10C — one confident hero explanation, not several stacked explanations. */
body:not(.admin-mode) #home .notice-panel{display:none!important;}

/* P10C — remove the statistics dashboard from the public cultural experience. */
body:not(.admin-mode) #impact-highlight{display:none!important;}

/* P10C — quieter repeated section metadata; hierarchy comes from title + work. */
body:not(.admin-mode) #archive-gateways .archive-eyebrow,
body:not(.admin-mode) #stories .stories-section-eyebrow,
body:not(.admin-mode) #latest-spotlight .spotlight-label{
  letter-spacing:.055em!important;
  opacity:.82!important;
}
body:not(.admin-mode) #latest-spotlight .section-subtitle,
body:not(.admin-mode) #archive-gateways .archive-gateways-head p{
  max-width:620px!important;
}

/* P10A/B — destinations stay as words; decorative nav icons step out. */
body:not(.admin-mode) #nav-links .nav-link > i,
body:not(.admin-mode) #nav-links .nav-link > svg{display:none!important;}
body:not(.admin-mode) #nav-links .nav-link{gap:0!important;}

/* P10B/D — preview: words for primary actions, symbols for utilities. */
body:not(.admin-mode) #story-modal .document-actions .doc-action.action-utility{
  width:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  padding:0!important;
  border-radius:999px!important;
  justify-content:center!important;
  gap:0!important;
}
body:not(.admin-mode) #story-modal .document-actions .doc-action.action-utility > span{
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}
body:not(.admin-mode) #story-modal .document-actions .doc-action.action-utility svg{
  width:18px!important;height:18px!important;
}
body:not(.admin-mode) #story-modal .document-actions .doc-action.action-primary{
  min-height:40px!important;
  border-radius:999px!important;
}

/* P10B/D — listening room secondary actions become a quiet utility dock. */
body:not(.admin-mode) #music-player-modal .music-player-secondary{
  gap:8px!important;
  justify-content:center!important;
}
body:not(.admin-mode) #music-player-modal .music-player-secondary button{
  width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;
  padding:0!important;border-radius:999px!important;justify-content:center!important;gap:0!important;
}
body:not(.admin-mode) #music-player-modal .music-player-secondary button > span{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
body:not(.admin-mode) #music-player-modal .music-player-secondary button svg{
  width:18px!important;height:18px!important;
}

/* P10B — consistent utility icon language. */
body:not(.admin-mode) #story-modal .doc-action svg,
body:not(.admin-mode) #music-player-modal button svg,
body:not(.admin-mode) #contact .contact-path svg{
  stroke-width:2!important;
  vector-effect:non-scaling-stroke;
}

/* P10C/E — contact choices behave like compact routes, not feature cards. */
body:not(.admin-mode) #contact .contact-paths{
  gap:8px!important;
}
body:not(.admin-mode) #contact .contact-path{
  min-height:50px!important;
  padding:9px 12px!important;
  border-radius:14px!important;
  grid-template-columns:34px minmax(0,1fr) 18px!important;
  gap:10px!important;
}
body:not(.admin-mode) #contact .contact-path-icon{
  width:34px!important;height:34px!important;min-width:34px!important;border-radius:10px!important;
}
body:not(.admin-mode) #contact .contact-path span > strong{
  font-size:.82rem!important;
}
body:not(.admin-mode) #contact .contact-path span > small{
  display:none!important;
}
body:not(.admin-mode) #contact .contact-path-arrow{
  width:15px!important;height:15px!important;opacity:.58!important;
}

/* P10A — header beta is a status whisper, never a second brand. */
body:not(.admin-mode) #beta-brand-badge{
  padding:4px 7px!important;
  font-size:.59rem!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
  opacity:.78!important;
}

/* P10E — keep reflection vocabulary consistent in the public surface. */
body:not(.admin-mode) #review-modal .section-pill{
  letter-spacing:.04em!important;
}

/* Responsive restraint: utility buttons remain touch-safe without reintroducing words. */
@media(max-width:700px){
  body:not(.admin-mode) #story-modal .document-actions .doc-action.action-utility{
    width:42px!important;min-width:42px!important;min-height:42px!important;
  }
  body:not(.admin-mode) #music-player-modal .music-player-secondary button{
    width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
  }
  body:not(.admin-mode) #contact .contact-path{
    min-height:48px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body:not(.admin-mode) #story-modal .doc-action,
  body:not(.admin-mode) #music-player-modal button,
  body:not(.admin-mode) #contact .contact-path{transition:none!important;}
}



/* P10F v16 — Partners: compact editorial shelf on touch/mobile widths; desktop remains unchanged. */
@media (max-width: 820px) {
  body:not(.admin-mode) #links.closing-partners {
    padding-top: clamp(42px, 7vw, 58px) !important;
    padding-bottom: clamp(48px, 7vw, 66px) !important;
  }
  body:not(.admin-mode) #links .closing-section-head {
    margin-bottom: 24px !important;
    gap: 8px !important;
  }
  body:not(.admin-mode) #links .section-title {
    font-size: clamp(2.05rem, 7.6vw, 2.75rem) !important;
    line-height: .99 !important;
    letter-spacing: -.042em !important;
    max-width: 12ch !important;
  }
  body:not(.admin-mode) #links .section-subtitle {
    max-width: 32rem !important;
    font-size: .88rem !important;
    line-height: 1.5 !important;
  }
  body:not(.admin-mode) #links .portal-card {
    min-height: 176px !important;
    padding: 15px 58px 15px 14px !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 12px !important;
    border-radius: 18px !important;
    align-content: start !important;
  }
  body:not(.admin-mode) #links .portal-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 13px !important;
  }
  body:not(.admin-mode) #links .portal-icon img {
    padding: 6px !important;
  }
  body:not(.admin-mode) #links .portal-copy {
    min-width: 0 !important;
    height: auto !important;
    padding-right: 0 !important;
  }
  body:not(.admin-mode) #links .portal-category {
    margin-bottom: 5px !important;
    font-size: .57rem !important;
    line-height: 1.15 !important;
    letter-spacing: .065em !important;
    opacity: .9 !important;
  }
  body:not(.admin-mode) #links .portal-title {
    margin-bottom: 7px !important;
    font-size: .96rem !important;
    line-height: 1.18 !important;
  }
  body:not(.admin-mode) #links .portal-desc {
    display: -webkit-box !important;
    padding-right: 2px !important;
    font-size: .78rem !important;
    line-height: 1.42 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
  }
  body:not(.admin-mode) #links .portal-action {
    right: 13px !important;
    bottom: 13px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }
  body:not(.admin-mode) #links .portal-action svg {
    width: 16px !important;
    height: 16px !important;
  }
}

@media (max-width: 620px) {
  body:not(.admin-mode) #links .closing-section-head {
    justify-items: start !important;
    text-align: left !important;
    margin-left: 2px !important;
    margin-right: 2px !important;
  }
  body:not(.admin-mode) #links .section-title {
    font-size: clamp(2rem, 9.5vw, 2.55rem) !important;
    max-width: 10.5ch !important;
  }
  body:not(.admin-mode) #links .section-subtitle {
    max-width: 31rem !important;
    font-size: .84rem !important;
  }
  body:not(.admin-mode) #links .portal-grid {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: 15px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 3px 16vw 14px 2px !important;
    scroll-padding-inline: 2px !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    overscroll-behavior-inline: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body:not(.admin-mode) #links .portal-grid::-webkit-scrollbar { display: none !important; }
  body:not(.admin-mode) #links .portal-card {
    box-sizing: border-box !important;
    flex: 0 0 min(78vw, 336px) !important;
    width: auto !important;
    min-width: min(78vw, 336px) !important;
    min-height: 178px !important;
    padding: 15px 57px 15px 14px !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 12px !important;
    scroll-snap-align: start !important;
  }
  body:not(.admin-mode) #links .portal-desc {
    font-size: .77rem !important;
    line-height: 1.4 !important;
    -webkit-line-clamp: 3 !important;
  }
}

@media (max-width: 390px) {
  body:not(.admin-mode) #links .portal-grid { padding-right: 12vw !important; }
  body:not(.admin-mode) #links .portal-card {
    flex-basis: min(82vw, 304px) !important;
    min-width: min(82vw, 304px) !important;
    padding-right: 54px !important;
  }
  body:not(.admin-mode) #links .portal-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
  }
}



    /* Clean circular collaborator strip: no card box, no featured badge. */
    body:not(.admin-mode) #editorial-people {
      padding-block: clamp(38px, 5vw, 62px) !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-section-head {
      width: min(980px, calc(100vw - 40px)) !important;
      max-width: min(980px, calc(100vw - 40px)) !important;
      margin: 0 auto clamp(26px, 4vw, 40px) !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 9px !important;
      text-align: center !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-section-head .phase8b-eyebrow {
      margin: 0 !important;
      justify-self: center !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-section-head .section-title {
      margin: 2px 0 0 !important;
      text-align: center !important;
      font-size: clamp(2rem, 3.8vw, 3.2rem) !important;
      line-height: 1.04 !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-section-head > p {
      max-width: 760px !important;
      margin: 0 auto !important;
      text-align: center !important;
      line-height: 1.55 !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-view-all-people {
      width: auto !important;
      min-width: 118px !important;
      min-height: 40px !important;
      margin-top: 6px !important;
      padding: 0 14px !important;
      justify-content: center !important;
      gap: 9px !important;
      border-radius: 999px !important;
      font-size: .78rem !important;
      box-shadow: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-view-all-people svg {
      width: 16px !important;
      height: 16px !important;
    }

    body:not(.admin-mode) #editorial-people .phase8b-people-grid {
      width: min(1040px, calc(100vw - 40px)) !important;
      max-width: min(1040px, calc(100vw - 40px)) !important;
      margin: 0 auto !important;
      padding: 4px 0 10px !important;
      display: grid !important;
      grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
      gap: clamp(20px, 3vw, 44px) !important;
      align-items: start !important;
      justify-items: center !important;
      overflow: visible !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card,
    body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n) {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 172px !important;
      min-height: 194px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 11px !important;
      text-align: center !important;
      overflow: visible !important;
      cursor: pointer !important;
      transform: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card::before,
    body:not(.admin-mode) #editorial-people .phase8b-person-card::after,
    body:not(.admin-mode) #editorial-people .phase8b-featured-person {
      content: none !important;
      display: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card:hover,
    body:not(.admin-mode) #editorial-people .phase8b-person-card:focus-visible {
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      transform: none !important;
      outline: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-image {
      width: clamp(102px, 8.5vw, 122px) !important;
      height: clamp(102px, 8.5vw, 122px) !important;
      min-width: clamp(102px, 8.5vw, 122px) !important;
      min-height: clamp(102px, 8.5vw, 122px) !important;
      flex: 0 0 clamp(102px, 8.5vw, 122px) !important;
      border: 4px solid rgba(255, 253, 244, .98) !important;
      border-radius: 999px !important;
      background: linear-gradient(145deg, #eaf3e3, #fff1bd) !important;
      box-shadow: 0 11px 25px rgba(31, 58, 37, .16) !important;
      overflow: hidden !important;
      transition: transform .22s cubic-bezier(.2,.82,.22,1), box-shadow .22s ease, border-color .22s ease !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card:hover .phase8b-person-image,
    body:not(.admin-mode) #editorial-people .phase8b-person-card:focus-visible .phase8b-person-image {
      transform: translateY(-4px) scale(1.055) !important;
      border-color: rgba(246, 213, 101, .98) !important;
      box-shadow: 0 18px 34px rgba(31, 58, 37, .23), 0 0 0 5px rgba(246, 213, 101, .18) !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card:focus-visible .phase8b-person-image {
      outline: 3px solid rgba(54, 87, 58, .3) !important;
      outline-offset: 4px !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-copy {
      width: 100% !important;
      min-width: 0 !important;
      padding: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 5px !important;
      background: transparent !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-name {
      width: 100% !important;
      min-height: 2.35em !important;
      margin: 0 !important;
      color: #1e3e2b !important;
      font-size: clamp(.96rem, 1.15vw, 1.08rem) !important;
      font-weight: 900 !important;
      line-height: 1.18 !important;
      text-align: center !important;
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: clip !important;
      overflow-wrap: anywhere !important;
      display: flex !important;
      align-items: flex-start !important;
      justify-content: center !important;
      -webkit-line-clamp: unset !important;
      -webkit-box-orient: unset !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-role {
      width: 100% !important;
      min-height: 2.3em !important;
      color: #68794a !important;
      font-size: .7rem !important;
      font-weight: 900 !important;
      line-height: 1.25 !important;
      text-transform: uppercase !important;
      letter-spacing: .045em !important;
      white-space: normal !important;
      overflow: visible !important;
      display: block !important;
      -webkit-line-clamp: unset !important;
      -webkit-box-orient: unset !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-affiliation {
      width: 100% !important;
      color: #747d70 !important;
      font-size: .68rem !important;
      line-height: 1.3 !important;
      white-space: normal !important;
      overflow: visible !important;
      display: block !important;
      -webkit-line-clamp: unset !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-linked-works {
      display: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-placeholder {
      gap: 4px !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-placeholder svg {
      width: 27px !important;
      height: 27px !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-placeholder span {
      font-size: .8rem !important;
      line-height: 1 !important;
      letter-spacing: .08em !important;
    }

    @media (max-width: 1040px) and (min-width: 761px) {
      body:not(.admin-mode) #editorial-people .phase8b-people-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        max-width: 720px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n),
      body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n+4) {
        display: flex !important;
      }
    }
    @media (max-width: 760px) {
      body:not(.admin-mode) #editorial-people .phase8b-section-head {
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
        margin-bottom: 24px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-section-head .section-title {
        font-size: clamp(1.85rem, 9vw, 2.55rem) !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-view-all-people {
        width: auto !important;
        min-width: 112px !important;
        margin-top: 5px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-people-grid {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 4px 18px 16px !important;
        display: flex !important;
        gap: 24px !important;
        justify-items: initial !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory !important;
        scroll-padding-inline: 18px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-card,
      body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n),
      body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n+4) {
        display: flex !important;
        flex: 0 0 132px !important;
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
        min-height: 188px !important;
        scroll-snap-align: start !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-image {
        width: 96px !important;
        height: 96px !important;
        min-width: 96px !important;
        min-height: 96px !important;
        flex-basis: 96px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-name {
        font-size: .92rem !important;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      body:not(.admin-mode) #editorial-people .phase8b-person-image,
      body:not(.admin-mode) #editorial-people .phase8b-view-all-people {
        transition: none !important;
      }
    }
  


    /* Final collaborator refinement: compact spacing and centered copy directly below each circle. */
    body:not(.admin-mode) #editorial-people {
      padding-block: clamp(30px, 4vw, 46px) !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-section-head {
      margin-bottom: clamp(20px, 2.8vw, 28px) !important;
      gap: 7px !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-people-grid {
      width: min(980px, calc(100vw - 40px)) !important;
      max-width: min(980px, calc(100vw - 40px)) !important;
      padding: 2px 0 6px !important;
      gap: clamp(14px, 2.2vw, 28px) !important;
      align-items: start !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card,
    body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n) {
      max-width: 150px !important;
      min-height: 166px !important;
      gap: 0 !important;
      text-align: center !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-image {
      width: clamp(94px, 7.7vw, 108px) !important;
      height: clamp(94px, 7.7vw, 108px) !important;
      min-width: clamp(94px, 7.7vw, 108px) !important;
      min-height: clamp(94px, 7.7vw, 108px) !important;
      flex: 0 0 clamp(94px, 7.7vw, 108px) !important;
      margin: 0 auto 9px !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-copy {
      width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 3px !important;
      margin: 0 !important;
      padding: 0 !important;
      text-align: center !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-name {
      width: 100% !important;
      min-height: 2.28em !important;
      margin: 0 !important;
      padding: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      font-size: clamp(.92rem, 1.05vw, 1.02rem) !important;
      line-height: 1.14 !important;
      overflow: visible !important;
      overflow-wrap: anywhere !important;
      word-break: normal !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-role {
      width: 100% !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      display: block !important;
      text-align: center !important;
      color: #68794a !important;
      font-size: .69rem !important;
      font-weight: 900 !important;
      line-height: 1.22 !important;
      letter-spacing: .035em !important;
      overflow: visible !important;
      overflow-wrap: anywhere !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-affiliation {
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      text-align: center !important;
      font-size: .65rem !important;
      line-height: 1.22 !important;
    }

    @media (max-width: 1040px) and (min-width: 761px) {
      body:not(.admin-mode) #editorial-people .phase8b-people-grid {
        max-width: 650px !important;
        gap: 22px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-card,
      body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n) {
        max-width: 148px !important;
        min-height: 164px !important;
      }
    }

    @media (max-width: 760px) {
      body:not(.admin-mode) #editorial-people {
        padding-block: 28px 32px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-section-head {
        margin-bottom: 19px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-people-grid {
        padding: 2px 16px 12px !important;
        gap: 18px !important;
        scroll-padding-inline: 16px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-card,
      body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n),
      body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n+4) {
        flex: 0 0 116px !important;
        width: 116px !important;
        min-width: 116px !important;
        max-width: 116px !important;
        min-height: 154px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-image {
        width: 84px !important;
        height: 84px !important;
        min-width: 84px !important;
        min-height: 84px !important;
        flex-basis: 84px !important;
        margin-bottom: 8px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-name {
        min-height: 2.24em !important;
        font-size: .88rem !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-role {
        font-size: .64rem !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-affiliation {
        font-size: .61rem !important;
      }
    }
  


    /* Keep every collaborator name and category directly centered beneath its circle. */
    body:not(.admin-mode) #editorial-people .phase8b-person-card,
    body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n) {
      justify-content: flex-start !important;
      align-items: center !important;
      text-align: center !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-copy {
      width: min(132px, 100%) !important;
      max-width: 132px !important;
      margin-inline: auto !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      justify-items: center !important;
      align-items: start !important;
      align-content: start !important;
      text-align: center !important;
      gap: 3px !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-name,
    body:not(.admin-mode) #editorial-people .phase8b-person-role,
    body:not(.admin-mode) #editorial-people .phase8b-person-affiliation {
      width: 100% !important;
      max-width: 100% !important;
      margin-inline: auto !important;
      padding-inline: 0 !important;
      text-align: center !important;
      justify-self: center !important;
      align-self: start !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-name {
      display: grid !important;
      place-items: center !important;
      min-height: 2.28em !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-role,
    body:not(.admin-mode) #editorial-people .phase8b-person-affiliation {
      display: block !important;
    }
    @media (max-width: 760px) {
      body:not(.admin-mode) #editorial-people .phase8b-person-copy {
        width: min(112px, 100%) !important;
        max-width: 112px !important;
      }
    }
  


    /* Compact archive explorer: one connected heading, search, filters, and results row. */
    body:not(.admin-mode) #stories.section {
      padding-top: clamp(40px, 4vw, 62px) !important;
      padding-bottom: clamp(42px, 4.5vw, 68px) !important;
    }
    body:not(.admin-mode) #stories .stories-section-eyebrow {
      width: fit-content;
      min-height: 34px;
      margin: 0 auto 12px;
      padding: 7px 13px;
      border: 1px solid rgba(54, 87, 58, .15);
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: #49604b;
      background: rgba(255, 253, 247, .66);
      font-size: .74rem;
      font-weight: 900;
      line-height: 1;
      letter-spacing: .055em;
      text-transform: uppercase;
    }
    body:not(.admin-mode) #stories .stories-section-eyebrow i,
    body:not(.admin-mode) #stories .stories-section-eyebrow svg {
      width: 15px;
      height: 15px;
    }
    body:not(.admin-mode) #stories .section-title {
      max-width: 1050px;
      margin: 0 auto 10px !important;
      color: #273f2d !important;
      font-size: clamp(2.4rem, 3.65vw, 4.15rem) !important;
      line-height: 1.02 !important;
      text-align: center !important;
      text-wrap: balance;
    }
    body:not(.admin-mode) #stories .section-subtitle {
      max-width: 720px !important;
      margin: 0 auto clamp(22px, 2.4vw, 30px) !important;
      color: #60705f !important;
      font-size: clamp(.92rem, 1.05vw, 1.04rem) !important;
      line-height: 1.5 !important;
      text-align: center !important;
      text-wrap: balance;
    }
    body:not(.admin-mode) #stories .content-shelf-controls {
      width: min(980px, 100%) !important;
      max-width: 980px !important;
      margin: 0 auto clamp(22px, 2.5vw, 30px) !important;
      gap: 12px !important;
    }
    body:not(.admin-mode) #stories .shelf-search-row {
      display: block !important;
      width: 100% !important;
    }
    body:not(.admin-mode) #stories .shelf-search-shell {
      width: 100% !important;
      min-height: 56px !important;
      padding: 7px 9px 7px 17px !important;
      gap: 12px !important;
      border-color: rgba(54, 87, 58, .17) !important;
      background: rgba(255,255,255,.92) !important;
      box-shadow: 0 14px 34px rgba(43,64,38,.075) !important;
    }
    body:not(.admin-mode) #stories .shelf-search-shell input {
      width: 100% !important;
      font-size: .98rem !important;
      color: #263b2b !important;
      outline: none !important;
    }
    body:not(.admin-mode) #stories .shelf-search-clear {
      min-height: 40px !important;
      padding: 8px 15px !important;
      transition: opacity .18s ease, transform .18s ease, background .18s ease !important;
    }
    body:not(.admin-mode) #stories .shelf-search-shell:not(.has-query) .shelf-search-clear {
      display: none !important;
    }
    body:not(.admin-mode) #stories .story-type-meta-row {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      gap: 18px !important;
      align-items: center !important;
    }
    body:not(.admin-mode) #stories .story-type-toggle {
      justify-content: flex-start !important;
      gap: 9px !important;
    }
    body:not(.admin-mode) #stories .story-type-btn {
      min-height: 42px !important;
      padding: 9px 18px !important;
      border-width: 1px !important;
      font-size: .9rem !important;
      box-shadow: none !important;
    }
    body:not(.admin-mode) #stories .story-type-btn.active {
      box-shadow: 0 10px 24px rgba(43,64,38,.14) !important;
    }
    body:not(.admin-mode) #stories #stories-result-summary {
      min-width: max-content !important;
      justify-content: flex-end !important;
      color: #66725f !important;
      font-size: .82rem !important;
      line-height: 1.35 !important;
      text-align: right !important;
    }

    /* Reduce the unused dark area at the bottom of the static homepage hero on desktop. */
    @media (min-width: 821px) {
      body:not(.admin-mode) #home.hero.home-static-classic {
        min-height: clamp(680px, 78svh, 760px) !important;
        padding-top: clamp(42px, 4.8vw, 66px) !important;
        padding-bottom: clamp(48px, 5.2vw, 72px) !important;
      }
    }

    @media (max-width: 820px) {
      body:not(.admin-mode) #stories.section {
        padding-top: 30px !important;
        padding-bottom: 44px !important;
      }
      body:not(.admin-mode) #stories .stories-section-eyebrow {
        min-height: 31px;
        margin-bottom: 10px;
        padding: 6px 11px;
        font-size: .66rem;
      }
      body:not(.admin-mode) #stories .section-title {
        margin-bottom: 7px !important;
        font-size: clamp(2rem, 9.5vw, 3rem) !important;
        line-height: 1.04 !important;
      }
      body:not(.admin-mode) #stories .content-shelf-controls {
        gap: 9px !important;
        margin-bottom: 13px !important;
      }
      body:not(.admin-mode) #stories .shelf-search-shell {
        min-height: 50px !important;
        padding-left: 14px !important;
      }
      body:not(.admin-mode) #stories .story-type-meta-row {
        display: block !important;
      }
      body:not(.admin-mode) #stories .story-type-toggle {
        justify-content: center !important;
        gap: 7px !important;
      }
      body:not(.admin-mode) #stories .story-type-btn {
        min-height: 38px !important;
        padding: 8px 13px !important;
        font-size: .78rem !important;
      }
      body:not(.admin-mode) #stories #stories-result-summary {
        display: none !important;
      }
    }

    @media (max-width: 480px) {
      body:not(.admin-mode) #stories .story-type-toggle {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 100% !important;
      }
      body:not(.admin-mode) #stories .story-type-btn {
        width: 100% !important;
        padding-inline: 7px !important;
        white-space: normal !important;
      }
    }
  


    /* Compact NarraSpace archive engine. The original H2 remains available
       to screen readers and search engines, while the visible interface avoids
       repeating the hero and navigation language. */
    body:not(.admin-mode) #stories.section {
      position: relative !important;
      padding-top: clamp(26px, 3vw, 44px) !important;
      padding-bottom: clamp(40px, 4vw, 62px) !important;
    }

    body:not(.admin-mode) #stories .archive-semantic-title {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      margin: -1px !important;
      padding: 0 !important;
      overflow: hidden !important;
      clip: rect(0 0 0 0) !important;
      clip-path: inset(50%) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    body:not(.admin-mode) #stories .stories-section-eyebrow {
      width: fit-content !important;
      min-height: 32px !important;
      margin: 0 auto 10px !important;
      padding: 7px 13px !important;
      border-color: rgba(54, 87, 58, .16) !important;
      background: rgba(255, 253, 247, .74) !important;
      box-shadow: 0 7px 18px rgba(43, 64, 38, .035) !important;
    }

    body:not(.admin-mode) #stories .archive-engine-prompt {
      max-width: 760px;
      margin: 0 auto 5px;
      color: #263f2c;
      font-family: var(--heading-font);
      font-size: clamp(1.48rem, 2.25vw, 2.2rem);
      font-weight: 800;
      line-height: 1.13;
      text-align: center;
      text-wrap: balance;
    }

    body:not(.admin-mode) #stories .archive-engine-copy {
      max-width: 650px !important;
      margin: 0 auto clamp(15px, 1.8vw, 21px) !important;
      color: #667360 !important;
      font-size: clamp(.86rem, .95vw, .98rem) !important;
      line-height: 1.45 !important;
      text-align: center !important;
    }

    body:not(.admin-mode) #stories .archive-engine-controls {
      position: relative;
      width: min(980px, 100%) !important;
      max-width: 980px !important;
      margin: 0 auto clamp(18px, 2vw, 26px) !important;
      padding: clamp(15px, 1.7vw, 20px) !important;
      gap: 11px !important;
      overflow: hidden;
      border: 1px solid rgba(54, 87, 58, .13);
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(250,249,241,.78));
      box-shadow: 0 18px 42px rgba(43,64,38,.065);
    }

    body:not(.admin-mode) #stories .archive-engine-controls::before {
      content: '';
      position: absolute;
      top: 0;
      left: 22px;
      right: 22px;
      height: 3px;
      opacity: .58;
      background: radial-gradient(circle, rgba(193,151,40,.72) 1.3px, transparent 1.6px) 0 0 / 18px 3px repeat-x;
      pointer-events: none;
    }

    body:not(.admin-mode) #stories .shelf-search-shell {
      min-height: 52px !important;
      border-color: rgba(54,87,58,.15) !important;
      box-shadow: 0 9px 24px rgba(43,64,38,.055) !important;
    }

    body:not(.admin-mode) #stories .story-type-meta-row { gap: 14px !important; }
    body:not(.admin-mode) #stories .story-type-btn { min-height: 40px !important; padding: 8px 16px !important; }

    /* Mobile/tablet hero: remove the old viewport-height reserve that created
       a large empty field below the action buttons. Content now determines
       the banner height, with only intentional breathing room at the end. */
    @media (max-width: 820px) {
      body:not(.admin-mode) #home.hero.home-static-classic {
        min-height: 0 !important;
        height: auto !important;
        padding: clamp(26px, 5vw, 40px) clamp(16px, 4vw, 24px) clamp(34px, 7vw, 52px) !important;
        align-items: center !important;
      }
      body:not(.admin-mode) #home.hero.home-static-classic .hero-container {
        min-height: 0 !important;
        height: auto !important;
        margin: 0 auto !important;
      }
      body:not(.admin-mode) #stories.section { padding-top: 24px !important; padding-bottom: 40px !important; }
      body:not(.admin-mode) #stories .archive-engine-prompt { max-width: 19ch; margin-bottom: 4px; font-size: clamp(1.28rem, 5.8vw, 1.72rem); }
      body:not(.admin-mode) #stories .archive-engine-copy { max-width: 34ch !important; margin-bottom: 14px !important; font-size: .82rem !important; }
      body:not(.admin-mode) #stories .archive-engine-controls {
        width: 100% !important;
        padding: 13px !important;
        gap: 9px !important;
        border-radius: 19px;
        box-shadow: 0 12px 28px rgba(43,64,38,.055);
      }
      body:not(.admin-mode) #stories .archive-engine-controls::before { left: 16px; right: 16px; }
      body:not(.admin-mode) #stories .shelf-search-shell { min-height: 48px !important; }
    }

    @media (max-width: 560px) {
      body:not(.admin-mode) #home.hero.home-static-classic { padding-top: 24px !important; padding-bottom: 32px !important; }
      body:not(.admin-mode) #stories.section { padding-top: 20px !important; }
      body:not(.admin-mode) #stories .stories-section-eyebrow {
        min-height: 29px !important;
        margin-bottom: 8px !important;
        padding: 6px 10px !important;
        font-size: .63rem !important;
      }
      body:not(.admin-mode) #stories .archive-engine-prompt { font-size: clamp(1.22rem, 6.2vw, 1.5rem); }
      body:not(.admin-mode) #stories .archive-engine-copy { display: none !important; }
      body:not(.admin-mode) #stories .archive-engine-controls { margin-top: 12px !important; padding: 12px 10px !important; }
      body:not(.admin-mode) #stories .story-type-toggle { gap: 6px !important; }
      body:not(.admin-mode) #stories .story-type-btn { min-height: 37px !important; padding: 7px 6px !important; font-size: .75rem !important; }
    }
  


    /* =========================================================
       FINAL RESPONSIVE AUDIT — COLLABORATORS + MUSIC ARCHIVE
       These rules intentionally sit last so older patches cannot
       reintroduce clipped cards, uneven collaborator rows, or gaps.
       ========================================================= */

    /* Po-opo remains draggable. Its existing JavaScript clamps the launcher
       inside the visible viewport, snaps it to the nearest edge, and saves
       the chosen position. Do not force a fixed corner here. */
    body:not(.admin-mode) #chat-launcher {
      right: auto !important;
      bottom: auto !important;
      cursor: grab;
    }
    body:not(.admin-mode) #chat-launcher.is-drag-armed,
    body:not(.admin-mode) #chat-launcher.is-dragging {
      cursor: grabbing !important;
    }
    body:not(.admin-mode) #chat-launcher .chat-launcher-text {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      transform: translateY(-50%) translateX(5px) !important;
      transition: opacity .16s ease, transform .16s ease, visibility .16s ease !important;
    }
    body:not(.admin-mode) #chat-launcher:hover .chat-launcher-text,
    body:not(.admin-mode) #chat-launcher:focus-visible .chat-launcher-text {
      opacity: 1 !important;
      visibility: visible !important;
      transform: translateY(-50%) translateX(0) !important;
    }

    /* ---------- Collaborator spotlight ---------- */
    body:not(.admin-mode) #editorial-people,
    body:not(.admin-mode) #editorial-collaborators {
      position: relative !important;
      overflow: hidden !important;
      padding: clamp(30px, 4vw, 52px) clamp(16px, 3vw, 38px) clamp(34px, 4.5vw, 58px) !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-section-head,
    body:not(.admin-mode) #editorial-collaborators .phase8b-section-head {
      width: min(940px, 100%) !important;
      max-width: 940px !important;
      margin: 0 auto clamp(22px, 3vw, 34px) !important;
      padding: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px !important;
      text-align: center !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-section-head .phase8b-eyebrow,
    body:not(.admin-mode) #editorial-collaborators .phase8b-section-head .phase8b-eyebrow,
    body:not(.admin-mode) #editorial-people .phase8b-section-head .section-eyebrow,
    body:not(.admin-mode) #editorial-collaborators .phase8b-section-head .section-eyebrow {
      margin: 0 auto !important;
      align-self: center !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-section-head .section-title,
    body:not(.admin-mode) #editorial-collaborators .phase8b-section-head .section-title {
      margin: 3px auto 0 !important;
      max-width: 100% !important;
      font-size: clamp(1.7rem, 3.3vw, 2.75rem) !important;
      line-height: 1.06 !important;
      text-align: center !important;
      overflow-wrap: anywhere !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-section-head > p,
    body:not(.admin-mode) #editorial-collaborators .phase8b-section-head > p {
      width: min(780px, 100%) !important;
      max-width: 780px !important;
      margin: 0 auto !important;
      font-size: clamp(.86rem, 1.35vw, 1.04rem) !important;
      line-height: 1.5 !important;
      text-align: center !important;
      overflow-wrap: anywhere !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-view-all-people,
    body:not(.admin-mode) #editorial-collaborators .phase8b-view-all-people {
      align-self: center !important;
      margin: 7px auto 0 !important;
    }

    body:not(.admin-mode) #editorial-people .phase8b-people-grid,
    body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid {
      width: min(1080px, 100%) !important;
      max-width: 1080px !important;
      margin: 0 auto !important;
      padding: 4px 0 10px !important;
      display: grid !important;
      grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
      column-gap: clamp(14px, 2.8vw, 38px) !important;
      row-gap: 26px !important;
      align-items: start !important;
      justify-items: center !important;
      overflow: visible !important;
      scroll-snap-type: none !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card,
    body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n),
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-card,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(n) {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 164px !important;
      min-height: 172px !important;
      margin: 0 !important;
      padding: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 0 !important;
      text-align: center !important;
      overflow: visible !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-image,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-image {
      width: clamp(88px, 7vw, 108px) !important;
      height: clamp(88px, 7vw, 108px) !important;
      min-width: clamp(88px, 7vw, 108px) !important;
      min-height: clamp(88px, 7vw, 108px) !important;
      flex: 0 0 clamp(88px, 7vw, 108px) !important;
      margin: 0 auto 9px !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-copy,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-copy {
      width: min(142px, 100%) !important;
      max-width: 142px !important;
      margin: 0 auto !important;
      padding: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 4px !important;
      text-align: center !important;
      overflow: visible !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-name,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-name {
      order: 1 !important;
      width: 100% !important;
      min-height: 2.25em !important;
      margin: 0 !important;
      display: flex !important;
      align-items: flex-start !important;
      justify-content: center !important;
      color: #203b29 !important;
      font-size: clamp(.9rem, 1.05vw, 1.02rem) !important;
      line-height: 1.14 !important;
      font-weight: 900 !important;
      text-align: center !important;
      white-space: normal !important;
      overflow: visible !important;
      overflow-wrap: anywhere !important;
      -webkit-line-clamp: unset !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-role,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-role {
      order: 2 !important;
      width: 100% !important;
      min-height: 2.25em !important;
      margin: 0 !important;
      color: #68794a !important;
      font-size: clamp(.62rem, .82vw, .7rem) !important;
      line-height: 1.22 !important;
      font-weight: 900 !important;
      text-align: center !important;
      text-transform: uppercase !important;
      letter-spacing: .035em !important;
      white-space: normal !important;
      overflow: visible !important;
      overflow-wrap: anywhere !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-affiliation,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-affiliation {
      order: 3 !important;
      width: 100% !important;
      margin: 0 !important;
      font-size: .64rem !important;
      line-height: 1.2 !important;
      text-align: center !important;
      white-space: normal !important;
      overflow: visible !important;
      overflow-wrap: anywhere !important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-linked-works,
    body:not(.admin-mode) #editorial-collaborators .phase8b-linked-works {
      display: none !important;
    }

    /* Slightly compressed five-up strip for common laptops/tablets. */
    @media (min-width: 820px) and (max-width: 1180px) {
      body:not(.admin-mode) #editorial-people .phase8b-people-grid,
      body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid {
        width: min(900px, 100%) !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        column-gap: clamp(8px, 1.7vw, 20px) !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-card,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-card {
        max-width: 136px !important;
        min-height: 158px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-image,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-image {
        width: clamp(78px, 8vw, 94px) !important;
        height: clamp(78px, 8vw, 94px) !important;
        min-width: clamp(78px, 8vw, 94px) !important;
        min-height: clamp(78px, 8vw, 94px) !important;
        flex-basis: clamp(78px, 8vw, 94px) !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-copy,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-copy {
        width: min(126px, 100%) !important;
      }
    }

    /* Three-column wrapped grid for small tablets: no clipping and no
       awkward half-visible horizontal row. */
    @media (min-width: 600px) and (max-width: 819px) {
      body:not(.admin-mode) #editorial-people .phase8b-people-grid,
      body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid {
        width: min(620px, 100%) !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 24px 18px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-card,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-card {
        max-width: 144px !important;
      }
    }

    /* Mobile keeps the intentional swipe strip, but with safe padding and
       fully visible names/categories. */
    @media (max-width: 599px) {
      body:not(.admin-mode) #editorial-people,
      body:not(.admin-mode) #editorial-collaborators {
        padding-inline: 0 !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-section-head,
      body:not(.admin-mode) #editorial-collaborators .phase8b-section-head {
        width: calc(100% - 30px) !important;
        margin-bottom: 20px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-section-head .section-title,
      body:not(.admin-mode) #editorial-collaborators .phase8b-section-head .section-title {
        font-size: clamp(1.55rem, 8vw, 2rem) !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-people-grid,
      body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: none !important;
        padding: 4px 18px 14px !important;
        display: flex !important;
        gap: 18px !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        scroll-padding-inline: 18px !important;
        scrollbar-width: none !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-people-grid::-webkit-scrollbar,
      body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid::-webkit-scrollbar {
        display: none !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-card,
      body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n),
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-card,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(n) {
        flex: 0 0 118px !important;
        width: 118px !important;
        min-width: 118px !important;
        max-width: 118px !important;
        min-height: 158px !important;
        scroll-snap-align: start !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-image,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-image {
        width: 84px !important;
        height: 84px !important;
        min-width: 84px !important;
        min-height: 84px !important;
        flex-basis: 84px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-copy,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-copy {
        width: 112px !important;
      }
    }

    /* ---------- Explore All Music modal ---------- */
    .music-archive-modal {
      padding: clamp(8px, 1.5vw, 22px) !important;
      overflow: hidden !important;
    }
    .music-archive-dialog {
      width: min(1540px, calc(100vw - clamp(16px, 3vw, 42px))) !important;
      max-width: 1540px !important;
      height: auto !important;
      max-height: calc(100dvh - clamp(16px, 3vw, 42px)) !important;
      min-height: 0 !important;
      display: grid !important;
      grid-template-rows: auto auto minmax(0, 1fr) auto !important;
      gap: clamp(12px, 1.5vw, 18px) !important;
      overflow: hidden !important;
      container-type: inline-size !important;
    }
    .music-archive-head {
      min-width: 0 !important;
      padding: clamp(18px, 2vw, 28px) clamp(18px, 2vw, 30px) 0 !important;
    }
    .music-archive-head > div {
      min-width: 0 !important;
      padding-right: 8px !important;
    }
    .music-archive-head h2 {
      max-width: 100% !important;
      margin: 7px 0 5px !important;
      font-size: clamp(2rem, 4.2vw, 4rem) !important;
      line-height: 1 !important;
      overflow-wrap: anywhere !important;
    }
    .music-archive-head p {
      max-width: 760px !important;
      font-size: clamp(.86rem, 1.15vw, 1rem) !important;
    }
    .music-archive-tools {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      align-items: center !important;
      gap: 14px !important;
      padding: 0 clamp(18px, 2vw, 30px) !important;
    }
    .music-archive-search {
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
      flex: none !important;
    }
    .music-archive-count {
      white-space: nowrap !important;
      text-align: right !important;
    }
    .music-archive-grid {
      min-width: 0 !important;
      min-height: 0 !important;
      max-height: none !important;
      padding: 0 clamp(18px, 2vw, 30px) 8px !important;
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      grid-auto-flow: row !important;
      grid-auto-rows: max-content !important;
      gap: clamp(12px, 1.35vw, 20px) !important;
      align-content: start !important;
      align-items: start !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      overscroll-behavior: contain !important;
      scrollbar-gutter: stable !important;
    }
    .music-archive-grid .music-card {
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
      height: auto !important;
      min-height: 0 !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      grid-template-rows: auto auto !important;
      align-content: start !important;
      overflow: hidden !important;
    }
    .music-archive-grid .music-card-art {
      width: 100% !important;
      min-width: 0 !important;
      min-height: 0 !important;
      height: auto !important;
      aspect-ratio: 4 / 3 !important;
      overflow: hidden !important;
    }
    .music-archive-grid .music-card-art img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
    }
    .music-archive-grid .music-card-copy {
      width: 100% !important;
      min-width: 0 !important;
      min-height: 146px !important;
      height: auto !important;
      padding: 13px 14px 14px !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      justify-content: flex-start !important;
      gap: 5px !important;
      overflow: visible !important;
    }
    .music-archive-grid .music-card-mood,
    .music-archive-grid .music-card-title,
    .music-archive-grid .music-card-artist {
      width: 100% !important;
      min-width: 0 !important;
      margin: 0 !important;
    }
    .music-archive-grid .music-card-title {
      min-height: 2.3em !important;
      line-height: 1.15 !important;
      display: -webkit-box !important;
      -webkit-box-orient: vertical !important;
      -webkit-line-clamp: 2 !important;
      overflow: hidden !important;
    }
    .music-archive-grid .music-card-artist {
      white-space: normal !important;
      display: -webkit-box !important;
      -webkit-box-orient: vertical !important;
      -webkit-line-clamp: 2 !important;
      overflow: hidden !important;
    }
    .music-archive-grid .music-label-row {
      width: 100% !important;
      min-width: 0 !important;
      margin: 5px 0 0 !important;
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: center !important;
      gap: 5px !important;
      overflow: visible !important;
    }
    .music-archive-grid .music-label-chip {
      max-width: 100% !important;
      overflow: hidden !important;
    }
    .music-archive-grid .music-label-chip span {
      min-width: 0 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }
    .music-archive-grid .music-card-wave {
      width: 100% !important;
      margin-top: auto !important;
    }
    .music-archive-grid .music-card-meta {
      width: 100% !important;
      gap: 8px !important;
    }

    /* Container-driven column counts follow the actual dialog width,
       not the browser width, so resizing/zooming remains stable. */
    @container (max-width: 1199px) {
      .music-archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    }
    @container (max-width: 899px) {
      .music-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
      .music-archive-grid .music-card-art { aspect-ratio: 16 / 10 !important; }
    }
    @container (max-width: 619px) {
      .music-archive-tools {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
      }
      .music-archive-count {
        text-align: center !important;
      }
      .music-archive-grid {
        grid-template-columns: 1fr !important;
      }
    }

    /* Viewport fallbacks for browsers that ignore container queries. */
    @media (min-width: 1180px) and (max-width: 1439px) {
      .music-archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    }
    @media (min-width: 720px) and (max-width: 1179px) {
      .music-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    }

    /* Portrait phones use clean horizontal rows. */
    @media (max-width: 719px) and (orientation: portrait) {
      .music-archive-modal {
        align-items: stretch !important;
        padding: 0 !important;
      }
      .music-archive-dialog {
        width: 100% !important;
        max-width: none !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        gap: 12px !important;
      }
      .music-archive-head {
        padding: calc(16px + env(safe-area-inset-top)) 16px 0 !important;
      }
      .music-archive-head h2 {
        padding-right: 54px !important;
        font-size: clamp(2rem, 10vw, 3rem) !important;
      }
      .music-archive-head p {
        padding-right: 0 !important;
        font-size: .86rem !important;
      }
      .music-archive-close {
        position: absolute !important;
        top: calc(14px + env(safe-area-inset-top)) !important;
        right: 14px !important;
      }
      .music-archive-tools {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        padding-inline: 16px !important;
      }
      .music-archive-count {
        text-align: center !important;
      }
      .music-archive-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 0 16px 10px !important;
      }
      .music-archive-grid .music-card {
        grid-template-columns: clamp(112px, 34vw, 148px) minmax(0, 1fr) !important;
        grid-template-rows: minmax(142px, auto) !important;
        min-height: 142px !important;
      }
      .music-archive-grid .music-card-art {
        width: 100% !important;
        height: 100% !important;
        min-height: 142px !important;
        aspect-ratio: auto !important;
      }
      .music-archive-grid .music-card-type {
        display: none !important;
      }
      .music-archive-grid .music-card-play {
        top: 10px !important;
        right: 10px !important;
        bottom: auto !important;
        width: 38px !important;
        height: 38px !important;
      }
      .music-archive-grid .music-card-copy {
        min-height: 142px !important;
        padding: 12px 13px !important;
        justify-content: center !important;
        overflow: hidden !important;
      }
      .music-archive-grid .music-card-title {
        min-height: 0 !important;
        font-size: 1rem !important;
      }
      .music-archive-grid .music-card-artist {
        font-size: .74rem !important;
      }
      .music-archive-grid .music-label-row {
        margin-top: 4px !important;
      }
      .music-archive-grid .music-label-row .music-label-chip:nth-child(n+2),
      .music-archive-grid .music-card-wave,
      .music-archive-grid .music-card-meta {
        display: none !important;
      }
      .music-archive-footer {
        padding: 0 16px calc(14px + env(safe-area-inset-bottom)) !important;
      }
    }

    /* Narrow/short landscape windows favour two compact columns and
       preserve the header/search instead of cropping the modal. */
    @media (orientation: landscape) and (max-height: 700px) {
      .music-archive-modal { padding: 7px !important; }
      .music-archive-dialog {
        max-height: calc(100dvh - 14px) !important;
        gap: 9px !important;
      }
      .music-archive-head {
        padding: 12px 16px 0 !important;
      }
      .music-archive-head h2 {
        margin-top: 4px !important;
        font-size: clamp(1.8rem, 4.2vw, 2.8rem) !important;
      }
      .music-archive-head p {
        font-size: .8rem !important;
        line-height: 1.35 !important;
      }
      .music-archive-tools {
        padding-inline: 16px !important;
      }
      .music-archive-grid {
        padding-inline: 16px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
      .music-archive-grid .music-card {
        grid-template-columns: 40% minmax(0, 1fr) !important;
        grid-template-rows: minmax(132px, auto) !important;
      }
      .music-archive-grid .music-card-art {
        height: 100% !important;
        min-height: 132px !important;
        aspect-ratio: auto !important;
      }
      .music-archive-grid .music-card-copy {
        min-height: 132px !important;
        padding: 11px 12px !important;
      }
      .music-archive-grid .music-card-wave,
      .music-archive-grid .music-card-meta,
      .music-archive-grid .music-label-row .music-label-chip:nth-child(n+2) {
        display: none !important;
      }
    }

    /* Compact mini player so it does not cover collaborator names on
       common laptop widths. */
    @media (min-width: 600px) and (max-width: 1440px) {
      .music-mini-player {
        width: min(360px, calc(100vw - 32px)) !important;
        min-height: 62px !important;
      }
      .music-mini-art {
        width: 46px !important;
        height: 46px !important;
      }
    }

    @media (max-width: 760px) {
      body:not(.admin-mode) #chat-launcher .chat-launcher-text {
        display: none !important;
      }
    }
  


    /* Final stability pass: collaborator copy must always occupy natural rows. */
    body:not(.admin-mode) #editorial-people .phase8b-people-grid,
    body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid {
      width: min(1040px, calc(100% - 24px)) !important;
      max-width: 1040px !important;
      margin-inline: auto !important;
      display: grid !important;
      grid-template-columns: repeat(5, minmax(0, 148px)) !important;
      justify-content: center !important;
      justify-items: center !important;
      align-items: start !important;
      column-gap: clamp(14px, 1.8vw, 24px) !important;
      row-gap: 30px !important;
      overflow: visible !important;
    }

    body:not(.admin-mode) #editorial-people .phase8b-person-card,
    body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n),
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-card,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(n) {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 148px !important;
      height: auto !important;
      min-height: 186px !important;
      margin: 0 !important;
      padding: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-start !important;
      text-align: center !important;
      overflow: visible !important;
    }

    body:not(.admin-mode) #editorial-people .phase8b-person-image,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-image {
      flex: 0 0 auto !important;
      margin: 0 auto 11px !important;
    }

    body:not(.admin-mode) #editorial-people .phase8b-person-copy,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-copy {
      width: 100% !important;
      max-width: 142px !important;
      min-width: 0 !important;
      height: auto !important;
      min-height: 0 !important;
      margin: 0 auto !important;
      padding: 0 !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      grid-auto-rows: max-content !important;
      align-items: start !important;
      align-content: start !important;
      justify-items: center !important;
      gap: 0 !important;
      position: static !important;
      overflow: visible !important;
      text-align: center !important;
    }

    body:not(.admin-mode) #editorial-people .phase8b-person-name,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-name {
      order: 1 !important;
      position: static !important;
      inset: auto !important;
      transform: none !important;
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      display: block !important;
      color: #203b29 !important;
      font-size: clamp(.9rem, 1vw, 1.01rem) !important;
      font-weight: 900 !important;
      line-height: 1.17 !important;
      text-align: center !important;
      white-space: normal !important;
      overflow: visible !important;
      overflow-wrap: anywhere !important;
      word-break: normal !important;
      -webkit-line-clamp: unset !important;
      -webkit-box-orient: unset !important;
    }

    body:not(.admin-mode) #editorial-people .phase8b-person-role,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-role {
      order: 2 !important;
      position: static !important;
      inset: auto !important;
      transform: none !important;
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      margin: 7px 0 0 !important;
      padding: 0 !important;
      display: block !important;
      color: #68794a !important;
      font-size: clamp(.62rem, .72vw, .69rem) !important;
      font-weight: 900 !important;
      line-height: 1.25 !important;
      letter-spacing: .035em !important;
      text-align: center !important;
      text-transform: uppercase !important;
      white-space: normal !important;
      overflow: visible !important;
      overflow-wrap: anywhere !important;
    }

    body:not(.admin-mode) #editorial-people .phase8b-person-affiliation,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-affiliation {
      order: 3 !important;
      position: static !important;
      transform: none !important;
      width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      margin: 5px 0 0 !important;
      padding: 0 !important;
      display: block !important;
      font-size: .63rem !important;
      line-height: 1.25 !important;
      text-align: center !important;
      overflow: visible !important;
      overflow-wrap: anywhere !important;
    }

    @media (min-width: 820px) and (max-width: 1180px) {
      body:not(.admin-mode) #editorial-people .phase8b-people-grid,
      body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid {
        width: min(820px, calc(100% - 20px)) !important;
        grid-template-columns: repeat(5, minmax(0, 132px)) !important;
        column-gap: clamp(12px, 1.6vw, 20px) !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-card,
      body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n),
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-card,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(n) {
        max-width: 132px !important;
        min-height: 182px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-copy,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-copy {
        max-width: 128px !important;
      }
    }

    @media (min-width: 600px) and (max-width: 819px) {
      body:not(.admin-mode) #editorial-people .phase8b-people-grid,
      body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid {
        width: min(590px, calc(100% - 20px)) !important;
        grid-template-columns: repeat(3, minmax(0, 148px)) !important;
        justify-content: center !important;
        column-gap: 22px !important;
        row-gap: 30px !important;
      }
    }

    @media (max-width: 599px) {
      body:not(.admin-mode) #editorial-people .phase8b-people-grid,
      body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid {
        width: 100% !important;
        max-width: none !important;
        padding: 4px 18px 16px !important;
        display: flex !important;
        justify-content: flex-start !important;
        gap: 18px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-card,
      body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n),
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-card,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(n) {
        flex: 0 0 122px !important;
        width: 122px !important;
        min-width: 122px !important;
        max-width: 122px !important;
        min-height: 174px !important;
        scroll-snap-align: start !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-copy,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-copy {
        max-width: 116px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-name,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-name {
        font-size: .88rem !important;
      }
    }

    /* Navigation: prevent browser scroll restoration from exposing only “me”. */
    body:not(.admin-mode) #nav-links {
      min-width: 0 !important;
      padding-inline: 4px !important;
      scroll-padding-inline: 4px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      overscroll-behavior-inline: contain !important;
      overflow-anchor: none !important;
      mask-image: none !important;
      -webkit-mask-image: none !important;
      clip-path: none !important;
    }
    body:not(.admin-mode) #nav-links .nav-link {
      flex: 0 0 auto !important;
      min-width: max-content !important;
      overflow: visible !important;
      text-overflow: clip !important;
    }
    body:not(.admin-mode) #nav-links .nav-link[data-nav-id="home"] {
      scroll-margin-inline-start: 4px !important;
    }
    body:not(.admin-mode) #nav-links .nav-link span {
      display: inline-block !important;
      max-width: none !important;
      overflow: visible !important;
      text-overflow: clip !important;
      white-space: nowrap !important;
    }
  


  #admin-section-poopo-studio .poopo-unified-nav {
    position: sticky;
    top: 8px;
    z-index: 8;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 10px;
    border: 1px solid rgba(54,87,58,.14);
    border-radius: 16px;
    background: rgba(255,253,246,.94);
    box-shadow: 0 12px 28px rgba(31,54,35,.09);
    backdrop-filter: blur(12px);
  }
  #admin-section-poopo-studio .poopo-unified-nav button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid rgba(54,87,58,.16);
    border-radius: 999px;
    background: #fff;
    color: #2d4c32;
    font: inherit;
    font-size: .76rem;
    font-weight: 850;
    cursor: pointer;
  }
  #admin-section-poopo-studio .poopo-unified-nav button:hover,
  #admin-section-poopo-studio .poopo-unified-nav button:focus-visible {
    background: #36573a;
    color: #fffaf0;
    transform: translateY(-1px);
  }
  #admin-section-poopo-studio .poopo-unified-nav svg { width: 15px; height: 15px; }
  .poopo-unified-basic,
  .poopo-legacy-fallback {
    border: 1px solid rgba(54,87,58,.14);
    border-radius: 18px;
    background: #fffdf7;
    overflow: clip;
  }
  .poopo-unified-basic { margin-bottom: 18px; box-shadow: 0 14px 32px rgba(31,54,35,.06); }
  .poopo-unified-basic > summary,
  .poopo-legacy-fallback > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 17px;
    cursor: pointer;
    background: linear-gradient(135deg,#f7f0d4,#f6fbf1);
  }
  .poopo-unified-basic > summary::-webkit-details-marker,
  .poopo-legacy-fallback > summary::-webkit-details-marker { display: none; }
  .poopo-unified-basic > summary span:first-child,
  .poopo-legacy-fallback > summary span:first-child { display: grid; gap: 3px; }
  .poopo-unified-basic > summary strong,
  .poopo-legacy-fallback > summary strong { color: #29482f; font-size: .92rem; }
  .poopo-unified-basic > summary small,
  .poopo-legacy-fallback > summary small { color: #687461; font-weight: 700; line-height: 1.35; }
  .poopo-unified-basic-body { padding: 16px; }
  .poopo-unified-companion-panel { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
  .poopo-unified-basic-body > .admin-panel-header,
  .poopo-unified-companion-panel > .admin-panel-header { margin-bottom: 12px; }
  .poopo-unified-basic-body .brand-preview { margin-bottom: 14px; }
  .poopo-legacy-fallback { margin: 16px 0 6px; background: #fbfcf8; }
  .poopo-legacy-fallback-body { padding: 14px; }
  .poopo2-drag-card { scroll-margin-top: 120px; }
  .poopo2-drag-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
  }
  .poopo2-drag-preview-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .poopo2-drag-note {
    display: grid;
    grid-template-columns: 20px minmax(0,1fr);
    gap: 9px;
    align-items: start;
    margin-top: 12px;
    padding: 11px 12px;
    border-radius: 12px;
    background: #f4f8ef;
    color: #496047;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.5;
  }
  .poopo2-drag-note svg { width: 17px; height: 17px; margin-top: 1px; }
  .poopo-unified-flash { animation: poopoUnifiedFlash .82s ease both; }
  @keyframes poopoUnifiedFlash {
    0%,100% { box-shadow: inherit; }
    45% { box-shadow: 0 0 0 4px rgba(244,196,48,.34),0 18px 40px rgba(31,54,35,.12); }
  }
  body:not(.admin-mode) #chat-launcher.poopo2-active.poopo-drag-left .poopo2-sprite-viewport {
    transform: scale(1.08) rotate(-3deg);
  }
  body:not(.admin-mode) #chat-launcher.poopo2-active.poopo-drag-right .poopo2-sprite-viewport {
    transform: scale(1.08) rotate(3deg);
  }
  @media (max-width: 900px) {
    .poopo2-drag-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    #admin-section-poopo-studio .poopo-unified-nav { position: static; overflow-x: auto; flex-wrap: nowrap; }
    #admin-section-poopo-studio .poopo-unified-nav button { flex: 0 0 auto; }
  }
  @media (max-width: 560px) {
    .poopo2-drag-grid { grid-template-columns: 1fr; }
    .poopo-unified-basic-body { padding: 10px; }
  }



  /* FINAL OVERRIDE: launcher size and character scale stay linked. */
  body:not(.admin-mode) #chat-launcher[data-poopo-size-engine="3"] {
    width: var(--poopo-v3-size, 140px) !important;
    height: var(--poopo-v3-size, 140px) !important;
    min-width: var(--poopo-v3-size, 140px) !important;
    min-height: var(--poopo-v3-size, 140px) !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  body:not(.admin-mode) #chat-launcher[data-poopo-size-engine="3"]::before,
  body:not(.admin-mode) #chat-launcher[data-poopo-size-engine="3"]::after {
    display: none !important;
    content: none !important;
  }
  body:not(.admin-mode) #chat-launcher[data-poopo-size-engine="3"] > #chat-launcher-avatar,
  body:not(.admin-mode) #chat-launcher[data-poopo-size-engine="3"] > .companion-icon-shell,
  body:not(.admin-mode) #chat-launcher[data-poopo-size-engine="3"] .companion-frame-stack,
  body:not(.admin-mode) #chat-launcher[data-poopo-size-engine="3"] .poopo2-sprite-root {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }
  body:not(.admin-mode) #chat-launcher[data-poopo-size-engine="3"] .poopo2-sprite-viewport {
    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden !important;
    transform: scale(var(--poopo-character-zoom, 1.22)) !important;
    transform-origin: 50% 82% !important;
  }
  body:not(.admin-mode) #chat-launcher[data-poopo-size-engine="3"] img:not(.companion-avatar-fallback) {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    transform: scale(var(--poopo-character-zoom, 1.22)) !important;
    transform-origin: 50% 82% !important;
  }
  body:not(.admin-mode) #chat-launcher[data-poopo-size-engine="3"] .chat-launcher-text {
    right: calc(100% + 10px) !important;
  }



    /* Phase 3.8 — one provider iframe, entered from NarraSpace's Play Film tap.
       Fullscreen is requested first; landscape lock is attempted only after
       fullscreen begins, as required by supporting mobile browsers. */
    #story-modal .document-modal[data-resource-type="film"] .document-viewer:fullscreen,
    #story-modal .document-modal[data-resource-type="film"] .document-viewer:-webkit-full-screen,
    #story-modal .document-modal[data-resource-type="film"] .document-viewer.is-fullscreen-preview {
      position: relative !important;
      width: 100vw !important;
      width: 100dvw !important;
      height: 100vh !important;
      height: 100dvh !important;
      min-width: 100vw !important;
      min-height: 100vh !important;
      max-width: none !important;
      max-height: none !important;
      padding: 0 !important;
      margin: 0 !important;
      overflow: hidden !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: #000 !important;
    }

    #story-modal .document-modal[data-resource-type="film"] .document-viewer:fullscreen .preview-zoom-content,
    #story-modal .document-modal[data-resource-type="film"] .document-viewer:-webkit-full-screen .preview-zoom-content,
    #story-modal .document-modal[data-resource-type="film"] .document-viewer.is-fullscreen-preview .preview-zoom-content {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      min-width: 100% !important;
      min-height: 100% !important;
      margin: 0 !important;
      transform: none !important;
      overflow: hidden !important;
      background: #000 !important;
    }

    #story-modal .document-modal[data-resource-type="film"] .document-viewer:fullscreen #modal-preview-frame,
    #story-modal .document-modal[data-resource-type="film"] .document-viewer:-webkit-full-screen #modal-preview-frame,
    #story-modal .document-modal[data-resource-type="film"] .document-viewer.is-fullscreen-preview #modal-preview-frame {
      position: absolute !important;
      inset: 0 !important;
      display: block !important;
      width: 100% !important;
      height: 100% !important;
      min-width: 100% !important;
      min-height: 100% !important;
      max-width: none !important;
      max-height: none !important;
      border: 0 !important;
      border-radius: 0 !important;
      transform: none !important;
      background: #000 !important;
    }

    #story-modal .document-modal[data-resource-type="film"] .document-viewer:fullscreen .provider-link-shield,
    #story-modal .document-modal[data-resource-type="film"] .document-viewer:-webkit-full-screen .provider-link-shield,
    #story-modal .document-modal[data-resource-type="film"] .document-viewer.is-fullscreen-preview .provider-link-shield {
      position: fixed !important;
      top: max(8px, env(safe-area-inset-top)) !important;
      right: max(8px, env(safe-area-inset-right)) !important;
      z-index: 12 !important;
    }
  


    /* Phase 3.12 — responsive visual and interaction polish.
       This is a presentation-only layer for the existing film reflection and
       review flow. It does not change provider playback, reviews, moderation,
       API calls, storage, or database behavior. */
    :root {
      --p312-forest-950: #07140c;
      --p312-forest-900: #0f2b1a;
      --p312-forest-800: #173d27;
      --p312-forest-700: #28533a;
      --p312-gold-500: #d4aa35;
      --p312-gold-300: #f0d77a;
      --p312-gold-100: #fff2b8;
      --p312-cream: #fffaf0;
      --p312-cream-soft: #f8f1dc;
      --p312-ink: #13281b;
      --p312-muted: #60705f;
    }

    #story-modal .document-modal,
    #review-modal .review-modal {
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    /* Keep the resource title readable over every responsive header variant. */
    #story-modal .document-modal .document-title {
      color: var(--p312-ink) !important;
      text-shadow: none !important;
      overflow-wrap: anywhere;
    }
    #story-modal .document-subtitle {
      color: #5d6b48 !important;
      overflow-wrap: anywhere;
    }
    #story-modal .document-topbar {
      background:
        radial-gradient(circle at 0 0, rgba(212,170,53,.20), transparent 34%),
        linear-gradient(180deg, #fffdf3 0%, #f5ecd1 100%) !important;
      border-bottom-color: rgba(23,61,39,.18) !important;
    }

    /* Clear, discoverable interaction states on mouse, keyboard, and touch. */
    #story-modal .doc-action,
    #story-modal .film-after-view-actions button,
    #review-modal button,
    #review-modal input,
    #review-modal select,
    #review-modal textarea,
    .film-stable-cinema-exit {
      -webkit-tap-highlight-color: transparent;
    }
    #story-modal .doc-action,
    #story-modal .film-after-view-actions button,
    #review-modal button {
      min-height: 44px;
      touch-action: manipulation;
    }
    #story-modal .doc-action:focus-visible,
    #story-modal .film-after-view-actions button:focus-visible,
    #review-modal button:focus-visible,
    #review-modal input:focus-visible,
    #review-modal select:focus-visible,
    #review-modal textarea:focus-visible,
    .film-stable-cinema-exit:focus-visible {
      outline: 3px solid var(--p312-gold-300) !important;
      outline-offset: 3px !important;
    }
    #story-modal .doc-action:active,
    #story-modal .film-after-view-actions button:active,
    #review-modal button:active,
    .film-stable-cinema-exit:active {
      transform: translateY(1px) scale(.985);
    }

    /* Reflection card: stronger contrast, calmer proportions, clearer hierarchy. */
    #story-modal .film-after-view {
      width: min(650px, calc(100% - 28px));
      padding: clamp(20px, 3.2vw, 34px);
      border: 1px solid rgba(240,215,122,.42);
      border-radius: clamp(20px, 3vw, 28px);
      background:
        radial-gradient(circle at 50% 0%, rgba(240,215,122,.16), transparent 38%),
        linear-gradient(145deg, rgba(25,63,40,.98), rgba(7,20,12,.99));
      color: var(--p312-cream);
      box-shadow: 0 24px 64px rgba(0,0,0,.38);
    }
    #story-modal .film-after-view-icon {
      width: clamp(46px, 6vw, 56px);
      height: clamp(46px, 6vw, 56px);
      margin-bottom: 12px;
      border-radius: 16px;
      background: linear-gradient(145deg, #f4dc82, #d3aa39);
      color: var(--p312-forest-900);
      box-shadow: 0 10px 28px rgba(0,0,0,.18);
    }
    #story-modal .film-after-view-copy h3 {
      color: #fff8d9 !important;
      font-size: clamp(1.42rem, 3.3vw, 2.05rem);
      line-height: 1.12;
      letter-spacing: -.025em;
      text-wrap: balance;
    }
    #story-modal .film-after-view-copy p {
      color: rgba(255,250,240,.86) !important;
      font-size: clamp(.88rem, 1.5vw, .98rem);
      line-height: 1.55;
      text-wrap: pretty;
    }
    #story-modal .film-after-view-actions {
      gap: 10px;
      margin-top: 20px;
    }
    #story-modal .film-after-view-actions button {
      min-height: 46px !important;
    }
    #story-modal .film-after-view-actions .btn-primary {
      background: linear-gradient(145deg, #f0d77a, #d1a52f) !important;
      border-color: rgba(255,245,196,.68) !important;
      color: #102719 !important;
      box-shadow: 0 12px 26px rgba(0,0,0,.22) !important;
    }
    #story-modal .film-after-view-actions .btn-secondary {
      background: rgba(255,255,255,.09) !important;
      border-color: rgba(255,250,225,.26) !important;
      color: #fff9e6 !important;
      box-shadow: none !important;
    }
    #story-modal .film-after-view-actions .btn-secondary:hover {
      background: rgba(255,255,255,.16) !important;
    }

    /* Film launch copy remains readable over light or busy poster artwork. */
    #story-modal .film-launch-copy {
      background: rgba(7,20,12,.88) !important;
      border-color: rgba(240,215,122,.34) !important;
      color: var(--p312-cream) !important;
    }
    #story-modal .film-launch-copy h3 { color: #fff8d9 !important; }
    #story-modal .film-launch-copy p { color: rgba(255,250,240,.84) !important; }
    #story-modal .film-launch-kicker { color: var(--p312-gold-300) !important; }

    /* Post-film review header: fix invisible title/resource text on dark green. */
    #review-modal.post-film-reflection .review-modal {
      border-color: rgba(212,170,53,.34) !important;
      background: var(--p312-cream) !important;
    }
    #review-modal.post-film-reflection .review-modal-head {
      background:
        radial-gradient(circle at 86% 10%, rgba(240,215,122,.20), transparent 34%),
        linear-gradient(135deg, #214f33 0%, #0d2a19 100%) !important;
      border-bottom: 1px solid rgba(240,215,122,.42) !important;
      color: var(--p312-cream) !important;
    }
    #review-modal.post-film-reflection .review-modal-head .section-pill {
      background: rgba(255,250,225,.10) !important;
      border-color: rgba(240,215,122,.38) !important;
      color: var(--p312-gold-300) !important;
    }
    #review-modal.post-film-reflection #review-modal-title {
      color: #fffaf0 !important;
      text-shadow: 0 2px 18px rgba(0,0,0,.20);
    }
    #review-modal.post-film-reflection #review-resource-title {
      color: #f3db83 !important;
      font-weight: 850 !important;
    }
    #review-modal.post-film-reflection .review-modal-subtitle {
      color: rgba(255,250,240,.82) !important;
    }
    #review-modal.post-film-reflection .close-btn {
      border-color: rgba(255,250,225,.30) !important;
      background: rgba(255,255,255,.10) !important;
      color: #fffaf0 !important;
      box-shadow: none !important;
    }

    /* Flexible modal sizing prevents clipping on iPad split-screen and phones. */
    #review-modal .review-modal {
      display: flex !important;
      flex-direction: column !important;
      width: min(920px, calc(100vw - 24px)) !important;
      max-height: calc(100dvh - 24px) !important;
      min-height: 0 !important;
    }
    #review-modal .review-modal-head {
      flex: 0 0 auto;
    }
    #review-modal .review-modal-head > div {
      min-width: 0;
    }
    #review-modal #review-modal-title,
    #review-modal #review-resource-title,
    #review-modal .review-modal-subtitle {
      overflow-wrap: anywhere;
    }
    #review-modal .review-modal-scroll {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      max-height: none !important;
      scroll-padding-bottom: calc(28px + env(safe-area-inset-bottom));
    }
    #review-modal .review-summary {
      color: #25472f !important;
      background: linear-gradient(145deg, #eff5e9, #e5efdf) !important;
    }
    #review-modal .review-card {
      background:
        radial-gradient(circle at 100% 0%, rgba(240,215,122,.11), transparent 32%),
        linear-gradient(145deg, #173f28, #0d2b1a) !important;
      border-color: rgba(240,215,122,.22) !important;
    }
    #review-modal .review-form {
      background: rgba(255,255,255,.84) !important;
      border-color: rgba(23,61,39,.16) !important;
    }
    #review-modal .review-form input,
    #review-modal .review-form select,
    #review-modal .review-form textarea {
      min-height: 46px;
      color: #193824 !important;
      background: #fffef9 !important;
      border-color: rgba(23,61,39,.22) !important;
      font-size: 1rem; /* prevents unexpected iOS zoom on focus */
    }
    #review-modal .review-form textarea {
      min-height: 124px;
    }
    #review-modal .rating-picker {
      width: 100%;
    }
    #review-modal .rating-picker button {
      display: grid;
      place-items: center;
      min-width: 44px;
      color: #a87709 !important;
    }
    #review-modal .rating-picker button.active {
      background: #f5dfa0 !important;
      border-color: #b98611 !important;
      color: #7f5900 !important;
    }
    #review-modal .review-reaction-btn {
      min-height: 42px;
      line-height: 1.25;
      white-space: normal;
      text-align: center;
    }
    #review-modal #review-submit-btn {
      background: linear-gradient(145deg, #285d3c, #153b25) !important;
      border-color: #153b25 !important;
      color: #fffaf0 !important;
    }

    /* iPad and tablet portrait: generous but contained card, readable title. */
    @media (min-width: 721px) and (max-width: 1024px) {
      #review-modal { padding: 14px !important; }
      #review-modal .review-modal {
        width: min(94vw, 860px) !important;
        height: min(92dvh, 900px) !important;
        max-height: min(92dvh, 900px) !important;
        border-radius: 24px !important;
      }
      #review-modal .review-modal-head { padding: 21px 22px 18px !important; }
      #review-modal .review-modal-scroll { padding: 21px 22px calc(26px + env(safe-area-inset-bottom)) !important; }
      #story-modal .document-modal .document-title {
        font-size: clamp(1rem, 2vw, 1.22rem) !important;
      }
    }

    /* Phones and compact portrait devices. */
    @media (max-width: 720px) {
      #story-modal .document-topbar {
        padding:
          max(10px, env(safe-area-inset-top))
          max(10px, env(safe-area-inset-right))
          9px
          max(10px, env(safe-area-inset-left)) !important;
      }
      #story-modal .document-title-wrap {
        min-width: 0 !important;
        padding-right: 52px !important;
      }
      #story-modal .document-icon {
        width: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
      }
      #story-modal .document-modal .document-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: clamp(.98rem, 4.5vw, 1.12rem) !important;
        line-height: 1.18 !important;
      }
      #story-modal .document-subtitle {
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        font-size: .76rem !important;
      }
      #story-modal .document-actions {
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
      }
      #story-modal .document-actions .doc-action {
        flex: 0 0 auto;
        scroll-snap-align: start;
      }

      /* Reflection becomes a scroll-safe learning prompt, not a squeezed 16:9 card. */
      #story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] .document-shell {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
      }
      #story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] .document-viewer {
        display: block !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: min(560px, calc(100dvh - 122px)) !important;
        aspect-ratio: auto !important;
        padding: 10px !important;
        overflow: visible !important;
        background: #07110b !important;
      }
      #story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] .preview-zoom-content {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: min(540px, calc(100dvh - 142px)) !important;
        aspect-ratio: auto !important;
        overflow: visible !important;
        border-radius: 18px !important;
        background: #0a1710 !important;
      }
      #story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] .film-launch-stage {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        min-height: inherit !important;
        height: auto !important;
        padding: clamp(14px, 4vw, 22px) !important;
        overflow: visible !important;
        border-radius: inherit !important;
      }
      #story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] .film-launch-art {
        opacity: .42;
      }
      #story-modal .film-after-view {
        width: 100% !important;
        max-width: 560px;
        padding: 18px 15px !important;
        border-radius: 20px !important;
      }
      #story-modal .film-after-view-icon {
        width: 46px !important;
        height: 46px !important;
        margin-bottom: 9px !important;
      }
      #story-modal .film-after-view-icon svg {
        width: 23px !important;
        height: 23px !important;
      }
      #story-modal .film-after-view-copy h3 {
        margin: 6px 0 8px !important;
        font-size: clamp(1.32rem, 6vw, 1.68rem) !important;
      }
      #story-modal .film-after-view-copy p {
        font-size: .88rem !important;
        line-height: 1.48 !important;
      }
      #story-modal .film-after-view-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 16px !important;
      }
      #story-modal .film-after-view-actions button {
        width: 100% !important;
        min-width: 0 !important;
        padding-inline: 10px !important;
        justify-content: center !important;
        font-size: .82rem !important;
      }
      #story-modal .film-after-view-actions button:first-child {
        grid-column: 1 / -1;
      }

      #review-modal {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
      }
      #review-modal .review-modal {
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border: 0 !important;
        border-radius: 0 !important;
      }
      #review-modal .review-modal-head {
        padding:
          max(14px, env(safe-area-inset-top))
          max(14px, env(safe-area-inset-right))
          13px
          max(14px, env(safe-area-inset-left)) !important;
        gap: 10px !important;
      }
      #review-modal #review-modal-title {
        font-size: clamp(1.35rem, 6.2vw, 1.72rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -.025em !important;
      }
      #review-modal #review-resource-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin-top: 6px !important;
        font-size: .84rem !important;
        line-height: 1.3 !important;
      }
      #review-modal .review-modal-subtitle { display: none !important; }
      #review-modal .close-btn {
        width: 44px !important;
        height: 44px !important;
      }
      #review-modal .review-modal-scroll {
        padding:
          14px
          max(12px, env(safe-area-inset-right))
          calc(22px + env(safe-area-inset-bottom))
          max(12px, env(safe-area-inset-left)) !important;
      }
      #review-modal .review-summary {
        min-height: 0 !important;
        padding: 14px !important;
        border-radius: 16px !important;
      }
      #review-modal .review-card {
        padding: 15px !important;
        border-radius: 16px !important;
      }
      #review-modal .review-form {
        padding: 16px 14px !important;
        border-radius: 18px !important;
      }
      #review-modal .review-form-heading {
        margin-bottom: 15px !important;
      }
      #review-modal .review-form-heading h3 {
        font-size: 1.16rem !important;
      }
      #review-modal #review-intro {
        font-size: .82rem !important;
        line-height: 1.45 !important;
      }
      #review-modal .review-field-label,
      #review-modal .form-group > label {
        align-items: flex-start !important;
        flex-wrap: wrap;
        font-size: .82rem !important;
      }
      #review-modal .rating-picker {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: clamp(5px, 2vw, 9px) !important;
      }
      #review-modal .rating-picker button {
        width: 100% !important;
        max-width: none !important;
        height: 46px !important;
        border-radius: 13px !important;
      }
      #review-modal .review-reaction-picker {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
      }
      #review-modal .review-reaction-btn {
        width: 100%;
        padding: 8px 9px !important;
        border-radius: 12px !important;
      }
      #review-modal .review-submit-row {
        gap: 10px !important;
      }
      #review-modal #review-submit-btn {
        min-height: 48px !important;
      }
    }

    @media (max-width: 370px) {
      #story-modal .document-icon { display: none !important; }
      #story-modal .document-title-wrap { gap: 0 !important; }
      #story-modal .film-after-view-actions {
        grid-template-columns: 1fr !important;
      }
      #story-modal .film-after-view-actions button:first-child {
        grid-column: auto;
      }
      #review-modal .review-reaction-picker {
        grid-template-columns: 1fr !important;
      }
      #review-modal .review-modal-head .section-pill {
        margin-bottom: 7px !important;
      }
    }

    @media (orientation: landscape) and (max-height: 620px) {
      #review-modal .review-modal {
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
      }
      #review-modal .review-modal-head {
        padding: max(8px, env(safe-area-inset-top)) 12px 8px !important;
      }
      #review-modal .review-modal-head .section-pill,
      #review-modal .review-modal-subtitle {
        display: none !important;
      }
      #review-modal #review-modal-title {
        font-size: 1.25rem !important;
      }
      #review-modal #review-resource-title {
        margin-top: 3px !important;
        font-size: .78rem !important;
      }
      #review-modal .review-modal-scroll {
        padding: 10px 12px calc(14px + env(safe-area-inset-bottom)) !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #story-modal .doc-action,
      #story-modal .film-after-view-actions button,
      #review-modal button {
        transition: none !important;
      }
    }

    @media (hover: none), (pointer: coarse) {
      #story-modal .doc-action:hover,
      #story-modal .film-after-view-actions button:hover,
      #review-modal button:hover {
        transform: none;
      }
    }
  


    /* Phase 3.13 — dedicated short-height phone landscape layout.
       Portrait and tablet/desktop rules remain untouched. The film viewer and
       information pane become true siblings instead of an overlapping sheet. */
    @media (orientation: landscape) and (max-height: 620px) and (max-width: 1024px) {
      #story-modal {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        background: #06110a !important;
      }

      #story-modal .document-modal,
      #story-modal .document-modal.mobile-preview-mode,
      #story-modal .document-modal.landscape-preview-mode {
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
      }

      /* One compact header row instead of the portrait two-row header. */
      #story-modal .document-topbar,
      #story-modal .document-modal.mobile-preview-mode .document-topbar,
      #story-modal .document-modal.landscape-preview-mode .document-topbar {
        display: grid !important;
        grid-template-columns: minmax(180px, 1fr) minmax(0, auto) !important;
        grid-template-rows: minmax(46px, auto) !important;
        grid-template-areas: "title actions" !important;
        align-items: center !important;
        align-content: center !important;
        gap: 8px !important;
        min-height: 56px !important;
        padding:
          max(6px, env(safe-area-inset-top))
          max(54px, calc(10px + env(safe-area-inset-right)))
          6px
          max(10px, env(safe-area-inset-left)) !important;
        overflow: hidden !important;
      }
      #story-modal .document-title-wrap,
      #story-modal .document-modal.mobile-preview-mode .document-title-wrap,
      #story-modal .document-modal.landscape-preview-mode .document-title-wrap {
        grid-area: title !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        gap: 8px !important;
      }
      #story-modal .document-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 10px !important;
      }
      #story-modal .document-modal .document-title {
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: clamp(.88rem, 2.25vw, 1.04rem) !important;
        line-height: 1.12 !important;
      }
      #story-modal .document-subtitle {
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin-top: 2px !important;
        font-size: clamp(.61rem, 1.55vw, .72rem) !important;
        line-height: 1.18 !important;
      }

      #story-modal .document-actions,
      #story-modal .document-modal.mobile-preview-mode .document-actions,
      #story-modal .document-modal.landscape-preview-mode .document-actions {
        grid-area: actions !important;
        position: static !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: min(52vw, 430px) !important;
        min-height: 38px !important;
        max-height: 40px !important;
        justify-content: flex-end !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        padding: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
      }
      #story-modal .document-actions::-webkit-scrollbar { display: none !important; }
      #story-modal .document-actions .doc-action {
        flex: 0 0 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        border-radius: 999px !important;
      }
      #story-modal .document-actions .doc-action span { display: none !important; }
      #story-modal #modal-focus-preview-btn { display: none !important; }
      #story-modal #modal-toggle-details-btn {
        display: inline-flex !important;
        order: -1;
      }
      #story-modal .document-actions > .doc-action.square {
        position: absolute !important;
        top: max(9px, env(safe-area-inset-top)) !important;
        right: max(9px, env(safe-area-inset-right)) !important;
        z-index: 12 !important;
      }

      /* True two-column structure: player left, independently scrolling info right. */
      #story-modal .document-shell,
      #story-modal .document-modal.mobile-preview-mode .document-shell,
      #story-modal .document-modal.landscape-preview-mode .document-shell {
        display: grid !important;
        grid-template-columns: minmax(0, 62fr) minmax(250px, 38fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        grid-template-areas: "viewer info" !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        background: #07110b !important;
      }
      #story-modal .document-viewer,
      #story-modal .document-modal.mobile-preview-mode .document-viewer,
      #story-modal .document-modal.landscape-preview-mode .document-viewer {
        grid-area: viewer !important;
        position: relative !important;
        order: initial !important;
        display: grid !important;
        place-items: center !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 7px !important;
        overflow: hidden !important;
        border-right: 1px solid rgba(240,215,122,.16) !important;
        background: #050a07 !important;
      }
      #story-modal .document-info,
      #story-modal .document-modal.mobile-preview-mode .document-info,
      #story-modal .document-modal.landscape-preview-mode .document-info {
        grid-area: info !important;
        position: relative !important;
        inset: auto !important;
        order: initial !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding:
          11px
          max(12px, env(safe-area-inset-right))
          calc(14px + env(safe-area-inset-bottom))
          12px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
      }
      #story-modal .document-modal.details-hidden .document-shell,
      #story-modal .document-modal.landscape-preview-mode.details-hidden .document-shell {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: "viewer" !important;
      }
      #story-modal .document-modal.details-hidden .document-info,
      #story-modal .document-modal.landscape-preview-mode.details-hidden .document-info {
        display: none !important;
      }
      #story-modal .document-cover { display: none !important; }
      #story-modal .document-info .category-badge {
        margin: 0 0 6px !important;
        padding: 5px 9px !important;
        font-size: .67rem !important;
      }
      #story-modal .document-info > .document-meta-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 10px !important;
        row-gap: 0 !important;
        margin-top: 2px !important;
      }
      #story-modal .document-meta-chip {
        padding: 6px 0 !important;
        font-size: clamp(.65rem, 1.45vw, .75rem) !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere;
      }
      #story-modal .document-overview {
        margin-top: 9px !important;
        font-size: clamp(.68rem, 1.45vw, .77rem) !important;
        line-height: 1.45 !important;
      }
      #story-modal .creator-protection-notice {
        margin-top: 9px !important;
        padding: 8px 9px !important;
        font-size: .61rem !important;
        line-height: 1.35 !important;
      }

      /* Keep launch, active iframe and after-view states inside the left pane. */
      #story-modal .document-modal[data-resource-type="film"] .preview-zoom-content,
      #story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] .preview-zoom-content {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 100% !important;
        aspect-ratio: 16 / 9 !important;
        overflow: hidden !important;
        border-radius: 11px !important;
        background: #000 !important;
      }
      #story-modal .film-launch-copy {
        width: min(84%, 430px) !important;
        padding: 12px 16px !important;
        border-radius: 15px !important;
      }
      #story-modal .film-launch-copy p { display: none !important; }
      #story-modal .film-launch-kicker {
        margin-bottom: 5px !important;
        font-size: .62rem !important;
      }
      #story-modal .film-launch-copy h3 {
        font-size: clamp(1rem, 2.8vw, 1.42rem) !important;
        line-height: 1.08 !important;
      }
      #story-modal #modal-watch-film-button {
        min-width: 150px !important;
        min-height: 40px !important;
        margin-top: 11px !important;
        padding: 9px 16px !important;
      }

      #story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] .document-viewer {
        height: 100% !important;
        min-height: 0 !important;
        padding: 7px !important;
        overflow: hidden !important;
      }
      #story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] .film-launch-stage {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        min-height: 0 !important;
        height: 100% !important;
        padding: 8px !important;
        overflow: hidden !important;
      }
      #story-modal .film-after-view {
        width: min(92%, 520px) !important;
        padding: 13px 15px !important;
        border-radius: 16px !important;
      }
      #story-modal .film-after-view-icon {
        width: 38px !important;
        height: 38px !important;
        margin-bottom: 5px !important;
        border-radius: 12px !important;
      }
      #story-modal .film-after-view-copy h3 {
        margin: 3px 0 5px !important;
        font-size: clamp(1.08rem, 3vw, 1.45rem) !important;
      }
      #story-modal .film-after-view-copy p { display: none !important; }
      #story-modal .film-after-view-actions {
        display: grid !important;
        grid-template-columns: 1.25fr 1fr 1fr !important;
        gap: 7px !important;
        margin-top: 10px !important;
      }
      #story-modal .film-after-view-actions button,
      #story-modal .film-after-view-actions button:first-child {
        grid-column: auto !important;
        min-height: 40px !important;
        padding: 7px 9px !important;
        font-size: .71rem !important;
      }
    }

    /* Very narrow landscape phones: keep the details readable without
       starving the player. The Info control can still collapse this pane. */
    @media (orientation: landscape) and (max-height: 460px) and (max-width: 760px) {
      #story-modal .document-topbar,
      #story-modal .document-modal.mobile-preview-mode .document-topbar,
      #story-modal .document-modal.landscape-preview-mode .document-topbar {
        grid-template-columns: minmax(150px, 1fr) minmax(0, auto) !important;
        min-height: 52px !important;
        padding-top: max(4px, env(safe-area-inset-top)) !important;
        padding-bottom: 4px !important;
      }
      #story-modal .document-icon { display: none !important; }
      #story-modal .document-shell,
      #story-modal .document-modal.mobile-preview-mode .document-shell,
      #story-modal .document-modal.landscape-preview-mode .document-shell {
        grid-template-columns: minmax(0, 58fr) minmax(225px, 42fr) !important;
      }
      #story-modal .document-info > .document-meta-grid {
        grid-template-columns: 1fr !important;
      }
      #story-modal .creator-protection-notice { display: none !important; }
    }
  


    /* Phase 3.14 — cross-device film preview matrix.
       Presentation only: preserves provider playback, reflection, reviews,
       moderation, API, database, and all non-film resources. */

    #story-modal .document-modal[data-resource-type="film"],
    #story-modal .document-modal[data-resource-type="film"] *,
    #review-modal .review-modal,
    #review-modal .review-modal * {
      box-sizing: border-box;
    }

    #story-modal .document-modal[data-resource-type="film"] {
      --film-header-ink: #12301d;
      --film-header-muted: #566843;
      --film-surface: #07150d;
      --film-panel: #0d3b22;
      --film-panel-deep: #082817;
      --film-line: rgba(244, 220, 130, .20);
      --film-cream: #fff9e7;
      --film-gold: #efd36f;
      color: var(--film-cream);
    }

    #story-modal .document-modal[data-resource-type="film"] .document-title {
      color: var(--film-header-ink) !important;
      text-shadow: none !important;
    }
    #story-modal .document-modal[data-resource-type="film"] .document-subtitle {
      color: var(--film-header-muted) !important;
    }
    #story-modal .document-modal[data-resource-type="film"] .document-info {
      background:
        radial-gradient(circle at 12% 0%, rgba(239,211,111,.10), transparent 30%),
        linear-gradient(160deg, var(--film-panel), var(--film-panel-deep)) !important;
      color: var(--film-cream) !important;
      border-color: var(--film-line) !important;
    }
    #story-modal .document-modal[data-resource-type="film"] .document-overview,
    #story-modal .document-modal[data-resource-type="film"] .document-meta-chip,
    #story-modal .document-modal[data-resource-type="film"] .creator-protection-notice {
      color: rgba(255,249,231,.94) !important;
    }
    #story-modal .document-modal[data-resource-type="film"] .document-meta-chip {
      background: transparent !important;
      border-width: 0 0 1px !important;
      border-radius: 0 !important;
      border-color: rgba(255,249,231,.15) !important;
    }
    #story-modal .document-modal[data-resource-type="film"] .category-badge {
      color: #fff9e7 !important;
      background: rgba(5,20,11,.62) !important;
      border: 1px solid rgba(239,211,111,.20) !important;
    }
    #story-modal .document-modal[data-resource-type="film"] .document-viewer {
      background: #041008 !important;
    }
    #story-modal .document-modal[data-resource-type="film"] .preview-zoom-content {
      min-width: 0 !important;
      min-height: 0 !important;
    }
    #story-modal .document-modal[data-resource-type="film"] iframe,
    #story-modal .document-modal[data-resource-type="film"] img {
      max-width: 100% !important;
    }
    #story-modal .document-modal[data-resource-type="film"] .film-launch-copy {
      border-color: rgba(239,211,111,.38) !important;
      background:
        radial-gradient(circle at 50% 0%, rgba(239,211,111,.12), transparent 42%),
        linear-gradient(145deg, rgba(9,35,20,.97), rgba(3,16,9,.98)) !important;
      color: var(--film-cream) !important;
      box-shadow: 0 22px 56px rgba(0,0,0,.34) !important;
    }
    #story-modal .document-modal[data-resource-type="film"] .film-launch-kicker {
      color: var(--film-gold) !important;
    }
    #story-modal .document-modal[data-resource-type="film"] #modal-watch-film-button {
      background: linear-gradient(145deg, #f2da7e, #d2a934) !important;
      border: 1px solid rgba(255,246,194,.72) !important;
      color: #102719 !important;
      box-shadow: 0 12px 26px rgba(0,0,0,.24) !important;
    }

    /* Phone portrait — iPhone 11/12/13/14, compact iPhones and common Androids. */
    @media (orientation: portrait) and (max-width: 599px) {
      #story-modal {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        background: #041008 !important;
      }
      #story-modal .document-modal[data-resource-type="film"],
      #story-modal .document-modal[data-resource-type="film"].mobile-preview-mode,
      #story-modal .document-modal[data-resource-type="film"].landscape-preview-mode {
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-topbar {
        position: relative !important;
        top: auto !important;
        z-index: 20 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        gap: 8px !important;
        min-height: 0 !important;
        padding:
          max(10px, env(safe-area-inset-top))
          max(10px, env(safe-area-inset-right))
          9px
          max(10px, env(safe-area-inset-left)) !important;
        overflow: visible !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-title-wrap {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 46px !important;
        padding-right: 56px !important;
        gap: 10px !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 13px !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-title-copy {
        min-width: 0 !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-title {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: clamp(1.02rem, 4.9vw, 1.28rem) !important;
        line-height: 1.12 !important;
        letter-spacing: -.022em !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-subtitle {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        white-space: normal !important;
        overflow: hidden !important;
        margin-top: 4px !important;
        font-size: clamp(.72rem, 3.3vw, .84rem) !important;
        line-height: 1.22 !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-actions {
        position: static !important;
        display: flex !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 46px !important;
        justify-content: flex-start !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 0 52px 1px 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-actions::-webkit-scrollbar {
        display: none !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-actions .doc-action {
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border-radius: 999px !important;
        scroll-snap-align: start;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-actions .doc-action span {
        display: none !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-actions > .doc-action.square {
        position: absolute !important;
        top: max(10px, env(safe-area-inset-top)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        z-index: 30 !important;
      }
      #story-modal .document-modal[data-resource-type="film"] #modal-focus-preview-btn {
        display: none !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-shell {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain !important;
        background: #06140c !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-viewer {
        order: 1 !important;
        position: relative !important;
        display: grid !important;
        place-items: center !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
      }
      #story-modal .document-modal[data-resource-type="film"]:not([data-film-playback="reflection"]) .preview-zoom-content {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 9 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        background: #000 !important;
      }
      #story-modal .document-modal[data-resource-type="film"]:not([data-film-playback="reflection"]) #modal-preview-frame {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-info {
        order: 2 !important;
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding:
          18px
          max(18px, env(safe-area-inset-right))
          calc(26px + env(safe-area-inset-bottom))
          max(18px, env(safe-area-inset-left)) !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-cover {
        display: none !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-info > .document-meta-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        margin-top: 14px !important;
      }
      #story-modal .document-modal[data-resource-type="film"] #modal-resource-details {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        margin-top: 0 !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-meta-chip {
        min-width: 0 !important;
        padding: 11px 0 !important;
        font-size: clamp(.88rem, 3.7vw, .98rem) !important;
        line-height: 1.38 !important;
        overflow-wrap: anywhere !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-overview {
        margin-top: 17px !important;
        font-size: clamp(.93rem, 3.8vw, 1.02rem) !important;
        line-height: 1.62 !important;
        overflow-wrap: anywhere !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .creator-protection-notice {
        margin-top: 18px !important;
        padding: 13px 14px !important;
        font-size: .78rem !important;
        line-height: 1.45 !important;
        border-radius: 14px !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .film-launch-copy {
        width: calc(100% - 34px) !important;
        max-width: 610px !important;
        padding: clamp(18px, 5vw, 28px) clamp(17px, 5vw, 30px) !important;
        border-radius: clamp(18px, 5vw, 24px) !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .film-launch-copy h3 {
        font-size: clamp(1.38rem, 6vw, 1.95rem) !important;
        line-height: 1.12 !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .film-launch-copy p {
        max-width: 34rem !important;
        margin-inline: auto !important;
        font-size: clamp(.82rem, 3.4vw, .95rem) !important;
        line-height: 1.5 !important;
      }
      #story-modal .document-modal[data-resource-type="film"] #modal-watch-film-button {
        width: min(100%, 310px) !important;
        min-height: 50px !important;
        margin-top: 17px !important;
        justify-content: center !important;
      }
      #story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] .document-viewer,
      #story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] .preview-zoom-content,
      #story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] .film-launch-stage {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        overflow: visible !important;
      }
      #story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] .film-launch-stage {
        position: relative !important;
        inset: auto !important;
        padding: 18px 14px !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .film-after-view {
        width: 100% !important;
        max-width: 560px !important;
        padding: 20px 17px !important;
        border-radius: 21px !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .film-after-view-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .film-after-view-actions button:first-child {
        grid-column: 1 / -1 !important;
      }
    }

    /* Extra-compact portrait phones (320–374 CSS px). */
    @media (orientation: portrait) and (max-width: 374px) {
      #story-modal .document-modal[data-resource-type="film"] .document-icon {
        display: none !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-title-wrap {
        gap: 0 !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-title {
        font-size: 1rem !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .film-launch-copy p {
        display: none !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .film-after-view-actions {
        grid-template-columns: 1fr !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .film-after-view-actions button:first-child {
        grid-column: auto !important;
      }
    }

    /* Phone landscape — includes iPhone 11 landscape and common Android phones. */
    @media (orientation: landscape) and (max-width: 1024px) and (max-height: 620px) {
      #story-modal .document-modal[data-resource-type="film"] .document-topbar {
        grid-template-columns: minmax(160px, 1fr) minmax(0, auto) !important;
        min-height: 54px !important;
        padding:
          max(5px, env(safe-area-inset-top))
          max(54px, calc(8px + env(safe-area-inset-right)))
          5px
          max(9px, env(safe-area-inset-left)) !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-title-wrap {
        gap: 8px !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-title {
        font-size: clamp(.88rem, 2.05vw, 1.08rem) !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-subtitle {
        font-size: clamp(.60rem, 1.38vw, .72rem) !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-actions {
        max-width: min(49vw, 410px) !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-actions .doc-action {
        flex-basis: 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-shell {
        grid-template-columns: minmax(0, 64fr) minmax(260px, 36fr) !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-viewer {
        padding: 8px !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-info {
        padding:
          12px
          max(13px, env(safe-area-inset-right))
          calc(13px + env(safe-area-inset-bottom))
          13px !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-info > .document-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0 10px !important;
      }
      #story-modal .document-modal[data-resource-type="film"] #modal-resource-details {
        grid-template-columns: 1fr !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-meta-chip {
        padding: 7px 0 !important;
        font-size: clamp(.67rem, 1.45vw, .78rem) !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-overview {
        margin-top: 10px !important;
        font-size: clamp(.69rem, 1.42vw, .80rem) !important;
        line-height: 1.48 !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .creator-protection-notice {
        margin-top: 10px !important;
        padding: 8px 9px !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .film-launch-copy {
        width: min(82%, 470px) !important;
        padding: 13px 17px !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .film-launch-copy p {
        display: none !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .film-launch-copy h3 {
        font-size: clamp(1rem, 2.7vw, 1.42rem) !important;
      }
      #story-modal .document-modal[data-resource-type="film"] #modal-watch-film-button {
        min-height: 40px !important;
        margin-top: 10px !important;
      }
    }

    /* Very short phone landscape: preserve player area and keep controls usable. */
    @media (orientation: landscape) and (max-width: 900px) and (max-height: 400px) {
      #story-modal .document-modal[data-resource-type="film"] .document-topbar {
        min-height: 48px !important;
        padding-top: max(3px, env(safe-area-inset-top)) !important;
        padding-bottom: 3px !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-icon,
      #story-modal .document-modal[data-resource-type="film"] .document-subtitle {
        display: none !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-shell {
        grid-template-columns: minmax(0, 61fr) minmax(235px, 39fr) !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .creator-protection-notice {
        display: none !important;
      }
    }

    /* Tablet portrait — iPad Mini, iPad, iPad Air and Android tablets. */
    @media (orientation: portrait) and (min-width: 600px) and (max-width: 1024px) {
      #story-modal {
        padding: 12px !important;
        align-items: center !important;
        justify-content: center !important;
      }
      #story-modal .document-modal[data-resource-type="film"],
      #story-modal .document-modal[data-resource-type="film"].mobile-preview-mode,
      #story-modal .document-modal[data-resource-type="film"].landscape-preview-mode {
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        width: min(96vw, 920px) !important;
        height: min(94dvh, 1060px) !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 24px !important;
        overflow: hidden !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-topbar {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(260px, 1fr) minmax(0, auto) !important;
        grid-template-areas: "title actions" !important;
        align-items: center !important;
        gap: 14px !important;
        min-height: 78px !important;
        padding: 13px 64px 13px 16px !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-title-wrap {
        grid-area: title !important;
        max-width: none !important;
        min-width: 0 !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-title {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: clamp(1.08rem, 2.7vw, 1.42rem) !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-subtitle {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: .82rem !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-actions {
        grid-area: actions !important;
        position: static !important;
        width: auto !important;
        max-width: min(48vw, 470px) !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-actions::-webkit-scrollbar {
        display: none !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-actions .doc-action {
        flex: 0 0 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-actions .doc-action span {
        display: none !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-actions > .doc-action.square {
        position: absolute !important;
        top: 18px !important;
        right: 16px !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-shell {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-viewer {
        order: 1 !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 14px 14px 0 !important;
        overflow: hidden !important;
      }
      #story-modal .document-modal[data-resource-type="film"]:not([data-film-playback="reflection"]) .preview-zoom-content {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 17px !important;
        overflow: hidden !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-info {
        order: 2 !important;
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        padding: 24px 26px calc(30px + env(safe-area-inset-bottom)) !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-info > .document-meta-grid,
      #story-modal .document-modal[data-resource-type="film"] #modal-resource-details {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 24px !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-meta-chip {
        padding: 12px 0 !important;
        font-size: .95rem !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-overview {
        font-size: 1rem !important;
        line-height: 1.68 !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .film-launch-copy {
        width: min(74%, 620px) !important;
      }
    }

    /* Tablet landscape and compact laptops — persistent two-column reading view. */
    @media (orientation: landscape) and (min-width: 768px) and (min-height: 621px) and (max-width: 1366px) {
      #story-modal {
        padding: 12px !important;
        align-items: center !important;
        justify-content: center !important;
      }
      #story-modal .document-modal[data-resource-type="film"],
      #story-modal .document-modal[data-resource-type="film"].mobile-preview-mode,
      #story-modal .document-modal[data-resource-type="film"].landscape-preview-mode {
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        width: min(97vw, 1280px) !important;
        height: min(94dvh, 860px) !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 22px !important;
        overflow: hidden !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-topbar {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(300px, 1fr) minmax(0, auto) !important;
        grid-template-areas: "title actions" !important;
        align-items: center !important;
        gap: 14px !important;
        min-height: 72px !important;
        padding: 12px 68px 12px 18px !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-title-wrap {
        grid-area: title !important;
        max-width: none !important;
        min-width: 0 !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-title {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: clamp(1.06rem, 2vw, 1.38rem) !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-subtitle {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-actions {
        grid-area: actions !important;
        position: static !important;
        width: auto !important;
        max-width: min(55vw, 620px) !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-actions::-webkit-scrollbar {
        display: none !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-actions .doc-action {
        flex: 0 0 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-actions .doc-action span {
        display: none !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-actions > .doc-action.square {
        position: absolute !important;
        top: 15px !important;
        right: 16px !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-shell {
        display: grid !important;
        grid-template-columns: minmax(0, 63fr) minmax(300px, 37fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        grid-template-areas: "viewer info" !important;
        min-height: 0 !important;
        overflow: hidden !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-viewer {
        grid-area: viewer !important;
        display: grid !important;
        place-items: center !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: clamp(12px, 1.6vw, 22px) !important;
        overflow: hidden !important;
        border-right: 1px solid var(--film-line) !important;
      }
      #story-modal .document-modal[data-resource-type="film"]:not([data-film-playback="reflection"]) .preview-zoom-content {
        width: 100% !important;
        height: auto !important;
        max-height: 100% !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-info {
        grid-area: info !important;
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: clamp(18px, 2vw, 28px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-info > .document-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 18px !important;
      }
      #story-modal .document-modal[data-resource-type="film"] #modal-resource-details {
        grid-template-columns: 1fr !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-overview {
        font-size: clamp(.86rem, 1.15vw, .98rem) !important;
        line-height: 1.62 !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .film-launch-copy {
        width: min(78%, 620px) !important;
      }
      #story-modal .document-modal[data-resource-type="film"].details-hidden .document-shell {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: "viewer" !important;
      }
      #story-modal .document-modal[data-resource-type="film"].details-hidden .document-info {
        display: none !important;
      }
    }

    /* Large laptops and desktops — keep the established two-column layout,
       but cap line lengths and retain comfortable viewing proportions. */
    @media (min-width: 1367px) {
      #story-modal .document-modal[data-resource-type="film"] {
        width: min(94vw, 1480px) !important;
        height: min(90dvh, 900px) !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-shell {
        grid-template-columns: minmax(320px, 34%) minmax(0, 66%) !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-info {
        padding: clamp(24px, 2vw, 34px) !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .document-overview {
        max-width: 64ch !important;
      }
    }

    /* Accessible motion and coarse-pointer behavior across the matrix. */
    @media (prefers-reduced-motion: reduce) {
      #story-modal .document-modal[data-resource-type="film"] *,
      #review-modal .review-modal * {
        scroll-behavior: auto !important;
      }
    }
    @media (hover: none), (pointer: coarse) {
      #story-modal .document-modal[data-resource-type="film"] .doc-action:hover,
      #story-modal .document-modal[data-resource-type="film"] button:hover {
        transform: none !important;
      }
    }
  


    /* Phase 3.15 — small-device site-wide repair.
       Targets iPhone 11-class phones and nearby CSS viewport sizes without
       changing tablet, laptop, desktop, API, database, or content behavior. */

    .small-device-menu-toggle,
    .small-device-nav-scrim { display: none; }

    @media (max-width: 480px),
           (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
      html,
      body:not(.admin-mode) {
        max-width: 100%;
        overflow-x: clip !important;
      }

      body:not(.admin-mode) .navbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 2147482000 !important;
        min-height: 56px !important;
        border-bottom-width: 1px !important;
      }

      body:not(.admin-mode) .navbar-inner {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 42px !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 56px !important;
        padding:
          max(7px, env(safe-area-inset-top))
          max(10px, env(safe-area-inset-right))
          7px
          max(10px, env(safe-area-inset-left)) !important;
        gap: 9px !important;
      }

      body:not(.admin-mode) .navbar-brand {
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 8px !important;
        font-size: .98rem !important;
        overflow: hidden !important;
      }

      body:not(.admin-mode) .navbar-brand-icon {
        flex: 0 0 36px !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 999px !important;
      }

      body:not(.admin-mode) #brand-name {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }

      body:not(.admin-mode) #beta-brand-badge {
        flex: 0 0 auto !important;
        min-height: 20px !important;
        max-width: 78px !important;
        padding: 2px 7px !important;
        font-size: .61rem !important;
        line-height: 1 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }

      body:not(.admin-mode) .small-device-menu-toggle {
        display: inline-grid !important;
        place-items: center !important;
        justify-self: end !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border: 1px solid rgba(54,87,58,.20) !important;
        border-radius: 14px !important;
        background: rgba(255,253,244,.92) !important;
        color: #23452d !important;
        box-shadow: 0 8px 18px rgba(31,55,34,.08) !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
      }

      body:not(.admin-mode) .small-device-menu-icon,
      body:not(.admin-mode) .small-device-menu-icon::before,
      body:not(.admin-mode) .small-device-menu-icon::after {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
        content: '';
        transition: transform .18s ease, opacity .18s ease;
      }
      body:not(.admin-mode) .small-device-menu-icon { position: relative; }
      body:not(.admin-mode) .small-device-menu-icon::before { position: absolute; top: -6px; left: 0; }
      body:not(.admin-mode) .small-device-menu-icon::after { position: absolute; top: 6px; left: 0; }
      body:not(.admin-mode).small-device-nav-open .small-device-menu-icon { background: transparent; }
      body:not(.admin-mode).small-device-nav-open .small-device-menu-icon::before { top: 0; transform: rotate(45deg); }
      body:not(.admin-mode).small-device-nav-open .small-device-menu-icon::after { top: 0; transform: rotate(-45deg); }

      body:not(.admin-mode) .nav-links {
        display: none !important;
        position: fixed !important;
        z-index: 2147482100 !important;
        top: 56px !important;
        left: max(8px, env(safe-area-inset-left)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - 66px - env(safe-area-inset-bottom)) !important;
        margin: 0 !important;
        padding: 10px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border: 1px solid rgba(54,87,58,.18) !important;
        border-radius: 18px !important;
        background: rgba(255,250,239,.985) !important;
        box-shadow: 0 24px 60px rgba(17,38,24,.28) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        backdrop-filter: blur(18px) !important;
      }

      body:not(.admin-mode).small-device-nav-open .nav-links {
        display: grid !important;
      }

      body:not(.admin-mode) .nav-link {
        display: flex !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        padding: 9px 11px !important;
        gap: 8px !important;
        border: 1px solid rgba(54,87,58,.10) !important;
        border-radius: 13px !important;
        background: rgba(255,255,255,.68) !important;
        font-size: .78rem !important;
        overflow: hidden !important;
      }
      body:not(.admin-mode) .nav-link svg { display: block !important; flex: 0 0 16px !important; }
      body:not(.admin-mode) .nav-link span { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; }
      body:not(.admin-mode) .nav-link::after { display: none !important; }
      body:not(.admin-mode) .nav-link.active {
        border-color: rgba(54,87,58,.28) !important;
        background: #eaf3e3 !important;
      }

      body:not(.admin-mode) .small-device-nav-scrim {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 2147482050;
        border: 0;
        background: rgba(3,18,10,.38);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
      }
      body:not(.admin-mode).small-device-nav-open .small-device-nav-scrim { display: block !important; }

      body:not(.admin-mode) #user-view,
      body:not(.admin-mode) #user-view * {
        min-width: 0;
      }

      body:not(.admin-mode) #user-view > .section,
      body:not(.admin-mode) .phase8b-editorial-section {
        max-width: 100% !important;
        overflow-x: clip !important;
      }

      body:not(.admin-mode) #editorial-people,
      body:not(.admin-mode) #editorial-collaborators {
        overflow: hidden !important;
      }

      body:not(.admin-mode) #editorial-people .phase8b-section-head,
      body:not(.admin-mode) #editorial-collaborators .phase8b-section-head {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        column-gap: 10px !important;
        padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right)) !important;
      }

      body:not(.admin-mode) #editorial-people .phase8b-people-grid,
      body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding:
          5px
          max(14px, env(safe-area-inset-right))
          14px
          max(14px, env(safe-area-inset-left)) !important;
        gap: 14px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-padding-inline: max(14px, env(safe-area-inset-left)) !important;
        scroll-snap-type: x proximity !important;
        mask-image: none !important;
      }

      body:not(.admin-mode) #editorial-people .phase8b-person-card,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-card {
        box-sizing: border-box !important;
        flex: 0 0 108px !important;
        flex-shrink: 0 !important;
        width: 108px !important;
        min-width: 108px !important;
        max-width: 108px !important;
        min-height: 138px !important;
        padding: 0 !important;
        gap: 7px !important;
        scroll-snap-align: start !important;
      }

      body:not(.admin-mode) #editorial-people .phase8b-person-image,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-image {
        width: 68px !important;
        height: 68px !important;
        min-width: 68px !important;
        min-height: 68px !important;
      }

      body:not(.admin-mode) #editorial-people .phase8b-person-copy,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-copy {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 3px !important;
      }

      body:not(.admin-mode) #editorial-people .phase8b-person-role,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-role {
        order: -1 !important;
        max-width: 108px !important;
        color: #60744d !important;
        font-size: .60rem !important;
        line-height: 1.15 !important;
        font-weight: 900 !important;
        letter-spacing: .035em !important;
        text-transform: uppercase !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
      }

      body:not(.admin-mode) #editorial-people .phase8b-person-name,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-name {
        max-width: 108px !important;
        min-height: 2.4em !important;
        font-size: .76rem !important;
        line-height: 1.16 !important;
        -webkit-line-clamp: 3 !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
      }

      body:not(.admin-mode) #editorial-people .phase8b-person-affiliation,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-affiliation {
        max-width: 108px !important;
        font-size: .60rem !important;
        line-height: 1.2 !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
      }

      body:not(.admin-mode) #chat-launcher[data-poopo-size-engine="3"]:not(.is-dragging),
      body:not(.admin-mode) #chat-launcher:not([data-poopo-size-engine]):not(.is-dragging) {
        left: auto !important;
        top: auto !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
        min-height: 62px !important;
        max-width: 62px !important;
        max-height: 62px !important;
        transform: none !important;
        z-index: 120 !important;
      }
      body:not(.admin-mode) #chat-launcher .chat-launcher-text { display: none !important; }
      body:not(.admin-mode) #companion-bubble {
        right: max(10px, env(safe-area-inset-right)) !important;
        max-width: min(190px, calc(100vw - 86px)) !important;
        font-size: .72rem !important;
      }
      body:not(.admin-mode).small-device-nav-open #chat-launcher,
      body.film-stable-cinema-active #chat-launcher,
      body.modal-open #chat-launcher { visibility: hidden !important; pointer-events: none !important; }

      body.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"] .document-topbar,
      body.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"] .document-toolbar,
      body.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"] .document-info,
      body.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"] .preview-tools,
      body.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"] .preview-toolbar,
      body.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"] #modal-film-launch {
        display: none !important;
      }
      body.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"] .document-shell {
        display: block !important;
        grid-template-columns: 1fr !important;
        grid-template-areas: "viewer" !important;
      }

      body:not(.admin-mode) #links .portal-title,
      body:not(.admin-mode) #links .portal-desc,
      body:not(.admin-mode) #links .portal-category,
      body:not(.admin-mode) #links .portal-action {
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
      }
    }

    /* Portrait phones near iPhone 11 size and smaller. */
    @media (orientation: portrait) and (max-width: 480px) {
      body:not(.admin-mode) #home.hero {
        width: calc(100% - 20px) !important;
        margin: 10px auto 16px !important;
      }
      body:not(.admin-mode) .phase8b-editorial-section,
      body:not(.admin-mode) #stories.section,
      body:not(.admin-mode) #links.section,
      body:not(.admin-mode) #about.section {
        width: 100% !important;
        padding-left: max(16px, env(safe-area-inset-left)) !important;
        padding-right: max(16px, env(safe-area-inset-right)) !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-section-head,
      body:not(.admin-mode) #editorial-collaborators .phase8b-section-head {
        grid-template-areas: "eyebrow action" "title title" "copy copy" !important;
        align-items: center !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-section-head p,
      body:not(.admin-mode) #editorial-collaborators .phase8b-section-head p {
        font-size: .84rem !important;
        line-height: 1.45 !important;
      }
      body:not(.admin-mode) #links .portal-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
      body:not(.admin-mode) #links .portal-card {
        min-height: 0 !important;
        padding: 16px !important;
        grid-template-columns: 50px minmax(0, 1fr) !important;
        gap: 13px !important;
        border-radius: 18px !important;
      }
      body:not(.admin-mode) #links .portal-icon {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        border-radius: 14px !important;
      }
      body:not(.admin-mode) #links .portal-desc { -webkit-line-clamp: 3 !important; font-size: .82rem !important; }
    }

    /* Short landscape phones: iPhone SE/8, X/11/12/13/14, Plus/Max and similar Androids. */
    @media (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
      body:not(.admin-mode) .navbar-inner {
        grid-template-columns: minmax(0, 1fr) 40px !important;
        min-height: 50px !important;
        padding-top: max(5px, env(safe-area-inset-top)) !important;
        padding-bottom: 5px !important;
      }
      body:not(.admin-mode) .navbar { min-height: 50px !important; }
      body:not(.admin-mode) .navbar-brand-icon { width: 34px !important; height: 34px !important; flex-basis: 34px !important; }
      body:not(.admin-mode) .navbar-brand { font-size: .92rem !important; }
      body:not(.admin-mode) .small-device-menu-toggle { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; }
      body:not(.admin-mode) .nav-links {
        top: 50px !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        max-height: calc(100dvh - 58px - env(safe-area-inset-bottom)) !important;
        padding: 8px !important;
        gap: 7px !important;
      }
      body:not(.admin-mode) .nav-link {
        justify-content: center !important;
        min-height: 42px !important;
        padding: 7px 6px !important;
        font-size: .70rem !important;
      }
      body:not(.admin-mode) .nav-link svg { display: none !important; }

      body:not(.admin-mode) #user-view > .section,
      body:not(.admin-mode) .phase8b-editorial-section,
      body:not(.admin-mode) #stories.section,
      body:not(.admin-mode) #links.section,
      body:not(.admin-mode) #about.section {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: max(16px, env(safe-area-inset-left)) !important;
        padding-right: max(16px, env(safe-area-inset-right)) !important;
      }

      body:not(.admin-mode) #home.hero {
        width: calc(100% - max(20px, env(safe-area-inset-left)) - max(20px, env(safe-area-inset-right))) !important;
        min-height: 255px !important;
        margin: 8px auto 14px !important;
        padding: 18px !important;
      }

      body:not(.admin-mode) #editorial-people,
      body:not(.admin-mode) #editorial-collaborators {
        padding-top: 24px !important;
        padding-bottom: 22px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-people-grid.phase8b-people-grid,
      body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid.phase8b-people-grid {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-card.phase8b-person-card,
      body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n),
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-card.phase8b-person-card,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(n) {
        box-sizing: border-box !important;
        flex: 0 0 108px !important;
        width: 108px !important;
        min-width: 108px !important;
        max-width: 108px !important;
        min-height: 138px !important;
        padding: 0 !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-section-head,
      body:not(.admin-mode) #editorial-collaborators .phase8b-section-head {
        margin-bottom: 12px !important;
        grid-template-areas: "eyebrow action" "title action" !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-section-head p,
      body:not(.admin-mode) #editorial-collaborators .phase8b-section-head p {
        display: none !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-section-head h2,
      body:not(.admin-mode) #editorial-collaborators .phase8b-section-head h2 {
        font-size: clamp(1.25rem, 3vw, 1.65rem) !important;
        line-height: 1.05 !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-view-all-people,
      body:not(.admin-mode) #editorial-collaborators .phase8b-view-all-people {
        min-height: 38px !important;
        padding: 7px 12px !important;
        font-size: .72rem !important;
      }

      body:not(.admin-mode) .mobile-library-shelf:not([hidden]) {
        display: block !important;
      }
      body:not(.admin-mode) .mobile-library-shelf {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: 10px !important;
      }
      body:not(.admin-mode) .mobile-library-shelf-head {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 12px !important;
      }
      body:not(.admin-mode) .mobile-library-shelf-title {
        margin: 0 !important;
        font-size: 1rem !important;
        line-height: 1.15 !important;
      }
      body:not(.admin-mode) .mobile-library-shelf-count {
        flex: 0 0 auto !important;
      }
      body:not(.admin-mode) .mobile-library-shelf-tabs {
        display: flex !important;
        gap: 7px !important;
        overflow-x: auto !important;
      }
      body:not(.admin-mode) .mobile-library-shelf-head,
      body:not(.admin-mode) .mobile-library-shelf-tabs,
      body:not(.admin-mode) .mobile-library-rail {
        padding-left: max(12px, env(safe-area-inset-left)) !important;
        padding-right: max(12px, env(safe-area-inset-right)) !important;
      }
      body:not(.admin-mode) .mobile-library-rail {
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(180px, 42vw) !important;
        gap: 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
      }
      body:not(.admin-mode) .mobile-library-rail::-webkit-scrollbar { display: none !important; }
      body:not(.admin-mode) .mobile-library-pick {
        position: relative !important;
        isolation: isolate !important;
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        aspect-ratio: 4 / 3 !important;
        overflow: hidden !important;
        border: 1px solid rgba(255,255,255,.72) !important;
        border-radius: 15px !important;
        background: linear-gradient(145deg,#22462d,#081b10) !important;
        color: #fff !important;
        scroll-snap-align: start !important;
      }
      body:not(.admin-mode) .mobile-library-pick::after {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
        background: linear-gradient(to top, rgba(5,16,9,.92), rgba(5,16,9,.06) 70%) !important;
        pointer-events: none !important;
      }
      body:not(.admin-mode) .mobile-library-pick-copy {
        position: absolute !important;
        z-index: 2 !important;
        inset: auto 0 0 !important;
      }
      body:not(.admin-mode) .mobile-library-pick-copy { padding: 11px !important; }
      body:not(.admin-mode) .mobile-library-pick-title { font-size: .84rem !important; }
      body:not(.admin-mode) #stories-container.content-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
      }

      body:not(.admin-mode) #links .portal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
      }
      body:not(.admin-mode) #links .portal-card {
        min-height: 174px !important;
        padding: 14px !important;
        grid-template-columns: 48px minmax(0, 1fr) !important;
        gap: 12px !important;
        border-radius: 17px !important;
      }
      body:not(.admin-mode) #links .portal-icon {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        border-radius: 13px !important;
      }
      body:not(.admin-mode) #links .portal-category { margin-bottom: 4px !important; font-size: .58rem !important; }
      body:not(.admin-mode) #links .portal-title { margin-bottom: 6px !important; font-size: .91rem !important; }
      body:not(.admin-mode) #links .portal-desc { font-size: .72rem !important; line-height: 1.38 !important; -webkit-line-clamp: 3 !important; }
      body:not(.admin-mode) #links .portal-action { padding-top: 10px !important; font-size: .68rem !important; }

      body:not(.admin-mode) #chat-launcher[data-poopo-size-engine="3"]:not(.is-dragging),
      body:not(.admin-mode) #chat-launcher:not([data-poopo-size-engine]):not(.is-dragging) {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
        max-width: 54px !important;
        max-height: 54px !important;
      }

      /* Cinema must show only the film and compact controls—not the details pane. */
      body.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"] .document-topbar,
      body.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"] .document-toolbar,
      body.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"] .document-info,
      body.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"] .preview-tools,
      body.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"] .preview-toolbar,
      body.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"] #modal-film-launch {
        display: none !important;
      }
      body.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"] .document-shell {
        grid-template-columns: 1fr !important;
        grid-template-areas: "viewer" !important;
      }
      body.film-stable-cinema-active .film-stable-cinema-chrome {
        min-height: var(--film-cinema-header, 48px) !important;
        padding:
          max(5px, env(safe-area-inset-top))
          max(9px, env(safe-area-inset-right))
          5px
          max(9px, env(safe-area-inset-left)) !important;
      }
      body.film-stable-cinema-active .film-stable-cinema-logo {
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
      }
      body.film-stable-cinema-active .film-stable-cinema-copy strong { font-size: .78rem !important; }
      body.film-stable-cinema-active .film-stable-cinema-copy small { display: none !important; }
      body.film-stable-cinema-active .film-stable-cinema-exit {
        min-height: 36px !important;
        height: 36px !important;
        padding: 0 11px !important;
        font-size: .72rem !important;
      }
    }

    @media (orientation: landscape) and (max-width: 700px) and (max-height: 420px) {
      body:not(.admin-mode) #brand-name { max-width: 112px !important; }
      body:not(.admin-mode) #beta-brand-badge { display: none !important; }
      body:not(.admin-mode) .nav-links { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
      body:not(.admin-mode) .mobile-library-rail { grid-auto-columns: minmax(168px, 47vw) !important; }
      body:not(.admin-mode) #stories-container.content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
      body:not(.admin-mode) #links .portal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    }

    @media (prefers-reduced-motion: reduce) {
      .small-device-menu-icon,
      .small-device-menu-icon::before,
      .small-device-menu-icon::after { transition: none !important; }
    }
  


    /* Phase 3.16 — verified repair from physical iPhone 11 screenshots.
       Keeps the Phase 3.15 design while correcting menu stacking, launch-card
       clipping, collaborator alignment, incomplete grid rows, and Po-opo collisions. */

    @media (max-width: 480px),
           (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
      body:not(.admin-mode).small-device-nav-open {
        overflow: hidden !important;
        overscroll-behavior: none !important;
      }
      body:not(.admin-mode).small-device-nav-open .navbar {
        z-index: 2147482300 !important;
        overflow: visible !important;
      }
      body:not(.admin-mode) .small-device-nav-scrim {
        z-index: 2147482100 !important;
      }
      body:not(.admin-mode).small-device-nav-open .nav-links {
        z-index: 2147482400 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
      }
      body:not(.admin-mode).small-device-nav-open .navbar-inner {
        overflow: visible !important;
      }
    }

    /* The original paragraph made the launch card taller than the 16:9 stage
       on iPhone portrait. Keep the entry state clean and fully tappable. */
    @media (orientation: portrait) and (max-width: 480px) {
      #story-modal .document-modal[data-resource-type="film"][data-preview-kind="film-launch"] .film-launch-stage {
        padding: 10px !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .film-launch-copy {
        width: calc(100% - 20px) !important;
        padding: 13px 15px 14px !important;
        border-radius: 18px !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .film-launch-kicker {
        margin-bottom: 5px !important;
        gap: 6px !important;
        font-size: .66rem !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .film-launch-copy h3 {
        font-size: clamp(1.22rem, 5.6vw, 1.58rem) !important;
        line-height: 1.06 !important;
      }
      #story-modal .document-modal[data-resource-type="film"] .film-launch-copy p {
        display: none !important;
      }
      #story-modal .document-modal[data-resource-type="film"] #modal-watch-film-button {
        width: min(100%, 290px) !important;
        min-height: 44px !important;
        margin-top: 11px !important;
        padding-block: 9px !important;
      }
    }

    /* Center a complete collaborator set, but retain a left-starting swipe rail
       whenever the profiles are wider than the available screen. */
    body:not(.admin-mode) #editorial-people .phase8b-people-grid.phase316-can-center,
    body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid.phase316-can-center {
      justify-content: center !important;
    }

    @media (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
      body:not(.admin-mode) #editorial-people .phase8b-people-grid,
      body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid {
        padding-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right)) !important;
      }

      /* The bubble is optional guidance and should never cover a card on a
         short landscape screen. Po-opo remains available as a compact button. */
      body:not(.admin-mode) #companion-bubble,
      body:not(.admin-mode) .companion-bubble {
        display: none !important;
      }
      body:not(.admin-mode) #chat-launcher[data-poopo-size-engine="3"],
      body:not(.admin-mode) #chat-launcher:not([data-poopo-size-engine]) {
        right: max(7px, env(safe-area-inset-right)) !important;
        bottom: max(7px, env(safe-area-inset-bottom)) !important;
        z-index: 80 !important;
      }
    }
  


    /* Phase 3.19 — responsive bridge between compact phones and full desktop.
       Prevents five collaborator cards from being squeezed into a narrow row. */

    @media (min-width: 481px) and (max-width: 819px) and (min-height: 501px) {
      body:not(.admin-mode) #editorial-people,
      body:not(.admin-mode) #editorial-collaborators {
        overflow: visible !important;
        padding-block: clamp(26px, 5vw, 42px) !important;
      }

      body:not(.admin-mode) #editorial-people .phase8b-section-head,
      body:not(.admin-mode) #editorial-collaborators .phase8b-section-head {
        width: min(680px, calc(100% - 32px)) !important;
        max-width: min(680px, calc(100% - 32px)) !important;
        margin: 0 auto 22px !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas: "eyebrow" "title" "copy" "action" !important;
        justify-items: center !important;
        align-items: center !important;
        gap: 8px !important;
        text-align: center !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-section-head .phase8b-eyebrow,
      body:not(.admin-mode) #editorial-collaborators .phase8b-section-head .phase8b-eyebrow {
        grid-area: eyebrow !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-section-head h2,
      body:not(.admin-mode) #editorial-collaborators .phase8b-section-head h2 {
        grid-area: title !important;
        margin: 0 !important;
        font-size: clamp(1.35rem, 4vw, 1.9rem) !important;
        line-height: 1.08 !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-section-head p,
      body:not(.admin-mode) #editorial-collaborators .phase8b-section-head p {
        grid-area: copy !important;
        display: block !important;
        width: min(100%, 620px) !important;
        max-width: 620px !important;
        margin: 0 !important;
        font-size: clamp(.78rem, 1.8vw, .92rem) !important;
        line-height: 1.45 !important;
        text-align: center !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-view-all-people,
      body:not(.admin-mode) #editorial-collaborators .phase8b-view-all-people {
        grid-area: action !important;
        justify-self: center !important;
        min-height: 42px !important;
        margin-top: 4px !important;
        padding-inline: 18px !important;
      }

      /* Six tracks let three cards span two columns on the first row and
         two cards sit symmetrically in the second row. */
      body:not(.admin-mode) #editorial-people .phase8b-people-grid,
      body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid,
      body:not(.admin-mode) #editorial-people .phase8b-people-grid.phase316-can-center,
      body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid.phase316-can-center {
        box-sizing: border-box !important;
        width: min(680px, calc(100% - 28px)) !important;
        max-width: 680px !important;
        margin: 0 auto !important;
        padding: 4px 8px 18px !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        justify-content: center !important;
        justify-items: center !important;
        align-items: start !important;
        column-gap: clamp(8px, 2vw, 18px) !important;
        row-gap: 26px !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-card,
      body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n),
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-card,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(n) {
        box-sizing: border-box !important;
        grid-column: span 2 !important;
        flex: none !important;
        width: min(100%, 150px) !important;
        min-width: 0 !important;
        max-width: 150px !important;
        min-height: 174px !important;
        margin: 0 !important;
        padding: 0 !important;
        scroll-snap-align: none !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(4),
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(4) {
        grid-column: 2 / span 2 !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(5),
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(5) {
        grid-column: 4 / span 2 !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-image,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-image {
        width: clamp(72px, 12vw, 90px) !important;
        height: clamp(72px, 12vw, 90px) !important;
        min-width: clamp(72px, 12vw, 90px) !important;
        min-height: clamp(72px, 12vw, 90px) !important;
        flex-basis: clamp(72px, 12vw, 90px) !important;
        margin-bottom: 9px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-copy,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-copy {
        width: 100% !important;
        max-width: 146px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-name,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-name {
        width: 100% !important;
        max-width: 146px !important;
        min-height: 0 !important;
        font-size: clamp(.82rem, 2vw, .96rem) !important;
        line-height: 1.16 !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
        text-wrap: balance !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-role,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-role,
      body:not(.admin-mode) #editorial-people .phase8b-person-affiliation,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-affiliation {
        width: 100% !important;
        max-width: 146px !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
        text-wrap: balance !important;
      }

      /* A dragged Po-opo position must not cover the collaborator heading in
         a narrow desktop or tablet viewport. */
      body:not(.admin-mode) #chat-launcher[data-poopo-size-engine="3"]:not(.is-dragging),
      body:not(.admin-mode) #chat-launcher:not([data-poopo-size-engine]):not(.is-dragging) {
        position: fixed !important;
        left: auto !important;
        top: auto !important;
        right: 12px !important;
        bottom: 12px !important;
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
        max-width: 54px !important;
        max-height: 54px !important;
        transform: none !important;
        z-index: 120 !important;
      }
      body:not(.admin-mode) #companion-bubble,
      body:not(.admin-mode) .companion-bubble {
        display: none !important;
      }
    }

    /* Very narrow resized desktop windows still receive a readable two-column
       collaborator grid rather than a compressed five-up strip. Touch phones
       keep the established swipe rail. */
    @media (max-width: 480px) and (min-height: 501px) and (hover: hover) and (pointer: fine) {
      body:not(.admin-mode) #editorial-people .phase8b-people-grid,
      body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid,
      body:not(.admin-mode) #editorial-people .phase8b-people-grid.phase316-can-center,
      body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid.phase316-can-center {
        width: min(430px, calc(100% - 24px)) !important;
        max-width: 430px !important;
        margin: 0 auto !important;
        padding: 4px 8px 18px !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        justify-items: center !important;
        gap: 24px 14px !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-card,
      body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n),
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-card,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(n) {
        grid-column: auto !important;
        flex: none !important;
        width: min(100%, 150px) !important;
        min-width: 0 !important;
        max-width: 150px !important;
      }
      body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(5),
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(5) {
        grid-column: 1 / -1 !important;
      }
      body:not(.admin-mode) #chat-launcher[data-poopo-size-engine="3"]:not(.is-dragging),
      body:not(.admin-mode) #chat-launcher:not([data-poopo-size-engine]):not(.is-dragging) {
        left: auto !important;
        top: auto !important;
        right: 10px !important;
        bottom: 10px !important;
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
        transform: none !important;
      }
      body:not(.admin-mode) #companion-bubble,
      body:not(.admin-mode) .companion-bubble {
        display: none !important;
      }
    }
  


  html body:not(.admin-mode) #chat-launcher.chat-launcher[data-narraspace-drag-final="1"] {
    position: fixed !important;
    left: var(--narraspace-companion-left, var(--poopo-drag-v2-left, auto)) !important;
    top: var(--narraspace-companion-top, var(--poopo-drag-v2-top, auto)) !important;
    right: auto !important;
    bottom: auto !important;
    touch-action: none !important;
    -ms-touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;
    cursor: grab !important;
    will-change: left, top;
  }

  html body:not(.admin-mode) #chat-launcher.chat-launcher[data-narraspace-drag-final="1"].is-dragging,
  html body:not(.admin-mode) #chat-launcher.chat-launcher[data-narraspace-drag-final="1"].is-drag-armed {
    cursor: grabbing !important;
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  html body.companion-dragging,
  html body.companion-dragging * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
  }

  html body:not(.admin-mode) #chat-launcher.chat-launcher[data-narraspace-drag-final="1"] img,
  html body:not(.admin-mode) #chat-launcher.chat-launcher[data-narraspace-drag-final="1"] .companion-icon-shell,
  html body:not(.admin-mode) #chat-launcher.chat-launcher[data-narraspace-drag-final="1"] .companion-icon-shell * {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
  }

  html body:not(.admin-mode):not(.poopo-guide-open) #poopo-guide:not(.show),
  html body:not(.admin-mode):not(.poopo-guide-open) #poopo-guide[aria-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html body:not(.admin-mode):not(.poopo-guide-open) #poopo-guide:not(.show) *,
  html body:not(.admin-mode):not(.poopo-guide-open) #poopo-guide[aria-hidden="true"] * {
    visibility: hidden !important;
    pointer-events: none !important;
  }



  html.narraspace-stability-mode {
    scroll-behavior: auto;
  }

  body.narraspace-stability-mode:not(.admin-mode) .poopo-guide-fireflies,
  body.narraspace-stability-mode:not(.admin-mode) .poopo-guide-fireflies *,
  body.narraspace-stability-mode:not(.admin-mode) .hero-firefly,
  body.narraspace-stability-mode:not(.admin-mode) .firefly,
  body.narraspace-stability-mode:not(.admin-mode) .sparkle-field,
  body.narraspace-stability-mode:not(.admin-mode) .ambient-orbit,
  body.narraspace-stability-mode:not(.admin-mode) .decorative-particles {
    display: none !important;
    animation: none !important;
  }

  body.narraspace-stability-mode:not(.admin-mode) .chat-launcher,
  body.narraspace-stability-mode:not(.admin-mode) .companion-bubble,
  body.narraspace-stability-mode:not(.admin-mode) .poopo-guide-avatar,
  body.narraspace-stability-mode:not(.admin-mode) .poopo-guide-character,
  body.narraspace-stability-mode:not(.admin-mode) .app-loader,
  body.narraspace-stability-mode:not(.admin-mode) .hero-icon,
  body.narraspace-stability-mode:not(.admin-mode) .story-cover img,
  body.narraspace-stability-mode:not(.admin-mode) .content-card,
  body.narraspace-stability-mode:not(.admin-mode) .feature-card {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }

  body.narraspace-stability-mode:not(.admin-mode) .content-card,
  body.narraspace-stability-mode:not(.admin-mode) .feature-card,
  body.narraspace-stability-mode:not(.admin-mode) .portal-card,
  body.narraspace-stability-mode:not(.admin-mode) .phase8b-card,
  body.narraspace-stability-mode:not(.admin-mode) .spotlight-carousel-card {
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease !important;
  }

  body.narraspace-stability-mode:not(.admin-mode) main > section,
  body.narraspace-stability-mode:not(.admin-mode) #stories,
  body.narraspace-stability-mode:not(.admin-mode) #modules,
  body.narraspace-stability-mode:not(.admin-mode) #portal-links,
  body.narraspace-stability-mode:not(.admin-mode) #contact,
  body.narraspace-stability-mode:not(.admin-mode) .section {
    content-visibility: auto;
    contain-intrinsic-size: 720px;
  }

  body.narraspace-stability-mode:not(.admin-mode) #home,
  body.narraspace-stability-mode:not(.admin-mode) #story-modal.show,
  body.narraspace-stability-mode:not(.admin-mode) #chat-panel.show,
  body.narraspace-stability-mode:not(.admin-mode) #poopo-guide.show {
    content-visibility: visible;
    contain-intrinsic-size: auto;
  }

  body.narraspace-stability-mode:not(.admin-mode) .poopo-loading-fade-v75,
  body.narraspace-stability-mode:not(.admin-mode) .poopo-transition-v76 {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  @media (max-width: 760px), (pointer: coarse) {
    body:not(.admin-mode) {
      --motion-soft: cubic-bezier(.2, .8, .2, 1);
    }

    body:not(.admin-mode) .backdrop-blur,
    body:not(.admin-mode) [style*="backdrop-filter"] {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    body:not(.admin-mode) .document-modal,
    body:not(.admin-mode) .chat-panel,
    body:not(.admin-mode) .poopo-guide {
      will-change: auto !important;
    }
  }


    /* POOPO CHAT 20260809a — conversational public chat cleanup */
    body:not(.admin-mode) .poopo-chat-conversation {
      background: color-mix(in srgb, var(--companion-panel-bg, #fffaf0) 96%, white 4%);
      border-color: color-mix(in srgb, var(--companion-panel-border, #d8d0b8) 88%, transparent 12%);
      box-shadow: 0 22px 56px rgba(20, 35, 21, .24);
      contain: layout paint;
    }
    body:not(.admin-mode) .poopo-chat-conversation .poopo-chat-head {
      min-height: 62px;
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      cursor: default;
      touch-action: manipulation;
    }
    body:not(.admin-mode) .poopo-chat-guide-back,
    body:not(.admin-mode) .poopo-chat-conversation .chat-window-btn,
    body:not(.admin-mode) .poopo-chat-conversation .chat-close {
      width: 42px;
      height: 42px;
      min-width: 42px;
      min-height: 42px;
      display: inline-grid;
      place-items: center;
      padding: 0;
      border: 0;
      border-radius: 13px;
      background: rgba(255,255,255,.08);
      color: var(--companion-panel-header-text, #fffaf0);
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    body:not(.admin-mode) .poopo-chat-guide-back:hover,
    body:not(.admin-mode) .poopo-chat-conversation .chat-window-btn:hover,
    body:not(.admin-mode) .poopo-chat-conversation .chat-close:hover { background: rgba(255,255,255,.15); }
    body:not(.admin-mode) .poopo-chat-conversation .chat-persona { min-width: 0; gap: 9px; }
    body:not(.admin-mode) .poopo-chat-conversation .bot-avatar {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      animation: none;
    }
    body:not(.admin-mode) .poopo-chat-conversation .poopo-chat-persona-copy { min-width: 0; }
    body:not(.admin-mode) .poopo-chat-conversation .chat-title { font-size: .96rem; line-height: 1.05; }
    body:not(.admin-mode) .poopo-chat-conversation .chat-subtitle { display: none !important; }
    body:not(.admin-mode) .poopo-chat-conversation .bot-status {
      margin-top: 4px;
      gap: 5px;
      font-size: .67rem;
      line-height: 1;
      opacity: .9;
    }
    body:not(.admin-mode) .poopo-chat-conversation .bot-status-dot {
      width: 7px;
      height: 7px;
      box-shadow: none;
      animation: none;
    }
    body:not(.admin-mode) .poopo-chat-conversation .chat-window-actions { gap: 4px; }

    body:not(.admin-mode) .poopo-chat-menu {
      position: absolute;
      z-index: 8;
      top: 58px;
      right: 10px;
      width: min(270px, calc(100% - 20px));
      padding: 7px;
      border: 1px solid var(--companion-panel-border, #d8d0b8);
      border-radius: 15px;
      background: var(--companion-panel-bg, #fffaf0);
      box-shadow: 0 16px 36px rgba(20,35,21,.24);
    }
    body:not(.admin-mode) .poopo-chat-menu[hidden] { display: none !important; }
    body:not(.admin-mode) .poopo-chat-menu button {
      width: 100%;
      min-height: 48px;
      display: grid;
      grid-template-columns: 34px minmax(0,1fr);
      align-items: center;
      gap: 9px;
      padding: 8px;
      border: 0;
      border-radius: 11px;
      background: transparent;
      color: var(--companion-bot-text, #26311f);
      text-align: left;
      font: inherit;
      cursor: pointer;
      touch-action: manipulation;
    }
    body:not(.admin-mode) .poopo-chat-menu button:hover { background: var(--companion-helper-bg, #f8f1d6); }
    body:not(.admin-mode) .poopo-chat-menu button > i { width: 19px; height: 19px; justify-self: center; }
    body:not(.admin-mode) .poopo-chat-menu button strong { display:block; font-size:.78rem; font-weight:900; }
    body:not(.admin-mode) .poopo-chat-menu button small { display:block; margin-top:2px; font-size:.65rem; line-height:1.3; opacity:.72; }

    body:not(.admin-mode) .poopo-chat-conversation .chat-messages {
      padding: 14px 12px 10px;
      gap: 9px;
      background: color-mix(in srgb, var(--companion-panel-bg, #fffaf0) 97%, var(--companion-helper-bg, #f8f1d6) 3%);
      scroll-behavior: smooth;
    }
    body:not(.admin-mode) .poopo-chat-conversation .chat-bubble {
      position: relative;
      width: fit-content;
      max-width: 84%;
      padding: 10px 12px;
      border-radius: 17px;
      font-size: .85rem;
      line-height: 1.42;
      font-weight: 650;
      box-shadow: none;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    body:not(.admin-mode) .poopo-chat-conversation .chat-bubble.bot {
      justify-self: start;
      border-radius: 17px 17px 17px 6px;
      background: color-mix(in srgb, var(--companion-helper-bg, #f8f1d6) 82%, white 18%);
      color: var(--companion-bot-text, #26311f);
      border: 1px solid color-mix(in srgb, var(--companion-panel-border, #d8d0b8) 75%, transparent 25%);
    }
    body:not(.admin-mode) .poopo-chat-conversation .chat-bubble.bot.is-greeting { max-width: 88%; }
    body:not(.admin-mode) .poopo-chat-conversation .chat-bubble.user {
      justify-self: end;
      border-radius: 17px 17px 6px 17px;
      background: var(--companion-user-bg, #36573a);
      color: var(--companion-user-text, #fffaf0);
      border: 0;
    }
    body:not(.admin-mode) .poopo-chat-conversation .chat-message-tools {
      position: absolute;
      right: 5px;
      bottom: -22px;
      margin: 0;
      opacity: .6;
      z-index: 1;
    }
    body:not(.admin-mode) .poopo-chat-conversation .chat-copy-answer {
      width: 28px;
      height: 28px;
      display: inline-grid;
      place-items: center;
      padding: 0;
      border: 0;
      border-radius: 9px;
      background: var(--companion-panel-bg, #fffaf0);
      color: var(--companion-helper-text, #405934);
      cursor: pointer;
      touch-action: manipulation;
    }
    body:not(.admin-mode) .poopo-chat-conversation .chat-copy-answer i { width: 14px; height: 14px; }
    body:not(.admin-mode) .poopo-chat-conversation .chat-bubble.typing {
      min-width: 58px;
      padding: 10px 12px;
      gap: 5px;
    }
    body:not(.admin-mode) .poopo-chat-conversation .chat-bubble.typing span { width:7px; height:7px; }

    body:not(.admin-mode) .poopo-chat-conversation .chat-suggestions {
      flex: 0 0 auto;
      border-top: 0;
      background: transparent;
      padding: 0 0 3px;
    }
    body:not(.admin-mode) .poopo-chat-conversation .chat-quick,
    body:not(.admin-mode) .poopo-chat-conversation .chat-followups {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      gap: 7px;
      padding: 6px 10px;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    body:not(.admin-mode) .poopo-chat-conversation .chat-quick::-webkit-scrollbar,
    body:not(.admin-mode) .poopo-chat-conversation .chat-followups::-webkit-scrollbar { display:none; }
    body:not(.admin-mode) .poopo-chat-conversation .chat-followups { display:none; padding-top:4px; }
    body:not(.admin-mode) .poopo-chat-conversation .chat-followups.show { display:flex; }
    body:not(.admin-mode) .poopo-chat-conversation .chat-chip,
    body:not(.admin-mode) .poopo-chat-conversation .chat-followup-btn {
      flex: 0 0 auto;
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 7px 11px;
      border: 1px solid var(--companion-panel-border, #d8d0b8);
      border-radius: 999px;
      background: var(--companion-panel-bg, #fffaf0);
      color: var(--companion-panel-header-bg, #36573a);
      font: inherit;
      font-size: .73rem;
      font-weight: 850;
      white-space: nowrap;
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    body:not(.admin-mode) .poopo-chat-conversation .chat-chip i,
    body:not(.admin-mode) .poopo-chat-conversation .chat-followup-btn i { width:15px; height:15px; flex:0 0 auto; }
    body:not(.admin-mode) .poopo-chat-conversation.has-conversation .chat-quick { display:none; }
    body:not(.admin-mode) .poopo-chat-conversation.has-conversation .chat-followups.show { padding-top:6px; }

    body:not(.admin-mode) .poopo-chat-conversation .chat-form {
      flex: 0 0 auto;
      display: grid;
      grid-template-columns: minmax(0,1fr) 46px !important;
      gap: 7px;
      padding: 8px 9px max(8px, env(safe-area-inset-bottom));
      border-top: 1px solid color-mix(in srgb, var(--companion-panel-border, #d8d0b8) 70%, transparent 30%);
      background: var(--companion-panel-bg, #fffaf0);
    }
    body:not(.admin-mode) .poopo-chat-conversation .chat-form input {
      min-width:0;
      min-height:44px;
      padding: 9px 13px;
      border: 1px solid var(--companion-panel-border, #d8d0b8);
      border-radius: 15px;
      background: #fff;
      color: var(--companion-bot-text, #26311f);
      font: inherit;
      font-size:.87rem;
      outline:none;
    }
    body:not(.admin-mode) .poopo-chat-conversation .chat-form input:focus { border-color: var(--companion-panel-header-bg, #36573a); box-shadow: 0 0 0 3px rgba(54,87,58,.10); }
    body:not(.admin-mode) .poopo-chat-conversation .chat-form button {
      width:46px;
      min-width:46px;
      min-height:44px;
      padding:0;
      border-radius:14px;
      touch-action:manipulation;
      -webkit-tap-highlight-color:transparent;
    }
    body:not(.admin-mode) .poopo-chat-conversation .chat-form button span { display:none; }

    body:not(.admin-mode) .poopo-chat-conversation .chat-result-list {
      width:min(100%, 310px);
      gap:6px;
    }
    body:not(.admin-mode) .poopo-chat-conversation .chat-result-card {
      min-height:64px;
      grid-template-columns: 40px minmax(0,1fr) 18px;
      gap:8px;
      padding:7px 8px;
      border-radius:13px;
      touch-action:manipulation;
      -webkit-tap-highlight-color:transparent;
    }
    body:not(.admin-mode) .poopo-chat-conversation .chat-result-title { font-size:.76rem; }
    body:not(.admin-mode) .poopo-chat-conversation .chat-result-meta {
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      font-size:.63rem;
      line-height:1.25;
    }
    body:not(.admin-mode) .poopo-chat-conversation .chat-result-action { font-size:.62rem; }
    body:not(.admin-mode) .poopo-chat-conversation .poopo-journey { width:min(100%,310px); padding:6px; gap:5px; }
    body:not(.admin-mode) .poopo-chat-conversation .poopo-journey-btn { min-height:38px; touch-action:manipulation; }

    @media (max-width: 640px) {
      body:not(.admin-mode) .poopo-chat-conversation .poopo-chat-head { min-height:58px; grid-template-columns:46px minmax(0,1fr) auto; padding:7px 8px; }
      body:not(.admin-mode) .poopo-chat-guide-back,
      body:not(.admin-mode) .poopo-chat-conversation .chat-window-btn,
      body:not(.admin-mode) .poopo-chat-conversation .chat-close { width:44px; height:44px; min-width:44px; min-height:44px; }
      body:not(.admin-mode) .poopo-chat-conversation .bot-avatar { width:36px; height:36px; }
      body:not(.admin-mode) .poopo-chat-conversation .chat-messages { padding:12px 10px 9px; }
      body:not(.admin-mode) .poopo-chat-conversation .chat-bubble { max-width:88%; font-size:.83rem; }
      body:not(.admin-mode) .poopo-chat-menu { top:55px; right:8px; }
      body:not(.admin-mode) .poopo-chat-conversation .chat-chip,
      body:not(.admin-mode) .poopo-chat-conversation .chat-followup-btn { min-height:44px; padding:8px 11px; }
    }

    @media (prefers-reduced-motion: reduce) {
      body:not(.admin-mode) .poopo-chat-conversation,
      body:not(.admin-mode) .poopo-chat-conversation * { scroll-behavior:auto !important; }
      body:not(.admin-mode) .poopo-chat-conversation .chat-bubble.typing span { animation:none !important; opacity:.65; }
    }




  /* Po-opo Chat 20260809d: conversation-first, keyboard-safe, fullscreen-capable. */
  body:not(.admin-mode) .poopo-chat-conversation {
    overflow: hidden !important;
    display: none;
    flex-direction: column !important;
    isolation: isolate;
  }
  body:not(.admin-mode) .poopo-chat-conversation.show { display:flex !important; }
  body:not(.admin-mode) .poopo-chat-conversation .poopo-chat-head {
    flex:0 0 auto;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:8px !important;
    min-height:60px;
    padding:8px 9px !important;
    z-index:12;
  }
  body:not(.admin-mode) .poopo-chat-conversation .chat-persona {
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
    min-width:0;
    overflow:hidden;
  }
  body:not(.admin-mode) .poopo-chat-conversation .poopo-chat-persona-copy { min-width:0; display:grid; align-content:center; gap:3px; }
  body:not(.admin-mode) .poopo-chat-conversation .chat-title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  body:not(.admin-mode) .poopo-chat-conversation .bot-avatar {
    flex:0 0 38px;
    width:38px !important;
    height:38px !important;
    display:grid !important;
    place-items:center !important;
    overflow:hidden;
    border-radius:12px;
  }
  body:not(.admin-mode) .poopo-chat-conversation .bot-avatar img,
  body:not(.admin-mode) #chat-launcher .poopo-static-avatar,
  body:not(.admin-mode) .companion-avatar-fallback.poopo-static-avatar {
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    display:block !important;
  }
  body:not(.admin-mode) .poopo-chat-conversation .bot-avatar.is-speaking img { transform:translateY(-1px) scale(1.04); }
  body:not(.admin-mode) .poopo-chat-conversation .chat-window-actions { display:flex !important; align-items:center !important; gap:4px !important; flex:0 0 auto; }
  body:not(.admin-mode) .poopo-chat-conversation .chat-window-btn,
  body:not(.admin-mode) .poopo-chat-conversation .chat-close {
    width:42px !important; height:42px !important; min-width:42px !important; min-height:42px !important;
    display:grid !important; place-items:center !important; padding:0 !important; line-height:1 !important;
  }
  body:not(.admin-mode) .poopo-chat-conversation .chat-window-btn svg,
  body:not(.admin-mode) .poopo-chat-conversation .chat-close svg,
  body:not(.admin-mode) .poopo-chat-conversation .chat-form button svg { width:19px !important; height:19px !important; display:block; margin:auto; }

  body:not(.admin-mode) .poopo-chat-conversation .chat-messages {
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    padding:14px 12px 12px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }
  body:not(.admin-mode) .poopo-chat-conversation .chat-message-row {
    width:100%;
    display:flex;
    align-items:flex-end;
    gap:7px;
  }
  body:not(.admin-mode) .poopo-chat-conversation .chat-message-row.user { justify-content:flex-end; }
  body:not(.admin-mode) .poopo-chat-conversation .chat-message-row.bot { justify-content:flex-start; }
  body:not(.admin-mode) .poopo-chat-conversation .chat-message-avatar {
    flex:0 0 27px;
    width:27px;
    height:27px;
    border-radius:9px;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:rgba(255,255,255,.38);
    border:1px solid color-mix(in srgb, var(--companion-panel-border,#d8d0b8) 80%, transparent 20%);
  }
  body:not(.admin-mode) .poopo-chat-conversation .chat-message-avatar img { width:100%; height:100%; object-fit:contain; display:block; }
  body:not(.admin-mode) .poopo-chat-conversation .chat-message-row .chat-bubble { margin:0 !important; }
  body:not(.admin-mode) .poopo-chat-conversation .chat-message-row.bot .chat-bubble { max-width:min(82%, 540px) !important; }
  body:not(.admin-mode) .poopo-chat-conversation .chat-message-row.user .chat-bubble { max-width:min(82%, 540px) !important; }
  body:not(.admin-mode) .poopo-chat-conversation .is-typing-row .chat-message-avatar { align-self:center; }
  body:not(.admin-mode) .poopo-chat-conversation .chat-bubble.typing { display:inline-flex !important; align-items:center; }

  body:not(.admin-mode) .poopo-chat-conversation .chat-suggestions { flex:0 0 auto !important; max-height:112px; overflow:hidden; }
  body:not(.admin-mode) .poopo-chat-conversation .chat-quick,
  body:not(.admin-mode) .poopo-chat-conversation .chat-followups { touch-action:pan-x; }
  body:not(.admin-mode) .poopo-chat-conversation .chat-chip,
  body:not(.admin-mode) .poopo-chat-conversation .chat-followup-btn,
  body:not(.admin-mode) .poopo-chat-conversation .chat-result-card,
  body:not(.admin-mode) .poopo-chat-menu button { min-height:44px !important; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }

  body:not(.admin-mode) .poopo-chat-conversation .chat-form {
    flex:0 0 auto !important;
    position:relative !important;
    z-index:20 !important;
    margin:0 !important;
    padding:8px 9px max(8px, env(safe-area-inset-bottom)) !important;
    background:var(--companion-panel-bg,#fffaf0) !important;
  }
  body:not(.admin-mode) .poopo-chat-conversation .chat-form input {
    font-size:16px !important; /* prevents iOS Safari input zoom */
    min-height:46px !important;
  }
  body:not(.admin-mode) .poopo-chat-conversation .chat-form button { min-height:46px !important; height:46px !important; }

  body:not(.admin-mode) .poopo-chat-conversation.is-fullscreen {
    position:fixed !important;
    left:var(--poopo-chat-vv-left, 0px) !important;
    top:var(--poopo-chat-vv-top, 0px) !important;
    right:auto !important;
    bottom:auto !important;
    width:var(--poopo-chat-vv-width, 100vw) !important;
    height:var(--poopo-chat-vv-height, 100dvh) !important;
    max-width:none !important;
    max-height:none !important;
    border-radius:0 !important;
    z-index:2147482000 !important;
    transform:none !important;
  }
  body:not(.admin-mode) .poopo-chat-conversation.is-fullscreen .poopo-chat-head {
    padding-top:max(8px, env(safe-area-inset-top)) !important;
  }
  body.poopo-chat-fullscreen-open:not(.admin-mode) { overflow:hidden !important; overscroll-behavior:none; }

  @media (max-width:640px) {
    body:not(.admin-mode) .poopo-chat-conversation .poopo-chat-head { min-height:58px !important; padding-inline:8px !important; }
    body:not(.admin-mode) .poopo-chat-conversation .bot-avatar { flex-basis:36px; width:36px !important; height:36px !important; }
    body:not(.admin-mode) .poopo-chat-conversation .chat-window-btn,
    body:not(.admin-mode) .poopo-chat-conversation .chat-close { width:40px !important; height:40px !important; min-width:40px !important; min-height:40px !important; border-radius:12px !important; }
    body:not(.admin-mode) .poopo-chat-conversation .chat-message-row.bot .chat-bubble,
    body:not(.admin-mode) .poopo-chat-conversation .chat-message-row.user .chat-bubble { max-width:86% !important; }
    body:not(.admin-mode) .poopo-chat-conversation .chat-result-list { width:calc(100% - 34px) !important; margin-left:34px; }
    body:not(.admin-mode) .poopo-chat-conversation .poopo-journey { width:calc(100% - 34px) !important; margin-left:34px; }
  }
  @media (prefers-reduced-motion: reduce) {
    body:not(.admin-mode) .poopo-chat-conversation .bot-avatar img { transition:none !important; transform:none !important; }
  }



  html body:not(.admin-mode):not(.poopo-user-hidden):not(.chat-open):not(.poopo-guide-open):not(.modal-open):not(.resource-fullscreen-active):not(.small-device-nav-open):not(.film-stable-cinema-active) #chat-launcher.poopo-hero-recovered {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 2147481200 !important;
  }
  html body.poopo-user-hidden:not(.admin-mode) #chat-launcher.poopo-hero-recovered {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body:not(.admin-mode) #chat-launcher.poopo-hero-recovered #chat-launcher-avatar {
    display:grid !important;
    place-items:center !important;
    overflow:visible !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  body:not(.admin-mode) #chat-launcher.poopo-hero-recovered #chat-launcher-avatar > .poopo-static-avatar {
    width:100% !important;
    height:100% !important;
    display:block !important;
    object-fit:contain !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:drop-shadow(0 6px 10px rgba(20,35,21,.16));
  }



  body:not(.admin-mode) #chat-launcher-avatar .poopo-mini-reaction {
    position:relative; display:block; width:100%; height:100%; overflow:visible;
    transform-origin:50% 68%;
  }
  body:not(.admin-mode) #chat-launcher-avatar .poopo-mini-fallback,
  body:not(.admin-mode) #chat-launcher-avatar .poopo-mini-art {
    position:absolute; inset:0; width:100%; height:100%; display:block;
  }
  body:not(.admin-mode) #chat-launcher-avatar .poopo-mini-fallback { object-fit:contain; transition:opacity 120ms ease; }
  body:not(.admin-mode) #chat-launcher-avatar .poopo-mini-art {
    background-image:url("/assets/poopo/poopo-mini-reactions-20260809d.webp");
    background-repeat:no-repeat; background-size:400% 200%; background-position:0% 0%;
    opacity:0; transition:opacity 120ms ease; pointer-events:none;
    filter:drop-shadow(0 5px 8px rgba(12,31,18,.16));
  }
  body:not(.admin-mode) #chat-launcher-avatar .poopo-mini-reaction.is-ready .poopo-mini-art { opacity:1; }
  body:not(.admin-mode) #chat-launcher-avatar .poopo-mini-reaction.is-ready .poopo-mini-fallback { opacity:0; }
  body:not(.admin-mode) #chat-launcher:not(.is-dragging):not(.is-drag-armed) .poopo-mini-reaction:not(.is-reacting) {
    animation:poopoMiniBreathe 4.8s ease-in-out infinite;
  }
  body:not(.admin-mode) #chat-launcher .poopo-mini-reaction.is-reacting,
  body:not(.admin-mode) #chat-launcher.is-dragging .poopo-mini-reaction,
  body:not(.admin-mode) #chat-launcher.is-drag-armed .poopo-mini-reaction { animation:none !important; }
  /* The character moves; the whole launcher no longer needs a second continuous idle animation. */
  body:not(.admin-mode) #chat-launcher.chat-launcher:not(.is-dragging):not(.is-drag-armed):not(.has-hopped),
  body:not(.admin-mode) #chat-launcher.chat-launcher.is-speaking:not(.is-dragging):not(.is-drag-armed) {
    animation:none !important;
  }
  @keyframes poopoMiniBreathe {
    0%,100% { transform:translate3d(0,0,0) scale(1); }
    50% { transform:translate3d(0,-2px,0) scale(1.012); }
  }
  @media (prefers-reduced-motion: reduce) {
    body:not(.admin-mode) #chat-launcher-avatar .poopo-mini-reaction { animation:none !important; transform:none !important; }
  }



  /* 09k: film preview only. Story, poem and image/document previews are intentionally untouched. */
  #modal-film-loading[hidden],
  #modal-film-launch[hidden] { display:none !important; }

  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] {
    --film-preview-poster: linear-gradient(145deg,#173324,#050907);
    position: relative !important;
    width: min(94vw, 1320px) !important;
    height: min(91dvh, 850px) !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden !important;
    border-radius: clamp(22px, 2.2vw, 34px) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: #06100b !important;
    box-shadow: 0 36px 120px rgba(0,0,0,.52) !important;
    isolation: isolate !important;
  }
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"]::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background-image: var(--film-preview-poster);
    background-size:cover;
    background-position:center;
    filter:saturate(1.06) contrast(1.02);
    transform:scale(1.01);
    pointer-events:none;
  }
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"]::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:
      radial-gradient(circle at 76% 18%, rgba(255,255,255,.08), transparent 24%),
      linear-gradient(180deg, rgba(2,6,4,.08) 0%, rgba(2,6,4,.14) 36%, rgba(2,6,4,.36) 68%, rgba(2,6,4,.68) 100%);
    pointer-events:none;
  }
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] > * { position:relative; z-index:2; }

  /* The outer shell should feel deliberate: one quiet screening bar, not a document toolbar. */
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] .document-topbar {
    position:absolute !important;
    inset:0 0 auto 0 !important;
    z-index:12 !important;
    min-height:72px !important;
    padding:14px 16px 12px 18px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    background:linear-gradient(180deg, rgba(3,7,5,.56), rgba(3,7,5,.08)) !important;
    border:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
  }
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] .document-title-wrap {
    max-width:min(58vw, 620px) !important;
    color:#fff !important;
  }
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] .document-icon {
    width:38px !important;
    height:38px !important;
    border-radius:999px !important;
    color:#fff !important;
    background:rgba(5,10,7,.30) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:none !important;
  }
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] .document-title {
    color:#fff !important;
    font-size:clamp(.96rem,1.35vw,1.18rem) !important;
    text-shadow:0 2px 14px rgba(0,0,0,.42) !important;
  }
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] .document-subtitle {
    color:rgba(255,255,255,.74) !important;
    font-size:.72rem !important;
  }
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] .document-actions {
    display:flex !important;
    gap:7px !important;
    align-items:center !important;
  }
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] .document-actions .doc-action {
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    padding:0 !important;
    border-radius:999px !important;
    background:rgba(5,10,7,.30) !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.14) !important;
    box-shadow:none !important;
    backdrop-filter:blur(8px) !important;
  }
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] .document-actions .doc-action span { display:none !important; }
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] #modal-focus-preview-btn,
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] #modal-toggle-details-btn,
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] .secondary-preview-action { display:none !important; }

  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] .document-toolbar,
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] .document-info { display:none !important; }
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] .document-shell {
    display:block !important;
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
    background:transparent !important;
  }
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] .document-viewer {
    position:relative !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] .preview-zoom-content {
    position:relative !important;
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    overflow:hidden !important;
    border-radius:inherit !important;
    background:transparent !important;
  }

  /* Film details screen. Lower opacity lets the artwork stay present. */
  #story-modal .document-modal[data-resource-type="film"] .film-launch-stage {
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    overflow:hidden !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-art {
    position:absolute !important;
    inset:0 !important;
    background-image:var(--film-launch-poster) !important;
    background-size:cover !important;
    background-position:center !important;
    filter:saturate(1.08) contrast(1.02) !important;
    transform:scale(1.01) !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-art::after {
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background:
      linear-gradient(90deg, rgba(1,4,3,.38) 0%, rgba(1,4,3,.10) 52%, rgba(1,4,3,.02) 78%),
      linear-gradient(180deg, rgba(1,4,3,.04) 0%, rgba(1,4,3,.08) 42%, rgba(1,4,3,.58) 100%) !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-copy {
    position:absolute !important;
    z-index:3 !important;
    left:clamp(24px,4.2vw,64px) !important;
    right:auto !important;
    bottom:clamp(28px,5vh,64px) !important;
    width:min(760px,72%) !important;
    min-height:0 !important;
    display:grid !important;
    align-content:end !important;
    justify-items:start !important;
    gap:12px !important;
    padding:0 !important;
    color:#fff !important;
    text-align:left !important;
    background:none !important;
    text-shadow:0 3px 18px rgba(0,0,0,.58) !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-kicker {
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    color:rgba(255,255,255,.82) !important;
    font-size:.72rem !important;
    font-weight:850 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
  }
  .film-launch-dot { width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.54); }
  #story-modal .film-launch-title-card {
    display:flex;
    align-items:flex-end;
    max-width:min(520px,62vw);
    min-height:0;
  }
  #story-modal .film-launch-title-card[hidden] { display:none !important; }
  #story-modal .film-launch-title-card img {
    display:block;
    width:auto;
    max-width:100%;
    max-height:clamp(72px,13vh,148px);
    object-fit:contain;
    object-position:left bottom;
    filter:drop-shadow(0 8px 20px rgba(0,0,0,.38));
  }
  #story-modal .document-modal[data-resource-type="film"] #modal-film-launch-title {
    margin:0 !important;
    max-width:740px !important;
    color:#fff !important;
    font-size:clamp(2.2rem,5.8vw,5rem) !important;
    line-height:.93 !important;
    font-weight:900 !important;
    letter-spacing:-.045em !important;
    text-wrap:balance !important;
    text-transform:uppercase !important;
  }
  #story-modal .film-launch-credit {
    color:rgba(255,255,255,.90);
    font-size:clamp(.86rem,1.2vw,1.02rem);
    font-weight:800;
  }
  #story-modal .film-launch-meta {
    display:flex;
    flex-wrap:wrap;
    gap:7px 9px;
  }
  #story-modal .film-launch-meta span {
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:5px 10px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:999px;
    background:rgba(5,10,7,.22);
    color:rgba(255,255,255,.84);
    font-size:.72rem;
    font-weight:760;
    text-shadow:none;
    backdrop-filter:blur(8px);
  }
  #story-modal .film-launch-description {
    margin:0 !important;
    max-width:680px !important;
    color:rgba(255,255,255,.84) !important;
    font-size:clamp(.82rem,1vw,.95rem) !important;
    line-height:1.58 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:3 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }
  #story-modal .film-launch-actions {
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:2px;
  }
  #story-modal .film-launch-actions button {
    min-height:44px !important;
    border-radius:999px !important;
    padding:0 16px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    text-shadow:none !important;
  }
  #story-modal .film-launch-play {
    background:#fff !important;
    color:#0b120e !important;
    border-color:#fff !important;
    box-shadow:0 10px 28px rgba(0,0,0,.20) !important;
  }
  #story-modal .film-launch-secondary {
    background:rgba(5,10,7,.28) !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.16) !important;
    backdrop-filter:blur(10px) !important;
  }

  /* Dedicated loading state. It is never visible at the same time as Play. */
  #story-modal .film-loading-stage {
    position:absolute !important;
    inset:0 !important;
    z-index:30 !important;
    overflow:hidden !important;
    background:#020504 !important;
  }
  #story-modal .film-loading-art {
    position:absolute;
    inset:0;
    background-image:var(--film-preview-poster);
    background-size:cover;
    background-position:center;
    filter:saturate(1.08) contrast(1.02);
    transform:scale(1.01);
  }
  #story-modal .film-loading-art::after {
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 76% 20%, rgba(255,255,255,.05), transparent 25%),
      linear-gradient(180deg, rgba(1,4,3,.10) 0%, rgba(1,4,3,.12) 42%, rgba(1,4,3,.60) 100%);
  }
  #story-modal .film-loading-back {
    position:absolute;
    z-index:4;
    top:max(22px, env(safe-area-inset-top));
    left:max(22px, env(safe-area-inset-left));
    width:46px;
    height:46px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.17);
    background:rgba(3,7,5,.28);
    color:#fff;
    display:grid;
    place-items:center;
    backdrop-filter:blur(10px);
  }
  #story-modal .film-loading-copy {
    position:absolute;
    z-index:4;
    left:max(28px, env(safe-area-inset-left));
    bottom:max(32px, calc(env(safe-area-inset-bottom) + 24px));
    width:min(560px, calc(100% - 56px));
    display:grid;
    gap:14px;
    color:#fff;
    text-shadow:0 3px 18px rgba(0,0,0,.58);
  }
  #story-modal .film-loading-title-card { max-width:min(500px,62vw); }
  #story-modal .film-loading-title-card img {
    display:block;
    max-width:100%;
    max-height:clamp(72px,13vh,144px);
    object-fit:contain;
    object-position:left bottom;
    filter:drop-shadow(0 8px 20px rgba(0,0,0,.38));
  }
  #story-modal .film-loading-title {
    color:#fff;
    font-size:clamp(2.15rem,5.8vw,5rem);
    line-height:.94;
    font-weight:900;
    letter-spacing:-.04em;
    text-transform:uppercase;
    text-wrap:balance;
  }
  #story-modal .film-loading-status { font-size:clamp(.85rem,1.1vw,1rem); font-weight:850; color:rgba(255,255,255,.90); }
  #story-modal .film-loading-progress {
    width:min(420px,82vw);
    height:3px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.22);
  }
  #story-modal .film-loading-progress span {
    display:block;
    width:34%;
    height:100%;
    border-radius:inherit;
    background:rgba(255,255,255,.92);
    animation:nsFilmLoadingSweep 1.45s ease-in-out infinite;
  }
  @keyframes nsFilmLoadingSweep { from{transform:translateX(-110%)} to{transform:translateX(330%)} }

  /* In NarraSpace cinema mode, the loading state stays full-frame and the regular cinema chrome waits for the actual player. */
  body.film-loading-active .film-stable-cinema-chrome { display:none !important; }
  body.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"] #modal-film-loading {
    display:block !important;
  }
  body.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"] #modal-film-loading[hidden] { display:none !important; }
  body.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"] .document-viewer,
  body.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"] .preview-zoom-content {
    position:relative !important;
  }

  /* Tablet / phone portrait: immersive but readable. */
  @media (max-width: 820px) and (orientation: portrait) {
    #story-modal { padding:0 !important; }
    body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] {
      width:100vw !important;
      height:100dvh !important;
      border-radius:0 !important;
      border:0 !important;
    }
    body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] .document-topbar {
      min-height:64px !important;
      padding:max(9px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)) !important;
    }
    body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] .document-title-wrap { max-width:52vw !important; }
    #story-modal .document-modal[data-resource-type="film"] .film-launch-copy {
      left:max(18px, env(safe-area-inset-left)) !important;
      right:max(18px, env(safe-area-inset-right)) !important;
      bottom:max(22px, calc(env(safe-area-inset-bottom) + 18px)) !important;
      width:auto !important;
      gap:10px !important;
    }
    #story-modal .document-modal[data-resource-type="film"] #modal-film-launch-title {
      font-size:clamp(2rem,11vw,4.2rem) !important;
      max-width:94% !important;
    }
    #story-modal .film-launch-title-card { max-width:min(76vw,480px); }
    #story-modal .film-launch-title-card img { max-height:110px; }
    #story-modal .film-launch-description { -webkit-line-clamp:2 !important; font-size:.80rem !important; }
    #story-modal .film-launch-meta span:nth-child(n+4) { display:none; }
    #story-modal .film-launch-actions { width:100%; display:grid; grid-template-columns:minmax(0,1.35fr) repeat(3,44px); }
    #story-modal .film-launch-actions button { width:100% !important; min-width:0 !important; padding:0 12px !important; }
    #story-modal .film-launch-secondary { padding:0 !important; }
    #story-modal .film-launch-secondary span { position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important; }
    #story-modal .film-loading-copy { left:max(20px, env(safe-area-inset-left)); bottom:max(24px, calc(env(safe-area-inset-bottom) + 18px)); width:calc(100% - max(40px, env(safe-area-inset-left) + env(safe-area-inset-right))); }
    #story-modal .film-loading-title { font-size:clamp(2rem,11vw,4rem); max-width:92%; }
    #story-modal .film-loading-title-card { max-width:min(76vw,480px); }
  }

  /* Short landscape phones: keep the artwork large and the information compact. */
  @media (orientation: landscape) and (max-height: 620px) and (max-width: 1100px) {
    #story-modal { padding:0 !important; }
    body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] {
      width:100vw !important;
      height:100dvh !important;
      border-radius:0 !important;
      border:0 !important;
    }
    body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] .document-topbar {
      min-height:54px !important;
      padding:max(5px, env(safe-area-inset-top)) max(9px, env(safe-area-inset-right)) 5px max(10px, env(safe-area-inset-left)) !important;
    }
    #story-modal .document-modal[data-resource-type="film"] .film-launch-copy {
      left:max(20px, env(safe-area-inset-left)) !important;
      bottom:max(18px, calc(env(safe-area-inset-bottom) + 12px)) !important;
      width:min(620px,58vw) !important;
      gap:8px !important;
    }
    #story-modal .document-modal[data-resource-type="film"] #modal-film-launch-title { font-size:clamp(1.9rem,7vw,3.6rem) !important; }
    #story-modal .film-launch-title-card { max-width:min(42vw,460px); }
    #story-modal .film-launch-title-card img { max-height:82px; }
    #story-modal .film-launch-description { display:none !important; }
    #story-modal .film-launch-meta span:nth-child(n+3) { display:none; }
    #story-modal .film-launch-actions button { min-height:40px !important; height:40px !important; padding:0 13px !important; }
    #story-modal .film-loading-back { top:max(12px, env(safe-area-inset-top)); left:max(14px, env(safe-area-inset-left)); width:42px; height:42px; }
    #story-modal .film-loading-copy { left:max(22px, env(safe-area-inset-left)); bottom:max(18px, calc(env(safe-area-inset-bottom) + 12px)); width:min(520px,56vw); gap:10px; }
    #story-modal .film-loading-title { font-size:clamp(1.9rem,7vw,3.7rem); }
    #story-modal .film-loading-title-card { max-width:min(42vw,460px); }
    #story-modal .film-loading-title-card img { max-height:82px; }
  }

  @media (prefers-reduced-motion: reduce) {
    #story-modal .film-launch-art,
    #story-modal .film-loading-art { transform:none !important; }
    #story-modal .film-loading-progress span { animation:none !important; transform:none !important; width:42% !important; }
  }



  #story-modal .film-launch-title-card,
  #story-modal .film-loading-title-card { background:transparent !important; border:0 !important; box-shadow:none !important; }
  #story-modal .document-viewer .film-launch-title-card img,
  #story-modal .document-viewer .film-loading-title-card img {
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:100% !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  body.film-loading-active.film-stable-cinema-active #story-modal,
  body.film-loading-active.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"],
  body.film-loading-active.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"] .document-shell,
  body.film-loading-active.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"] .document-viewer,
  body.film-loading-active.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"] .preview-zoom-content {
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    min-width:100vw !important;
    min-height:100dvh !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    transform:none !important;
    background:#020504 !important;
  }
  body.film-loading-active.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"] .document-shell { display:block !important; }
  body.film-loading-active.film-stable-cinema-active #story-modal .document-modal[data-resource-type="film"] #modal-film-loading {
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    border-radius:0 !important;
  }



  /* Essential outer shell: one quiet NarraSpace identity + More + Close. */
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] .document-title-wrap { display:none !important; }
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] .document-topbar::before {
    content:"NarraSpace Screening";
    display:inline-flex;
    align-items:center;
    min-height:36px;
    color:rgba(255,255,255,.88);
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
    text-shadow:0 2px 14px rgba(0,0,0,.42);
  }
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] .document-actions > * { display:none !important; }
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] .document-actions > #modal-more-tools-btn,
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] .document-actions > .doc-action.square { display:grid !important; }
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"].tools-expanded .document-actions {
    position:absolute !important;
    top:12px !important;
    right:12px !important;
    max-width:min(78vw,520px) !important;
    display:flex !important;
    justify-content:flex-end !important;
    flex-wrap:wrap !important;
    padding:6px !important;
    border-radius:22px !important;
    background:rgba(3,7,5,.46) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    backdrop-filter:blur(14px) !important;
  }
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"].tools-expanded .document-actions > #modal-more-tools-btn,
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"].tools-expanded .document-actions > .doc-action.square,
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"].tools-expanded .document-actions > .secondary-preview-action { display:grid !important; }
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] .film-launch-copy {
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    outline:0 !important;
  }
  body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] #modal-watch-film-button {
    background:#f4cf56 !important;
    color:#11170f !important;
    border-color:#f4cf56 !important;
    box-shadow:0 10px 26px rgba(0,0,0,.20) !important;
  }
  @media (max-width:820px) {
    body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] .document-topbar::before { font-size:.66rem; letter-spacing:.10em; }
    body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"].tools-expanded .document-actions { top:max(8px, env(safe-area-inset-top)) !important; right:max(8px, env(safe-area-inset-right)) !important; }
  }



  #story-modal .document-modal[data-resource-type="film"] .film-launch-copy #modal-film-launch-description {
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:3 !important;
    overflow:hidden !important;
  }
  @media (max-width:820px) and (orientation:portrait) {
    #story-modal .document-modal[data-resource-type="film"] .film-launch-copy #modal-film-launch-description {
      display:-webkit-box !important;
      -webkit-line-clamp:2 !important;
    }
  }
  @media (orientation:landscape) and (max-height:620px) and (max-width:1100px) {
    #story-modal .document-modal[data-resource-type="film"] .film-launch-copy #modal-film-launch-description { display:none !important; }
  }
  body:not(.admin-mode) #story-modal {
    background:
      radial-gradient(circle at 18% 12%, rgba(70,95,78,.18), transparent 32%),
      rgba(1,4,3,.78) !important;
    backdrop-filter:blur(16px) saturate(.82) !important;
  }



/* ---------- Film: make reflection an exclusive state ---------- */
#story-modal .document-modal[data-resource-type="film"] #modal-film-launch-copy[hidden],
#story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] #modal-film-launch-copy,
#story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] .film-launch-copy {
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] .document-topbar,
#story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] .film-loading-stage,
#story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] #modal-preview-frame,
#story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] #modal-preview-image,
#story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] #modal-preview-text,
#story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] .preview-fallback {
  display:none !important;
}
#story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] .document-shell,
#story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] .document-viewer,
#story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] .preview-zoom-content {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:transparent !important;
}
#story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] .film-launch-stage {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  display:grid !important;
  place-items:center !important;
  padding:clamp(18px,4vw,54px) !important;
  overflow:hidden !important;
  border-radius:inherit !important;
}
#story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] .film-launch-art {
  opacity:.68 !important;
  filter:saturate(.86) brightness(.58) !important;
}
#story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] .film-launch-art::after {
  background:radial-gradient(circle at 50% 34%, rgba(49,107,64,.24), transparent 44%), linear-gradient(180deg,rgba(1,5,3,.34),rgba(1,5,3,.72)) !important;
}
#story-modal .document-modal[data-resource-type="film"][data-film-playback="reflection"] .film-after-view {
  position:relative !important;
  z-index:8 !important;
  display:grid !important;
  width:min(680px,calc(100vw - 32px)) !important;
  max-width:680px !important;
  margin:auto !important;
  padding:clamp(22px,4vw,44px) !important;
  border-radius:30px !important;
  background:linear-gradient(160deg,rgba(13,58,31,.94),rgba(4,28,17,.96)) !important;
  border:1px solid rgba(239,201,83,.38) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.36) !important;
  backdrop-filter:blur(18px) !important;
}
#story-modal .film-after-view[hidden] { display:none !important; }

/* ---------- Story: Cover -> Loading -> Fullscreen Reading -> Reflection ---------- */
#story-modal .document-modal[data-resource-type="story"] { --story-experience-cover:none; }
.story-experience-layer {
  position:absolute;
  inset:0;
  z-index:28;
  overflow:hidden;
  color:#fff;
  background:#08130d;
}
.story-experience-layer[hidden] { display:none !important; }
.story-experience-bg {
  position:absolute;
  inset:-24px;
  background-image:var(--story-experience-cover, none);
  background-size:cover;
  background-position:center;
  filter:blur(10px) saturate(1.04);
  transform:scale(1.06);
  opacity:.78;
}
.story-experience-layer::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(2,7,4,.72),rgba(2,7,4,.28) 58%,rgba(2,7,4,.32)),linear-gradient(180deg,rgba(2,7,4,.16),rgba(2,7,4,.76));
  pointer-events:none;
}
.story-cover-stage {
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:minmax(190px,340px) minmax(0,1fr);
  align-items:center;
  gap:clamp(26px,5vw,74px);
  padding:clamp(30px,5vw,78px);
}
.story-cover-art {
  width:min(100%,320px);
  aspect-ratio:2/3;
  justify-self:end;
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(145deg,#274630,#0b160f);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 70px rgba(0,0,0,.38);
}
.story-cover-art img { width:100%;height:100%;object-fit:cover;display:block; }
.story-cover-art-placeholder { width:100%;height:100%;display:grid;place-items:center;font-size:3rem;color:#f2d66a; }
.story-cover-copy { max-width:740px;display:grid;gap:14px;align-content:center; }
.story-cover-kicker { display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.82); }
.story-cover-copy h2 { margin:0;color:#fff;font-size:clamp(2rem,5vw,4.8rem);line-height:.96;letter-spacing:-.045em;text-wrap:balance; }
.story-cover-credit { font-size:clamp(.9rem,1.4vw,1.08rem);font-weight:800;color:rgba(255,255,255,.92); }
.story-cover-credits { display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center; }
.story-cover-credit-row { display:inline-flex;align-items:center;gap:7px;min-width:0;color:rgba(255,255,255,.94); }
.story-cover-credit-row[hidden] { display:none !important; }
.story-cover-credit-row span { font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:rgba(242,207,89,.88); }
.story-cover-credit-row strong { min-width:0;font-size:clamp(.86rem,1.25vw,1.02rem);font-weight:820;line-height:1.25;color:#fff; }

.story-cover-meta { display:flex;flex-wrap:wrap;gap:8px; }
.story-cover-meta span { min-height:32px;display:inline-flex;align-items:center;padding:5px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(3,9,5,.28);font-size:.75rem;font-weight:800; }
.story-cover-description { max-width:680px;margin:0;color:rgba(255,255,255,.84);font-size:clamp(.84rem,1.1vw,.98rem);line-height:1.62;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden; }
.story-cover-actions { display:flex;flex-wrap:wrap;gap:9px;margin-top:4px; }
.story-cover-actions button { min-height:46px;border-radius:999px;padding:0 17px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(255,255,255,.17);background:rgba(4,10,6,.34);color:#fff;font:inherit;font-weight:850; }
.story-cover-actions .story-read-primary { background:#f2cf59;color:#10160f;border-color:#f2cf59; }
.story-loading-stage { display:grid;align-items:end;padding:clamp(28px,5vw,72px); }
.story-loading-copy { position:relative;z-index:2;width:min(620px,100%);display:grid;gap:14px; }
.story-loading-copy h2 { margin:0;font-size:clamp(2.1rem,6vw,5rem);line-height:.96;letter-spacing:-.045em;text-transform:uppercase;color:#fff; }
.story-loading-status { font-size:.95rem;font-weight:850;color:rgba(255,255,255,.9); }
.story-loading-progress { width:min(420px,82vw);height:3px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.2); }
.story-loading-progress span { display:block;width:35%;height:100%;background:#fff;border-radius:inherit;animation:storyLoadingSweep 1.35s ease-in-out infinite; }
@keyframes storyLoadingSweep { from{transform:translateX(-110%)} to{transform:translateX(330%)} }
.story-reading-toolbar {
  position:fixed;
  z-index:100050;
  top:max(12px,env(safe-area-inset-top));
  left:max(12px,env(safe-area-inset-left));
  right:max(12px,env(safe-area-inset-right));
  display:none;
  justify-content:space-between;
  pointer-events:none;
}
body.story-reading-active .story-reading-toolbar { display:flex; }
.story-reading-toolbar button { pointer-events:auto;min-width:48px;height:48px;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:rgba(4,10,6,.62);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 15px;font:inherit;font-weight:850;backdrop-filter:blur(10px); }
body.story-reading-active #story-modal { position:fixed !important;inset:0 !important;width:100vw !important;height:100dvh !important;padding:0 !important;background:#050907 !important;z-index:100040 !important; }
body.story-reading-active #story-modal .document-modal[data-resource-type="story"] { position:fixed !important;inset:0 !important;width:100vw !important;height:100dvh !important;max-width:none !important;max-height:none !important;border:0 !important;border-radius:0 !important;margin:0 !important;background:#050907 !important; }
body.story-reading-active #story-modal .document-modal[data-resource-type="story"] .document-topbar,
body.story-reading-active #story-modal .document-modal[data-resource-type="story"] .document-info,
body.story-reading-active #story-modal .document-modal[data-resource-type="story"] .preview-fullscreen-float,
body.story-reading-active #story-modal .document-modal[data-resource-type="story"] .preview-image-zoom-controls { display:none !important; }
body.story-reading-active #story-modal .document-modal[data-resource-type="story"] .document-shell,
body.story-reading-active #story-modal .document-modal[data-resource-type="story"] .document-viewer,
body.story-reading-active #story-modal .document-modal[data-resource-type="story"] .preview-zoom-content { position:fixed !important;inset:0 !important;width:100vw !important;height:100dvh !important;min-width:0 !important;min-height:0 !important;max-width:none !important;max-height:none !important;margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:#050907 !important;overflow:hidden !important; }
body.story-reading-active #story-modal .document-modal[data-resource-type="story"] #modal-preview-frame,
body.story-reading-active #story-modal .document-modal[data-resource-type="story"] #modal-preview-image,
body.story-reading-active #story-modal .document-modal[data-resource-type="story"] #modal-preview-text { width:100% !important;height:100% !important;min-height:100% !important;max-height:none !important;border:0 !important;border-radius:0 !important;background:#f6f0df !important; }
body.story-reading-active #story-modal .document-modal[data-resource-type="story"] #modal-preview-text { overflow-y:auto !important;padding:clamp(58px,8vw,100px) clamp(22px,9vw,160px) 90px !important; }
.story-reflection-stage { display:grid;place-items:center;padding:clamp(20px,4vw,60px); }
.story-reflection-card { position:relative;z-index:2;width:min(650px,100%);display:grid;justify-items:center;gap:14px;padding:clamp(24px,4vw,44px);border-radius:30px;background:linear-gradient(160deg,rgba(14,62,34,.95),rgba(4,29,18,.97));border:1px solid rgba(242,207,89,.38);box-shadow:0 30px 90px rgba(0,0,0,.38);text-align:center; }
.story-reflection-icon { width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:#f2cf59;color:#102017; }
.story-reflection-card h2 { margin:0;font-size:clamp(1.7rem,4vw,2.8rem);line-height:1.02;color:#fff; }
.story-reflection-card p { margin:0;max-width:560px;color:rgba(255,255,255,.82);line-height:1.55; }
.story-reflection-actions { width:100%;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px;margin-top:4px; }
.story-reflection-actions button { min-height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff;font:inherit;font-weight:850;display:flex;align-items:center;justify-content:center;gap:8px; }
.story-reflection-actions .primary { background:#f2cf59;color:#112016;border-color:#f2cf59; }

/* ---------- Music: one Listening Room, cover becomes the room ---------- */
#music-player-modal.music-player-modal { background:rgba(2,7,4,.76) !important;backdrop-filter:blur(14px) saturate(.9) !important; }
#music-player-modal .music-player-shell { position:relative !important;overflow:hidden !important;isolation:isolate !important;background:#06110b !important; }
#music-player-modal .music-player-shell::before { content:"";position:absolute;z-index:-3;inset:-28px;background-image:var(--music-room-cover,none);background-size:cover;background-position:center;filter:blur(18px) saturate(1.1);transform:scale(1.08);opacity:.72; }
#music-player-modal .music-player-shell::after { content:"";position:absolute;z-index:-2;inset:0;background:radial-gradient(circle at 24% 28%,rgba(255,224,123,.10),transparent 36%),linear-gradient(90deg,rgba(2,8,5,.56),rgba(2,8,5,.74)),linear-gradient(180deg,rgba(2,8,5,.20),rgba(2,8,5,.74)); }
#music-player-modal .music-player-art-column { display:none !important; }
#music-player-modal .music-player-stage { position:relative;z-index:2;display:block !important;padding:clamp(18px,3vw,34px) !important; }
#music-player-modal .music-player-copy { width:min(920px,100%) !important;margin:0 auto !important;padding:clamp(18px,3vw,34px) !important;border:1px solid rgba(255,255,255,.10) !important;border-radius:26px !important;background:rgba(5,15,9,.42) !important;backdrop-filter:blur(12px) !important; }
#music-player-modal .music-player-head { position:relative;z-index:3;background:rgba(4,12,7,.34) !important;border-bottom:1px solid rgba(255,255,255,.08) !important; }
#music-player-modal .music-player-head h2 { text-shadow:0 4px 22px rgba(0,0,0,.38); }
#music-player-modal .music-player-moods { display:flex !important;flex-wrap:wrap;gap:7px;margin:0 0 14px !important; }
#music-player-modal .music-player-moods span { background:rgba(255,255,255,.08) !important;border:1px solid rgba(255,255,255,.10) !important; }
#music-player-modal .music-player-secondary { position:relative;z-index:3;background:rgba(4,12,7,.42) !important;border-top:1px solid rgba(255,255,255,.08) !important; }
#music-player-modal .music-room-firefly:nth-child(n+6) { display:none !important; }

@media (max-width:820px) and (orientation:portrait) {
  .story-cover-stage { grid-template-columns:1fr;align-content:end;gap:18px;padding:max(74px,calc(env(safe-area-inset-top) + 62px)) 20px max(24px,calc(env(safe-area-inset-bottom) + 18px)); }
  .story-cover-art { width:min(48vw,190px);justify-self:start;border-radius:16px; }
  .story-cover-copy { gap:10px; }
  .story-cover-credits { display:grid;gap:5px; }
  .story-cover-credit-row { gap:6px; }
  .story-cover-copy h2 { font-size:clamp(2rem,10vw,3.5rem); }
  .story-cover-description { -webkit-line-clamp:2; }
  .story-cover-actions { display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,46px);width:100%; }
  .story-cover-actions button { padding:0 12px; }
  .story-cover-actions button:not(.story-read-primary) span { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap; }
  .story-loading-stage { padding:22px 20px max(30px,calc(env(safe-area-inset-bottom) + 22px)); }
  .story-reflection-actions { grid-template-columns:1fr; }
  .story-reading-toolbar button span { display:none; }
  #music-player-modal .music-player-shell { width:100vw !important;height:100dvh !important;max-height:none !important;border-radius:0 !important; }
  #music-player-modal .music-player-stage { padding:12px !important; }
  #music-player-modal .music-player-copy { border-radius:20px !important;padding:18px 14px !important; }
}
@media (orientation:landscape) and (max-height:620px) and (max-width:1100px) {
  .story-cover-stage { grid-template-columns:minmax(120px,210px) minmax(0,1fr);gap:22px;padding:max(58px,calc(env(safe-area-inset-top) + 48px)) max(22px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left)); }
  .story-cover-art { width:min(22vw,190px); }
  .story-cover-copy { gap:7px; }
  .story-cover-copy h2 { font-size:clamp(1.8rem,6vw,3.1rem); }
  .story-cover-description { display:none; }
  .story-cover-actions button { min-height:40px;height:40px; }
  .story-reflection-card { max-width:760px;padding:18px 24px;gap:9px; }
  .story-reflection-actions { grid-template-columns:1.2fr 1fr 1fr; }
  #music-player-modal .music-player-shell { width:100vw !important;height:100dvh !important;max-height:none !important;border-radius:0 !important; }
  #music-player-modal .music-player-stage { padding:10px 18px !important; }
  #music-player-modal .music-player-copy { max-width:920px;padding:14px 22px !important;border-radius:18px !important; }
  #music-player-modal .music-player-story { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
}
@media (prefers-reduced-motion:reduce) {
  .story-loading-progress span { animation:none !important;transform:none !important;width:42% !important; }
  .story-experience-bg { filter:none !important;transform:none !important; }
}



#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="cover"],
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="loading"]{background:#071109!important;overflow:hidden!important;}
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="cover"] .document-topbar,
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="cover"] .document-shell,
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="cover"] .document-info,
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="cover"] #modal-film-launch,
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="cover"] #modal-film-loading,
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="cover"] #modal-film-after-view,
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="cover"] #modal-preview-frame,
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="cover"] #modal-preview-image,
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="cover"] #modal-preview-text,
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="cover"] #modal-preview-fallback,
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="loading"] .document-topbar,
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="loading"] .document-shell,
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="loading"] .document-info,
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="loading"] #modal-film-launch,
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="loading"] #modal-film-loading,
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="loading"] #modal-film-after-view,
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="loading"] #modal-preview-frame,
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="loading"] #modal-preview-image,
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="loading"] #modal-preview-text,
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="loading"] #modal-preview-fallback{display:none!important;visibility:hidden!important;pointer-events:none!important;}
.ns09z-story-layer{position:absolute!important;inset:0!important;z-index:1000!important;width:100%!important;height:100%!important;border-radius:inherit!important;overflow:hidden!important;isolation:isolate;}
.ns09z-story-layer[hidden]{display:none!important;}
.ns09z-story-bg{position:absolute!important;inset:-2%!important;z-index:0!important;background-size:cover!important;background-position:center center!important;transform:scale(1.025)!important;filter:saturate(1.06) contrast(1.01) brightness(1.02)!important;pointer-events:none!important;}
#ns09z-story-cover:before,#ns09z-story-loading:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 76% 18%,rgba(244,210,105,.09),transparent 32%),linear-gradient(90deg,rgba(3,8,5,.45) 0%,rgba(3,8,5,.28) 34%,rgba(3,8,5,.10) 68%,rgba(3,8,5,.16) 100%),linear-gradient(180deg,rgba(3,8,5,.02) 0%,rgba(3,8,5,.05) 48%,rgba(3,8,5,.48) 100%);}
.ns09z-story-stage{position:relative;z-index:2;display:grid!important;grid-template-columns:minmax(150px,220px) minmax(0,760px)!important;align-items:end!important;align-content:end!important;justify-content:start!important;gap:clamp(20px,2.6vw,34px)!important;width:100%!important;height:100%!important;padding:clamp(32px,5vw,72px)!important;}
.ns09z-story-art{width:100%!important;aspect-ratio:3/4!important;border-radius:20px!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.24)!important;background:linear-gradient(145deg,rgba(244,210,105,.18),rgba(15,34,20,.82))!important;box-shadow:0 24px 58px rgba(0,0,0,.34)!important;}
.ns09z-story-art img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;}
.ns09z-story-art-placeholder{width:100%;height:100%;display:grid;place-items:center;color:#f2cf59;}
.ns09z-story-copy{display:grid!important;gap:11px!important;min-width:0!important;text-shadow:0 4px 18px rgba(0,0,0,.38);}
.ns09z-story-kicker{display:inline-flex;align-items:center;gap:8px;width:max-content;min-height:32px;padding:0 11px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(8,18,11,.34);color:#f2cf59;font-size:.7rem;font-weight:950;letter-spacing:.04em;text-transform:uppercase;}
.ns09z-story-title,#ns09z-story-loading-title{margin:0!important;color:#fffdf5!important;font-size:clamp(2.45rem,5.6vw,5.25rem)!important;line-height:.98!important;letter-spacing:-.035em!important;}
.ns09z-story-credits{display:flex!important;flex-wrap:wrap;gap:8px 18px!important;}.ns09z-story-credit{display:inline-flex!important;align-items:center;gap:7px;color:#fffdf5;font-weight:850;font-size:.88rem;}.ns09z-story-credit[hidden]{display:none!important;}.ns09z-story-credit span{color:rgba(255,255,255,.66);font-size:.64rem;font-weight:950;letter-spacing:.045em;text-transform:uppercase;}
.ns09z-story-meta{display:flex!important;flex-wrap:wrap;gap:7px!important;}.ns09z-story-meta span{min-height:27px;display:inline-flex;align-items:center;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(4,12,7,.30);color:rgba(255,253,245,.92);font-size:.72rem;font-weight:850;}
.ns09z-story-description{margin:0!important;max-width:64ch!important;color:rgba(255,253,245,.92)!important;font-size:clamp(.9rem,1vw,.98rem)!important;line-height:1.55!important;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
.ns09z-story-actions{display:flex!important;flex-wrap:wrap;gap:9px!important;margin-top:1px;}.ns09z-story-actions button{min-height:44px!important;padding:0 15px!important;border-radius:999px!important;border:1px solid rgba(255,255,255,.17)!important;background:rgba(4,12,7,.36)!important;color:#fffdf5!important;font:inherit;font-size:.78rem!important;font-weight:900!important;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;}.ns09z-story-actions .ns09z-story-read-primary{background:#f2cf59!important;border-color:#f2cf59!important;color:#102017!important;}
.ns09z-story-close{position:absolute!important;top:max(16px,env(safe-area-inset-top))!important;right:max(16px,env(safe-area-inset-right))!important;z-index:4!important;width:48px!important;height:48px!important;display:grid!important;place-items:center!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.16)!important;background:rgba(7,15,9,.50)!important;color:#fff!important;}
.ns09z-story-mini-brand{position:absolute!important;top:max(20px,calc(env(safe-area-inset-top) + 2px))!important;left:max(22px,env(safe-area-inset-left))!important;z-index:4!important;color:rgba(255,253,245,.84)!important;font-size:.7rem!important;font-weight:950!important;letter-spacing:.05em!important;text-transform:uppercase!important;}
#ns09z-story-loading .ns09z-story-bg{filter:saturate(1.04) brightness(.84) blur(1px)!important;}#ns09z-story-loading:before{background:linear-gradient(90deg,rgba(3,8,5,.50),rgba(3,8,5,.20) 62%,rgba(3,8,5,.24))!important;}.ns09z-story-loading-copy{position:relative!important;z-index:2!important;display:grid!important;align-content:end!important;gap:10px!important;width:min(720px,100%)!important;height:100%!important;padding:clamp(32px,5vw,72px)!important;text-shadow:0 4px 18px rgba(0,0,0,.38);}.ns09z-story-loading-status{color:rgba(255,253,245,.88)!important;font-weight:760!important;}.ns09z-story-loading-progress{width:min(330px,78vw)!important;height:3px!important;border-radius:999px!important;overflow:hidden!important;background:rgba(255,255,255,.18)!important;}.ns09z-story-loading-progress span{display:block!important;width:34%!important;height:100%!important;border-radius:inherit;background:#f2cf59!important;animation:ns09zStoryLoad 1.15s ease-in-out infinite!important;}@keyframes ns09zStoryLoad{0%{transform:translateX(-125%)}58%,100%{transform:translateX(210%)}}
body.ns09z-story-reading #story-modal .document-modal[data-resource-type="story"]{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:#050907!important;overflow:hidden!important;}
body.ns09z-story-reading #story-modal .document-modal[data-resource-type="story"] .document-topbar,body.ns09z-story-reading #story-modal .document-modal[data-resource-type="story"] .document-info,body.ns09z-story-reading #story-modal .document-modal[data-resource-type="story"] #modal-cover,body.ns09z-story-reading #story-modal .document-modal[data-resource-type="story"] #modal-resource-details,body.ns09z-story-reading #story-modal .document-modal[data-resource-type="story"] .ns09z-story-layer,body.ns09z-story-reading #story-modal .document-modal[data-resource-type="story"] #modal-film-launch,body.ns09z-story-reading #story-modal .document-modal[data-resource-type="story"] #modal-film-loading,body.ns09z-story-reading #story-modal .document-modal[data-resource-type="story"] #modal-film-after-view{display:none!important;}
body.ns09z-story-reading #story-modal .document-modal[data-resource-type="story"] .document-shell,body.ns09z-story-reading #story-modal .document-modal[data-resource-type="story"] .document-viewer,body.ns09z-story-reading #story-modal .document-modal[data-resource-type="story"] .preview-zoom-content{display:block!important;visibility:visible!important;pointer-events:auto!important;position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;border:0!important;border-radius:0!important;}body.ns09z-story-reading #story-modal .document-modal[data-resource-type="story"] #modal-preview-frame,body.ns09z-story-reading #story-modal .document-modal[data-resource-type="story"] #modal-preview-image,body.ns09z-story-reading #story-modal .document-modal[data-resource-type="story"] #modal-preview-text{visibility:visible!important;pointer-events:auto!important;}
body.ns09z-story-review-transition #story-modal{opacity:0!important;visibility:hidden!important;pointer-events:none!important;}#ns09z-story-reading-toolbar{position:fixed!important;left:max(12px,env(safe-area-inset-left))!important;top:max(12px,env(safe-area-inset-top))!important;z-index:2147482500!important;display:none;gap:8px;pointer-events:auto;}body.ns09z-story-reading #ns09z-story-reading-toolbar{display:flex!important;}#ns09z-story-reading-toolbar button{min-height:42px;padding:0 13px;display:inline-flex;align-items:center;gap:7px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(5,14,8,.76);color:#fff;font-weight:900;box-shadow:0 14px 34px rgba(0,0,0,.28);}
#music-player-modal .music-player-shell:before{opacity:.92!important;filter:blur(10px) saturate(1.05) brightness(.95)!important;pointer-events:none!important;}#music-player-modal .music-player-shell:after{background:linear-gradient(90deg,rgba(2,7,4,.34),rgba(2,7,4,.46) 60%,rgba(2,7,4,.52))!important;pointer-events:none!important;}#music-player-modal .music-room-fireflies,#music-player-modal .music-player-art-column,#music-player-modal .music-player-art-wrap{pointer-events:none!important;}
@media(max-width:900px){.ns09z-story-stage{grid-template-columns:92px minmax(0,1fr)!important;align-items:end!important;gap:14px!important;padding:max(22px,calc(env(safe-area-inset-top) + 18px)) 16px max(20px,calc(env(safe-area-inset-bottom) + 16px))!important;}.ns09z-story-title,#ns09z-story-loading-title{font-size:clamp(2rem,9vw,3.4rem)!important;}.ns09z-story-description{-webkit-line-clamp:2;}.ns09z-story-actions{display:grid!important;grid-template-columns:minmax(0,1.35fr) repeat(3,44px)!important;width:100%!important;}.ns09z-story-actions button:not(.ns09z-story-read-primary) span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}}
@media(orientation:landscape) and (max-height:620px){.ns09z-story-description{display:none!important;}.ns09z-story-stage{grid-template-columns:96px minmax(0,1fr)!important;gap:14px!important;padding:18px 22px!important;}.ns09z-story-title,#ns09z-story-loading-title{font-size:clamp(1.85rem,5vw,3rem)!important;}.ns09z-story-actions button{min-height:40px!important;}}



/* Keep Story cover/loading as a single clean layer. No old viewer/film preview behind it. */
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="cover"] > :not(.ns09z-story-layer),
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="loading"] > :not(.ns09z-story-layer) {
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="cover"] .ns09z-story-layer:not([hidden]),
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="loading"] .ns09z-story-layer:not([hidden]) {
  display:block !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="cover"] #modal-film-launch,
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="cover"] #modal-film-loading,
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="cover"] #modal-film-after-view,
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="loading"] #modal-film-launch,
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="loading"] #modal-film-loading,
#story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="loading"] #modal-film-after-view {
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
body.ns09aa-review-transition #story-modal {
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
/* Slightly brighter Story cover while keeping text readable. */
.ns09z-story-bg {
  filter:saturate(1.08) contrast(1.02) brightness(1.08) !important;
}
#ns09z-story-cover:before {
  background:
    radial-gradient(circle at 76% 18%,rgba(244,210,105,.10),transparent 32%),
    linear-gradient(90deg,rgba(3,8,5,.36) 0%,rgba(3,8,5,.22) 34%,rgba(3,8,5,.08) 68%,rgba(3,8,5,.12) 100%),
    linear-gradient(180deg,rgba(3,8,5,.00) 0%,rgba(3,8,5,.03) 48%,rgba(3,8,5,.38) 100%) !important;
}
#ns09z-story-loading:before {
  background:
    radial-gradient(circle at 76% 18%,rgba(244,210,105,.10),transparent 32%),
    linear-gradient(90deg,rgba(3,8,5,.42) 0%,rgba(3,8,5,.20) 62%,rgba(3,8,5,.20) 100%) !important;
}

/* Film: loading and reflection form should be the clean states. */
body.ns09aa-film-reflection-active #story-modal {
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
#story-modal .document-modal[data-resource-type="film"][data-film-playback="loading"] #modal-film-launch,
#story-modal .document-modal[data-resource-type="film"][data-film-playback="loading"] #modal-film-after-view {
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Music: return visible cover container and reduce the dark veil. */
#music-player-modal .music-player-shell::before {
  opacity:.98 !important;
  filter:blur(8px) saturate(1.08) contrast(1.02) brightness(1.02) !important;
  transform:scale(1.055) !important;
  pointer-events:none !important;
}
#music-player-modal .music-player-shell::after {
  background:
    radial-gradient(circle at 24% 28%,rgba(255,224,123,.10),transparent 36%),
    linear-gradient(90deg,rgba(2,8,5,.18),rgba(2,8,5,.30) 58%,rgba(2,8,5,.38)),
    linear-gradient(180deg,rgba(2,8,5,.08),rgba(2,8,5,.34)) !important;
  pointer-events:none !important;
}
#music-player-modal .music-player-stage {
  display:grid !important;
  grid-template-columns:minmax(160px,260px) minmax(0,1fr) !important;
  align-items:center !important;
  gap:clamp(16px,3vw,34px) !important;
  padding:clamp(18px,3vw,34px) !important;
}
#music-player-modal .music-player-art-column {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  min-width:0 !important;
  pointer-events:none !important;
  position:relative !important;
  z-index:3 !important;
}
#music-player-modal .music-player-art-wrap {
  display:block !important;
  width:min(100%,260px) !important;
  min-height:0 !important;
  aspect-ratio:1/1 !important;
  border-radius:24px !important;
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,.20) !important;
  background:rgba(255,255,255,.06) !important;
  box-shadow:0 24px 58px rgba(0,0,0,.38) !important;
  pointer-events:none !important;
}
#music-player-modal .music-player-art {
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
#music-player-modal .music-player-copy {
  margin:0 !important;
  width:100% !important;
  max-width:none !important;
  background:rgba(5,15,9,.30) !important;
  backdrop-filter:blur(9px) !important;
  position:relative !important;
  z-index:4 !important;
}
#music-player-modal .music-player-head,
#music-player-modal .music-player-copy,
#music-player-modal .music-player-secondary,
#music-player-modal .music-player-controls,
#music-player-modal .music-player-close,
#music-player-modal .music-player-secondary button,
#music-player-modal .music-player-controls button,
#music-player-modal .music-progress-row input,
#music-player-modal .music-volume-control input {
  pointer-events:auto !important;
}
@media (max-width:820px) and (orientation:portrait) {
  #music-player-modal .music-player-stage {
    grid-template-columns:1fr !important;
    gap:14px !important;
    padding:14px !important;
  }
  #music-player-modal .music-player-art-wrap {
    width:min(52vw,210px) !important;
  }
}
@media (orientation:landscape) and (max-height:620px) and (max-width:1100px) {
  #music-player-modal .music-player-stage {
    grid-template-columns:minmax(120px,190px) minmax(0,1fr) !important;
    gap:16px !important;
    padding:10px 18px !important;
  }
  #music-player-modal .music-player-art-wrap {
    width:min(100%,180px) !important;
  }
}



/* Story/Film: when the reflection form owns the experience, keep the old preview shell fully invisible behind it. */
body.ns09ab-reflection-owned #story-modal,
body.ns09aa-review-transition #story-modal,
body.ns09z-story-review-transition #story-modal,
body.ns09aa-film-reflection-active #story-modal {
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
#story-modal .document-modal[data-ns-story-mode="reflection-form"] > :not(#review-modal) {
  pointer-events:none !important;
}

/* Music: clearer artwork, less gaussian blur, no hard black top/bottom bands. */
#music-player-modal .music-player-shell {
  background:rgba(4, 12, 8, .18) !important;
}
#music-player-modal .music-player-shell::before {
  opacity:1 !important;
  filter:blur(4px) saturate(1.08) contrast(1.02) brightness(1.08) !important;
  transform:scale(1.025) !important;
  pointer-events:none !important;
}
#music-player-modal .music-player-shell::after {
  background:
    radial-gradient(circle at 20% 24%, rgba(255,224,123,.10), transparent 34%),
    radial-gradient(circle at 76% 18%, rgba(255,255,255,.06), transparent 32%),
    linear-gradient(90deg, rgba(2,8,5,.10), rgba(2,8,5,.18) 55%, rgba(2,8,5,.24)),
    linear-gradient(180deg, rgba(2,8,5,.02), rgba(2,8,5,.10) 46%, rgba(2,8,5,.18)) !important;
  pointer-events:none !important;
}
#music-player-modal .music-player-head {
  background:transparent !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
  box-shadow:none !important;
}
#music-player-modal .music-player-secondary {
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.035)) !important;
  border-top:1px solid rgba(255,255,255,.07) !important;
  box-shadow:none !important;
}
#music-player-modal .music-player-copy {
  background:rgba(5,15,9,.22) !important;
  backdrop-filter:blur(5px) !important;
  -webkit-backdrop-filter:blur(5px) !important;
}
#music-player-modal .music-player-art-wrap {
  box-shadow:0 18px 46px rgba(0,0,0,.26) !important;
  border-color:rgba(255,255,255,.24) !important;
}
#music-player-modal .music-player-story,
#music-player-modal .music-player-rights {
  background:rgba(255,255,255,.045) !important;
  border-color:rgba(255,255,255,.08) !important;
}



/* Storybook: hide the underlying reader/modal immediately when reflection closes, so no 1–3 second flash. */
body.ns09ac-story-reflection-closing #story-modal,
#story-modal.ns09ac-force-hidden {
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:none !important;
}
body.ns09ac-story-reflection-closing #story-modal * {
  pointer-events:none !important;
}

/* Music: slightly darker than 09ab, but still clearer than the older over-black versions. */
#music-player-modal .music-player-shell {
  background:rgba(3, 10, 6, .28) !important;
}
#music-player-modal .music-player-shell::before {
  opacity:1 !important;
  filter:blur(5px) saturate(1.06) contrast(1.03) brightness(.96) !important;
  transform:scale(1.028) !important;
  pointer-events:none !important;
}
#music-player-modal .music-player-shell::after {
  background:
    radial-gradient(circle at 22% 22%, rgba(255,224,123,.08), transparent 34%),
    radial-gradient(circle at 76% 18%, rgba(255,255,255,.045), transparent 32%),
    linear-gradient(90deg, rgba(2,8,5,.20), rgba(2,8,5,.26) 55%, rgba(2,8,5,.34)),
    linear-gradient(180deg, rgba(2,8,5,.08), rgba(2,8,5,.16) 48%, rgba(2,8,5,.26)) !important;
  pointer-events:none !important;
}
#music-player-modal .music-player-copy {
  background:rgba(4,14,8,.34) !important;
  backdrop-filter:blur(5px) !important;
  -webkit-backdrop-filter:blur(5px) !important;
  border-color:rgba(255,255,255,.12) !important;
}
#music-player-modal .music-player-head {
  background:linear-gradient(180deg, rgba(4,14,8,.18), rgba(4,14,8,.04)) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
#music-player-modal .music-player-secondary {
  background:linear-gradient(180deg, rgba(4,14,8,.06), rgba(4,14,8,.18)) !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
}



/* 09ae — admin shell guard: keep public Po-opo guide from leaking into Admin. */
#poopo-guide[aria-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.admin-mode #poopo-guide,
body.admin-mode .poopo-guide,
body.admin-mode #poopo-guide *,
body.admin-mode .poopo-guide * {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.admin-mode .poopo-widget,
body.admin-mode .poopo-launcher,
body.admin-mode .poopo-bubble,
body.admin-mode .poopo-floating,
body.admin-mode .poopo-float,
body.admin-mode #chatbot-widget,
body.admin-mode #chat-panel,
body.admin-mode .chat-panel {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}



/* 09an — optional transparent PNG title cards for Story, Film, and Music. */
.ns-title-card-img {
  display:block;
  max-width:min(620px, 72vw);
  max-height:clamp(82px, 16vw, 190px);
  width:auto;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.38));
}
.ns09z-story-title-card,
#story-cover-title-card {
  margin:4px 0 2px;
  max-width:min(640px, 72vw);
  max-height:clamp(88px, 17vw, 190px);
}
#ns09z-story-loading-title-card,
#story-loading-title-card {
  margin:8px 0 0;
  max-width:min(620px, 76vw);
  max-height:clamp(84px, 18vw, 180px);
}
.music-title-card-img {
  max-width:min(620px, 62vw);
  max-height:clamp(56px, 9vw, 118px);
  margin:8px 0 6px;
}
/* Title Card v19 — optional PNG wordmarks on public archive cards. */
.resource-card-title-png-wrap{display:flex;align-items:flex-end;min-width:0;max-width:100%;}
.resource-card-title-png{display:block;width:auto;max-width:min(72%,280px);max-height:68px;object-fit:contain;object-position:left bottom;filter:drop-shadow(0 2px 7px rgba(0,0,0,.34));}
.resource-card-title-png-wrap.is-compact{max-width:88%;}
.resource-card-title-png.is-compact{max-width:100%;max-height:48px;}
.resource-card-title-png-fallback{color:inherit;font:inherit;line-height:inherit;}
body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png{width:calc(100% - 58px);max-width:none;overflow:visible;-webkit-line-clamp:unset;display:block;}
body:not(.admin-mode) .mobile-library-pick-title.has-title-card-png{display:block;overflow:visible;-webkit-line-clamp:unset;line-height:1;}
@media(max-width:700px){
  body:not(.admin-mode) #stories-container .storybook-card .resource-card-title-png{max-width:min(76%,220px);max-height:54px;}
  body:not(.admin-mode) .mobile-library-pick .resource-card-title-png.is-compact{max-height:42px;max-width:100%;}
}

#music-player-modal.has-title-card #music-player-title {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
}
.modal-film-title-card img,
.film-title-card img,
#modal-film-launch-title-card img,
#modal-film-loading-title-card img {
  max-width:min(680px, 72vw);
  max-height:clamp(90px, 15vw, 190px);
  object-fit:contain;
}
@media (max-width:700px){
  .ns-title-card-img{max-width:82vw;max-height:128px;}
  .music-title-card-img{max-width:76vw;max-height:86px;}
}



/* 09ar — Admin Library Manager cleanup, icon-first and warning-first. */
.admin-library-actions.ns-library-actions,
.admin-library-card-actions .ns-library-actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important;align-items:center!important}
.ns-library-icon-action{width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border-radius:13px!important}
.ns-library-icon-action i{width:18px!important;height:18px!important;margin:0!important}
.ns-library-menu summary{list-style:none!important}.ns-library-menu summary::-webkit-details-marker{display:none!important}
.admin-library-actions .action-menu-panel button{display:flex!important;align-items:center!important;gap:8px!important;text-align:left!important;white-space:nowrap!important}
.admin-library-actions .action-menu-panel button i{width:16px!important;height:16px!important;flex:none!important}
.admin-library-type-chip{gap:6px!important;padding:0 9px!important;min-height:28px!important}
.admin-library-type-chip .admin-chip-text{display:inline-block!important;max-width:72px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.health-stack{display:flex!important;flex-wrap:wrap!important;gap:6px!important}.health-chip{min-height:26px!important;border-radius:999px!important;padding:0 8px!important;font-size:.7rem!important;font-weight:950!important}.health-chip i{width:13px!important;height:13px!important;flex:none!important}
.admin-library-table table{table-layout:auto!important}.admin-library-table th:last-child,.admin-library-table td:last-child{width:190px!important}.admin-library-title{line-height:1.2!important}.admin-library-mini-text{line-height:1.35!important}
.admin-library-card{position:relative!important}.admin-library-card-actions{border-top:1px solid rgba(24,62,35,.10)!important;padding-top:10px!important;margin-top:8px!important}
@media (max-width:1100px){.admin-library-table{display:none!important}.admin-library-card-list{display:grid!important}.admin-library-type-chip .admin-chip-text{display:none!important}.admin-library-type-chip{width:34px!important;justify-content:center!important;padding:0!important}.admin-library-checkbox span{display:none!important}.ns-library-icon-action{width:44px!important;min-width:44px!important;height:44px!important}}
@media (max-width:620px){.admin-library-card{padding:12px!important}.admin-library-card-head{gap:10px!important}.admin-library-title{font-size:.98rem!important}.admin-library-card-actions .ns-library-actions{gap:7px!important}.ns-library-icon-action{width:42px!important;min-width:42px!important;height:42px!important}}



/* 09bc — Organize Stage polish */
.organize-stage-panel{background:linear-gradient(135deg,rgba(255,252,238,.96),rgba(247,253,244,.96))!important;border-color:rgba(31,91,50,.14)!important}
.organize-stage-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;margin-bottom:18px}
.organize-stage-kicker{display:inline-flex;gap:8px;align-items:center;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:950;color:#a67a00;margin-bottom:8px}.organize-stage-kicker i{width:16px;height:16px}.organize-stage-copy{margin:6px 0 0;color:#66725d;font-weight:750;line-height:1.55}.organize-stage-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.organize-metric-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:14px}.organize-metric{border:1px solid rgba(31,91,50,.12);border-radius:18px;background:#fffef8;box-shadow:0 12px 28px rgba(31,91,50,.05);padding:14px;display:grid;gap:5px;min-height:112px}.organize-metric-icon{width:34px;height:34px;border-radius:12px;background:#eef8ec;color:#123c24;display:grid;place-items:center}.organize-metric-icon i{width:18px;height:18px}.organize-metric strong{font-size:1.3rem;color:#113c24;line-height:1}.organize-metric span{font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:#66725d;font-weight:950}.organize-metric.warn{border-color:rgba(200,137,0,.28);background:#fff9e8}.organize-metric.warn .organize-metric-icon{background:#fff0bf;color:#8a6500}.organize-metric.good{border-color:rgba(26,117,64,.22);background:#f6fff4}.organize-path-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px}.organize-stage-card{border:1px solid rgba(31,91,50,.12);background:#fff;border-radius:20px;padding:14px;display:grid;grid-template-columns:auto auto 1fr auto;gap:10px;align-items:center}.organize-stage-num{width:28px;height:28px;border-radius:999px;background:#123c24;color:#fff;display:grid;place-items:center;font-weight:950;font-size:.8rem}.organize-stage-icon{width:38px;height:38px;border-radius:14px;background:#eef8ec;color:#123c24;display:grid;place-items:center}.organize-stage-icon i{width:19px;height:19px}.organize-stage-card strong{display:block;color:#123c24;font-weight:950}.organize-stage-card span{display:block;color:#66725d;font-weight:750;font-size:.86rem;line-height:1.35}.organize-stage-card em{display:block;color:#a67a00;font-weight:900;font-size:.75rem;font-style:normal;margin-top:3px}.organize-tool-row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 14px}.organize-tool-row .btn-secondary{min-height:42px}.organize-warning{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px dashed rgba(196,145,0,.38);border-radius:18px;background:#fff9df;color:#563c00;font-weight:800;margin:0 0 14px}.organize-warning i{width:20px;height:20px;flex:none}.organize-warning strong{display:block;font-weight:950}.organize-warning span{display:block;font-size:.88rem;line-height:1.4}.organize-queues{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.organize-queue-card{background:#fff;border:1px solid rgba(31,91,50,.12);border-radius:22px;padding:12px;box-shadow:0 12px 28px rgba(31,91,50,.04)}.organize-queue-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.organize-queue-head>div{display:flex;gap:8px;align-items:center}.organize-queue-head i{width:18px;height:18px}.organize-queue-head strong{font-weight:950;color:#123c24}.organize-queue-head span{min-width:26px;height:26px;border-radius:999px;background:#eef8ec;display:grid;place-items:center;font-weight:950;color:#123c24}.organize-queue-item{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px;border-radius:16px;background:#fbfdf7;margin-top:7px;border:1px solid rgba(31,91,50,.08)}.organize-queue-main{display:flex;gap:10px;align-items:center;min-width:0}.organize-type-icon{width:34px;height:34px;border-radius:12px;background:#eef8ec;color:#123c24;display:grid;place-items:center;flex:none}.organize-type-icon i{width:17px;height:17px}.organize-queue-main strong{display:block;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#123c24;font-weight:950}.organize-queue-main span{display:block;color:#66725d;font-size:.78rem;font-weight:800;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.organize-queue-actions{display:flex;gap:6px;flex:none}.organize-empty-line{padding:14px;border-radius:16px;background:#f7fbf2;color:#66725d;font-weight:850;text-align:center}.organize-icon-actions{display:flex;gap:8px;flex-wrap:wrap}.organize-icon-actions .btn-icon-only,.organize-queue-actions .btn-icon-only,.organize-stage-card .btn-icon-only{width:42px;min-width:42px;height:42px;padding:0;justify-content:center}.organize-icon-actions .btn-icon-only i,.organize-queue-actions .btn-icon-only i,.organize-stage-card .btn-icon-only i{margin:0;width:18px;height:18px}.organize-chip-row{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 10px}.organize-mini-chip{border:1px solid rgba(31,91,50,.14);background:#f7fbf2;color:#123c24;border-radius:999px;padding:7px 10px;font-weight:900;font-size:.75rem;cursor:pointer}.organize-mini-chip:hover{background:#eef8ec}.organize-category-clean .category-row-sub{font-weight:800;color:#6b765f;line-height:1.4}.category-actions.organize-icon-actions button{padding:0!important}.admin-nav-btn[data-admin-target="admin-section-organize"]{border-color:rgba(196,145,0,.22)}
@media(max-width:1220px){.organize-metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.organize-path-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.organize-queues{grid-template-columns:1fr}}
@media(max-width:720px){.organize-stage-intro{grid-template-columns:1fr}.organize-stage-actions{justify-content:flex-start}.organize-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.organize-path-grid{grid-template-columns:1fr}.organize-stage-card{grid-template-columns:auto 1fr auto}.organize-stage-icon{display:none}.organize-queue-item{align-items:flex-start}.organize-queue-main strong,.organize-queue-main span{max-width:170px}.organize-tool-row .admin-btn-label{display:none}.organize-tool-row .btn-secondary{width:44px;min-width:44px;padding:0;justify-content:center}.organize-tool-row .btn-secondary i{margin:0}}
@media(max-width:460px){.organize-metric-grid{grid-template-columns:1fr}.organize-queue-item{flex-direction:column}.organize-queue-actions{width:100%;justify-content:flex-end}.organize-queue-main strong,.organize-queue-main span{max-width:230px}}



/* 09be: admin consolidation + library performance pass */
body.admin-consolidated-09be .ns-az-helper,
body.admin-consolidated-09be .ns-ba-panel,
body.admin-consolidated-09be .ns-bc-panel,
body.admin-consolidated-09be .admin-system-finish-panel,
body.admin-consolidated-09be .admin-library-safety-panel,
body.admin-consolidated-09be .admin-toolkit-soft-note{margin-block:12px!important}
.admin-library-shell-compact{border-radius:22px;overflow:hidden;background:#fff;border:1px solid rgba(45,75,45,.14)}
.admin-library-table-compact table{table-layout:fixed!important;width:100%;border-collapse:separate;border-spacing:0}
.admin-library-table-compact th:nth-child(1){width:44px}.admin-library-table-compact th:nth-child(2){width:46%}.admin-library-table-compact th:nth-child(3){width:15%}.admin-library-table-compact th:nth-child(4){width:19%}.admin-library-table-compact th:nth-child(5){width:148px}
.admin-library-table-compact td{vertical-align:top!important;padding:16px 14px!important}
.admin-library-compact-main{display:grid;gap:6px;min-width:0}.admin-library-compact-blurb{max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.admin-library-status-cell{display:grid;gap:7px;align-content:start}.admin-library-placement-mini{font-size:.78rem;color:#69735e;font-weight:800;line-height:1.25}.admin-library-health-cell .health-chip,.admin-library-card-health .health-chip{margin:2px 3px 2px 0}.admin-library-actions-cell{min-width:132px}.ns-library-actions-compact{display:grid!important;grid-template-columns:repeat(3,42px);gap:8px;align-items:start}.ns-library-actions-compact .ns-library-icon-action{width:42px!important;min-width:42px!important;height:42px!important;padding:0!important}.ns-library-actions-compact .action-menu{position:relative}.admin-library-row-details{margin-top:4px}.admin-library-row-details summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(38,71,42,.16);border-radius:999px;padding:4px 9px;font-size:.75rem;font-weight:900;color:#315638;background:#f7fbf5}.admin-library-row-details summary::-webkit-details-marker{display:none}.admin-library-detail-drawer{margin-top:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;padding:10px;border-radius:14px;background:#f8fbf4;border:1px dashed rgba(45,75,45,.14);font-size:.78rem;color:#5c6755;font-weight:750;line-height:1.35}.admin-library-detail-drawer span{min-width:0;overflow-wrap:anywhere}.admin-library-card-list-compact{gap:12px}.admin-library-card-compact{padding:14px!important}.admin-library-card-compact .admin-library-card-head{align-items:flex-start}.admin-library-card-health{margin:8px 0}.admin-library-card-compact .admin-library-card-actions .ns-library-actions-compact{display:flex!important;flex-wrap:wrap}.admin-library-card-compact .admin-library-detail-drawer{grid-template-columns:1fr}.admin-library-title-top{gap:6px!important;flex-wrap:wrap}.admin-library-type-chip{white-space:nowrap}.category-badge,.featured-inline{white-space:nowrap}
@media (max-width:1180px){.admin-library-table-compact{display:none!important}.admin-library-card-list-compact{display:grid!important}.admin-library-detail-drawer{grid-template-columns:1fr}}
@media (min-width:1181px){.admin-library-card-list-compact{display:none!important}}
@media (max-width:760px){.admin-library-card-compact{border-radius:18px!important}.admin-library-card-compact .admin-library-title{font-size:1rem}.admin-library-card-compact .admin-library-title-top .admin-chip-text{display:none}.admin-library-card-compact .admin-library-type-chip{width:34px;justify-content:center;padding-inline:0}.ns-library-actions-compact .ns-library-icon-action{width:40px!important;min-width:40px!important;height:40px!important}}



/* 09cf — Final public collaborator hierarchy + responsive directory cleanup.
   Scope: public collaborator shelf and searchable directory only. */

/* Homepage: every person is one visual unit — portrait, name, then role. */
body:not(.admin-mode) #editorial-people .phase8b-person-card,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-card{
  align-content:start!important;
  justify-items:center!important;
  text-align:center!important;
}
body:not(.admin-mode) #editorial-people .phase8b-person-copy,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-copy{
  width:100%!important;
  max-width:150px!important;
  margin:0 auto!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:0!important;
  text-align:center!important;
}
body:not(.admin-mode) #editorial-people .phase8b-person-name,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-name{
  order:1!important;
  position:static!important;
  width:100%!important;
  max-width:150px!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  color:#203b29!important;
  font-size:clamp(.9rem,1vw,1.02rem)!important;
  font-weight:900!important;
  line-height:1.16!important;
  text-align:center!important;
  white-space:normal!important;
  overflow:visible!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
  text-wrap:balance!important;
  -webkit-line-clamp:unset!important;
}
body:not(.admin-mode) #editorial-people .phase8b-person-role,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-role{
  order:2!important;
  position:static!important;
  width:100%!important;
  max-width:150px!important;
  min-height:0!important;
  margin:4px 0 0!important;
  padding:0!important;
  display:block!important;
  color:#68794a!important;
  font-size:clamp(.61rem,.72vw,.69rem)!important;
  font-weight:900!important;
  line-height:1.2!important;
  letter-spacing:.035em!important;
  text-transform:uppercase!important;
  text-align:center!important;
  white-space:normal!important;
  overflow:visible!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
  text-wrap:balance!important;
}
body:not(.admin-mode) #editorial-people .phase8b-person-affiliation,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-affiliation{
  order:3!important;
  margin:4px 0 0!important;
  min-height:0!important;
}
body:not(.admin-mode) #editorial-people .phase8b-linked-works,
body:not(.admin-mode) #editorial-collaborators .phase8b-linked-works{display:none!important}

/* Desktop: one calm five-person editorial row. */
@media (min-width:820px){
  body:not(.admin-mode) #editorial-people .phase8b-people-grid,
  body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid,
  body:not(.admin-mode) #editorial-people .phase8b-people-grid.phase316-can-center,
  body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid.phase316-can-center{
    width:min(1040px,calc(100vw - 48px))!important;
    max-width:1040px!important;
    margin:0 auto!important;
    padding:8px 0 10px!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    justify-items:center!important;
    align-items:start!important;
    gap:clamp(24px,3vw,48px)!important;
    overflow:visible!important;
  }
  body:not(.admin-mode) #editorial-people .phase8b-person-card,
  body:not(.admin-mode) #editorial-collaborators .phase8b-person-card,
  body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n),
  body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(n){
    grid-column:auto!important;
    width:min(100%,160px)!important;
    min-width:0!important;
    max-width:160px!important;
    min-height:0!important;
    padding:0!important;
    gap:8px!important;
  }
  body:not(.admin-mode) #editorial-people .phase8b-person-image,
  body:not(.admin-mode) #editorial-collaborators .phase8b-person-image{
    width:96px!important;height:96px!important;min-width:96px!important;min-height:96px!important;flex-basis:96px!important;margin:0 auto 3px!important;
  }
}

/* Tablet: intentional 3 + 2 composition, not a squeezed desktop row. */
@media (min-width:481px) and (max-width:819px) and (min-height:501px){
  body:not(.admin-mode) #editorial-people .phase8b-people-grid,
  body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid,
  body:not(.admin-mode) #editorial-people .phase8b-people-grid.phase316-can-center,
  body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid.phase316-can-center{
    width:min(650px,calc(100% - 28px))!important;
    max-width:650px!important;
    margin:0 auto!important;
    padding:6px 8px 14px!important;
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    justify-items:center!important;
    align-items:start!important;
    column-gap:clamp(8px,2vw,18px)!important;
    row-gap:24px!important;
    overflow:visible!important;
    scroll-snap-type:none!important;
  }
  body:not(.admin-mode) #editorial-people .phase8b-person-card,
  body:not(.admin-mode) #editorial-collaborators .phase8b-person-card,
  body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n),
  body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(n){
    grid-column:span 2!important;
    width:min(100%,150px)!important;
    max-width:150px!important;
    min-height:0!important;
    padding:0!important;
    gap:7px!important;
  }
  body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(4),
  body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(4){grid-column:2 / span 2!important}
  body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(5),
  body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(5){grid-column:4 / span 2!important}
  body:not(.admin-mode) #editorial-people .phase8b-person-image,
  body:not(.admin-mode) #editorial-collaborators .phase8b-person-image{
    width:82px!important;height:82px!important;min-width:82px!important;min-height:82px!important;flex-basis:82px!important;margin:0 auto 2px!important;
  }
  body:not(.admin-mode) #editorial-people .phase8b-person-name,
  body:not(.admin-mode) #editorial-collaborators .phase8b-person-name{font-size:.88rem!important}
}

/* Phones: compact horizontal people shelf; each profile remains visually intact. */
@media (max-width:480px){
  body:not(.admin-mode) #editorial-people,
  body:not(.admin-mode) #editorial-collaborators{overflow:hidden!important;padding-block:28px 30px!important}
  body:not(.admin-mode) #editorial-people .phase8b-section-head,
  body:not(.admin-mode) #editorial-collaborators .phase8b-section-head{
    width:100%!important;max-width:100%!important;margin:0 auto 18px!important;
    padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right))!important;
    display:grid!important;grid-template-columns:1fr!important;grid-template-areas:"eyebrow" "title" "copy" "action"!important;
    justify-items:center!important;gap:7px!important;text-align:center!important;
  }
  body:not(.admin-mode) #editorial-people .phase8b-section-head h2,
  body:not(.admin-mode) #editorial-collaborators .phase8b-section-head h2{grid-area:title!important;margin:0!important;font-size:clamp(1.55rem,7vw,1.95rem)!important;text-align:center!important}
  body:not(.admin-mode) #editorial-people .phase8b-section-head p,
  body:not(.admin-mode) #editorial-collaborators .phase8b-section-head p{grid-area:copy!important;margin:0!important;max-width:34ch!important;font-size:.8rem!important;line-height:1.4!important;text-align:center!important}
  body:not(.admin-mode) #editorial-people .phase8b-view-all-people,
  body:not(.admin-mode) #editorial-collaborators .phase8b-view-all-people{grid-area:action!important;justify-self:center!important;margin-top:5px!important}
  body:not(.admin-mode) #editorial-people .phase8b-people-grid,
  body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid,
  body:not(.admin-mode) #editorial-people .phase8b-people-grid.phase316-can-center,
  body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid.phase316-can-center{
    width:100%!important;max-width:100%!important;margin:0!important;
    padding:6px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left))!important;
    display:flex!important;grid-template-columns:none!important;justify-content:flex-start!important;align-items:flex-start!important;
    gap:14px!important;overflow-x:auto!important;overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;scroll-padding-inline:max(16px,env(safe-area-inset-left))!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body:not(.admin-mode) #editorial-people .phase8b-person-card,
  body:not(.admin-mode) #editorial-collaborators .phase8b-person-card,
  body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n),
  body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(n){
    grid-column:auto!important;flex:0 0 126px!important;width:126px!important;min-width:126px!important;max-width:126px!important;
    min-height:0!important;padding:0!important;gap:7px!important;scroll-snap-align:start!important;
  }
  body:not(.admin-mode) #editorial-people .phase8b-person-image,
  body:not(.admin-mode) #editorial-collaborators .phase8b-person-image{
    width:76px!important;height:76px!important;min-width:76px!important;min-height:76px!important;flex-basis:76px!important;margin:0 auto 2px!important;
  }
  body:not(.admin-mode) #editorial-people .phase8b-person-copy,
  body:not(.admin-mode) #editorial-collaborators .phase8b-person-copy{max-width:126px!important;gap:0!important}
  body:not(.admin-mode) #editorial-people .phase8b-person-name,
  body:not(.admin-mode) #editorial-collaborators .phase8b-person-name{
    order:1!important;max-width:126px!important;min-height:0!important;font-size:.82rem!important;line-height:1.15!important;
  }
  body:not(.admin-mode) #editorial-people .phase8b-person-role,
  body:not(.admin-mode) #editorial-collaborators .phase8b-person-role{
    order:2!important;max-width:126px!important;margin-top:4px!important;font-size:.59rem!important;line-height:1.16!important;
  }
}

/* Searchable directory: icons carry work metadata; card itself is the action. */
.creator-directory-shell{
  width:min(960px,calc(100vw - 36px))!important;max-width:960px!important;
  padding:clamp(22px,3vw,32px)!important;border-radius:28px!important;background:#fffdf4!important;
}
.creator-directory-head{position:relative!important;margin:0 0 16px!important;padding-right:56px!important}
.creator-directory-title{max-width:100%!important;margin:9px 0 5px!important;font-size:clamp(2rem,4vw,2.85rem)!important;line-height:1.02!important;letter-spacing:-.03em!important}
.creator-directory-head p{margin:0!important;max-width:420px!important;font-size:.9rem!important;line-height:1.4!important;font-weight:720!important;color:#697463!important}
.creator-directory-shell .creator-profile-close.creator-profile-close-floating,
.creator-directory-shell .creator-profile-close{
  width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;border-radius:999px!important;
}
.creator-directory-search{min-height:48px!important;margin:0 0 18px!important;border-radius:16px!important;background:#f4f8ed!important}
.creator-directory-search input{font-size:.94rem!important;font-weight:760!important}
.creator-directory-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
.creator-directory-card{
  min-height:188px!important;padding:17px 14px 15px!important;border:1px solid rgba(52,78,50,.12)!important;border-radius:20px!important;background:rgba(255,253,244,.84)!important;
  display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto minmax(0,1fr)!important;justify-items:center!important;align-items:start!important;gap:10px!important;text-align:center!important;box-shadow:none!important;
}
.creator-directory-card:hover,.creator-directory-card:focus-visible{transform:translateY(-1px)!important;border-color:rgba(98,119,71,.28)!important;box-shadow:0 12px 26px rgba(31,55,38,.08)!important}
.creator-directory-avatar{width:74px!important;height:74px!important;min-width:74px!important;min-height:74px!important;border-width:3px!important;box-shadow:0 7px 16px rgba(31,55,38,.11)!important}
.creator-directory-copy{width:100%!important;min-width:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:0!important;text-align:center!important}
.creator-directory-card strong{max-width:100%!important;margin:0!important;font-size:.96rem!important;line-height:1.13!important;text-align:center!important;text-wrap:balance!important;overflow-wrap:normal!important;word-break:normal!important}
.creator-directory-card small{margin:4px 0 0!important;font-size:.75rem!important;line-height:1.2!important;text-align:center!important;color:#67755f!important;font-weight:800!important;text-transform:none!important;text-wrap:balance!important}
.creator-directory-connection{display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;margin-top:10px!important;min-height:26px!important}
.creator-directory-counts{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;color:#3f6046!important;font-size:.69rem!important;font-weight:850!important}
.creator-directory-counts>span,.creator-directory-profile-icon{
  width:30px!important;height:28px!important;border:1px solid rgba(52,78,50,.12)!important;border-radius:9px!important;background:#f4f7ed!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:3px!important;
}
.creator-directory-counts svg,.creator-directory-profile-icon svg{width:13px!important;height:13px!important;stroke-width:2!important}
.creator-directory-counts b{font:inherit!important;font-weight:900!important;line-height:1!important}
.creator-directory-open{display:none!important}

/* Tablet directory: two generous columns. */
@media (min-width:701px) and (max-width:1024px){
  .creator-directory-shell{width:min(760px,calc(100vw - 32px))!important;max-width:760px!important}
  .creator-directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .creator-directory-card{min-height:172px!important}
}

/* Phone directory: compact one-column rows, not tall dashboard cards. */
@media (max-width:700px){
  .creator-profile-overlay:has(.creator-directory-shell){padding:0!important;place-items:stretch!important}
  .creator-directory-shell{
    width:100%!important;max-width:100%!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;
    padding:max(16px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom))!important;border-radius:0!important;border:0!important;
  }
  .creator-directory-head{padding:2px 48px 0 2px!important;margin-bottom:14px!important}
  .creator-directory-title{font-size:clamp(1.55rem,7.2vw,2rem)!important;line-height:1.05!important;margin:8px 0 4px!important;white-space:normal!important;overflow:visible!important}
  .creator-directory-head p{font-size:.82rem!important;line-height:1.35!important;max-width:28ch!important}
  .creator-directory-shell .creator-profile-close.creator-profile-close-floating,
  .creator-directory-shell .creator-profile-close{top:max(12px,env(safe-area-inset-top))!important;right:12px!important;width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important}
  .creator-directory-search{position:sticky!important;top:0!important;z-index:20!important;min-height:46px!important;margin:0 0 13px!important;background:rgba(244,248,237,.97)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important}
  .creator-directory-grid{grid-template-columns:1fr!important;gap:8px!important}
  .creator-directory-card{
    min-height:82px!important;padding:9px 11px!important;border-radius:16px!important;
    grid-template-columns:58px minmax(0,1fr)!important;grid-template-rows:1fr!important;justify-items:stretch!important;align-items:center!important;gap:11px!important;text-align:left!important;
  }
  .creator-directory-avatar{width:58px!important;height:58px!important;min-width:58px!important;min-height:58px!important}
  .creator-directory-copy{align-items:flex-start!important;justify-content:center!important;text-align:left!important}
  .creator-directory-card strong{font-size:.9rem!important;line-height:1.12!important;text-align:left!important;text-wrap:pretty!important}
  .creator-directory-card small{margin-top:3px!important;font-size:.72rem!important;text-align:left!important}
  .creator-directory-connection{justify-content:flex-start!important;margin-top:6px!important;min-height:24px!important}
  .creator-directory-counts>span,.creator-directory-profile-icon{width:28px!important;height:25px!important}
}

@media(prefers-reduced-motion:reduce){
  body:not(.admin-mode) #editorial-people .phase8b-person-card,
  body:not(.admin-mode) #editorial-collaborators .phase8b-person-card,
  .creator-directory-card{transition:none!important}
}



/* 09cg — spacing lock only. Keeps each public collaborator as one compact unit. */
body:not(.admin-mode) #editorial-people .phase8b-person-card,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-card{
  min-height:0!important;
  height:auto!important;
  align-self:start!important;
  justify-content:flex-start!important;
  align-content:start!important;
  row-gap:0!important;
}
body:not(.admin-mode) #editorial-people .phase8b-person-image,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-image{
  margin-bottom:8px!important;
}
body:not(.admin-mode) #editorial-people .phase8b-person-copy,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-copy{
  min-height:0!important;
  height:auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:3px!important;
}
body:not(.admin-mode) #editorial-people .phase8b-person-name,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-name{
  order:1!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  align-self:center!important;
}
body:not(.admin-mode) #editorial-people .phase8b-person-role,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-role{
  order:2!important;
  min-height:0!important;
  height:auto!important;
  margin:1px 0 0!important;
  padding:0!important;
  display:block!important;
  align-self:center!important;
}
body:not(.admin-mode) #editorial-people .phase8b-person-affiliation,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-affiliation{
  order:3!important;
  min-height:0!important;
  margin:1px 0 0!important;
}

/* Keep the two rows compact at tablet/narrow widths. */
@media (max-width:819px){
  body:not(.admin-mode) #editorial-people .phase8b-people-grid,
  body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid{
    row-gap:20px!important;
  }
  body:not(.admin-mode) #editorial-people .phase8b-person-image,
  body:not(.admin-mode) #editorial-collaborators .phase8b-person-image{
    margin-bottom:7px!important;
  }
}



/* Public creator profile: creator first, biography second, connected work third. */
.creator-profile-overlay .creator-profile-shell{
  width:min(1040px,100%)!important;
  max-height:min(90dvh,880px)!important;
  border-radius:30px!important;
  background:#fffdf4!important;
  overflow:auto!important;
}
.creator-profile-overlay .creator-profile-hero{
  min-height:270px!important;
  padding:34px 38px!important;
  align-items:end!important;
  background-position:center!important;
}
.creator-profile-overlay .creator-profile-hero::before{
  background:linear-gradient(90deg,rgba(7,27,17,.94) 0%,rgba(7,27,17,.78) 38%,rgba(7,27,17,.38) 68%,rgba(7,27,17,.22) 100%)!important;
  backdrop-filter:blur(var(--profile-blur,0px)) saturate(.9)!important;
  -webkit-backdrop-filter:blur(var(--profile-blur,0px)) saturate(.9)!important;
}
.creator-profile-overlay .creator-profile-head{
  grid-template-columns:126px minmax(0,1fr)!important;
  gap:22px!important;
  align-items:end!important;
  max-width:760px!important;
}
.creator-profile-overlay .creator-profile-avatar{
  width:126px!important;height:126px!important;min-width:126px!important;
  border-radius:27px!important;border-width:4px!important;
}
.creator-profile-overlay .creator-profile-identity{min-width:0!important;padding-bottom:3px!important}
.creator-profile-overlay .creator-profile-kicker{
  display:inline-flex!important;align-items:center!important;gap:7px!important;
  min-height:30px!important;padding:0 11px!important;margin-bottom:9px!important;
  border-radius:999px!important;background:rgba(255,253,244,.93)!important;
  color:#31533a!important;font-size:.7rem!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.05em!important;
}
.creator-profile-overlay .creator-profile-kicker svg{width:14px!important;height:14px!important}
.creator-profile-overlay .creator-profile-title{
  margin:0!important;max-width:16ch!important;
  font-size:clamp(2.35rem,4.7vw,3.75rem)!important;
  line-height:.96!important;letter-spacing:-.035em!important;font-weight:500!important;
  text-wrap:balance!important;
}
.creator-profile-overlay .creator-profile-role{
  margin-top:8px!important;color:#f2cf58!important;font-size:1rem!important;font-weight:850!important;
}
.creator-profile-overlay .creator-profile-body{
  display:grid!important;grid-template-columns:minmax(0,1.08fr) minmax(300px,.82fr)!important;
  gap:20px!important;padding:26px 38px 34px!important;
}
.creator-profile-overlay .creator-profile-panel{
  border:1px solid rgba(47,83,58,.14)!important;border-radius:20px!important;
  background:rgba(255,255,255,.58)!important;padding:20px!important;gap:14px!important;
  box-shadow:none!important;
}
.creator-profile-overlay .creator-profile-section-title{
  display:flex!important;align-items:center!important;gap:8px!important;margin:0!important;
  color:#203528!important;font-size:1.02rem!important;font-weight:900!important;
}
.creator-profile-overlay .creator-profile-section-title svg{width:17px!important;height:17px!important;color:#59705d!important}
.creator-profile-overlay .creator-profile-meta-strip{
  display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:7px!important;
  margin:0!important;padding:0!important;
}
.creator-profile-overlay .creator-profile-meta-item{
  min-height:34px!important;display:inline-flex!important;align-items:center!important;gap:6px!important;
  padding:0 10px!important;border-radius:999px!important;border:1px solid rgba(47,83,58,.13)!important;
  background:#f3f6ed!important;color:#31533a!important;font-size:.78rem!important;font-weight:850!important;
}
.creator-profile-overlay .creator-profile-meta-item svg{width:15px!important;height:15px!important}
.creator-profile-overlay .creator-profile-bio{
  margin:0!important;color:#536554!important;line-height:1.68!important;font-size:.94rem!important;font-weight:620!important;
}
.creator-profile-overlay .creator-profile-actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin-top:2px!important}
.creator-profile-overlay .creator-profile-button{
  min-height:38px!important;padding:0 12px!important;border-radius:999px!important;gap:7px!important;
  font-size:.8rem!important;font-weight:850!important;
}
.creator-profile-overlay .creator-profile-button svg{width:16px!important;height:16px!important}
.creator-profile-overlay .creator-profile-button.icon-only{
  width:40px!important;min-width:40px!important;padding:0!important;justify-content:center!important;
}
.creator-profile-overlay .creator-profile-work-list{display:grid!important;gap:10px!important}
.creator-profile-overlay .creator-profile-work{
  grid-template-columns:62px minmax(0,1fr) 28px!important;gap:12px!important;
  min-height:84px!important;padding:10px!important;border-radius:17px!important;
  background:#fffdf7!important;border:1px solid rgba(47,83,58,.13)!important;
  transition:transform .16s ease,border-color .16s ease,background .16s ease!important;
}
.creator-profile-overlay .creator-profile-work:hover{transform:translateY(-1px)!important;border-color:rgba(47,83,58,.27)!important;background:#fbfcef!important}
.creator-profile-overlay .creator-profile-work-thumb{width:62px!important;height:62px!important;border-radius:13px!important}
.creator-profile-overlay .creator-profile-work-copy{min-width:0!important;display:grid!important;gap:4px!important;align-content:center!important}
.creator-profile-overlay .creator-profile-work-copy strong{font-size:.88rem!important;line-height:1.2!important;color:#203528!important}
.creator-profile-overlay .creator-profile-work-meta{display:flex!important;align-items:center!important;gap:6px!important;color:#697967!important;font-size:.76rem!important;font-weight:700!important;line-height:1.25!important}
.creator-profile-overlay .creator-profile-work-meta svg{width:14px!important;height:14px!important;flex:none!important;color:#44634a!important}
.creator-profile-overlay .creator-profile-work-chevron{width:18px!important;height:18px!important;color:#31533a!important}

/* Creator QR utility */
#creator-qr-modal.ns-creator-qr-overlay{position:fixed;inset:0;z-index:10120;display:none;place-items:center;padding:18px;background:rgba(7,18,12,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#creator-qr-modal.ns-creator-qr-overlay.is-open{display:grid}
.ns-creator-qr-card{position:relative;width:min(390px,100%);padding:26px;border-radius:26px;background:#fffdf4;color:#203528;border:1px solid rgba(255,255,255,.5);box-shadow:0 30px 80px rgba(0,0,0,.3);text-align:center}
.ns-creator-qr-close{position:absolute;right:14px;top:14px;width:38px;height:38px;border:1px solid rgba(47,83,58,.12);border-radius:999px;background:#f7f7ef;color:#203528;display:grid;place-items:center;cursor:pointer}
.ns-creator-qr-kicker{display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;color:#55705a;font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.ns-creator-qr-kicker svg{width:14px;height:14px}
.ns-creator-qr-card h3{margin:0 36px 5px;font-size:1.35rem;line-height:1.1;letter-spacing:-.02em}
.ns-creator-qr-card p{margin:0 auto;color:#667565;font-size:.83rem;line-height:1.45;max-width:30ch}
.ns-creator-qr-code{width:210px;height:210px;display:block;margin:18px auto 14px;padding:10px;border:1px solid rgba(47,83,58,.14);border-radius:18px;background:#fff;object-fit:contain}
.ns-creator-qr-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.ns-creator-qr-action{min-height:38px;padding:0 12px;border:1px solid rgba(47,83,58,.14);border-radius:999px;background:#f3f6ed;color:#31533a;display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-size:.79rem;font-weight:850;cursor:pointer}.ns-creator-qr-action.primary{background:#31533a;color:#fffdf4}.ns-creator-qr-action svg{width:16px;height:16px}
.ns-creator-qr-tagline{margin-top:16px!important;padding-top:14px;border-top:1px solid rgba(47,83,58,.12);font-weight:850!important;color:#31533a!important}

@media(max-width:820px){
  .creator-profile-overlay{padding:12px!important;align-items:center!important}
  .creator-profile-overlay .creator-profile-shell{max-height:calc(100dvh - 24px)!important;border-radius:24px!important}
  .creator-profile-overlay .creator-profile-hero{min-height:235px!important;padding:25px 22px!important}
  .creator-profile-overlay .creator-profile-head{grid-template-columns:98px minmax(0,1fr)!important;gap:16px!important;align-items:end!important}
  .creator-profile-overlay .creator-profile-avatar{width:98px!important;height:98px!important;min-width:98px!important;border-radius:22px!important}
  .creator-profile-overlay .creator-profile-title{font-size:clamp(2rem,7vw,3rem)!important;max-width:14ch!important}
  .creator-profile-overlay .creator-profile-body{grid-template-columns:1fr!important;padding:20px 22px 26px!important;gap:14px!important}
  .creator-profile-overlay .creator-profile-panel{padding:17px!important}
}
@media(max-width:560px){
  .creator-profile-overlay{padding:0!important;align-items:stretch!important}
  .creator-profile-overlay .creator-profile-shell{width:100%!important;height:100dvh!important;max-height:none!important;border-radius:0!important}
  .creator-profile-overlay .creator-profile-hero{min-height:230px!important;padding:68px 18px 20px!important;background-position:center!important}
  .creator-profile-overlay .creator-profile-head{grid-template-columns:78px minmax(0,1fr)!important;gap:13px!important}
  .creator-profile-overlay .creator-profile-avatar{width:78px!important;height:78px!important;min-width:78px!important;border-radius:18px!important;border-width:3px!important}
  .creator-profile-overlay .creator-profile-kicker{min-height:25px!important;padding:0 8px!important;margin-bottom:6px!important;font-size:.61rem!important}
  .creator-profile-overlay .creator-profile-title{font-size:clamp(1.7rem,8.2vw,2.35rem)!important;line-height:1!important;max-width:13ch!important}
  .creator-profile-overlay .creator-profile-role{font-size:.82rem!important;margin-top:5px!important}
  .creator-profile-overlay .creator-profile-body{padding:14px 14px 24px!important;gap:12px!important}
  .creator-profile-overlay .creator-profile-panel{padding:15px!important;border-radius:17px!important}
  .creator-profile-overlay .creator-profile-meta-item{min-height:31px!important;padding:0 9px!important;font-size:.72rem!important}
  .creator-profile-overlay .creator-profile-work{grid-template-columns:54px minmax(0,1fr) 20px!important;min-height:72px!important;gap:9px!important;padding:9px!important}
  .creator-profile-overlay .creator-profile-work-thumb{width:54px!important;height:54px!important;border-radius:11px!important}
  .creator-profile-overlay .creator-profile-work-copy strong{font-size:.83rem!important}
  .creator-profile-overlay .creator-profile-work-meta{font-size:.69rem!important}
  .ns-creator-qr-card{padding:24px 18px 20px;border-radius:22px}.ns-creator-qr-code{width:190px;height:190px}
}



/* Revisions 1–4 only: public header, button hierarchy, resource cards, section rhythm.
   CSS-first; no new libraries, observers, polling, or animation systems. */
:root{
  --ns-public-control-h:44px;
  --ns-public-radius:14px;
  --ns-public-green:#214b31;
  --ns-public-green-deep:#163b27;
  --ns-public-ivory:#fffaf0;
  --ns-public-line:rgba(43,78,49,.16);
  --ns-public-muted:#66725f;
}

/* REVISION 1 — calm primary navigation + quieter utilities. */
body:not(.admin-mode) .navbar{
  border-bottom:1px solid rgba(43,78,49,.15)!important;
  box-shadow:0 6px 20px rgba(28,50,31,.055)!important;
}
body:not(.admin-mode) .navbar-inner{max-width:1280px!important;gap:18px!important;}
@media (min-width:701px){
  body:not(.admin-mode) #nav-links{
    flex:1 1 auto!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;
    gap:3px!important;overflow:visible!important;padding:0!important;scrollbar-width:none!important;
  }
  body:not(.admin-mode) #nav-links::-webkit-scrollbar{display:none!important}
  body:not(.admin-mode) #nav-links .nav-link{
    min-height:40px!important;padding:8px 10px!important;border-radius:12px!important;
    color:#536250!important;font-size:.86rem!important;font-weight:760!important;gap:6px!important;
    background:transparent!important;
  }
  body:not(.admin-mode) #nav-links .nav-primary-link svg{display:none!important}
  body:not(.admin-mode) #nav-links .nav-primary-link:hover,
  body:not(.admin-mode) #nav-links .nav-primary-link.active{color:var(--ns-public-green)!important;background:#eef4e9!important}
  body:not(.admin-mode) #nav-links .nav-primary-link::after{height:2px!important;bottom:2px!important;width:calc(100% - 22px)!important}
  /* Brand already returns home, so Home remains available without competing in the desktop row. */
  body:not(.admin-mode) #nav-links .nav-home-link{display:none!important}
  body:not(.admin-mode) #nav-links .nav-secondary-link:not(.nav-home-link){
    width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;padding:0!important;
    display:inline-grid!important;place-items:center!important;border:1px solid rgba(43,78,49,.12)!important;
    background:rgba(255,253,246,.72)!important;color:#536250!important;
  }
  body:not(.admin-mode) #nav-links .nav-secondary-link:not(.nav-home-link) svg{display:block!important;width:17px!important;height:17px!important}
  body:not(.admin-mode) #nav-links .nav-secondary-link:not(.nav-home-link) span{
    position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
    overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
  }
  body:not(.admin-mode) #nav-links .nav-secondary-link::after{display:none!important}
  body:not(.admin-mode) #nav-links .nav-secondary-link:hover,
  body:not(.admin-mode) #nav-links .nav-secondary-link.active{
    color:var(--ns-public-green)!important;background:#eef4e9!important;border-color:rgba(43,78,49,.24)!important;
  }
}

/* Existing small-device menu remains the runtime; organize it instead of replacing it. */
@media (max-width:480px), (orientation:landscape) and (max-width:950px) and (max-height:500px){
  body:not(.admin-mode) #nav-links .nav-link{order:20!important}
  body:not(.admin-mode) #nav-links [data-nav-id="explore"]{order:1!important;grid-column:1/-1!important;font-weight:850!important}
  body:not(.admin-mode) #nav-links [data-nav-id="stories"]{order:2!important}
  body:not(.admin-mode) #nav-links [data-nav-id="films"]{order:3!important}
  body:not(.admin-mode) #nav-links [data-nav-id="music"]{order:4!important}
  body:not(.admin-mode) #nav-links [data-nav-id="about"]{order:5!important}
  body:not(.admin-mode) #nav-links [data-nav-id="home"]{order:6!important}
  body:not(.admin-mode) #nav-links [data-nav-id="links"]{order:7!important}
  body:not(.admin-mode) #nav-links [data-nav-id="contact"]{order:8!important;grid-column:1/-1!important}
  body:not(.admin-mode) #nav-links .nav-secondary-link{color:#64705e!important;background:rgba(255,253,246,.48)!important}
}

/* Bridge the pre-existing 481–700px visibility gap without touching Po-opo or player logic. */
@media (min-width:481px) and (max-width:700px){
  body:not(.admin-mode) .navbar-inner{position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr) 42px!important;align-items:center!important;padding:9px 14px!important;min-height:60px!important}
  body:not(.admin-mode) .small-device-menu-toggle{display:inline-grid!important;place-items:center!important;justify-self:end!important;width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;padding:0!important;border:1px solid rgba(54,87,58,.18)!important;border-radius:14px!important;background:rgba(255,253,244,.94)!important;color:#23452d!important;cursor:pointer!important}
  body:not(.admin-mode) .small-device-menu-icon,body:not(.admin-mode) .small-device-menu-icon::before,body:not(.admin-mode) .small-device-menu-icon::after{display:block;width:18px;height:2px;border-radius:999px;background:currentColor;content:'';transition:transform .18s ease,opacity .18s ease}
  body:not(.admin-mode) .small-device-menu-icon{position:relative} body:not(.admin-mode) .small-device-menu-icon::before{position:absolute;top:-6px;left:0} body:not(.admin-mode) .small-device-menu-icon::after{position:absolute;top:6px;left:0}
  body:not(.admin-mode).small-device-nav-open .small-device-menu-icon{background:transparent} body:not(.admin-mode).small-device-nav-open .small-device-menu-icon::before{top:0;transform:rotate(45deg)} body:not(.admin-mode).small-device-nav-open .small-device-menu-icon::after{top:0;transform:rotate(-45deg)}
  body:not(.admin-mode) #nav-links{display:none!important;position:fixed!important;z-index:2147482100!important;top:64px!important;left:12px!important;right:12px!important;width:auto!important;max-height:calc(100dvh - 78px)!important;margin:0!important;padding:10px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;overflow-y:auto!important;overflow-x:hidden!important;border:1px solid rgba(54,87,58,.18)!important;border-radius:18px!important;background:rgba(255,250,239,.985)!important;box-shadow:0 24px 60px rgba(17,38,24,.24)!important;backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important}
  body:not(.admin-mode).small-device-nav-open #nav-links{display:grid!important}
  body:not(.admin-mode) #nav-links .nav-link{display:flex!important;width:100%!important;min-width:0!important;min-height:44px!important;padding:9px 11px!important;justify-content:flex-start!important;gap:8px!important;border:1px solid rgba(54,87,58,.10)!important;border-radius:13px!important;background:rgba(255,255,255,.64)!important;font-size:.8rem!important}
  body:not(.admin-mode) #nav-links .nav-link svg{display:block!important;width:16px!important;height:16px!important}
  body:not(.admin-mode) #nav-links .nav-link span{position:static!important;width:auto!important;height:auto!important;margin:0!important;overflow:visible!important;clip:auto!important;white-space:nowrap!important}
  body:not(.admin-mode) #nav-links .nav-link::after{display:none!important}
  body:not(.admin-mode) #nav-links [data-nav-id="explore"]{grid-column:1/-1!important;font-weight:850!important}
  body:not(.admin-mode) #nav-links [data-nav-id="contact"]{grid-column:1/-1!important}
  body:not(.admin-mode) .small-device-nav-scrim{display:none;position:fixed;inset:0;z-index:2147482050;border:0;background:rgba(3,18,10,.34);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
  body:not(.admin-mode).small-device-nav-open .small-device-nav-scrim{display:block!important}
}

/* REVISION 2 — shared public action hierarchy, scoped away from readers/players/modals. */
body:not(.admin-mode) #user-view .btn-primary,
body:not(.admin-mode) #user-view .btn-light,
body:not(.admin-mode) #user-view .btn-secondary,
body:not(.admin-mode) #user-view .music-play-action,
body:not(.admin-mode) #user-view .music-open-action,
body:not(.admin-mode) #user-view .music-search-btn,
body:not(.admin-mode) #user-view .music-surprise-btn,
body:not(.admin-mode) #user-view .music-view-all-btn{
  min-height:var(--ns-public-control-h)!important;border-radius:var(--ns-public-radius)!important;
  padding:0 17px!important;gap:8px!important;font-weight:820!important;line-height:1.1!important;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease!important;
}
body:not(.admin-mode) #user-view .btn-primary,
body:not(.admin-mode) #home .btn-light,
body:not(.admin-mode) #about .btn-light,
body:not(.admin-mode) #user-view .music-play-action{
  border:1px solid var(--ns-public-green)!important;background:var(--ns-public-green)!important;color:#fffdf5!important;
  box-shadow:0 8px 18px rgba(24,63,39,.16)!important;
}
body:not(.admin-mode) #user-view .btn-secondary,
body:not(.admin-mode) #user-view .music-open-action,
body:not(.admin-mode) #user-view .music-search-btn,
body:not(.admin-mode) #user-view .music-surprise-btn,
body:not(.admin-mode) #user-view .music-view-all-btn{
  border:1px solid var(--ns-public-line)!important;background:rgba(255,253,246,.88)!important;color:var(--ns-public-green)!important;box-shadow:none!important;
}
body:not(.admin-mode) #home .btn-secondary{background:rgba(255,255,255,.10)!important;color:#fff!important;border-color:rgba(255,255,255,.44)!important}
body:not(.admin-mode) #user-view .btn-primary:hover,
body:not(.admin-mode) #user-view .btn-light:hover,
body:not(.admin-mode) #user-view .btn-secondary:hover,
body:not(.admin-mode) #user-view .music-play-action:hover,
body:not(.admin-mode) #user-view .music-open-action:hover,
body:not(.admin-mode) #user-view .music-search-btn:hover,
body:not(.admin-mode) #user-view .music-surprise-btn:hover,
body:not(.admin-mode) #user-view .music-view-all-btn:hover{transform:translateY(-1px)!important}
body:not(.admin-mode) #user-view button:focus-visible,
body:not(.admin-mode) #user-view a:focus-visible{outline:3px solid rgba(244,196,48,.58)!important;outline-offset:2px!important}
body:not(.admin-mode) #user-view button svg,
body:not(.admin-mode) #user-view a svg{flex:0 0 auto}

/* REVISION 3 — cards: title → creator/artist → concise metadata → one clear primary action. */
body:not(.admin-mode) #stories-container .storybook-card .story-title{width:calc(100% - 94px)!important}
body:not(.admin-mode) #stories-container .storybook-card .story-footer{padding-right:94px!important}
body:not(.admin-mode) #stories-container .storybook-card .read-more.story-card-icon-action{
  width:auto!important;min-width:72px!important;height:38px!important;min-height:38px!important;padding:0 12px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
  border:1px solid rgba(255,255,255,.22)!important;border-radius:999px!important;background:#f2cf59!important;color:#163b27!important;
  box-shadow:0 8px 18px rgba(0,0,0,.20)!important;font-size:.72rem!important;font-weight:900!important;
}
body:not(.admin-mode) #stories-container .storybook-card .read-more.story-card-icon-action svg{width:15px!important;height:15px!important}
body:not(.admin-mode) #stories-container .storybook-card .read-more.story-card-icon-action span{display:inline!important}
body:not(.admin-mode) #music .music-card .music-card-play,
body:not(.admin-mode) .music-archive-grid .music-card .music-card-play{
  width:auto!important;min-width:72px!important;height:40px!important;padding:0 12px!important;border-radius:999px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;font-size:.72rem!important;font-weight:900!important;
}
body:not(.admin-mode) .music-card .music-card-play span{display:inline!important}
body:not(.admin-mode) .music-card .music-card-play svg{width:17px!important;height:17px!important}
body:not(.admin-mode) .music-card .music-card-wave{display:none!important}
body:not(.admin-mode) .music-card .music-label-row-compact .music-label-chip:nth-child(n+2){display:none!important}
body:not(.admin-mode) .music-card .music-card-meta{margin-top:9px!important}

@media (max-width:700px){
  body:not(.admin-mode) #stories-container .storybook-card .story-title{width:calc(100% - 52px)!important}
  body:not(.admin-mode) #stories-container .storybook-card .story-footer{padding-right:52px!important}
  body:not(.admin-mode) #stories-container .storybook-card .read-more.story-card-icon-action{
    min-width:40px!important;width:40px!important;height:40px!important;padding:0!important;border-radius:999px!important;
  }
  body:not(.admin-mode) #stories-container .storybook-card .read-more.story-card-icon-action span,
  body:not(.admin-mode) .music-card .music-card-play span{
    position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;
  }
  body:not(.admin-mode) #music .music-card .music-card-play,
  body:not(.admin-mode) .music-archive-grid .music-card .music-card-play{width:40px!important;min-width:40px!important;height:40px!important;padding:0!important}
}

/* REVISION 4 — consistent, calm section rhythm; no giant whitespace and no duplicate explanation. */
body:not(.admin-mode) #stories.section,
body:not(.admin-mode) #music.section,
body:not(.admin-mode) #about.section,
body:not(.admin-mode) #links.section{
  padding-top:clamp(54px,6vw,82px)!important;padding-bottom:clamp(54px,6vw,82px)!important;
}
body:not(.admin-mode) #connected-experience.section{padding-top:clamp(42px,4.5vw,64px)!important;padding-bottom:clamp(42px,4.5vw,64px)!important}
body:not(.admin-mode) #contact.section{padding-top:clamp(66px,7vw,96px)!important;padding-bottom:clamp(66px,7vw,96px)!important}
body:not(.admin-mode) #stories .section-title,
body:not(.admin-mode) #music .section-title,
body:not(.admin-mode) #links .section-title,
body:not(.admin-mode) #contact .section-title{
  margin-top:7px!important;margin-bottom:8px!important;line-height:1.06!important;letter-spacing:-.025em!important;
}
body:not(.admin-mode) #stories .section-subtitle,
body:not(.admin-mode) #music .section-subtitle,
body:not(.admin-mode) #links .section-subtitle,
body:not(.admin-mode) #contact .section-subtitle{
  max-width:700px!important;margin-left:auto!important;margin-right:auto!important;margin-bottom:30px!important;line-height:1.48!important;
}
body:not(.admin-mode) #stories .archive-engine-copy{display:none!important}
body:not(.admin-mode) #stories .archive-engine-prompt{margin:5px auto 24px!important;max-width:620px!important;color:var(--ns-public-muted)!important;font-weight:680!important;text-align:center!important}
body:not(.admin-mode) #links .closing-section-head{margin-bottom:28px!important}
body:not(.admin-mode) #links .closing-eyebrow{margin-bottom:9px!important}
body:not(.admin-mode) #music .music-section-head{margin-bottom:26px!important}
body:not(.admin-mode) #contact .contact-section-head{margin-bottom:28px!important}

@media (max-width:700px){
  body:not(.admin-mode) #stories.section,
  body:not(.admin-mode) #music.section,
  body:not(.admin-mode) #about.section,
  body:not(.admin-mode) #links.section{padding-top:42px!important;padding-bottom:42px!important}
  body:not(.admin-mode) #contact.section{padding-top:52px!important;padding-bottom:52px!important}
  body:not(.admin-mode) #stories .section-subtitle,
  body:not(.admin-mode) #music .section-subtitle,
  body:not(.admin-mode) #links .section-subtitle,
  body:not(.admin-mode) #contact .section-subtitle{margin-bottom:22px!important;font-size:.84rem!important}
}

@media (prefers-reduced-motion:reduce){
  body:not(.admin-mode) #user-view .btn-primary,
  body:not(.admin-mode) #user-view .btn-light,
  body:not(.admin-mode) #user-view .btn-secondary,
  body:not(.admin-mode) #user-view .music-play-action,
  body:not(.admin-mode) #user-view .music-open-action{transition:none!important}
}



/* REVISION 5 — Archive: simple by default, deeper categories behind one disclosure. */
body:not(.admin-mode) #stories .story-type-toggle{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;width:min(560px,100%)!important}
body:not(.admin-mode) #stories .story-type-meta-row{display:flex!important;flex-direction:column!important;align-items:center!important;gap:9px!important}
body:not(.admin-mode) #stories .story-type-btn{width:100%!important;min-width:0!important;justify-content:center!important;white-space:nowrap!important}
body:not(.admin-mode) #stories .archive-music-jump{background:rgba(255,253,246,.75)!important;color:#36573a!important;border-color:rgba(54,87,58,.16)!important}
body:not(.admin-mode) #stories .archive-filter-disclosure{width:min(760px,100%);margin:1px auto 0;border-top:1px solid rgba(54,87,58,.12);padding-top:10px}
body:not(.admin-mode) #stories .archive-filter-disclosure>summary{list-style:none;min-height:42px;display:flex;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:100%;margin:0 auto;padding:8px 12px;border-radius:999px;color:#49614e;font-size:.8rem;font-weight:850;cursor:pointer}
body:not(.admin-mode) #stories .archive-filter-disclosure>summary::-webkit-details-marker{display:none}
body:not(.admin-mode) #stories .archive-filter-disclosure>summary span{display:inline-flex;align-items:center;gap:7px}
body:not(.admin-mode) #stories .archive-filter-disclosure>summary svg{width:16px;height:16px}
body:not(.admin-mode) #stories .archive-filter-chevron{transition:transform .16s ease}
body:not(.admin-mode) #stories .archive-filter-disclosure[open] .archive-filter-chevron{transform:rotate(180deg)}
body:not(.admin-mode) #stories .archive-filter-panel{display:grid;gap:12px;padding:10px 0 2px}
body:not(.admin-mode) #stories .archive-filter-panel #stories-insights{margin:0!important}
body:not(.admin-mode) #stories .archive-filter-panel #story-filters{display:flex!important;justify-content:center!important;gap:7px!important;flex-wrap:wrap!important;margin:0!important}
body:not(.admin-mode) #stories .archive-filter-panel .filter-btn{min-height:38px!important;padding:8px 12px!important;font-size:.76rem!important;border-radius:999px!important}
body:not(.admin-mode) #stories .mobile-library-overview{display:none!important}

/* REVISION 6 — Featured: only polish the visible mobile curated shelf; hidden desktop templates stay hidden. */
body:not(.admin-mode) .mobile-library-shelf{border-top:1px solid rgba(54,87,58,.12)!important;margin-top:18px!important;padding-top:16px!important}
body:not(.admin-mode) .mobile-library-shelf-eyebrow{letter-spacing:.05em!important}
body:not(.admin-mode) .mobile-library-shelf-title{font-weight:900!important;letter-spacing:-.015em!important}
body:not(.admin-mode) .mobile-library-shelf-count{font-size:.7rem!important;color:#6a7867!important;text-transform:uppercase!important;letter-spacing:.05em!important}
body:not(.admin-mode) .mobile-library-pick{box-shadow:0 10px 24px rgba(31,53,35,.09)!important;border-color:rgba(54,87,58,.13)!important}
body:not(.admin-mode) .mobile-library-pick-type{top:10px!important;left:10px!important;padding:5px 8px!important;font-size:.53rem!important;letter-spacing:.02em!important;max-width:calc(100% - 20px)!important}
body:not(.admin-mode) .mobile-library-pick:has(.mobile-library-pick-audience) .mobile-library-pick-type{max-width:calc(100% - 104px)!important}
body:not(.admin-mode) .mobile-library-pick-audience .audience-guide-badge.audience-mature{background:rgba(92,28,28,.84)!important;color:#fff0f0!important;border-color:rgba(255,198,198,.22)!important}

/* REVISION 7 — Loading: do not flash placeholder counts if loader styling is bypassed. */
body:not(.admin-mode).app-loading #stories-result-summary,
body:not(.admin-mode).app-loading #mobile-all-library-count,
body:not(.admin-mode).app-loading #mobile-library-overview-count{opacity:.58!important}

/* REVISION 8 — Saved/Recent remain intentionally dormant in the current public composition. */
body:not(.admin-mode) #saved-shelf .saved-shelf-note,
body:not(.admin-mode) #recent-shelf .saved-shelf-note{max-width:560px;margin-left:auto;margin-right:auto}

@media(max-width:700px){
  body:not(.admin-mode) #stories .story-type-toggle{width:100%!important;gap:6px!important}
  body:not(.admin-mode) #stories .story-type-btn{min-height:38px!important;padding:7px 6px!important;font-size:.75rem!important}
  body:not(.admin-mode) #stories .archive-filter-disclosure{padding-top:7px!important}
  body:not(.admin-mode) #stories .archive-filter-panel #stories-insights{display:none!important}
  body:not(.admin-mode) #stories .archive-filter-panel #story-filters{justify-content:flex-start!important;flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:none!important;padding:0 2px 4px!important}
  body:not(.admin-mode) #stories .archive-filter-panel #story-filters::-webkit-scrollbar{display:none!important}
  body:not(.admin-mode) #stories .archive-filter-panel .filter-btn{flex:0 0 auto!important}
}
@media(max-width:360px){body:not(.admin-mode) #stories .story-type-btn{font-size:.7rem!important;padding-inline:4px!important}}
@media(prefers-reduced-motion:reduce){body:not(.admin-mode) #stories .archive-filter-chevron{transition:none!important}}



body:not(.admin-mode) #music .music-card .music-card-play,
body:not(.admin-mode) .music-archive-grid .music-card .music-card-play{
  width:44px!important;
  min-width:44px!important;
  height:44px!important;
  min-height:44px!important;
  padding:0!important;
  border-radius:999px!important;
  gap:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body:not(.admin-mode) #music .music-card .music-card-play svg,
body:not(.admin-mode) .music-archive-grid .music-card .music-card-play svg{
  width:18px!important;
  height:18px!important;
}
body:not(.admin-mode) #music .music-card .music-card-play.action-icon-only .action-label,
body:not(.admin-mode) .music-archive-grid .music-card .music-card-play.action-icon-only .action-label{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
}



  /* Final public media action contract: one true circular icon control. */
  body:not(.admin-mode) #stories-container .storybook-card .read-more.story-card-icon-action {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    gap: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f4d36d !important;
    color: #183b28 !important;
  }
  body:not(.admin-mode) #stories-container .storybook-card .read-more.story-card-icon-action .action-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  body:not(.admin-mode) #stories-container .storybook-card .read-more.story-card-icon-action svg {
    width: 17px !important;
    height: 17px !important;
  }

  /* Music play/pause always sits safely inside the lower-right of its artwork. */
  body:not(.admin-mode) #music .music-card .music-card-play,
  body:not(.admin-mode) .music-archive-grid .music-card .music-card-play {
    position: absolute !important;
    top: auto !important;
    left: auto !important;
    right: 12px !important;
    bottom: 12px !important;
    transform: none !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    z-index: 8 !important;
  }
  body:not(.admin-mode) #music .music-card .music-card-play .action-label,
  body:not(.admin-mode) .music-archive-grid .music-card .music-card-play .action-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  body:not(.admin-mode) #music .music-card .music-card-play svg,
  body:not(.admin-mode) .music-archive-grid .music-card .music-card-play svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Player must sit above the archive modal it was launched from. */
  #music-player-modal.music-player-modal {
    z-index: 320 !important;
  }
  .music-archive-modal {
    z-index: 235 !important;
  }

  @media (max-width: 700px) {
    body:not(.admin-mode) #stories-container .storybook-card .read-more.story-card-icon-action,
    body:not(.admin-mode) #music .music-card .music-card-play,
    body:not(.admin-mode) .music-archive-grid .music-card .music-card-play {
      width: 40px !important;
      min-width: 40px !important;
      max-width: 40px !important;
      height: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
    }
    body:not(.admin-mode) #music .music-card .music-card-play,
    body:not(.admin-mode) .music-archive-grid .music-card .music-card-play {
      right: 10px !important;
      bottom: 10px !important;
    }
  }



  /* REVISION 9 — transitions come from composition, not runtime animation. */
  body:not(.admin-mode) #stories.section{
    position:relative;
    border-bottom:1px solid rgba(47,76,51,.08);
    background:linear-gradient(180deg,#fffdf8 0%,#fbfaf3 100%);
  }
  body:not(.admin-mode) #stories.section::after{
    content:"";position:absolute;left:50%;bottom:-1px;width:min(180px,28vw);height:2px;transform:translateX(-50%);
    background:linear-gradient(90deg,transparent,rgba(181,146,57,.45),transparent);
  }
  body:not(.admin-mode) #music.section{
    margin-top:0!important;
  }
  body:not(.admin-mode) #about.section{
    position:relative;
    border-top:1px solid rgba(48,76,51,.08);
  }
  body:not(.admin-mode) #links.closing-partners{
    border-top:1px solid rgba(48,76,51,.08);
  }
  body:not(.admin-mode) #contact.closing-contact{
    margin-top:0!important;
  }

  /* REVISION 10 — Story → Film → Music, using only existing linked public data. */
  body:not(.admin-mode) #connected-experience.connected-experience{display:none!important;position:relative;margin:0 calc(50% - 50vw)!important;width:100vw!important;max-width:100vw!important;padding:clamp(46px,5vw,72px) 0!important;background:#f4f1e6!important;overflow:hidden;}
  body:not(.admin-mode) #connected-experience.connected-experience.show{display:block!important;}
  body:not(.admin-mode) #connected-experience.connected-experience::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(circle at 14% 15%,rgba(208,177,91,.12),transparent 24%),radial-gradient(circle at 86% 88%,rgba(50,87,58,.08),transparent 28%);
  }
  body:not(.admin-mode) #connected-experience .connected-experience-shell{
    position:relative;z-index:1;width:min(1180px,calc(100% - 44px));margin:0 auto!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
    display:grid!important;grid-template-columns:minmax(210px,.58fr) minmax(0,1.42fr)!important;gap:clamp(28px,4vw,58px)!important;align-items:center!important;
  }
  body:not(.admin-mode) #connected-experience .archive-eyebrow{margin:0 0 10px!important;color:#7b652b!important;letter-spacing:.09em!important;}
  body:not(.admin-mode) #connected-experience .connected-experience-copy h2{margin:0 0 10px!important;color:#173b2a!important;font-size:clamp(2rem,4.2vw,3.7rem)!important;line-height:1.02!important;letter-spacing:-.04em!important;max-width:9ch;}
  body:not(.admin-mode) #connected-experience .connected-experience-copy p{margin:0!important;max-width:34rem;color:#657063!important;font-size:.93rem!important;line-height:1.6!important;font-weight:650!important;}
  body:not(.admin-mode) #connected-experience .connected-experience-path{
    position:relative;display:grid!important;grid-template-columns:repeat(var(--connected-columns,3),minmax(0,1fr))!important;gap:12px!important;align-items:stretch!important;
  }
  body:not(.admin-mode) #connected-experience .connected-experience-path[data-stages="2"]{--connected-columns:2;}
  body:not(.admin-mode) #connected-experience .connected-experience-path[data-stages="3"]{--connected-columns:3;}
  body:not(.admin-mode) #connected-experience .connected-experience-path::before{
    content:"";position:absolute;left:7%;right:7%;top:31px;height:1px;background:rgba(105,119,96,.24);z-index:0;
  }
  body:not(.admin-mode) #connected-experience .connected-media-link{
    position:relative;z-index:1;min-height:196px!important;padding:18px!important;border:1px solid rgba(45,78,49,.13)!important;border-radius:20px!important;background:rgba(255,253,248,.92)!important;color:#173b2a!important;text-align:left!important;
    display:grid!important;grid-template-rows:auto 1fr auto!important;gap:18px!important;align-content:stretch!important;box-shadow:0 10px 28px rgba(32,56,35,.06)!important;transform:none!important;transition:border-color .18s ease,box-shadow .18s ease!important;
  }
  body:not(.admin-mode) #connected-experience .connected-media-link:hover{border-color:rgba(68,107,72,.34)!important;box-shadow:0 14px 34px rgba(32,56,35,.10)!important;transform:none!important;}
  body:not(.admin-mode) #connected-experience .connected-media-link:focus-visible{outline:3px solid rgba(244,196,48,.48)!important;outline-offset:3px!important;}
  body:not(.admin-mode) #connected-experience .connected-stage-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  body:not(.admin-mode) #connected-experience .connected-stage-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#173b2a;color:#f3cf67;box-shadow:0 8px 18px rgba(23,59,42,.13);}
  body:not(.admin-mode) #connected-experience .connected-stage-icon svg{width:20px!important;height:20px!important;color:inherit!important;}
  body:not(.admin-mode) #connected-experience .connected-stage-number{color:#9aa496;font-size:.72rem;font-weight:900;letter-spacing:.12em;}
  body:not(.admin-mode) #connected-experience .connected-stage-copy{align-self:end;display:grid;gap:5px;min-width:0;}
  body:not(.admin-mode) #connected-experience .connected-stage-eyebrow{color:#7c692f;font-size:.67rem;font-weight:900;letter-spacing:.11em;}
  body:not(.admin-mode) #connected-experience .connected-media-link strong{display:block!important;overflow:visible!important;color:#173b2a!important;font-size:clamp(.9rem,1.4vw,1.08rem)!important;line-height:1.25!important;-webkit-line-clamp:unset!important;}
  body:not(.admin-mode) #connected-experience .connected-media-link small{margin:0!important;color:#748071!important;font-size:.72rem!important;line-height:1.35!important;font-weight:700!important;}
  body:not(.admin-mode) #connected-experience .connected-stage-open{justify-self:end;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid #d7dfd1;color:#33563a;background:#fffdf8;}
  body:not(.admin-mode) #connected-experience .connected-stage-open svg{width:16px!important;height:16px!important;color:inherit!important;}
  body:not(.admin-mode) #connected-experience .connected-stage-film .connected-stage-icon{background:#202b24;color:#f4d06c;}
  body:not(.admin-mode) #connected-experience .connected-stage-music .connected-stage-icon{background:#6e5831;color:#fff1c6;}

  @media(max-width:900px){
    body:not(.admin-mode) #connected-experience .connected-experience-shell{grid-template-columns:1fr!important;gap:24px!important;}
    body:not(.admin-mode) #connected-experience .connected-experience-copy h2{max-width:none!important;}
  }
  @media(max-width:620px){
    body:not(.admin-mode) #connected-experience.connected-experience{padding:38px 0!important;}
    body:not(.admin-mode) #connected-experience .connected-experience-shell{width:calc(100% - 28px)!important;}
    body:not(.admin-mode) #connected-experience .connected-experience-copy h2{font-size:clamp(1.9rem,9vw,2.6rem)!important;}
    body:not(.admin-mode) #connected-experience .connected-experience-path{grid-template-columns:1fr!important;gap:9px!important;}
    body:not(.admin-mode) #connected-experience .connected-experience-path::before{display:none!important;}
    body:not(.admin-mode) #connected-experience .connected-media-link{min-height:0!important;grid-template-columns:48px minmax(0,1fr) 34px!important;grid-template-rows:auto!important;align-items:center!important;gap:12px!important;padding:13px 14px!important;border-radius:17px!important;}
    body:not(.admin-mode) #connected-experience .connected-stage-head{display:block!important;}
    body:not(.admin-mode) #connected-experience .connected-stage-number{display:none!important;}
    body:not(.admin-mode) #connected-experience .connected-stage-icon{width:46px;height:46px;}
    body:not(.admin-mode) #connected-experience .connected-stage-copy{align-self:center!important;gap:2px!important;}
    body:not(.admin-mode) #connected-experience .connected-stage-open{justify-self:end;}
    body:not(.admin-mode) #connected-experience .connected-stage-eyebrow{font-size:.62rem;}
    body:not(.admin-mode) #connected-experience .connected-media-link strong{font-size:.9rem!important;}
  }
  @media(prefers-reduced-motion:reduce){
    body:not(.admin-mode) #connected-experience .connected-media-link{transition:none!important;}
  }



/* Connected Experience v2 — stable daily rotation + artwork atmosphere. */
body:not(.admin-mode) #connected-experience .connected-experience-backdrop{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .24s ease;
}
body:not(.admin-mode) #connected-experience.has-connected-backdrop .connected-experience-backdrop{opacity:1;}
body:not(.admin-mode) #connected-experience .connected-experience-backdrop img{position:absolute;display:block;object-fit:cover;pointer-events:none;}
body:not(.admin-mode) #connected-experience .connected-backdrop-atmosphere{
  inset:-5%;width:110%;height:110%;object-position:center;opacity:.30;
  filter:blur(9px) saturate(.84) contrast(.95);transform:scale(1.035);
}
body:not(.admin-mode) #connected-experience .connected-backdrop-artwork{
  top:-7%;right:-7%;bottom:-7%;width:min(54vw,840px);height:114%;object-position:center;opacity:.58;
  filter:blur(2.7px) saturate(1.04) contrast(1.05);transform:scale(1.025);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 12%,rgba(0,0,0,.78) 36%,#000 64%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 12%,rgba(0,0,0,.78) 36%,#000 64%,#000 100%);
}
body:not(.admin-mode) #connected-experience .connected-experience-backdrop::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(244,241,230,.995) 0%,rgba(244,241,230,.965) 25%,rgba(244,241,230,.78) 47%,rgba(244,241,230,.38) 72%,rgba(244,241,230,.20) 100%),
    linear-gradient(180deg,rgba(244,241,230,.14),rgba(244,241,230,.42));
}
body:not(.admin-mode) #connected-experience.has-connected-backdrop::before{
  z-index:1;background:radial-gradient(circle at 14% 15%,rgba(208,177,91,.10),transparent 24%),radial-gradient(circle at 86% 88%,rgba(50,87,58,.06),transparent 28%);
}
body:not(.admin-mode) #connected-experience .connected-experience-shell{z-index:2!important;}
body:not(.admin-mode) #connected-experience .connected-daily-note{
  display:inline-flex;align-items:center;gap:7px;margin-top:15px;color:#7f775c;font-size:.62rem;font-weight:780;letter-spacing:.045em;text-transform:uppercase;opacity:.86;
}
body:not(.admin-mode) #connected-experience .connected-daily-note svg{width:14px;height:14px;color:#8b702c;}
body:not(.admin-mode) #connected-experience.has-connected-backdrop .connected-media-link{
  background:rgba(255,253,248,.92)!important;border-color:rgba(45,78,49,.14)!important;
}
@media(max-width:900px){
  body:not(.admin-mode) #connected-experience .connected-backdrop-atmosphere{opacity:.25;filter:blur(9px) saturate(.8) contrast(.95);}
  body:not(.admin-mode) #connected-experience .connected-backdrop-artwork{right:-12%;width:72vw;opacity:.40;filter:blur(3.9px) saturate(.95) contrast(1.01);}
  body:not(.admin-mode) #connected-experience .connected-experience-backdrop::after{
    background:linear-gradient(180deg,rgba(244,241,230,.94) 0%,rgba(244,241,230,.78) 45%,rgba(244,241,230,.58) 100%);
  }
}
@media(max-width:620px){
  body:not(.admin-mode) #connected-experience .connected-backdrop-atmosphere{opacity:.20;}
  body:not(.admin-mode) #connected-experience .connected-backdrop-artwork{right:-22%;width:96vw;opacity:.27;filter:blur(5px) saturate(.86) contrast(.97);}
  body:not(.admin-mode) #connected-experience .connected-daily-note{margin-top:13px;font-size:.62rem;}
  body:not(.admin-mode) #connected-experience.has-connected-backdrop .connected-media-link{background:rgba(255,253,248,.95)!important;}
}
@media(prefers-reduced-motion:reduce){
  body:not(.admin-mode) #connected-experience .connected-experience-backdrop{transition:none!important;}
}



body:not(.admin-mode) #connected-experience .connected-stage-credit{display:block;color:#536553;font-size:.72rem;line-height:1.35;font-weight:800;margin-top:1px;}
body:not(.admin-mode) #connected-experience .connected-experience-path[data-stages="2"]::after,
body:not(.admin-mode) #connected-experience .connected-experience-path[data-stages="3"]::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;background:#f4f1e6;border:2px solid #c8b467;transform:translate(-50%,-50%);z-index:0;}
@media(max-width:700px){body:not(.admin-mode) #connected-experience .connected-experience-path::after{display:none!important;}body:not(.admin-mode) #connected-experience .connected-stage-credit{font-size:.68rem;}}



body:not(.admin-mode) .closing-footer.footer{
  padding-block:clamp(42px,6vw,72px) clamp(28px,4vw,46px)!important;
}
body:not(.admin-mode) .closing-footer .footer-fireflies{display:none!important;}
body:not(.admin-mode) .closing-footer .footer-main{
  display:grid!important;grid-template-columns:minmax(260px,1fr) minmax(0,1.35fr)!important;
  gap:clamp(28px,5vw,72px)!important;align-items:end!important;
}
body:not(.admin-mode) .closing-footer .footer-brand-promise{
  margin-top:10px!important;font-size:clamp(1.05rem,1.6vw,1.35rem)!important;font-weight:780!important;color:#fffdf4!important;
}
body:not(.admin-mode) .closing-footer .footer-region{
  margin-top:7px!important;font-size:.78rem!important;letter-spacing:.02em!important;opacity:.62!important;
}
body:not(.admin-mode) .closing-footer .footer-nav{
  justify-content:flex-end!important;align-items:center!important;gap:10px 22px!important;
}
body:not(.admin-mode) .closing-footer .footer-nav a{font-size:.83rem!important;font-weight:760!important;}
body:not(.admin-mode) .closing-footer .footer-closing-line{
  margin-top:20px!important;padding-top:18px!important;gap:18px!important;
}
body:not(.admin-mode) .closing-footer .footer-bottom{font-size:.76rem!important;opacity:.58!important;}
body:not(.admin-mode) .closing-footer .footer-beta-links{gap:7px 15px!important;}
body:not(.admin-mode) .closing-footer .footer-beta-links button{font-size:.74rem!important;opacity:.66!important;}
@media(max-width:820px){
  body:not(.admin-mode) .closing-footer .footer-main{grid-template-columns:1fr!important;align-items:start!important;}
  body:not(.admin-mode) .closing-footer .footer-nav{justify-content:flex-start!important;display:flex!important;flex-wrap:wrap!important;}
}
@media(max-width:520px){
  body:not(.admin-mode) .closing-footer.footer{padding-inline:18px!important;}
  body:not(.admin-mode) .closing-footer .footer-nav{gap:9px 17px!important;}
  body:not(.admin-mode) .closing-footer .footer-closing-line{align-items:flex-start!important;}
}



/* 09cv: paint Story/Film card shells immediately; cover downloads never hold the card UI hostage. */
body:not(.admin-mode) #stories-container .storybook-card .story-cover,
body:not(.admin-mode) .mobile-library-pick .mobile-library-pick-cover{
  background:
    radial-gradient(circle at 22% 18%, rgba(237,207,126,.22), transparent 34%),
    linear-gradient(135deg,#243527,#0d170f 72%)!important;
  overflow:hidden;
}
body:not(.admin-mode) #stories-container .storybook-card .archive-card-cover-fallback,
body:not(.admin-mode) .mobile-library-pick .archive-card-cover-fallback{
  opacity:1!important;
  visibility:visible!important;
}
body:not(.admin-mode) #stories-container .storybook-card img.archive-card-cover-image,
body:not(.admin-mode) .mobile-library-pick img.archive-card-cover-image{
  opacity:0!important;
  transition:opacity .18s ease, transform .35s ease, filter .35s ease!important;
}
body:not(.admin-mode) #stories-container .storybook-card img.archive-card-cover-image.is-loaded,
body:not(.admin-mode) .mobile-library-pick img.archive-card-cover-image.is-loaded{
  opacity:1!important;
}
@media (prefers-reduced-motion:reduce){
  body:not(.admin-mode) #stories-container .storybook-card img.archive-card-cover-image,
  body:not(.admin-mode) .mobile-library-pick img.archive-card-cover-image{
    transition:none!important;
  }
}



/* Audience Guide v3 + Community Reflections.
   Main-site presentation/runtime only. AR assets and /ar/ remain untouched. */

/* Reflection modal: editorial, lighter, and touch-first. */
#review-modal .review-modal{
  width:min(820px,calc(100vw - 28px))!important;
  max-height:min(92dvh,880px)!important;
  border-radius:24px!important;
  overflow:hidden!important;
  background:#f7f4ea!important;
  box-shadow:0 28px 90px rgba(9,25,14,.30)!important;
}
#review-modal .review-modal-head{
  padding:22px 28px 18px!important;
  background:linear-gradient(135deg,#173e27 0%,#285636 100%)!important;
}
#review-modal .review-modal-head .section-pill{
  margin-bottom:8px!important;
  min-height:28px!important;
  padding:5px 10px!important;
}
#review-modal #review-modal-title{
  margin:0!important;
  font-size:clamp(1.8rem,4vw,2.65rem)!important;
  line-height:1.02!important;
  letter-spacing:-.035em!important;
}
#review-modal #review-resource-title{
  margin:7px 0 0!important;
  color:#f1d56c!important;
  font-size:.9rem!important;
  font-weight:900!important;
}
#review-modal .review-modal-subtitle{
  margin:6px 0 0!important;
  max-width:620px!important;
  color:rgba(255,255,255,.76)!important;
  font-size:.78rem!important;
}
#review-modal .review-modal-scroll{
  padding:20px 28px calc(22px + env(safe-area-inset-bottom))!important;
  background:#f7f4ea!important;
}
#review-modal .review-summary{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  padding:14px 16px!important;
  margin:0 0 14px!important;
  border:1px solid rgba(32,74,44,.14)!important;
  border-radius:16px!important;
  background:#eef5e9!important;
}
#review-modal .community-reflection-summary-main{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
#review-modal .community-reflection-summary-main .review-average-score{
  min-width:54px;
  font-size:1.8rem!important;
  line-height:1;
  color:#173e27!important;
}
#review-modal .community-reflection-summary-main strong{
  display:block;
  margin-top:3px;
  color:#25422d;
  font-size:.8rem;
}
#review-modal .community-reflection-summary-main small{
  display:block;
  margin-top:2px;
  color:#71806c;
  font-size:.67rem;
  font-weight:750;
}
#review-modal .community-reflection-write{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:none;
  padding:9px 12px;
  border:1px solid rgba(31,69,40,.15);
  border-radius:999px;
  background:#fffdf7;
  color:#23432c;
  font:inherit;
  font-size:.72rem;
  font-weight:900;
  cursor:pointer;
}
#review-modal .community-reflection-write svg{width:15px;height:15px}
#review-modal .review-empty-state.community-reflection-empty{
  width:100%;
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr)!important;
  align-items:center!important;
  gap:12px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
#review-modal .review-list{
  display:grid!important;
  gap:10px!important;
  margin:0 0 14px!important;
}
#review-modal .community-reflection-card{
  position:relative;
  padding:15px 16px!important;
  border:1px solid rgba(34,67,41,.13)!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.72)!important;
  box-shadow:none!important;
}
#review-modal .community-reflection-card.is-featured{
  border-color:rgba(173,133,30,.24)!important;
  background:#fffdf6!important;
}
#review-modal .community-reflection-featured{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0 0 9px;
  color:#8c6913;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.055em;
  text-transform:uppercase;
}
#review-modal .community-reflection-featured svg{width:13px;height:13px}
#review-modal .community-reflection-card q{
  display:block;
  margin:10px 0 0;
  color:#34453a;
  font-size:.86rem;
  line-height:1.62;
  quotes:none;
  white-space:pre-wrap;
}
#review-modal .community-reflection-card .review-card-head{align-items:flex-start!important}
#review-modal .community-reflections-more{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  border:1px dashed rgba(35,71,43,.20);
  border-radius:13px;
  background:transparent;
  color:#426049;
  font:inherit;
  font-size:.72rem;
  font-weight:900;
  cursor:pointer;
}
#review-modal .community-reflections-more svg{width:15px;height:15px}

#review-modal .review-form{
  margin:0!important;
  padding:18px 0 0!important;
  border:0!important;
  border-top:1px solid rgba(43,73,48,.13)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#review-modal .review-form-heading{
  margin-bottom:12px!important;
  align-items:flex-start!important;
}
#review-modal .review-form-heading h3{
  margin:0!important;
  color:#23432c!important;
  font-size:1.08rem!important;
}
#review-modal #review-intro{
  margin-top:4px!important;
  color:#778274!important;
  font-size:.74rem!important;
}
#review-modal .review-required-note{font-size:.62rem!important}
#review-modal .review-step{
  margin:0!important;
  padding:14px 0!important;
  border-top:1px solid rgba(45,77,50,.10);
}
#review-modal .review-step:first-of-type{border-top:0}
#review-modal .review-field-label,
#review-modal .review-step>label:not(.review-anonymous-toggle){
  margin-bottom:8px!important;
}
#review-modal .review-step label b{
  display:inline-grid;
  place-items:center;
  min-width:24px;
  height:24px;
  margin-right:6px;
  border-radius:999px;
  background:#e9efe5;
  color:#416047;
  font-size:.62rem;
  letter-spacing:.03em;
}
#review-modal .rating-picker{
  display:flex!important;
  gap:8px!important;
}
#review-modal .rating-picker button{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  border-radius:12px!important;
}
#review-modal .review-rating-label{
  color:#9b7417!important;
  font-size:.7rem!important;
}
#review-modal .review-reaction-picker{gap:7px!important}
#review-modal .review-reaction-btn{
  min-height:38px!important;
  padding:8px 11px!important;
  border-radius:999px!important;
  font-size:.7rem!important;
}
#review-modal .review-form textarea{
  min-height:104px!important;
  max-height:260px!important;
  resize:none!important;
  overflow-y:auto!important;
}
#review-modal .review-short-note{
  margin-top:6px;
  color:#7a8478;
  font-size:.66rem;
  font-weight:720;
}
#review-modal .review-anonymous-toggle{
  display:flex;
  align-items:center;
  gap:9px;
  width:max-content;
  max-width:100%;
  min-height:40px;
  margin-top:9px;
  padding:8px 11px;
  border:1px solid rgba(50,79,54,.13);
  border-radius:10px;
  background:#f3f6ef;
  color:#49604d;
  font-size:.72rem;
  font-weight:850;
  cursor:pointer;
}
#review-modal .review-anonymous-toggle input{width:18px;height:18px;accent-color:#264f31}
#review-modal #review-name:disabled{opacity:.62;background:#f1f2ee!important}
#review-modal .review-optional-details{margin:4px 0 0!important}
#review-modal .review-submit-row{
  position:sticky!important;
  bottom:calc(-22px - env(safe-area-inset-bottom))!important;
  z-index:4!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:14px -28px calc(-22px - env(safe-area-inset-bottom))!important;
  padding:13px 28px calc(13px + env(safe-area-inset-bottom))!important;
  border-top:1px solid rgba(35,68,42,.13)!important;
  background:rgba(247,244,234,.96)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}
#review-modal .review-submit-note{
  max-width:460px!important;
  color:#758071!important;
  font-size:.66rem!important;
  line-height:1.4!important;
}
#review-modal #review-submit-btn{
  min-height:48px!important;
  padding:10px 16px!important;
  border-radius:12px!important;
  flex:none!important;
}
#review-modal .review-success-state{
  min-height:360px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  padding:38px 24px;
  text-align:center;
}
#review-modal .review-success-state[hidden]{display:none!important}
#review-modal .review-success-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  margin-bottom:4px;
  border-radius:18px;
  background:#214d2e;
  color:#f2d66d;
}
#review-modal .review-success-icon svg{width:26px;height:26px}
#review-modal .review-success-state>span{
  color:#8a6a18;
  font-size:.68rem;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}
#review-modal .review-success-state h3{
  margin:2px 0 0;
  color:#21432a;
  font-size:1.45rem;
}
#review-modal .review-success-state p{
  max-width:430px;
  margin:0 0 10px;
  color:#687568;
  font-size:.82rem;
  line-height:1.55;
}

/* Approved reflections become discoverable around the work, not just inside the form. */
.community-reflection-teaser{
  width:100%;
  display:grid;
  gap:6px;
  margin:14px 0 0;
  padding:13px 14px;
  border:1px solid rgba(43,75,47,.14);
  border-radius:14px;
  background:#f5f4eb;
  color:#294630;
  text-align:left;
  font:inherit;
  cursor:pointer;
}
.community-reflection-teaser:hover{border-color:rgba(43,75,47,.28)}
.community-reflection-teaser-kicker{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#61745f;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.community-reflection-teaser-kicker svg{width:14px;height:14px}
.community-reflection-teaser>strong{font-size:.78rem}
.community-reflection-teaser q{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  quotes:none;
  color:#4f6051;
  font-size:.76rem;
  line-height:1.52;
}
.community-reflection-teaser>small{color:#778177;font-size:.64rem;font-weight:750}
.community-reflection-teaser-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:2px;
  color:#315839;
  font-size:.67rem;
  font-weight:900;
}
.community-reflection-teaser-link svg{width:13px;height:13px}
.community-reflection-teaser.is-dark{
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
}
.community-reflection-teaser.is-dark .community-reflection-teaser-kicker,
.community-reflection-teaser.is-dark>small{color:rgba(255,255,255,.62)}
.community-reflection-teaser.is-dark q{color:rgba(255,255,255,.78)}
.community-reflection-teaser.is-dark .community-reflection-teaser-link{color:#f1d36c}

/* Phone/tablet reflection experience: one native-feeling fullscreen sheet, no tiny nested modal. */
@media (max-width:900px), (pointer:coarse){
  #review-modal{
    padding:0!important;
    align-items:stretch!important;
  }
  #review-modal .review-modal{
    width:100%!important;
    max-width:none!important;
    height:100dvh!important;
    min-height:100svh!important;
    max-height:100dvh!important;
    border:0!important;
    border-radius:0!important;
    display:flex!important;
    flex-direction:column!important;
  }
  #review-modal .review-modal-head{
    position:sticky!important;
    top:0!important;
    z-index:8!important;
    flex:none!important;
    padding:calc(16px + env(safe-area-inset-top)) 18px 14px!important;
  }
  #review-modal .review-modal-head .section-pill{display:none!important}
  #review-modal #review-modal-title{font-size:1.75rem!important}
  #review-modal #review-resource-title{
    max-width:calc(100vw - 72px)!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  #review-modal .review-modal-subtitle{display:block!important;font-size:.7rem!important}
  #review-modal .close-btn{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
  }
  #review-modal .review-modal-scroll{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    padding:16px 16px calc(18px + env(safe-area-inset-bottom))!important;
  }
  #review-modal .review-summary{
    align-items:flex-start!important;
    padding:12px!important;
  }
  #review-modal .community-reflection-write span{display:none}
  #review-modal .community-reflection-write{
    width:42px;
    min-width:42px;
    height:42px;
    justify-content:center;
    padding:0;
  }
  #review-modal .rating-picker button{
    flex:1 1 0!important;
    min-width:44px!important;
    max-width:58px!important;
    height:48px!important;
  }
  #review-modal .review-form input,
  #review-modal .review-form select,
  #review-modal .review-form textarea{font-size:16px!important}
  #review-modal .review-form textarea{min-height:96px!important}
  #review-modal .review-reaction-btn{min-height:42px!important}
  #review-modal .review-submit-row{
    bottom:calc(-18px - env(safe-area-inset-bottom))!important;
    margin:14px -16px calc(-18px - env(safe-area-inset-bottom))!important;
    padding:11px 16px calc(11px + env(safe-area-inset-bottom))!important;
  }
  #review-modal .review-submit-note{display:none!important}
  #review-modal #review-submit-btn{
    width:100%!important;
    min-height:52px!important;
    justify-content:center!important;
  }

  /* Mature gate remains above every public surface and uses the full safe viewport on touch devices. */
  .audience-gate-backdrop{
    width:100vw!important;
    height:100dvh!important;
    min-height:100svh!important;
    padding:0!important;
    align-items:flex-end!important;
    z-index:2147482000!important;
  }
  .audience-gate-dialog{
    width:100%!important;
    max-width:none!important;
    max-height:100dvh!important;
    border-radius:22px 22px 0 0!important;
    padding-bottom:env(safe-area-inset-bottom)!important;
  }
  .audience-gate-actions button,
  .audience-gate-acknowledge,
  .audience-gate-dob-wrap input{
    min-height:54px!important;
  }
}
@media (max-width:560px){
  #review-modal .community-reflection-summary-main .review-average-score{font-size:1.55rem!important;min-width:46px}
  #review-modal .community-reflection-summary-main strong{font-size:.72rem}
  #review-modal .community-reflection-summary-main small{font-size:.61rem}
  #review-modal .review-form-heading{display:block!important}
  #review-modal .review-required-note{display:none!important}
}



/* NarraSpace Reflection Visual Polish v4
   Presentation only. No review, moderation, audience-gate, player, reader or AR logic changed. */

/* Quiet editorial shell: fewer UI layers, warmer paper, tighter cinematic header. */
#review-modal .review-modal{
  width:min(790px,calc(100vw - 30px))!important;
  background:#f7f2e7!important;
  border:1px solid rgba(232,219,182,.36)!important;
  box-shadow:0 32px 86px rgba(8,24,13,.27)!important;
}
#review-modal .review-modal-head{
  padding:19px 24px 17px!important;
  background:#183f28!important;
  border-bottom:1px solid rgba(241,211,108,.16)!important;
}
#review-modal .review-modal-head .section-pill{
  background:transparent!important;
  border:1px solid rgba(241,211,108,.42)!important;
  color:#f3d56c!important;
  box-shadow:none!important;
  letter-spacing:.01em!important;
}
#review-modal #review-modal-title{
  max-width:660px!important;
  font-size:clamp(1.9rem,3.9vw,2.5rem)!important;
  font-weight:650!important;
  letter-spacing:-.045em!important;
}
#review-modal #review-resource-title{
  margin-top:6px!important;
  font-size:.82rem!important;
  letter-spacing:.01em!important;
}
#review-modal .review-modal-subtitle{
  margin-top:5px!important;
  color:rgba(255,255,255,.72)!important;
  font-size:.74rem!important;
  font-weight:650!important;
}
#review-modal .close-btn{
  width:42px!important;
  height:42px!important;
  border:0!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.07)!important;
  color:rgba(255,255,255,.92)!important;
  box-shadow:none!important;
}
#review-modal .close-btn:hover,
#review-modal .close-btn:focus-visible{
  background:rgba(255,255,255,.14)!important;
  outline:2px solid rgba(241,211,108,.55)!important;
  outline-offset:2px!important;
}
#review-modal .review-modal-scroll{
  padding:18px 24px calc(20px + env(safe-area-inset-bottom))!important;
  background:#f7f2e7!important;
}

/* Community prompt behaves like editorial context, not another card. */
#review-modal .review-summary{
  min-height:0!important;
  padding:11px 4px 14px!important;
  margin:0 0 4px!important;
  border:0!important;
  border-bottom:1px solid rgba(45,70,48,.12)!important;
  border-radius:0!important;
  background:transparent!important;
}
#review-modal .review-empty-state.community-reflection-empty{
  grid-template-columns:36px minmax(0,1fr)!important;
  gap:10px!important;
}
#review-modal .review-empty-icon{
  width:36px!important;
  height:36px!important;
  border-radius:50%!important;
  background:#214a2e!important;
  box-shadow:none!important;
}
#review-modal .review-empty-icon svg{width:17px!important;height:17px!important}
#review-modal .review-empty-copy strong{
  margin-bottom:1px!important;
  font-size:.88rem!important;
  font-weight:850!important;
}
#review-modal .review-empty-copy span{
  font-size:.72rem!important;
  font-weight:600!important;
}

/* Form becomes an open journal page instead of a nested card. */
#review-modal .review-form{
  padding-top:16px!important;
  border-top:0!important;
}
#review-modal .review-form-heading{
  margin:0 0 3px!important;
}
#review-modal .review-form-heading h3{
  font-size:.76rem!important;
  font-weight:850!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
  color:#61705f!important;
}
#review-modal #review-intro{
  margin-top:3px!important;
  font-size:.7rem!important;
  color:#7b8377!important;
}
#review-modal .review-required-note{
  color:#8d7327!important;
  opacity:.86!important;
}
#review-modal .review-step{
  padding:15px 0!important;
  border-top:0!important;
}
#review-modal .review-step-writing,
#review-modal .review-step-identity{
  border-top:1px solid rgba(45,70,48,.10)!important;
  padding-top:18px!important;
}
#review-modal .review-step-reactions{
  padding-top:3px!important;
  padding-bottom:17px!important;
}
#review-modal .review-field-label,
#review-modal .review-step>label:not(.review-anonymous-toggle){
  justify-content:flex-start!important;
  color:#294b32!important;
  font-size:.82rem!important;
  letter-spacing:-.005em!important;
}
#review-modal .review-step label b{
  display:inline-block!important;
  min-width:auto!important;
  height:auto!important;
  margin-right:10px!important;
  border-radius:0!important;
  background:transparent!important;
  color:#a77e16!important;
  font-size:.61rem!important;
  font-weight:950!important;
  letter-spacing:.08em!important;
  vertical-align:middle!important;
}
#review-modal .review-step-feeling .review-field-label{
  display:block!important;
}
#review-modal .review-step-feeling .review-rating-label{
  display:block!important;
  margin:4px 0 0 30px!important;
  color:#8a7a48!important;
  font-size:.67rem!important;
  font-weight:700!important;
}
#review-modal .review-step-reactions .review-field-label{
  justify-content:space-between!important;
  margin-bottom:9px!important;
}

/* Stars: large expressive icons, not five ecommerce-style square buttons. */
#review-modal .rating-picker{
  gap:4px!important;
  padding-left:24px!important;
}
#review-modal .rating-picker button{
  width:43px!important;
  height:43px!important;
  min-width:43px!important;
  padding:5px!important;
  border:0!important;
  border-radius:50%!important;
  background:transparent!important;
  color:#aa8e3f!important;
  box-shadow:none!important;
  transform:none!important;
}
#review-modal .rating-picker button svg{
  width:27px!important;
  height:27px!important;
  stroke-width:1.65!important;
  transition:transform .16s ease, color .16s ease, fill .16s ease!important;
}
#review-modal .rating-picker button:hover,
#review-modal .rating-picker button:focus-visible{
  background:rgba(196,151,37,.08)!important;
  outline:2px solid rgba(181,137,27,.24)!important;
  outline-offset:1px!important;
}
#review-modal .rating-picker button:hover svg{transform:scale(1.08)!important}
#review-modal .rating-picker button.active{
  background:transparent!important;
  color:#b9830b!important;
}
#review-modal .rating-picker button.active svg{
  fill:currentColor!important;
  transform:scale(1.03)!important;
}

/* Reaction words stay tactile but lose the generic pill-kit heaviness. */
#review-modal .review-reaction-picker{
  gap:7px 6px!important;
}
#review-modal .review-reaction-btn{
  min-height:34px!important;
  padding:7px 10px!important;
  border:1px solid rgba(47,73,51,.14)!important;
  border-radius:999px!important;
  background:rgba(255,253,247,.58)!important;
  color:#48604d!important;
  font-size:.68rem!important;
  font-weight:800!important;
  box-shadow:none!important;
  transform:none!important;
}
#review-modal .review-reaction-btn:hover,
#review-modal .review-reaction-btn:focus-visible{
  border-color:rgba(36,77,47,.30)!important;
  background:#fffdf7!important;
  transform:none!important;
}
#review-modal .review-reaction-btn.selected{
  border-color:#244b31!important;
  background:#244b31!important;
  color:#f2d56d!important;
}
#review-modal .review-reaction-help{
  margin-top:6px!important;
  color:#868d80!important;
  font-size:.65rem!important;
  font-weight:600!important;
}

/* Writing surface resembles a quiet note page, not a large form control. */
#review-modal .review-form input,
#review-modal .review-form select,
#review-modal .review-form textarea{
  border:1px solid rgba(43,70,47,.13)!important;
  border-radius:11px!important;
  background:rgba(255,253,247,.72)!important;
}
#review-modal .review-form textarea{
  min-height:92px!important;
  padding:13px 14px!important;
  line-height:1.6!important;
}
#review-modal .review-form textarea::placeholder,
#review-modal .review-form input::placeholder{
  color:#9aa199!important;
}
#review-modal .review-form input:focus,
#review-modal .review-form select:focus,
#review-modal .review-form textarea:focus{
  border-color:rgba(39,78,48,.44)!important;
  background:#fffdf7!important;
  box-shadow:0 0 0 3px rgba(46,84,53,.07)!important;
}
#review-modal .review-short-note{
  margin-top:6px!important;
  color:#848b7f!important;
  font-size:.64rem!important;
  font-weight:600!important;
  font-style:italic!important;
}

/* Identity controls are intentionally plain; checkbox no longer looks like another chip/card. */
#review-modal .review-anonymous-toggle{
  min-height:34px!important;
  margin-top:8px!important;
  padding:3px 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#5d6e60!important;
  font-size:.69rem!important;
  font-weight:750!important;
}
#review-modal .review-anonymous-toggle input{
  width:17px!important;
  height:17px!important;
}
#review-modal .review-optional-details{
  margin-top:2px!important;
  border:0!important;
  border-top:1px solid rgba(45,70,48,.10)!important;
  border-radius:0!important;
  background:transparent!important;
}
#review-modal .review-optional-details summary{
  padding:12px 0!important;
  color:#647266!important;
  font-size:.69rem!important;
  font-weight:800!important;
}
#review-modal .review-optional-details[open] summary{
  border-bottom:0!important;
}
#review-modal .review-optional-inner{
  padding:2px 0 12px!important;
}

/* Footer reads like the end of a page, not a second floating card. */
#review-modal .review-submit-row{
  margin:12px -24px calc(-20px - env(safe-area-inset-bottom))!important;
  padding:11px 24px calc(11px + env(safe-area-inset-bottom))!important;
  border-top:1px solid rgba(45,70,48,.11)!important;
  background:rgba(247,242,231,.98)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
#review-modal .review-submit-note{
  color:#7f877c!important;
  font-size:.63rem!important;
  font-weight:600!important;
}
#review-modal #review-submit-btn{
  min-height:46px!important;
  padding:9px 15px!important;
  border-radius:10px!important;
  box-shadow:none!important;
}

/* Mobile keeps the full-screen behavior from v3, but visually stays lighter and less boxed. */
@media (max-width:900px), (pointer:coarse){
  #review-modal .review-modal{border:0!important}
  #review-modal .review-modal-head{
    padding:calc(15px + env(safe-area-inset-top)) 16px 13px!important;
  }
  #review-modal #review-modal-title{font-size:1.72rem!important}
  #review-modal .review-modal-scroll{
    padding:14px 16px calc(17px + env(safe-area-inset-bottom))!important;
  }
  #review-modal .review-summary{
    padding:9px 0 12px!important;
  }
  #review-modal .rating-picker{
    justify-content:flex-start!important;
    gap:3px!important;
    padding-left:20px!important;
  }
  #review-modal .rating-picker button{
    flex:0 0 44px!important;
    width:44px!important;
    max-width:44px!important;
    height:44px!important;
    min-width:44px!important;
  }
  #review-modal .rating-picker button svg{
    width:28px!important;
    height:28px!important;
  }
  #review-modal .review-reaction-btn{
    min-height:38px!important;
    padding:8px 10px!important;
  }
  #review-modal .review-form textarea{min-height:88px!important}
  #review-modal .review-submit-row{
    margin:12px -16px calc(-17px - env(safe-area-inset-bottom))!important;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom))!important;
  }
  #review-modal #review-submit-btn{
    min-height:50px!important;
    border-radius:10px!important;
  }
}
@media (max-width:420px){
  #review-modal .rating-picker{padding-left:10px!important;gap:0!important}
  #review-modal .rating-picker button{flex-basis:42px!important;width:42px!important;max-width:42px!important;min-width:42px!important}
  #review-modal .review-step-feeling .review-rating-label{margin-left:20px!important}
}



/* NarraSpace v5 — mobile portrait navigation simplification.
   The small-device pane is intentionally unavailable in portrait phone/small-tablet
   widths. Landscape and >=701px navigation behavior remains unchanged. */
@media (orientation: portrait) and (max-width: 700px) {
  body:not(.admin-mode) .navbar-inner {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body:not(.admin-mode) .small-device-menu-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body:not(.admin-mode) #nav-links {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body:not(.admin-mode) .small-device-nav-scrim,
  body:not(.admin-mode).small-device-nav-open .small-device-nav-scrim {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body:not(.admin-mode).small-device-nav-open {
    overflow: auto !important;
    overscroll-behavior: auto !important;
  }
  body:not(.admin-mode).small-device-nav-open .navbar,
  body:not(.admin-mode).small-device-nav-open .navbar-inner {
    overflow: hidden !important;
  }
}



/* NarraSpace v6 — tablet navigation consolidation.
   701–1179px receives a compact, single-row public header with no drawer/pane.
   The brand is Home; tablet navigation prioritizes Explore, Stories, Films and Music.
   About returns where room is reliable. Desktop >=1180px keeps the full navigation. */
@media (min-width: 701px) and (max-width: 1179px) {
  body:not(.admin-mode) .navbar {
    overflow: visible !important;
  }
  body:not(.admin-mode) .navbar-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 58px !important;
    padding: 0 clamp(12px, 2vw, 18px) !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    overflow: visible !important;
  }
  body:not(.admin-mode) .navbar-brand {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: min(38vw, 220px) !important;
    padding: 0 !important;
    gap: 7px !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    overflow: hidden !important;
  }
  body:not(.admin-mode) .navbar-brand-icon {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
  }
  body:not(.admin-mode) #brand-name {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body:not(.admin-mode) #beta-brand-badge {
    flex: 0 0 auto !important;
    min-height: 20px !important;
    max-width: 68px !important;
    padding: 2px 6px !important;
    font-size: .56rem !important;
    letter-spacing: .035em !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }
  body:not(.admin-mode) #nav-links {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    scrollbar-width: none !important;
  }
  body:not(.admin-mode) #nav-links::-webkit-scrollbar {
    display: none !important;
  }
  body:not(.admin-mode) #nav-links .nav-link {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 7px 8px !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #536250 !important;
    font-size: .82rem !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
  body:not(.admin-mode) #nav-links .nav-link svg {
    display: none !important;
  }
  body:not(.admin-mode) #nav-links .nav-link span {
    display: inline-block !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
  body:not(.admin-mode) #nav-links .nav-link:hover,
  body:not(.admin-mode) #nav-links .nav-link.active {
    color: var(--ns-public-green, #214b31) !important;
    background: #eef4e9 !important;
  }
  body:not(.admin-mode) #nav-links .nav-link::after {
    left: 9px !important;
    right: 9px !important;
    bottom: 2px !important;
    height: 2px !important;
  }

  /* Tablet is intentionally not a drawer/pane environment. */
  body:not(.admin-mode) .small-device-menu-toggle,
  body:not(.admin-mode) .small-device-nav-scrim {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body:not(.admin-mode).small-device-nav-open {
    overflow: auto !important;
    overscroll-behavior: auto !important;
  }

  /* Brand already provides Home. Secondary routes remain available in-page/footer. */
  body:not(.admin-mode) #nav-links .nav-link:not([data-nav-id="explore"]):not([data-nav-id="stories"]):not([data-nav-id="films"]):not([data-nav-id="music"]):not([data-nav-id="about"]) {
    display: none !important;
  }
}

/* Narrow tablets: four essential destinations only. */
@media (min-width: 701px) and (max-width: 899px) {
  body:not(.admin-mode) #nav-links .nav-link[data-nav-id="about"] {
    display: none !important;
  }
  body:not(.admin-mode) .navbar-brand {
    max-width: min(36vw, 205px) !important;
  }
  body:not(.admin-mode) #nav-links .nav-link {
    padding-inline: 7px !important;
    font-size: .8rem !important;
  }
}

/* Comfortable tablets can retain About without bringing back secondary clutter. */
@media (min-width: 900px) and (max-width: 1179px) {
  body:not(.admin-mode) #nav-links .nav-link[data-nav-id="about"] {
    display: inline-flex !important;
  }
}



/* NarraSpace v7 — tablet brand integrity + centered navigation indicator.
   Tablet must never ellipsize the NarraSpace name. The active/hover underline
   uses one centered geometry so it remains visually aligned at every width. */

/* One centered underline rule for the public navigation. */
body:not(.admin-mode) #nav-links .nav-link::after {
  left: 50% !important;
  right: auto !important;
  width: calc(100% - 18px) !important;
  max-width: 46px !important;
  bottom: 2px !important;
  transform: translateX(-50%) scaleX(0) !important;
  transform-origin: center center !important;
}
body:not(.admin-mode) #nav-links .nav-link:hover::after,
body:not(.admin-mode) #nav-links .nav-link.active::after {
  transform: translateX(-50%) scaleX(1) !important;
}

@media (min-width: 701px) and (max-width: 1179px) {
  body:not(.admin-mode) .navbar-inner {
    gap: clamp(8px, 1.25vw, 14px) !important;
  }

  /* Brand identity wins over expendable whitespace: never clip NarraSpace. */
  body:not(.admin-mode) .navbar-brand {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  body:not(.admin-mode) #brand-name {
    display: inline-block !important;
    flex: 0 0 auto !important;
    min-width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
  body:not(.admin-mode) #beta-brand-badge {
    flex: 0 0 auto !important;
  }

  /* Let navigation absorb the remaining width without pushing into the brand. */
  body:not(.admin-mode) #nav-links {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Tablet active state stays quiet; the centered mustard line carries focus. */
  body:not(.admin-mode) #nav-links .nav-link.active,
  body:not(.admin-mode) #nav-links .nav-link:hover {
    background: rgba(238, 244, 233, .72) !important;
  }
}

/* On the very narrow edge of tablet mode, preserve the full brand first.
   The Beta badge compresses before any brand truncation is allowed. */
@media (min-width: 701px) and (max-width: 759px) {
  body:not(.admin-mode) .navbar-brand {
    gap: 5px !important;
  }
  body:not(.admin-mode) #beta-brand-badge {
    max-width: 60px !important;
    padding-inline: 5px !important;
    font-size: .52rem !important;
    letter-spacing: .02em !important;
  }
  body:not(.admin-mode) #nav-links .nav-link {
    padding-inline: 6px !important;
    font-size: .78rem !important;
  }
}



/* NarraSpace v8 — corrected tablet header contract.
   Tablet = brand at left + four primary text-only destinations at right.
   No icons, secondary routes, pills or drawer/pane. Wider touch tablets remain
   in tablet mode instead of accidentally inheriting the desktop header. */

/* Correct the hover/active indicator itself: the line belongs to the text label,
   not the whole padded navigation button. This keeps it optically centered. */
@media (min-width: 701px) {
  body:not(.admin-mode) #nav-links .nav-link::after {
    display: none !important;
  }
  body:not(.admin-mode) #nav-links .nav-link > span {
    position: relative !important;
    display: inline-block !important;
  }
  body:not(.admin-mode) #nav-links .nav-link > span::after {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: -9px !important;
    width: min(100%, 48px) !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: var(--mustard, #d8b442) !important;
    transform: translateX(-50%) scaleX(0) !important;
    transform-origin: center center !important;
    transition: transform .2s ease !important;
    pointer-events: none !important;
  }
  body:not(.admin-mode) #nav-links .nav-link:hover > span::after,
  body:not(.admin-mode) #nav-links .nav-link.active > span::after {
    transform: translateX(-50%) scaleX(1) !important;
  }
}

/* Standard tablet widths + wide touch tablets (e.g. landscape tablets whose
   CSS viewport reaches desktop-like widths). */
@media (min-width: 701px) and (max-width: 1179px),
       (min-width: 1180px) and (max-width: 1366px) and (any-pointer: coarse) {
  body:not(.admin-mode) .navbar {
    overflow: visible !important;
  }
  body:not(.admin-mode) .navbar-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 58px !important;
    padding: 0 clamp(12px, 2vw, 20px) !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(10px, 1.8vw, 24px) !important;
    overflow: visible !important;
  }

  /* Brand is never sacrificed to navigation. */
  body:not(.admin-mode) .navbar-brand {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    max-width: none !important;
    padding: 0 !important;
    gap: 7px !important;
    overflow: visible !important;
  }
  body:not(.admin-mode) .navbar-brand-icon {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
  }
  body:not(.admin-mode) #brand-name {
    display: inline-block !important;
    flex: 0 0 auto !important;
    min-width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
  body:not(.admin-mode) #beta-brand-badge {
    flex: 0 0 auto !important;
    min-height: 20px !important;
    max-width: 68px !important;
    padding: 2px 6px !important;
    font-size: .56rem !important;
    letter-spacing: .035em !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }

  /* Tablet navigation: four important destinations, text only, aligned right. */
  body:not(.admin-mode) #nav-links {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(4px, .7vw, 10px) !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  body:not(.admin-mode) #nav-links .nav-link {
    display: none !important;
  }
  body:not(.admin-mode) #nav-links .nav-link[data-nav-id="explore"],
  body:not(.admin-mode) #nav-links .nav-link[data-nav-id="stories"],
  body:not(.admin-mode) #nav-links .nav-link[data-nav-id="films"],
  body:not(.admin-mode) #nav-links .nav-link[data-nav-id="music"] {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 7px clamp(6px, .65vw, 9px) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #536250 !important;
    font-size: clamp(.79rem, 1.2vw, .86rem) !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
  body:not(.admin-mode) #nav-links .nav-link svg {
    display: none !important;
  }
  body:not(.admin-mode) #nav-links .nav-link > span {
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
  body:not(.admin-mode) #nav-links .nav-link:hover,
  body:not(.admin-mode) #nav-links .nav-link.active {
    color: var(--ns-public-green, #214b31) !important;
    background: transparent !important;
  }

  /* Tablet never uses the old pane/drawer trigger. */
  body:not(.admin-mode) .small-device-menu-toggle,
  body:not(.admin-mode) .small-device-nav-scrim {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body:not(.admin-mode).small-device-nav-open {
    overflow: auto !important;
    overscroll-behavior: auto !important;
  }
}

/* At the narrowest tablet edge keep the same four links; the Beta badge is the
   first expendable element, never the NarraSpace wordmark. */
@media (min-width: 701px) and (max-width: 735px) {
  body:not(.admin-mode) #beta-brand-badge {
    display: none !important;
  }
  body:not(.admin-mode) .navbar-inner {
    gap: 8px !important;
  }
  body:not(.admin-mode) #nav-links {
    gap: 1px !important;
  }
  body:not(.admin-mode) #nav-links .nav-link[data-nav-id="explore"],
  body:not(.admin-mode) #nav-links .nav-link[data-nav-id="stories"],
  body:not(.admin-mode) #nav-links .nav-link[data-nav-id="films"],
  body:not(.admin-mode) #nav-links .nav-link[data-nav-id="music"] {
    padding-inline: 5px !important;
    font-size: .77rem !important;
  }
}



/* P10F v15 — two finishing corrections only: curated shelf badge clarity + About CTA contrast. */
body:not(.admin-mode) #stories .mobile-library-pick-type{
  max-width:calc(100% - 20px)!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
}
body:not(.admin-mode) #stories .mobile-library-pick:has(.mobile-library-pick-audience) .mobile-library-pick-type{
  max-width:calc(100% - 104px)!important;
}
body:not(.admin-mode) #about .about-cta-row .btn-light{
  background:#f0cb5a!important;
  color:#173b2a!important;
  border-color:rgba(23,59,42,.18)!important;
  box-shadow:0 9px 22px rgba(12,38,24,.14)!important;
}
body:not(.admin-mode) #about .about-cta-row .btn-light:hover{
  background:#f5d873!important;
  color:#123522!important;
  border-color:rgba(23,59,42,.24)!important;
}
body:not(.admin-mode) #about .about-cta-row .btn-light i,
body:not(.admin-mode) #about .about-cta-row .btn-light svg{
  color:currentColor!important;
}
body:not(.admin-mode) #about .about-cta-row .btn-light:focus-visible{
  outline:3px solid rgba(240,203,90,.48)!important;
  outline-offset:3px!important;
}



/* v21 — card-only PNG title integration. Cinematic preview/title-card sizing remains untouched. */
body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png{
  width:calc(100% - 94px)!important;
  min-height:44px!important;
  max-height:50px!important;
  margin:0 0 2px!important;
  padding:0!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:flex-start!important;
  overflow:visible!important;
  -webkit-line-clamp:unset!important;
  line-height:1!important;
}
body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png .resource-card-title-png-wrap{
  width:100%!important;
  max-width:100%!important;
  min-height:44px!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:flex-start!important;
}
body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png .resource-card-title-png{
  width:auto!important;
  height:auto!important;
  max-width:68%!important;
  max-height:46px!important;
  object-fit:contain!important;
  object-position:left bottom!important;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.28))!important;
}
body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png + .story-footer{
  margin-top:1px!important;
}

/* Curated phone/tablet shelf: keep the wordmark compact and protect the creator line. */
body:not(.admin-mode) .mobile-library-pick-title.has-title-card-png{
  min-height:34px!important;
  max-height:40px!important;
  margin:0 0 7px!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:flex-start!important;
  overflow:visible!important;
  line-height:1!important;
  -webkit-line-clamp:unset!important;
}
body:not(.admin-mode) .mobile-library-pick-title.has-title-card-png .resource-card-title-png-wrap.is-compact{
  width:100%!important;
  max-width:100%!important;
  min-height:34px!important;
  display:flex!important;
  align-items:flex-end!important;
}
body:not(.admin-mode) .mobile-library-pick-title.has-title-card-png .resource-card-title-png.is-compact{
  width:auto!important;
  height:auto!important;
  max-width:72%!important;
  max-height:36px!important;
  object-fit:contain!important;
  object-position:left bottom!important;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.26))!important;
}

@media(max-width:700px){
  body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png{
    width:calc(100% - 52px)!important;
    min-height:36px!important;
    max-height:42px!important;
    margin-bottom:2px!important;
  }
  body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png .resource-card-title-png-wrap{
    min-height:36px!important;
  }
  body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png .resource-card-title-png{
    max-width:70%!important;
    max-height:38px!important;
  }
  body:not(.admin-mode) .mobile-library-pick-title.has-title-card-png{
    min-height:31px!important;
    max-height:36px!important;
    margin-bottom:6px!important;
  }
  body:not(.admin-mode) .mobile-library-pick-title.has-title-card-png .resource-card-title-png-wrap.is-compact{
    min-height:31px!important;
  }
  body:not(.admin-mode) .mobile-library-pick-title.has-title-card-png .resource-card-title-png.is-compact{
    max-width:68%!important;
    max-height:32px!important;
  }
}

@media(max-width:767px) and (orientation:landscape){
  body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png{
    width:calc(100% - 50px)!important;
    min-height:30px!important;
    max-height:34px!important;
  }
  body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png .resource-card-title-png-wrap{
    min-height:30px!important;
  }
  body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png .resource-card-title-png{
    max-width:64%!important;
    max-height:30px!important;
  }
}


/* NarraSpace P3 live regression repair — 2026-08-25.
   Keep Po-opo AR visible as a first-class homepage action. */
body:not(.admin-mode) #home .hero-container > .flex.flex-wrap .hero-main-ar-entry {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:44px !important;
  min-width:150px !important;
  padding:10px 18px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,238,176,.78) !important;
  background:#f2cd63 !important;
  color:#173d27 !important;
  font-weight:950 !important;
  text-decoration:none !important;
  box-shadow:0 10px 24px rgba(0,0,0,.16) !important;
  white-space:nowrap !important;
}
body:not(.admin-mode) #home .hero-container > .flex.flex-wrap .hero-main-ar-entry:hover {
  background:#f6d776 !important;
  color:#12331f !important;
}
body:not(.admin-mode) #home .hero-container > .flex.flex-wrap .hero-main-ar-entry:focus-visible {
  outline:3px solid rgba(255,224,129,.62) !important;
  outline-offset:3px !important;
}
@media (max-width:560px) {
  body:not(.admin-mode) #home .hero-container > .flex.flex-wrap .hero-main-ar-entry {
    min-width:0 !important;
    padding:10px 15px !important;
  }
}

/* NarraSpace v29 — final public visual regression repair, 2026-08-25.
   Scope only: film QR visibility, collaborator shelf, Po-opo AR invitation,
   and archive-card PNG title scale. */

/* 1) Film: QR remains directly available beside More and Close.
   A late cinema rule intentionally hides all other header actions. */
body:not(.film-stable-cinema-active) #story-modal .document-modal[data-resource-type="film"] .document-actions > #modal-qr-link {
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

/* 2) Collaborators: portrait + name + role, never a rectangular hover card. */
body:not(.admin-mode) #editorial-people .phase8b-person-card,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-card,
body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n),
body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(n) {
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  transform:none !important;
  isolation:auto !important;
}
body:not(.admin-mode) #editorial-people .phase8b-person-card::before,
body:not(.admin-mode) #editorial-people .phase8b-person-card::after,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-card::before,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-card::after {
  content:none !important;
  display:none !important;
}
body:not(.admin-mode) #editorial-people .phase8b-person-card:hover,
body:not(.admin-mode) #editorial-people .phase8b-person-card:focus-visible,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:hover,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:focus-visible {
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  transform:none !important;
  outline:none !important;
}
body:not(.admin-mode) #editorial-people .phase8b-person-image,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-image {
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
body:not(.admin-mode) #editorial-people .phase8b-person-card:hover .phase8b-person-image,
body:not(.admin-mode) #editorial-people .phase8b-person-card:focus-visible .phase8b-person-image,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:hover .phase8b-person-image,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:focus-visible .phase8b-person-image {
  transform:translateY(-3px) scale(1.035) !important;
  border-color:rgba(246,213,101,.96) !important;
  box-shadow:0 14px 28px rgba(29,58,37,.20),0 0 0 4px rgba(246,213,101,.16) !important;
}
body:not(.admin-mode) #editorial-people .phase8b-person-copy,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-copy {
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  background:transparent !important;
}
body:not(.admin-mode) #editorial-people .phase8b-person-name,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-name {
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  position:static !important;
  width:100% !important;
  max-width:160px !important;
  min-height:1.1em !important;
  margin:0 !important;
  color:#203b29 !important;
  font-size:clamp(.88rem,1vw,1rem) !important;
  font-weight:950 !important;
  line-height:1.15 !important;
  text-align:center !important;
  white-space:normal !important;
  overflow:visible !important;
  text-wrap:balance !important;
  -webkit-line-clamp:unset !important;
}
body:not(.admin-mode) #editorial-people .phase8b-person-role,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-role {
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  max-width:160px !important;
  color:#6a784d !important;
  font-size:.62rem !important;
  line-height:1.2 !important;
  text-align:center !important;
}
body:not(.admin-mode) #editorial-people .phase8b-linked-works,
body:not(.admin-mode) #editorial-collaborators .phase8b-linked-works {
  display:flex !important;
  width:auto !important;
  margin-top:5px !important;
  padding-top:0 !important;
}
body:not(.admin-mode) #editorial-people .phase8b-view-profile,
body:not(.admin-mode) #editorial-collaborators .phase8b-view-profile {
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  min-height:26px !important;
  padding:2px 2px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#31583a !important;
  box-shadow:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  font-size:.69rem !important;
  font-weight:900 !important;
}

/* 3) Po-opo: a desktop hover/focus invitation to the existing AR experience. */
.poopo-ar-hover-card {
  position:fixed;
  z-index:10045;
  width:min(320px,calc(100vw - 22px));
  min-height:150px;
  padding:13px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(13,54,32,.97),rgba(24,79,47,.96));
  color:#fffdf4;
  box-shadow:0 24px 60px rgba(4,28,16,.30);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  display:grid;
  grid-template-columns:minmax(0,1fr) 88px;
  grid-template-areas:"copy qr" "open qr";
  gap:10px 12px;
  align-items:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(8px) scale(.98);
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
}
.poopo-ar-hover-card.is-visible {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
.poopo-ar-hover-copy{grid-area:copy;min-width:0;display:grid;gap:4px;}
.poopo-ar-hover-kicker{display:inline-flex;align-items:center;gap:6px;color:#f6d565;font-size:.66rem;font-weight:950;letter-spacing:.05em;text-transform:uppercase;}
.poopo-ar-hover-kicker svg{width:14px;height:14px;}
.poopo-ar-hover-copy strong{font-size:1rem;line-height:1.08;font-weight:950;color:#fffdf4;}
.poopo-ar-hover-copy>span:last-child{font-size:.76rem;line-height:1.35;font-weight:720;color:rgba(255,253,244,.78);}
.poopo-ar-hover-qr{grid-area:qr;width:88px;height:88px;padding:6px;border-radius:14px;background:#fff;display:block;box-shadow:0 8px 20px rgba(0,0,0,.16);}
.poopo-ar-hover-qr img{width:100%;height:100%;display:block;object-fit:contain;border-radius:8px;}
.poopo-ar-hover-open{grid-area:open;justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border-radius:999px;background:#f2cd63;color:#173d27;text-decoration:none;font-size:.72rem;font-weight:950;}
.poopo-ar-hover-open svg{width:14px;height:14px;}
.poopo-ar-hover-open:hover{background:#f7da7d;color:#12331f;}
@media (hover:none),(pointer:coarse){.poopo-ar-hover-card{display:none !important;}}
@media (prefers-reduced-motion:reduce){.poopo-ar-hover-card{transition:none !important;}}

/* 4) Archive card PNG wordmarks: larger, but still protect the creator/footer line. */
body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png {
  width:calc(100% - 72px) !important;
  min-height:58px !important;
  max-height:72px !important;
  align-items:flex-end !important;
}
body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png .resource-card-title-png-wrap {
  min-height:58px !important;
}
body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png .resource-card-title-png {
  max-width:88% !important;
  max-height:66px !important;
}
body:not(.admin-mode) .mobile-library-pick-title.has-title-card-png {
  min-height:42px !important;
  max-height:50px !important;
}
body:not(.admin-mode) .mobile-library-pick-title.has-title-card-png .resource-card-title-png.is-compact {
  max-width:82% !important;
  max-height:44px !important;
}
@media(max-width:700px){
  body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png{
    width:calc(100% - 52px) !important;
    min-height:44px !important;
    max-height:54px !important;
  }
  body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png .resource-card-title-png{
    max-width:84% !important;
    max-height:50px !important;
  }
  body:not(.admin-mode) .mobile-library-pick-title.has-title-card-png .resource-card-title-png.is-compact{
    max-width:78% !important;
    max-height:38px !important;
  }
}
@media(max-width:767px) and (orientation:landscape){
  body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png .resource-card-title-png{
    max-width:80% !important;
    max-height:40px !important;
  }
}

/* NarraSpace V30 — final polish adjustments, 2026-08-25.
   Scope: profile text/layout polish, film QR action-row parity with stories,
   subtler Po-opo AR hover card, and larger story-card PNG wordmarks. */

/* 1) Profile cards: cleaner reading order and stronger profile action icon/button. */
body:not(.admin-mode) #editorial-people .phase8b-person-copy,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-copy{
  display:grid !important;
  justify-items:center !important;
  align-content:start !important;
  gap:4px !important;
}
body:not(.admin-mode) #editorial-people .phase8b-person-name,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-name{order:1 !important; margin-top:2px !important;}
body:not(.admin-mode) #editorial-people .phase8b-person-role,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-role{order:2 !important; margin-top:0 !important; font-size:.66rem !important; line-height:1.24 !important;}
body:not(.admin-mode) #editorial-people .phase8b-person-affiliation,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-affiliation{order:3 !important; max-width:164px !important; margin:0 !important; color:#7a8861 !important; font-size:.60rem !important; line-height:1.18 !important; text-align:center !important;}
body:not(.admin-mode) #editorial-people .phase8b-linked-works,
body:not(.admin-mode) #editorial-collaborators .phase8b-linked-works{order:4 !important; margin-top:6px !important;}
body:not(.admin-mode) #editorial-people .phase8b-view-profile,
body:not(.admin-mode) #editorial-collaborators .phase8b-view-profile{
  min-height:30px !important;
  padding:0 12px !important;
  border-radius:999px !important;
  background:rgba(255,253,244,.94) !important;
  border:1px solid rgba(49,88,58,.14) !important;
  color:#264632 !important;
  box-shadow:0 8px 18px rgba(25,52,34,.08) !important;
  font-size:.72rem !important;
  font-weight:950 !important;
  gap:7px !important;
}
body:not(.admin-mode) #editorial-people .phase8b-view-profile i,
body:not(.admin-mode) #editorial-people .phase8b-view-profile svg,
body:not(.admin-mode) #editorial-collaborators .phase8b-view-profile i,
body:not(.admin-mode) #editorial-collaborators .phase8b-view-profile svg{
  width:16px !important; height:16px !important; font-size:16px !important;
}
body:not(.admin-mode) #editorial-people .phase8b-person-card:hover .phase8b-view-profile,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:hover .phase8b-view-profile{background:#f8f3dc !important; color:#1f3c29 !important; box-shadow:0 10px 22px rgba(25,52,34,.10) !important;}
@media (max-width:700px){
  body:not(.admin-mode) #editorial-people .phase8b-view-profile,
  body:not(.admin-mode) #editorial-collaborators .phase8b-view-profile{min-height:28px !important; padding:0 10px !important; font-size:.68rem !important;}
}

/* 2) Films: mirror the story QR treatment by placing QR in the main film action row. */
#story-modal .film-launch-actions .film-launch-qr{
  background:rgba(5,10,7,.28) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.16) !important;
  backdrop-filter:blur(10px) !important;
}
@media (max-width: 820px) and (orientation: portrait) {
  #story-modal .film-launch-actions { grid-template-columns:minmax(0,1.2fr) repeat(4,44px) !important; }
}

/* 3) Po-opo AR hover: keep it present but calmer and less attention-grabbing. */
.poopo-ar-hover-card{
  width:min(258px,calc(100vw - 28px)) !important;
  min-height:118px !important;
  padding:11px !important;
  border-radius:16px !important;
  background:linear-gradient(145deg,rgba(18,61,37,.95),rgba(27,77,49,.94)) !important;
  box-shadow:0 16px 36px rgba(4,28,16,.24) !important;
  grid-template-columns:minmax(0,1fr) 72px !important;
  gap:8px 10px !important;
}
.poopo-ar-hover-kicker{font-size:.60rem !important; letter-spacing:.045em !important;}
.poopo-ar-hover-kicker svg{width:12px !important; height:12px !important;}
.poopo-ar-hover-copy strong{font-size:.90rem !important; line-height:1.08 !important;}
.poopo-ar-hover-copy>span:last-child{font-size:.70rem !important; line-height:1.28 !important;}
.poopo-ar-hover-qr{width:72px !important; height:72px !important; padding:5px !important; border-radius:12px !important; box-shadow:0 6px 14px rgba(0,0,0,.14) !important;}
.poopo-ar-hover-open{min-height:30px !important; padding:0 9px !important; font-size:.68rem !important; gap:5px !important;}
.poopo-ar-hover-open svg{width:13px !important; height:13px !important;}

/* 4) Story-card PNG wordmarks: slightly larger in the archive-card strip. */
body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png{
  width:calc(100% - 58px) !important;
  min-height:70px !important;
  max-height:82px !important;
}
body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png .resource-card-title-png-wrap{
  min-height:70px !important;
}
body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png .resource-card-title-png{
  max-width:92% !important;
  max-height:78px !important;
}
body:not(.admin-mode) .mobile-library-pick-title.has-title-card-png{
  min-height:46px !important;
  max-height:56px !important;
}
body:not(.admin-mode) .mobile-library-pick-title.has-title-card-png .resource-card-title-png.is-compact{
  max-width:86% !important;
  max-height:48px !important;
}
@media(max-width:700px){
  body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png{
    min-height:50px !important;
    max-height:62px !important;
  }
  body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png .resource-card-title-png{
    max-width:88% !important;
    max-height:56px !important;
  }
  body:not(.admin-mode) .mobile-library-pick-title.has-title-card-png .resource-card-title-png.is-compact{
    max-width:82% !important;
    max-height:40px !important;
  }
}
@media(max-width:767px) and (orientation:landscape){
  body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png .resource-card-title-png{
    max-width:84% !important;
    max-height:44px !important;
  }
}

/* NarraSpace V31 — launch-polish visual refinements. */

/* Po-opo AR: turn the hover into a quiet discovery card rather than a promo panel. */
.poopo-ar-hover-card{
  width:min(218px,calc(100vw - 28px)) !important;
  min-height:94px !important;
  padding:9px 10px !important;
  border-radius:14px !important;
  background:linear-gradient(145deg,rgba(18,61,37,.94),rgba(27,77,49,.93)) !important;
  box-shadow:0 13px 28px rgba(4,28,16,.20) !important;
  grid-template-columns:minmax(0,1fr) 58px !important;
  grid-template-areas:"copy qr" "open qr" !important;
  gap:6px 8px !important;
}
.poopo-ar-hover-kicker{font-size:.54rem !important;letter-spacing:.04em !important;gap:4px !important;}
.poopo-ar-hover-kicker svg{width:11px !important;height:11px !important;}
.poopo-ar-hover-copy{gap:2px !important;}
.poopo-ar-hover-copy strong{font-size:.82rem !important;line-height:1.08 !important;}
.poopo-ar-hover-copy>span:last-child{font-size:.64rem !important;line-height:1.22 !important;color:rgba(255,253,244,.72) !important;}
.poopo-ar-hover-qr{width:58px !important;height:58px !important;padding:4px !important;border-radius:10px !important;box-shadow:0 5px 12px rgba(0,0,0,.12) !important;}
.poopo-ar-hover-qr img{border-radius:6px !important;}
.poopo-ar-hover-open{
  min-height:auto !important;padding:0 !important;border-radius:0 !important;background:transparent !important;
  color:#f6d565 !important;font-size:.61rem !important;font-weight:900 !important;gap:3px !important;
  text-decoration:none !important;box-shadow:none !important;
}
.poopo-ar-hover-open:hover{background:transparent !important;color:#ffe795 !important;text-decoration:underline !important;text-underline-offset:2px !important;}
.poopo-ar-hover-open svg{width:11px !important;height:11px !important;}

/* Story archive: let PNG wordmarks own more of the title zone without covering footer/meta. */
body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png{
  width:calc(100% - 48px) !important;
  min-height:78px !important;
  max-height:94px !important;
  margin-bottom:0 !important;
}
body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png .resource-card-title-png-wrap{
  min-height:78px !important;
  align-items:flex-end !important;
}
body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png .resource-card-title-png{
  max-width:96% !important;
  max-height:88px !important;
}
@media(max-width:700px){
  body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png{
    min-height:54px !important;max-height:66px !important;
  }
  body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png .resource-card-title-png{
    max-width:92% !important;max-height:60px !important;
  }
}
@media(max-width:767px) and (orientation:landscape){
  body:not(.admin-mode) #stories-container .storybook-card .story-title.has-title-card-png .resource-card-title-png{
    max-width:88% !important;max-height:46px !important;
  }
}

/* NarraSpace V32 — Po-opo hierarchy refinement, 2026-08-26.
   Goal: AR stays as a subtle bonus, not the primary interaction. */
.poopo-ar-hover-card{
  width:min(170px,calc(100vw - 34px)) !important;
  min-height:86px !important;
  padding:8px 9px !important;
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:linear-gradient(145deg,rgba(18,61,37,.88),rgba(25,74,47,.86)) !important;
  box-shadow:0 10px 24px rgba(4,28,16,.18) !important;
  grid-template-columns:minmax(0,1fr) 46px !important;
  grid-template-areas:"copy qr" "open qr" !important;
  gap:4px 8px !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}
.poopo-ar-hover-kicker{font-size:.49rem !important; letter-spacing:.045em !important; gap:3px !important; color:#efd36b !important;}
.poopo-ar-hover-kicker svg{width:10px !important; height:10px !important;}
.poopo-ar-hover-copy{gap:1px !important;}
.poopo-ar-hover-copy strong{font-size:.76rem !important; line-height:1.04 !important; font-weight:900 !important;}
.poopo-ar-hover-copy>span:last-child{font-size:.58rem !important; line-height:1.14 !important; color:rgba(255,253,244,.68) !important;}
.poopo-ar-hover-qr{width:46px !important; height:46px !important; padding:3px !important; border-radius:9px !important; box-shadow:0 4px 10px rgba(0,0,0,.10) !important; align-self:center !important;}
.poopo-ar-hover-qr img{border-radius:5px !important;}
.poopo-ar-hover-open{
  min-height:auto !important;
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#f4d36b !important;
  font-size:.58rem !important;
  font-weight:900 !important;
  gap:4px !important;
  text-decoration:none !important;
  box-shadow:none !important;
}
.poopo-ar-hover-open:hover{background:transparent !important; color:#ffe795 !important; text-decoration:underline !important; text-underline-offset:2px !important;}
.poopo-ar-hover-open svg{width:10px !important; height:10px !important;}

/* NarraSpace V35 — Film title-card stage normalization, 2026-08-26.
   Keep the cinematic left column, but give title PNGs the same intentional,
   consistent title-stage behavior that works well in NarraSpace Reading. */
body:not(.admin-mode) #story-modal .document-modal[data-resource-type="film"] .film-launch-title-card,
body:not(.admin-mode) #story-modal .document-modal[data-resource-type="film"] .film-loading-title-card {
  width:min(620px,100%) !important;
  max-width:min(620px,100%) !important;
  height:clamp(112px,15vh,152px) !important;
  min-height:112px !important;
  display:grid !important;
  place-items:center !important;
  justify-self:start !important;
  overflow:visible !important;
  margin:1px 0 2px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
body:not(.admin-mode) #story-modal .document-modal[data-resource-type="film"] .film-launch-title-card[hidden],
body:not(.admin-mode) #story-modal .document-modal[data-resource-type="film"] .film-loading-title-card[hidden] {
  display:none !important;
}
body:not(.admin-mode) #story-modal .document-modal[data-resource-type="film"] .film-launch-title-card img,
body:not(.admin-mode) #story-modal .document-modal[data-resource-type="film"] .film-loading-title-card img {
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 auto !important;
  transform:none !important;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.36)) !important;
}

/* Keep fallback text hierarchy unchanged when no title PNG is supplied. */
body:not(.admin-mode) #story-modal .document-modal[data-resource-type="film"] .film-launch-title-card:not([hidden]) + #modal-film-launch-title {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
}

/* Portrait: retain a prominent title without crowding the synopsis/actions. */
@media (max-width:820px) and (orientation:portrait) {
  body:not(.admin-mode) #story-modal .document-modal[data-resource-type="film"] .film-launch-title-card,
  body:not(.admin-mode) #story-modal .document-modal[data-resource-type="film"] .film-loading-title-card {
    width:min(82vw,520px) !important;
    max-width:min(82vw,520px) !important;
    height:clamp(88px,13vh,116px) !important;
    min-height:88px !important;
    margin:0 !important;
  }
}

/* Short landscape phones/tablets: prioritize usable vertical space. */
@media (orientation:landscape) and (max-height:620px) and (max-width:1100px) {
  body:not(.admin-mode) #story-modal .document-modal[data-resource-type="film"] .film-launch-title-card,
  body:not(.admin-mode) #story-modal .document-modal[data-resource-type="film"] .film-loading-title-card {
    width:min(46vw,470px) !important;
    max-width:min(46vw,470px) !important;
    height:clamp(68px,16vh,92px) !important;
    min-height:68px !important;
  }
}

@media (max-width:560px) and (orientation:portrait) {
  body:not(.admin-mode) #story-modal .document-modal[data-resource-type="film"] .film-launch-title-card,
  body:not(.admin-mode) #story-modal .document-modal[data-resource-type="film"] .film-loading-title-card {
    width:min(86vw,430px) !important;
    max-width:min(86vw,430px) !important;
    height:clamp(78px,12vh,104px) !important;
    min-height:78px !important;
  }
}


/* NarraSpace V36 — icon normalization.
   Music archive cards are already full-card actions; remove the redundant overlay play icon that covered artwork. */
body:not(.admin-mode) #music .music-card .music-card-play,
body:not(.admin-mode) .music-archive-grid .music-card .music-card-play {
  display:none !important;
}

/* NarraSpace V37 — Listening Room stabilization + icon cleanup. */
#music-player-modal .music-player-art-placeholder[hidden]{display:none !important;}
#music-player-modal .music-player-art-placeholder:not([hidden]){display:grid !important;}
#music-player-modal .music-player-head-copy .music-player-moods{
  position:static !important;
  width:100% !important;
  max-width:760px !important;
  margin:10px 0 0 !important;
  padding:0 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:6px !important;
}
#music-player-modal .music-player-head-copy .music-player-moods span{
  position:static !important;
  min-height:28px !important;
  padding:5px 9px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
#music-player-modal .music-player-art-column .music-player-moods{display:none !important;}
#music-player-modal .music-player-now{
  min-height:24px !important;
  margin:0 auto 12px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  color:rgba(255,253,244,.68) !important;
  font-size:.67rem !important;
  letter-spacing:.09em !important;
}
#music-player-modal .music-player-now > i,
#music-player-modal .music-player-now > svg{display:none !important;}
#music-player-modal .music-waveform{
  clear:both !important;
  position:relative !important;
  margin:0 auto 14px !important;
}
#music-player-modal .music-progress-row{margin:0 auto 18px !important;}
#music-player-modal .music-player-story{
  max-height:7.1em !important;
  overflow:auto !important;
  scrollbar-width:thin !important;
}
@media(max-width:820px) and (orientation:portrait){
  #music-player-modal .music-player-head-copy .music-player-moods{
    margin-top:7px !important;
    gap:5px !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    scrollbar-width:none !important;
  }
  #music-player-modal .music-player-head-copy .music-player-moods::-webkit-scrollbar{display:none !important;}
  #music-player-modal .music-player-head-copy .music-player-moods span{min-height:26px !important;font-size:.61rem !important;}
  #music-player-modal .music-player-now{margin-bottom:8px !important;}
}


/* ===== ACTIVE SOURCE: assets/narraspace-preview-responsive-launch-20260916.css ===== */
/* NarraSpace Launch Responsive Preview Bundle | 2026-09-15
   Consolidated from the exact active M1-M9 files in production order.
   No rule reordering; boundaries retained below for auditability. */

/* ===== SOURCE: assets/narraspace-mobile-story-preview-m1.css ===== */
/* NarraSpace Mobile M1 — Story preview only.
   Baseline: V39. Scope intentionally limited to the cinematic Story cover after tapping a Story card. */
@media (max-width: 700px) and (orientation: portrait) {
  /* Make the Story cover a true phone canvas. This removes the narrow modal/black gutter. */
  #story-modal {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
  }
  #story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="cover"],
  #story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="loading"] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  #ns09z-story-cover,
  #ns09z-story-loading {
    width: 100vw !important;
    height: 100dvh !important;
    border-radius: 0 !important;
  }

  /* The background already IS the cover art on phone; the tiny repeated thumbnail costs too much width. */
  #ns09z-story-cover .ns09z-story-stage {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: end !important;
    align-items: end !important;
    gap: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding:
      max(76px, calc(env(safe-area-inset-top) + 64px))
      max(16px, env(safe-area-inset-right))
      max(20px, calc(env(safe-area-inset-bottom) + 16px))
      max(16px, env(safe-area-inset-left)) !important;
  }
  #ns09z-story-cover .ns09z-story-art {
    display: none !important;
  }

  #ns09z-story-cover .ns09z-story-copy {
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  /* The persistent top-left mini-brand is enough; avoid repeating NarraSpace Reading in the content. */
  #ns09z-story-cover .ns09z-story-kicker {
    display: none !important;
  }

  #ns09z-story-cover .ns09z-story-title-card {
    display: block !important;
    width: auto !important;
    max-width: min(88vw, 430px) !important;
    max-height: min(21vh, 138px) !important;
    margin: 0 auto 2px !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    filter: drop-shadow(0 8px 22px rgba(0,0,0,.34)) !important;
  }
  #ns09z-story-cover .ns09z-story-title:not([hidden]) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    color: #fffdf5 !important;
    font-size: clamp(2rem, 11vw, 3.25rem) !important;
    line-height: .96 !important;
    text-align: center !important;
    text-wrap: balance !important;
  }

  #ns09z-story-cover .ns09z-story-credits {
    justify-content: center !important;
    gap: 6px 14px !important;
  }
  #ns09z-story-cover .ns09z-story-credit {
    font-size: .72rem !important;
  }
  #ns09z-story-cover .ns09z-story-credit span {
    font-size: .54rem !important;
  }

  #ns09z-story-cover .ns09z-story-meta {
    width: 100% !important;
    justify-content: center !important;
    gap: 5px !important;
    overflow: visible !important;
  }
  #ns09z-story-cover .ns09z-story-meta span,
  #ns09z-story-cover .ns09z-story-meta .audience-guide-badge {
    min-height: 25px !important;
    padding: 0 8px !important;
    font-size: .64rem !important;
    white-space: nowrap !important;
  }

  #ns09z-story-cover .ns09z-story-description {
    width: 100% !important;
    max-width: 100% !important;
    margin: 1px 0 2px !important;
    color: rgba(255,253,245,.92) !important;
    font-size: .78rem !important;
    line-height: 1.38 !important;
    -webkit-line-clamp: 2 !important;
    overflow-wrap: anywhere !important;
  }

  /* Primary reading action + three predictable utility buttons. */
  #ns09z-story-cover .ns09z-story-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) repeat(3, 44px) !important;
    gap: 7px !important;
    width: 100% !important;
    margin-top: 2px !important;
  }
  #ns09z-story-cover .ns09z-story-actions button {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    pointer-events: auto !important;
  }
  #ns09z-story-cover .ns09z-story-actions .ns09z-story-read-primary {
    padding: 0 14px !important;
    gap: 7px !important;
  }
  #ns09z-story-cover .ns09z-story-actions button:not(.ns09z-story-read-primary) span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
  }
  #ns09z-story-cover .ns09z-story-actions button svg,
  #ns09z-story-cover .ns09z-story-actions button i {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }

  #ns09z-story-cover .ns09z-story-close {
    top: max(14px, env(safe-area-inset-top)) !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    width: 44px !important;
    height: 44px !important;
  }
  #ns09z-story-cover .ns09z-story-mini-brand {
    top: max(19px, calc(env(safe-area-inset-top) + 1px)) !important;
    left: max(16px, env(safe-area-inset-left)) !important;
    font-size: .60rem !important;
  }
}

/* Very narrow phones: preserve the same composition without crushing the action row. */
@media (max-width: 340px) and (orientation: portrait) {
  #ns09z-story-cover .ns09z-story-stage {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #ns09z-story-cover .ns09z-story-actions {
    grid-template-columns: minmax(0,1fr) repeat(3, 40px) !important;
    gap: 5px !important;
  }
  #ns09z-story-cover .ns09z-story-actions button {
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
  #ns09z-story-cover .ns09z-story-actions .ns09z-story-read-primary {
    width: 100% !important;
  }
}


/* ===== SOURCE: assets/narraspace-mobile-story-reflection-m2.css ===== */
/* NarraSpace Mobile M2 — Story description + Reflection only.
   Baseline: V39 + M1. No Film, Music, Po-opo, Admin, tablet or desktop changes. */

@media (max-width:700px) and (orientation:portrait){
  /* Story synopsis stays short in the preview; Read more opens a separate sheet. */
  #ns09z-story-cover .ns09z-story-description,
  #story-modal .story-cover-description{
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    overflow:hidden !important;
    margin-bottom:0 !important;
  }
  #ns09z-story-cover .story-description-more,
  #story-modal .story-description-more{
    width:max-content !important;
    min-height:28px !important;
    margin:-2px 0 1px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    color:#f4d765 !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:3px !important;
    font-size:.67rem !important;
    font-weight:900 !important;
    line-height:1 !important;
    box-shadow:none !important;
  }
  #ns09z-story-cover .story-description-more svg,
  #story-modal .story-description-more svg{width:13px !important;height:13px !important;}

  /* Make the Reflect utility unmistakable and use a Lucide icon known to render reliably. */
  #ns09z-story-cover .ns09z-story-actions button[title="Reflect"],
  #story-modal .story-cover-actions button[title="Reflect"]{
    color:#fffdf4 !important;
    border-color:rgba(255,255,255,.22) !important;
    background:rgba(6,12,8,.34) !important;
  }
  #ns09z-story-cover .ns09z-story-actions button[title="Reflect"] svg,
  #story-modal .story-cover-actions button[title="Reflect"] svg{
    width:19px !important;height:19px !important;stroke-width:2.15 !important;
  }

  /* Reflection: final mobile authority. Later desktop visual-polish rules must not inset it. */
  #review-modal{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    min-height:100svh !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    align-items:stretch !important;
    justify-content:stretch !important;
    overflow:hidden !important;
  }
  #review-modal .review-modal{
    position:relative !important;
    width:100vw !important;
    max-width:none !important;
    height:100dvh !important;
    min-height:100svh !important;
    max-height:100dvh !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }
  #review-modal .review-modal-head{
    display:flex !important;
    flex:none !important;
    min-height:104px !important;
    padding:calc(13px + env(safe-area-inset-top)) 58px 12px 15px !important;
    background:#183f28 !important;
  }
  #review-modal .review-modal-head > div{display:block !important;min-width:0 !important;}
  #review-modal .review-modal-head .section-pill{display:none !important;}
  #review-modal #review-modal-title{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    max-width:none !important;
    margin:0 !important;
    color:#fffdf4 !important;
    font-size:1.32rem !important;
    line-height:1.02 !important;
    font-weight:850 !important;
    letter-spacing:-.025em !important;
    white-space:normal !important;
    overflow:visible !important;
  }
  #review-modal #review-resource-title{
    display:block !important;
    max-width:100% !important;
    margin:5px 0 0 !important;
    color:#f1d36c !important;
    font-size:.74rem !important;
    line-height:1.15 !important;
    font-weight:900 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  #review-modal .review-modal-subtitle{
    display:block !important;
    margin:4px 0 0 !important;
    color:rgba(255,255,255,.75) !important;
    font-size:.66rem !important;
    line-height:1.25 !important;
  }
  #review-modal .close-btn{
    position:absolute !important;
    top:max(12px,calc(env(safe-area-inset-top) + 8px)) !important;
    right:12px !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
  }
  #review-modal .review-modal-scroll{
    flex:1 1 auto !important;
    min-height:0 !important;
    width:100% !important;
    padding:14px 14px calc(16px + env(safe-area-inset-bottom)) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
}

/* Story description bottom sheet: separate from the cinematic preview so no layout reflow occurs. */
.story-description-modal{
  position:fixed;
  inset:0;
  z-index:2147482500;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0;
  background:rgba(4,10,6,.58);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,visibility .18s ease;
}
.story-description-modal.show{opacity:1;visibility:visible;pointer-events:auto;}
.story-description-sheet{
  width:min(680px,100%);
  max-height:min(64dvh,620px);
  overflow:hidden;
  border-radius:22px 22px 0 0;
  border:1px solid rgba(255,255,255,.12);
  border-bottom:0;
  background:#f8f3e8;
  color:#173d27;
  box-shadow:0 -22px 60px rgba(4,20,10,.24);
  transform:translateY(18px);
  transition:transform .18s ease;
}
.story-description-modal.show .story-description-sheet{transform:translateY(0);}
.story-description-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:16px 16px 12px;
  border-bottom:1px solid rgba(36,72,46,.12);
}
.story-description-kicker{display:inline-flex;align-items:center;gap:6px;color:#9c7913;font-size:.62rem;font-weight:950;text-transform:uppercase;letter-spacing:.04em;}
.story-description-kicker svg{width:14px;height:14px;}
.story-description-head h2{margin:4px 0 0;font-size:1.2rem;line-height:1.08;font-weight:900;color:#173d27;}
.story-description-close{width:40px;height:40px;min-width:40px;border-radius:50%;border:1px solid rgba(36,72,46,.14);background:#fffdf7;color:#173d27;display:grid;place-items:center;}
.story-description-close svg{width:18px;height:18px;}
.story-description-full{max-height:calc(64dvh - 72px);overflow-y:auto;padding:15px 16px calc(20px + env(safe-area-inset-bottom));font-size:.9rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;}
body.story-description-open{overflow:hidden !important;}
@media (prefers-reduced-motion:reduce){.story-description-modal,.story-description-sheet{transition:none !important;}}


/* ===== SOURCE: assets/narraspace-preview-description-m3.css ===== */
/* NarraSpace M3 — Preview description treatment.
   Baseline: V39 + M1 + M2.
   Scope: Read-more control, Story preview on tablet/landscape, Film synopsis read-more.
   Phone portrait Story preview from M1 stays the visual reference. */

/* Designed Read more control at every size so it never falls back to a plain browser button. */
.resource-description-more,
.story-description-more{
  appearance:none;
  -webkit-appearance:none;
  width:max-content;
  min-height:32px;
  margin:2px 0 2px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(5,12,8,.30);
  color:#fffdf5;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  gap:6px;
  font:inherit;
  font-size:.70rem;
  font-weight:850;
  line-height:1;
  letter-spacing:0;
  box-shadow:none;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  cursor:pointer;
}
.resource-description-more:hover,
.resource-description-more:focus-visible,
.story-description-more:hover,
.story-description-more:focus-visible{
  background:rgba(242,207,89,.16);
  border-color:rgba(242,207,89,.54);
  color:#ffe889;
  outline:none;
}
.resource-description-more svg,
.story-description-more svg{width:13px;height:13px;flex:0 0 13px;stroke-width:2.1;}
.resource-description-more svg:last-child,
.story-description-more svg:last-child{width:12px;height:12px;opacity:.82;}

/* Phone: preserve M1 composition, just polish the Read more pill. */
@media (max-width:700px) and (orientation:portrait){
  #ns09z-story-cover .resource-description-more,
  #story-modal .resource-description-more{
    min-height:30px !important;
    margin:-1px 0 1px !important;
    padding:0 9px !important;
    font-size:.65rem !important;
    gap:5px !important;
  }
}

/* Tablet portrait + mid-size screens: use the successful phone cinematic idea,
   but with more room and larger controls. */
@media (min-width:701px) and (max-width:1180px){
  #story-modal{
    padding:0 !important;
    align-items:stretch !important;
    justify-content:stretch !important;
    overflow:hidden !important;
  }
  #story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="cover"],
  #story-modal .document-modal[data-resource-type="story"][data-ns-story-mode="loading"]{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    overflow:hidden !important;
  }
  #ns09z-story-cover,
  #ns09z-story-loading{width:100vw !important;height:100dvh !important;border-radius:0 !important;}
  #ns09z-story-cover .ns09z-story-stage{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    align-content:end !important;
    align-items:end !important;
    gap:0 !important;
    width:100% !important;
    height:100% !important;
    padding:max(84px,calc(env(safe-area-inset-top) + 70px)) max(28px,env(safe-area-inset-right)) max(30px,calc(env(safe-area-inset-bottom) + 24px)) max(28px,env(safe-area-inset-left)) !important;
  }
  #ns09z-story-cover .ns09z-story-art{display:none !important;}
  #ns09z-story-cover .ns09z-story-copy{
    width:min(780px,100%) !important;
    min-width:0 !important;
    margin:0 auto !important;
    gap:9px !important;
    padding:0 !important;
  }
  #ns09z-story-cover .ns09z-story-kicker{display:none !important;}
  #ns09z-story-cover .ns09z-story-title-card{
    display:block !important;
    width:auto !important;
    max-width:min(76vw,560px) !important;
    max-height:min(22vh,165px) !important;
    margin:0 auto 3px !important;
    object-fit:contain !important;
    object-position:center bottom !important;
  }
  #ns09z-story-cover .ns09z-story-title:not([hidden]){
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    font-size:clamp(2.6rem,7vw,4.2rem) !important;
    line-height:.96 !important;
    text-align:center !important;
    text-wrap:balance !important;
  }
  #ns09z-story-cover .ns09z-story-credits,
  #ns09z-story-cover .ns09z-story-meta{justify-content:center !important;}
  #ns09z-story-cover .ns09z-story-description{
    width:min(720px,100%) !important;
    max-width:100% !important;
    margin:2px auto 0 !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    overflow:hidden !important;
    font-size:.86rem !important;
    line-height:1.42 !important;
    text-align:left !important;
  }
  #ns09z-story-cover .resource-description-more{margin:0 auto 1px !important;}
  #ns09z-story-cover .ns09z-story-actions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) repeat(3,46px) !important;
    gap:8px !important;
    width:min(620px,100%) !important;
    margin:2px auto 0 !important;
  }
  #ns09z-story-cover .ns09z-story-actions button{height:46px !important;min-height:46px !important;}
  #ns09z-story-cover .ns09z-story-actions button:not(.ns09z-story-read-primary) span{
    position:absolute !important;width:1px !important;height:1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;
  }
  #ns09z-story-cover .ns09z-story-close{top:max(16px,env(safe-area-inset-top)) !important;right:max(16px,env(safe-area-inset-right)) !important;}
  #ns09z-story-cover .ns09z-story-mini-brand{top:max(21px,calc(env(safe-area-inset-top) + 2px)) !important;left:max(22px,env(safe-area-inset-left)) !important;}
}

/* Tablet/phone landscape: same cinematic hierarchy, compacted vertically. */
@media (orientation:landscape) and (max-width:1180px) and (max-height:760px){
  #ns09z-story-cover .ns09z-story-stage{
    grid-template-columns:minmax(0,1fr) !important;
    padding:max(58px,calc(env(safe-area-inset-top) + 46px)) max(30px,env(safe-area-inset-right)) max(18px,calc(env(safe-area-inset-bottom) + 14px)) max(30px,env(safe-area-inset-left)) !important;
  }
  #ns09z-story-cover .ns09z-story-copy{width:min(720px,72vw) !important;margin:0 auto 0 max(0px,calc((100vw - min(720px,72vw))/2 - 8vw)) !important;gap:5px !important;}
  #ns09z-story-cover .ns09z-story-title-card{max-width:min(52vw,500px) !important;max-height:min(24vh,120px) !important;margin:0 0 1px !important;object-position:left bottom !important;}
  #ns09z-story-cover .ns09z-story-title:not([hidden]){font-size:clamp(2rem,5vw,3.2rem) !important;text-align:left !important;}
  #ns09z-story-cover .ns09z-story-credits,
  #ns09z-story-cover .ns09z-story-meta{justify-content:flex-start !important;}
  #ns09z-story-cover .ns09z-story-description{margin:0 !important;-webkit-line-clamp:1 !important;font-size:.76rem !important;}
  #ns09z-story-cover .resource-description-more{margin:0 !important;min-height:28px !important;font-size:.62rem !important;}
  #ns09z-story-cover .ns09z-story-actions{width:min(560px,70vw) !important;margin:0 !important;grid-template-columns:minmax(0,1fr) repeat(3,42px) !important;gap:6px !important;}
  #ns09z-story-cover .ns09z-story-actions button{height:42px !important;min-height:42px !important;}
}

/* Film preview: synopsis follows the same compact preview + Read more language on phone/tablet.
   No change to film title art, playback, QR, or action hierarchy. */
@media (max-width:1180px){
  #story-modal .film-launch-description{
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    overflow:hidden !important;
    margin-bottom:0 !important;
  }
  #story-modal .film-launch-copy > .resource-description-more[data-description-kind="film"]{
    margin:0 0 2px !important;
    background:rgba(4,10,7,.28) !important;
    border-color:rgba(255,255,255,.18) !important;
  }
}
@media (orientation:landscape) and (max-width:1180px) and (max-height:700px){
  #story-modal .film-launch-description{-webkit-line-clamp:1 !important;}
  #story-modal .film-launch-copy > .resource-description-more[data-description-kind="film"]{min-height:28px !important;font-size:.62rem !important;}
}

/* Description sheet scales cleanly from phone to tablet/landscape. */
@media (min-width:701px) and (max-width:1180px){
  .story-description-modal{padding:18px !important;align-items:flex-end !important;}
  .story-description-sheet{
    width:min(720px,calc(100vw - 36px)) !important;
    max-height:min(68dvh,620px) !important;
    border-radius:22px !important;
    border-bottom:1px solid rgba(36,72,46,.12) !important;
  }
  .story-description-full{max-height:calc(68dvh - 78px) !important;font-size:.94rem !important;}
}
@media (orientation:landscape) and (max-width:1180px) and (max-height:700px){
  .story-description-modal{align-items:center !important;padding:14px !important;}
  .story-description-sheet{width:min(680px,74vw) !important;max-height:82dvh !important;border-radius:20px !important;}
  .story-description-full{max-height:calc(82dvh - 74px) !important;padding-bottom:16px !important;}
}

@media (prefers-reduced-motion:reduce){
  .resource-description-more,.story-description-more{transition:none !important;}
}


/* ===== SOURCE: assets/narraspace-mobile-film-preview-m4.css ===== */
/* NarraSpace M4 — Film preview mobile arrangement.
   Baseline: V39 + M1 + M2 + M3.
   Scope: film preview only, with a story-like mobile hierarchy. */

@media (max-width:700px) and (orientation:portrait){
  /* Film preview becomes a true full-phone cinematic cover. */
  #story-modal,
  #story-modal .document-modal[data-resource-type="film"]{
    padding:0 !important;
  }
  #story-modal .document-modal[data-resource-type="film"]{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    overflow:hidden !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .document-shell,
  #story-modal .document-modal[data-resource-type="film"] .document-viewer,
  #story-modal .document-modal[data-resource-type="film"] .preview-zoom-content,
  #story-modal .document-modal[data-resource-type="film"] #modal-film-launch{
    width:100% !important;
    height:100% !important;
    min-height:100dvh !important;
  }

  /* Keep utilities simple: More + Close stay small and neat. */
  #story-modal .document-modal[data-resource-type="film"] .document-preview-actions{
    top:max(10px,env(safe-area-inset-top)) !important;
    left:max(10px,env(safe-area-inset-left)) !important;
    right:max(10px,env(safe-area-inset-right)) !important;
    width:auto !important;
    justify-content:space-between !important;
    gap:8px !important;
    pointer-events:none !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .document-preview-actions > *{
    pointer-events:auto !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .document-preview-actions .doc-action{
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    border-radius:999px !important;
    padding:0 !important;
    background:rgba(9,16,11,.42) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    backdrop-filter:blur(9px) !important;
    -webkit-backdrop-filter:blur(9px) !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .document-preview-actions .doc-action span{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .document-preview-actions .secondary-preview-action,
  #story-modal .document-modal[data-resource-type="film"] .document-preview-actions .document-info-toggle,
  #story-modal .document-modal[data-resource-type="film"] .document-preview-actions .document-theme-toggle,
  #story-modal .document-modal[data-resource-type="film"] .document-preview-actions .preview-zoom-control{
    display:none !important;
  }

  /* The film stage itself. */
  #story-modal .document-modal[data-resource-type="film"] .film-launch-stage{
    border-radius:0 !important;
    padding:max(76px,calc(env(safe-area-inset-top) + 66px)) max(16px,env(safe-area-inset-right)) max(18px,calc(env(safe-area-inset-bottom) + 14px)) max(16px,env(safe-area-inset-left)) !important;
    align-items:end !important;
    justify-items:stretch !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-copy{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:8px !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-kicker{
    font-size:.72rem !important;
    line-height:1.1 !important;
    gap:6px !important;
  }

  /* Story-like title stage but still filmic. */
  #story-modal .document-modal[data-resource-type="film"] .film-launch-title-card{
    display:flex !important;
    align-items:flex-end !important;
    justify-content:flex-start !important;
    width:100% !important;
    min-height:88px !important;
    max-height:28vh !important;
    margin:0 0 2px !important;
    overflow:visible !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-title-card img{
    width:auto !important;
    max-width:min(84vw,320px) !important;
    max-height:min(20vh,112px) !important;
    object-fit:contain !important;
    object-position:left bottom !important;
  }
  #story-modal .document-modal[data-resource-type="film"] #modal-film-launch-title{
    width:100% !important;
    margin:0 !important;
    font-size:clamp(1.95rem,9vw,2.6rem) !important;
    line-height:.94 !important;
    text-wrap:balance !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-credit,
  #story-modal .document-modal[data-resource-type="film"] .film-launch-meta{
    width:100% !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-meta{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-description{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    overflow:hidden !important;
    font-size:.92rem !important;
    line-height:1.45 !important;
    color:rgba(255,253,244,.92) !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-copy > .resource-description-more[data-description-kind="film"]{
    margin:-1px 0 2px !important;
  }

  /* Align action hierarchy with the cleaned story preview logic. */
  #story-modal .document-modal[data-resource-type="film"] .film-launch-actions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) repeat(4,44px) !important;
    gap:8px !important;
    width:100% !important;
    align-items:center !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-play{
    min-width:0 !important;
    width:100% !important;
    height:46px !important;
    min-height:46px !important;
    border-radius:999px !important;
    justify-content:center !important;
    gap:8px !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-play .action-label{
    position:static !important;
    width:auto !important;
    height:auto !important;
    overflow:visible !important;
    clip:auto !important;
    white-space:nowrap !important;
    font-size:.86rem !important;
    font-weight:850 !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-secondary{
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 !important;
    border-radius:999px !important;
    justify-content:center !important;
    gap:0 !important;
    background:rgba(11,18,13,.36) !important;
    border:1px solid rgba(255,255,255,.14) !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-secondary span{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-secondary i,
  #story-modal .document-modal[data-resource-type="film"] .film-launch-play i{
    flex:0 0 auto !important;
  }
}

/* Tablet portrait: same cleaner arrangement, just with more room. */
@media (min-width:701px) and (max-width:1024px){
  #story-modal .document-modal[data-resource-type="film"] .film-launch-copy{
    width:min(620px,100%) !important;
    margin:0 auto !important;
    gap:8px !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-title-card{
    min-height:108px !important;
    max-height:24vh !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-title-card img{
    max-width:min(64vw,420px) !important;
    max-height:min(18vh,132px) !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-actions{
    grid-template-columns:minmax(0,1fr) repeat(4,46px) !important;
    width:min(520px,100%) !important;
  }
}

/* Short landscape phones: compact but still neat. */
@media (orientation:landscape) and (max-width:1180px) and (max-height:760px){
  #story-modal .document-modal[data-resource-type="film"] .film-launch-copy{
    width:min(520px,66vw) !important;
    gap:5px !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-title-card{
    min-height:72px !important;
    max-height:22vh !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-title-card img{
    max-width:min(42vw,360px) !important;
    max-height:min(17vh,96px) !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-description{
    -webkit-line-clamp:1 !important;
    font-size:.78rem !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-actions{
    width:min(500px,68vw) !important;
    grid-template-columns:minmax(0,1fr) repeat(4,40px) !important;
    gap:6px !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-play{
    height:42px !important; min-height:42px !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-secondary{
    width:40px !important; min-width:40px !important; height:40px !important; min-height:40px !important;
  }
}


/* ===== SOURCE: assets/narraspace-mobile-film-storymatch-m5.css ===== */
/* NarraSpace M5 — Film preview follows the approved Story preview hierarchy.
   Scope: phone portrait Film preview only. Desktop/tablet/landscape untouched.
   Reference order: title art -> credit -> meta -> short synopsis -> Read more -> primary + 3 utilities. */

@media (max-width:700px) and (orientation:portrait){
  /* The top NarraSpace Screening label already identifies the medium on phone.
     Remove the second SHORT FILM / provider line from the content block. */
  #story-modal .document-modal[data-resource-type="film"] .film-launch-kicker{
    display:none !important;
  }

  /* Make the information block read like the Story cover: centered identity,
     then left-aligned reading copy/actions. */
  #story-modal .document-modal[data-resource-type="film"] .film-launch-copy{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:8px !important;
    text-align:center !important;
  }

  /* PNG title card gets the same deliberate central stage as Story titles. */
  #story-modal .document-modal[data-resource-type="film"] .film-launch-title-card{
    width:100% !important;
    min-height:92px !important;
    max-height:24vh !important;
    margin:0 auto 2px !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    overflow:visible !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-title-card[hidden]{
    display:none !important;
    min-height:0 !important;
    margin:0 !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-title-card img{
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:min(88vw,350px) !important;
    max-height:min(19vh,122px) !important;
    margin:0 auto !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    filter:drop-shadow(0 5px 14px rgba(0,0,0,.30)) !important;
  }

  /* Text-title fallback follows the same centered title zone. */
  #story-modal .document-modal[data-resource-type="film"] #modal-film-launch-title{
    width:100% !important;
    max-width:94% !important;
    margin:0 auto !important;
    color:#fff !important;
    font-size:clamp(2rem,9.4vw,2.8rem) !important;
    line-height:.95 !important;
    font-weight:900 !important;
    letter-spacing:-.035em !important;
    text-align:center !important;
    text-wrap:balance !important;
  }

  #story-modal .document-modal[data-resource-type="film"] .film-launch-credit{
    width:100% !important;
    max-width:94% !important;
    margin:0 auto !important;
    text-align:center !important;
    line-height:1.25 !important;
  }

  #story-modal .document-modal[data-resource-type="film"] .film-launch-meta{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    text-align:center !important;
  }

  /* Synopsis remains a reading element, so keep it left aligned like Story. */
  #story-modal .document-modal[data-resource-type="film"] .film-launch-description{
    align-self:stretch !important;
    width:100% !important;
    max-width:100% !important;
    margin:1px 0 0 !important;
    text-align:left !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    overflow:hidden !important;
    font-size:.90rem !important;
    line-height:1.42 !important;
    color:rgba(255,253,244,.91) !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-copy > .resource-description-more[data-description-kind="film"]{
    align-self:flex-start !important;
    margin:-1px 0 2px !important;
  }

  /* Exact Story-like footer hierarchy:
     primary Play Film + QR + Reflect + Ask Po-opo.
     Share remains available from More rather than crowding this row. */
  #story-modal .document-modal[data-resource-type="film"] .film-launch-actions{
    align-self:stretch !important;
    width:100% !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) repeat(3,44px) !important;
    align-items:center !important;
    gap:8px !important;
    margin-top:2px !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-actions > button[onclick="shareCurrentResource()"]{
    display:none !important;
  }

  #story-modal .document-modal[data-resource-type="film"] #modal-watch-film-button{
    width:100% !important;
    min-width:0 !important;
    height:46px !important;
    min-height:46px !important;
    padding:0 18px !important;
    border-radius:999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
  }
  /* Strongly restore the label; older action-icon-only rules were hiding it. */
  #story-modal .document-modal[data-resource-type="film"] #modal-watch-film-button .action-label{
    display:inline !important;
    position:static !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    clip:auto !important;
    clip-path:none !important;
    white-space:nowrap !important;
    opacity:1 !important;
    visibility:visible !important;
    font-size:.86rem !important;
    font-weight:900 !important;
    line-height:1 !important;
  }

  #story-modal .document-modal[data-resource-type="film"] .film-launch-secondary{
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 !important;
    border-radius:999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-secondary span{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-secondary svg,
  #story-modal .document-modal[data-resource-type="film"] #modal-watch-film-button svg{
    width:20px !important;
    height:20px !important;
    flex:0 0 20px !important;
  }

  /* Slightly more bottom breathing room so browser chrome does not crowd actions. */
  #story-modal .document-modal[data-resource-type="film"] .film-launch-stage{
    padding-bottom:max(22px,calc(env(safe-area-inset-bottom) + 18px)) !important;
  }
}


/* ===== SOURCE: assets/narraspace-mobile-film-final-m6.css ===== */
/* NarraSpace M6 — Film Preview Mobile Portrait + Landscape Final Alignment
   Goal: make Film preview follow the approved Story preview hierarchy.
   Scope: Film preview only on mobile portrait + mobile landscape.
   Story, desktop, admin, music, reflection remain untouched. */

/* Shared mobile film cleanup */
@media (max-width: 1180px){
  /* Remove the visible top-left 3-dot button from film preview mobile UI. */
  #story-modal .document-modal[data-resource-type="film"] #modal-more-tools-btn{
    display:none !important;
  }
}

/* PHONE PORTRAIT — match Story hierarchy */
@media (max-width:700px) and (orientation:portrait){
  /* Keep only the close button on the top edge. */
  #story-modal .document-modal[data-resource-type="film"] .document-preview-actions{
    left:auto !important;
    right:max(10px,env(safe-area-inset-right)) !important;
    width:auto !important;
    justify-content:flex-end !important;
    gap:0 !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .document-preview-actions .doc-action:not(.square){
    display:none !important;
  }

  /* Make the overall stage breathe like Story. */
  #story-modal .document-modal[data-resource-type="film"] .film-launch-stage{
    padding:max(64px,calc(env(safe-area-inset-top) + 54px)) max(16px,env(safe-area-inset-right)) max(22px,calc(env(safe-area-inset-bottom) + 18px)) max(16px,env(safe-area-inset-left)) !important;
    align-items:end !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-copy{
    max-width:460px !important;
    margin:0 auto !important;
    gap:7px !important;
  }

  /* Subtle stronger floor gradient so the copy zone reads clearly over art. */
  #story-modal .document-modal[data-resource-type="film"] .film-launch-stage::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:44%;
    pointer-events:none;
    background:linear-gradient(to top, rgba(5,8,7,.78) 0%, rgba(5,8,7,.42) 38%, rgba(5,8,7,0) 100%);
    z-index:0;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-art,
  #story-modal .document-modal[data-resource-type="film"] .film-launch-copy{
    position:relative;
    z-index:1;
  }

  /* Title stage behaves like Story: deliberate, centered, not drifting. */
  #story-modal .document-modal[data-resource-type="film"] .film-launch-title-card{
    min-height:84px !important;
    max-height:19vh !important;
    margin:0 auto 1px !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-title-card img{
    max-width:min(86vw,330px) !important;
    max-height:min(16vh,104px) !important;
    object-position:center bottom !important;
  }
  #story-modal .document-modal[data-resource-type="film"] #modal-film-launch-title{
    max-width:92% !important;
    font-size:clamp(1.85rem,8.6vw,2.55rem) !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-credit{
    max-width:96% !important;
    font-size:1rem !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-meta{
    max-width:100% !important;
    row-gap:7px !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-description{
    margin-top:2px !important;
    font-size:.92rem !important;
    line-height:1.4 !important;
    -webkit-line-clamp:2 !important;
  }

  /* Read-more as a compact designed pill aligned with the reading copy. */
  #story-modal .document-modal[data-resource-type="film"] .film-launch-copy > .resource-description-more[data-description-kind="film"]{
    align-self:flex-start !important;
    margin:0 0 3px !important;
  }

  /* Story-like footer: one strong CTA + three clean circular tools. */
  #story-modal .document-modal[data-resource-type="film"] .film-launch-actions{
    grid-template-columns:minmax(0,1fr) repeat(3,44px) !important;
    gap:8px !important;
    margin-top:3px !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-actions > button[onclick="shareCurrentResource()"]{
    display:none !important;
  }
  #story-modal .document-modal[data-resource-type="film"] #modal-watch-film-button{
    box-shadow:none !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-secondary{
    background:rgba(18,21,18,.46) !important;
    border:1px solid rgba(255,255,255,.14) !important;
  }
}

/* MOBILE LANDSCAPE — dedicated compact composition, not squeezed portrait */
@media (orientation:landscape) and (max-width:1180px) and (max-height:760px){
  /* Full-bleed film preview still, but with a compact left copy block. */
  #story-modal,
  #story-modal .document-modal[data-resource-type="film"]{
    padding:0 !important;
  }
  #story-modal .document-modal[data-resource-type="film"]{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    overflow:hidden !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .document-shell,
  #story-modal .document-modal[data-resource-type="film"] .document-viewer,
  #story-modal .document-modal[data-resource-type="film"] .preview-zoom-content,
  #story-modal .document-modal[data-resource-type="film"] #modal-film-launch{
    width:100% !important;
    height:100% !important;
    min-height:100dvh !important;
  }

  /* Only keep close at the top-right. */
  #story-modal .document-modal[data-resource-type="film"] .document-preview-actions{
    top:max(8px,env(safe-area-inset-top)) !important;
    left:auto !important;
    right:max(10px,env(safe-area-inset-right)) !important;
    width:auto !important;
    gap:0 !important;
    justify-content:flex-end !important;
    pointer-events:none !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .document-preview-actions > *{
    pointer-events:auto !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .document-preview-actions .doc-action:not(.square){
    display:none !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .document-preview-actions .doc-action.square{
    width:40px !important;
    min-width:40px !important;
    height:40px !important;
    min-height:40px !important;
    border-radius:999px !important;
    background:rgba(9,16,11,.38) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    backdrop-filter:blur(8px) !important;
  }

  /* Build a true landscape copy composition. */
  #story-modal .document-modal[data-resource-type="film"] .film-launch-stage{
    position:relative !important;
    padding:max(16px,calc(env(safe-area-inset-top) + 10px)) max(14px,env(safe-area-inset-right)) max(14px,calc(env(safe-area-inset-bottom) + 10px)) max(14px,env(safe-area-inset-left)) !important;
    align-items:end !important;
    justify-items:start !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-stage::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(7,11,9,.76) 0%, rgba(7,11,9,.58) 34%, rgba(7,11,9,.22) 58%, rgba(7,11,9,0) 78%),
               linear-gradient(0deg, rgba(7,11,9,.56) 0%, rgba(7,11,9,0) 46%);
    pointer-events:none;
    z-index:0;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-art,
  #story-modal .document-modal[data-resource-type="film"] .film-launch-copy{
    position:relative;
    z-index:1;
  }

  #story-modal .document-modal[data-resource-type="film"] .film-launch-kicker{
    display:none !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-copy{
    width:min(430px,52vw) !important;
    max-width:min(430px,52vw) !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:5px !important;
    text-align:center !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-title-card{
    width:100% !important;
    min-height:56px !important;
    max-height:17vh !important;
    margin:0 auto 1px !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-title-card img{
    max-width:min(46vw,360px) !important;
    max-height:min(14vh,82px) !important;
    object-fit:contain !important;
    object-position:center bottom !important;
  }
  #story-modal .document-modal[data-resource-type="film"] #modal-film-launch-title{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    font-size:clamp(1.55rem,4.2vw,2.15rem) !important;
    line-height:.96 !important;
    text-align:center !important;
    text-wrap:balance !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-credit{
    width:100% !important;
    margin:0 auto !important;
    text-align:center !important;
    font-size:.82rem !important;
    line-height:1.2 !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-meta{
    width:100% !important;
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:5px !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-description{
    align-self:stretch !important;
    width:100% !important;
    margin:1px 0 0 !important;
    text-align:left !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    overflow:hidden !important;
    font-size:.76rem !important;
    line-height:1.34 !important;
    max-height:none !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-copy > .resource-description-more[data-description-kind="film"]{
    align-self:flex-start !important;
    margin:0 0 2px !important;
  }

  /* Compact action system with no vertical label bleed. */
  #story-modal .document-modal[data-resource-type="film"] .film-launch-actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) repeat(3,40px) !important;
    align-items:center !important;
    gap:7px !important;
    margin-top:2px !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-actions > button[onclick="shareCurrentResource()"]{
    display:none !important;
  }
  #story-modal .document-modal[data-resource-type="film"] #modal-watch-film-button{
    width:100% !important;
    min-width:0 !important;
    height:40px !important;
    min-height:40px !important;
    padding:0 14px !important;
    border-radius:999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
  }
  #story-modal .document-modal[data-resource-type="film"] #modal-watch-film-button .action-label{
    display:inline !important;
    position:static !important;
    width:auto !important;
    height:auto !important;
    overflow:visible !important;
    clip:auto !important;
    clip-path:none !important;
    white-space:nowrap !important;
    font-size:.78rem !important;
    line-height:1 !important;
    font-weight:900 !important;
    opacity:1 !important;
    visibility:visible !important;
    margin:0 !important;
    padding:0 !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-secondary{
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    height:40px !important;
    min-height:40px !important;
    border-radius:999px !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    background:rgba(14,18,16,.44) !important;
    border:1px solid rgba(255,255,255,.12) !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-secondary span{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-secondary svg,
  #story-modal .document-modal[data-resource-type="film"] #modal-watch-film-button svg{
    width:18px !important;
    height:18px !important;
    flex:0 0 18px !important;
  }
}


/* ===== SOURCE: assets/narraspace-mobile-film-landscape-m7.css ===== */
/* NarraSpace M7 — Film mobile final cleanup.
   Portrait remains visually frozen from M6.
   Changes: hard-remove Film More button on mobile + compact landscape-only composition. */

/* Redundant safety for the runtime removal. */
@media (max-width:1180px){
  #story-modal .document-modal[data-resource-type="film"] #modal-more-tools-btn,
  #story-modal .document-modal:has(#modal-film-launch:not([hidden])) #modal-more-tools-btn{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}

/* LANDSCAPE PHONE ONLY */
@media (orientation:landscape) and (max-width:1180px) and (max-height:760px){
  /* Keep the close control clean and out of the composition. */
  #story-modal .document-modal[data-resource-type="film"] .document-preview-actions{
    top:max(8px,env(safe-area-inset-top)) !important;
    right:max(10px,env(safe-area-inset-right)) !important;
    left:auto !important;
    width:auto !important;
    justify-content:flex-end !important;
    gap:0 !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .document-preview-actions .doc-action:not(.square){
    display:none !important;
  }

  /* Compact Story-inspired film copy zone. */
  #story-modal .document-modal[data-resource-type="film"] .film-launch-stage{
    padding:max(12px,calc(env(safe-area-inset-top) + 8px)) max(16px,env(safe-area-inset-right)) max(12px,calc(env(safe-area-inset-bottom) + 8px)) max(18px,env(safe-area-inset-left)) !important;
    align-items:end !important;
    justify-items:start !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-stage::after{
    background:
      linear-gradient(90deg,rgba(5,9,7,.82) 0%,rgba(5,9,7,.68) 27%,rgba(5,9,7,.34) 47%,rgba(5,9,7,.05) 70%,rgba(5,9,7,0) 100%),
      linear-gradient(0deg,rgba(5,9,7,.76) 0%,rgba(5,9,7,.30) 28%,rgba(5,9,7,0) 56%) !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-copy{
    width:min(455px,49vw) !important;
    max-width:min(455px,49vw) !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:4px !important;
    text-align:center !important;
  }

  /* Title is important but must not consume the whole phone height. */
  #story-modal .document-modal[data-resource-type="film"] .film-launch-title-card{
    width:100% !important;
    min-height:48px !important;
    max-height:15vh !important;
    margin:0 auto !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-title-card[hidden]{
    display:none !important;
    min-height:0 !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-title-card img{
    width:auto !important;
    height:auto !important;
    max-width:min(42vw,345px) !important;
    max-height:min(13vh,74px) !important;
    object-fit:contain !important;
    object-position:center bottom !important;
  }
  #story-modal .document-modal[data-resource-type="film"] #modal-film-launch-title{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    font-size:clamp(1.4rem,3.5vw,1.95rem) !important;
    line-height:.95 !important;
    text-align:center !important;
    text-wrap:balance !important;
  }

  /* Credit and only the three most useful metadata chips. */
  #story-modal .document-modal[data-resource-type="film"] .film-launch-credit{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    font-size:.72rem !important;
    line-height:1.14 !important;
    text-align:center !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-meta{
    width:100% !important;
    margin:1px 0 0 !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:center !important;
    gap:4px !important;
    overflow:hidden !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-meta > span:nth-child(n+4){
    display:none !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-meta > span{
    min-height:30px !important;
    padding:0 9px !important;
    font-size:.66rem !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  /* Synopsis stays useful but never pushes controls out of view. */
  #story-modal .document-modal[data-resource-type="film"] .film-launch-description{
    align-self:stretch !important;
    width:100% !important;
    margin:1px 0 0 !important;
    font-size:.69rem !important;
    line-height:1.25 !important;
    text-align:left !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:1 !important;
    overflow:hidden !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-copy > .resource-description-more[data-description-kind="film"]{
    align-self:flex-start !important;
    min-height:25px !important;
    margin:0 !important;
    padding:0 7px !important;
    font-size:.57rem !important;
    gap:4px !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-copy > .resource-description-more[data-description-kind="film"] svg{
    width:10px !important;
    height:10px !important;
  }

  /* The action row must always remain fully visible. */
  #story-modal .document-modal[data-resource-type="film"] .film-launch-actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) repeat(3,38px) !important;
    align-items:center !important;
    gap:6px !important;
    margin-top:1px !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-actions > button[onclick="shareCurrentResource()"]{
    display:none !important;
  }
  #story-modal .document-modal[data-resource-type="film"] #modal-watch-film-button{
    width:100% !important;
    min-width:0 !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 12px !important;
    border-radius:999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
  }
  #story-modal .document-modal[data-resource-type="film"] #modal-watch-film-button .action-label{
    display:inline !important;
    position:static !important;
    width:auto !important;
    height:auto !important;
    overflow:visible !important;
    clip:auto !important;
    clip-path:none !important;
    white-space:nowrap !important;
    font-size:.72rem !important;
    font-weight:900 !important;
    line-height:1 !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-secondary{
    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 !important;
    border-radius:999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-secondary span{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
  }
  #story-modal .document-modal[data-resource-type="film"] .film-launch-secondary svg,
  #story-modal .document-modal[data-resource-type="film"] #modal-watch-film-button svg{
    width:17px !important;
    height:17px !important;
    flex:0 0 17px !important;
  }
}


/* ===== SOURCE: assets/narraspace-mobile-film-smallphones-m8.css ===== */
/* NarraSpace M8 — Small-phone Film preview cleanup
   Scope: film preview only, with special handling for short-phone landscape.
   Goals:
   1) hard-remove the 3-dot More button in film preview on small/mobile screens
   2) hide the underlying public navbar/header in short landscape phones
   3) give short landscape phones a compact, story-like copy layout
   4) preserve the already approved portrait arrangement as much as possible */

/* Universal safety: if film preview is active on a small/mobile screen, kill the More button. */
@media (max-width: 1180px){
  body.ns-m8-film-mobile-active #story-modal #modal-more-tools-btn,
  #story-modal .document-modal[data-resource-type="film"] #modal-more-tools-btn,
  #story-modal .document-modal:has(#modal-film-launch:not([hidden])) #modal-more-tools-btn{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
    width:0 !important;
    min-width:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    overflow:hidden !important;
  }
}

/* Short phones in landscape need their own rule set.
   This covers iPhone X/XS/11 Pro style viewports and similarly short Android landscape windows. */
@media (orientation: landscape) and (max-width: 980px) and (max-height: 500px){
  body.ns-m8-film-short-landscape #app > nav.navbar,
  body.ns-m8-film-short-landscape .navbar,
  body.ns-m8-film-short-landscape #nav-links,
  body.ns-m8-film-short-landscape .small-device-nav-toggle,
  body.ns-m8-film-short-landscape .small-device-nav,
  body.ns-m8-film-short-landscape .floating-mobile-nav,
  body.ns-m8-film-short-landscape .tablet-nav-chip,
  body.ns-m8-film-short-landscape .tablet-nav,
  body.ns-m8-film-short-landscape .public-topbar,
  body.ns-m8-film-short-landscape .portal-links-fab{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  body.ns-m8-film-short-landscape #story-modal{
    inset:0 !important;
    z-index:99999 !important;
    background:rgba(4,7,6,.96) !important;
  }

  body.ns-m8-film-short-landscape #story-modal .document-modal{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    overflow:hidden !important;
  }

  /* Keep only the close button in the upper-right. */
  body.ns-m8-film-short-landscape #story-modal .document-preview-actions,
  body.ns-m8-film-short-landscape #story-modal .document-actions{
    top:max(8px,env(safe-area-inset-top)) !important;
    right:max(10px,env(safe-area-inset-right)) !important;
    left:auto !important;
    width:auto !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:0 !important;
    pointer-events:none !important;
    z-index:6 !important;
  }
  body.ns-m8-film-short-landscape #story-modal .document-preview-actions > *,
  body.ns-m8-film-short-landscape #story-modal .document-actions > *{
    pointer-events:auto !important;
  }
  body.ns-m8-film-short-landscape #story-modal .document-preview-actions .doc-action:not(.square),
  body.ns-m8-film-short-landscape #story-modal .document-actions .doc-action:not(.square){
    display:none !important;
  }
  body.ns-m8-film-short-landscape #story-modal .document-preview-actions .doc-action.square,
  body.ns-m8-film-short-landscape #story-modal .document-actions .doc-action.square{
    width:40px !important;
    min-width:40px !important;
    height:40px !important;
    min-height:40px !important;
    border-radius:999px !important;
    background:rgba(9,15,12,.40) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    backdrop-filter:blur(8px) !important;
  }

  /* The generic info panes should not compete with the cinematic film cover. */
  body.ns-m8-film-short-landscape #story-modal .document-toolbar,
  body.ns-m8-film-short-landscape #story-modal .document-info,
  body.ns-m8-film-short-landscape #story-modal .document-sidebar,
  body.ns-m8-film-short-landscape #story-modal #modal-resource-details,
  body.ns-m8-film-short-landscape #story-modal .creator-protection-notice{
    display:none !important;
  }

  body.ns-m8-film-short-landscape #story-modal .document-shell,
  body.ns-m8-film-short-landscape #story-modal .document-viewer,
  body.ns-m8-film-short-landscape #story-modal .preview-zoom-content,
  body.ns-m8-film-short-landscape #story-modal #modal-film-launch,
  body.ns-m8-film-short-landscape #story-modal .film-launch-stage{
    width:100% !important;
    height:100% !important;
    min-height:100dvh !important;
  }

  body.ns-m8-film-short-landscape #story-modal .film-launch-stage{
    position:relative !important;
    padding:max(14px,calc(env(safe-area-inset-top) + 8px)) max(14px,env(safe-area-inset-right)) max(14px,calc(env(safe-area-inset-bottom) + 10px)) max(16px,env(safe-area-inset-left)) !important;
    align-items:end !important;
    justify-items:start !important;
  }
  body.ns-m8-film-short-landscape #story-modal .film-launch-stage::after{
    content:"";
    position:absolute;
    inset:0 !important;
    background:
      linear-gradient(90deg, rgba(5,9,7,.88) 0%, rgba(5,9,7,.76) 28%, rgba(5,9,7,.42) 54%, rgba(5,9,7,.10) 76%, rgba(5,9,7,0) 100%),
      linear-gradient(0deg, rgba(5,9,7,.70) 0%, rgba(5,9,7,.22) 32%, rgba(5,9,7,0) 58%) !important;
    pointer-events:none !important;
    z-index:0 !important;
  }
  body.ns-m8-film-short-landscape #story-modal .film-launch-art,
  body.ns-m8-film-short-landscape #story-modal .film-launch-copy{
    position:relative !important;
    z-index:1 !important;
  }

  /* Story-like compact copy block on the left. */
  body.ns-m8-film-short-landscape #story-modal .film-launch-copy{
    width:min(360px,52vw) !important;
    max-width:min(360px,52vw) !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    text-align:left !important;
    gap:6px !important;
  }
  body.ns-m8-film-short-landscape #story-modal .film-launch-kicker{
    display:flex !important;
    font-size:.66rem !important;
    line-height:1 !important;
    letter-spacing:.08em !important;
    opacity:.94 !important;
    margin:0 !important;
  }
  body.ns-m8-film-short-landscape #story-modal .film-launch-title-card{
    width:100% !important;
    min-height:44px !important;
    max-height:15vh !important;
    margin:0 !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:flex-start !important;
  }
  body.ns-m8-film-short-landscape #story-modal .film-launch-title-card img{
    width:auto !important;
    height:auto !important;
    max-width:min(34vw,270px) !important;
    max-height:min(12vh,56px) !important;
    object-fit:contain !important;
    object-position:left bottom !important;
  }
  body.ns-m8-film-short-landscape #story-modal #modal-film-launch-title{
    width:100% !important;
    margin:0 !important;
    font-size:clamp(1.18rem,3vw,1.72rem) !important;
    line-height:.96 !important;
    text-align:left !important;
    text-wrap:balance !important;
  }
  body.ns-m8-film-short-landscape #story-modal .film-launch-credit{
    width:100% !important;
    margin:0 !important;
    font-size:.80rem !important;
    line-height:1.18 !important;
    text-align:left !important;
  }
  body.ns-m8-film-short-landscape #story-modal .film-launch-meta{
    width:100% !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    gap:6px !important;
    overflow:hidden !important;
    margin:0 !important;
  }
  body.ns-m8-film-short-landscape #story-modal .film-launch-meta > span:nth-child(n+5){
    display:none !important;
  }
  body.ns-m8-film-short-landscape #story-modal .film-launch-meta > span{
    min-height:30px !important;
    padding:0 10px !important;
    font-size:.66rem !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
  body.ns-m8-film-short-landscape #story-modal .film-launch-description{
    width:100% !important;
    margin:0 !important;
    font-size:.72rem !important;
    line-height:1.28 !important;
    text-align:left !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    overflow:hidden !important;
    max-width:100% !important;
  }
  body.ns-m8-film-short-landscape #story-modal .film-launch-copy > .resource-description-more[data-description-kind="film"]{
    align-self:flex-start !important;
    min-height:26px !important;
    margin:0 !important;
    padding:0 8px !important;
    font-size:.62rem !important;
    gap:4px !important;
  }
  body.ns-m8-film-short-landscape #story-modal .film-launch-copy > .resource-description-more[data-description-kind="film"] svg{
    width:10px !important;
    height:10px !important;
  }

  /* Stable action row with one primary CTA and three tools. */
  body.ns-m8-film-short-landscape #story-modal .film-launch-actions{
    width:min(334px,100%) !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) repeat(3,38px) !important;
    align-items:center !important;
    gap:8px !important;
    margin-top:2px !important;
  }
  body.ns-m8-film-short-landscape #story-modal .film-launch-actions > button[onclick="shareCurrentResource()"]{
    display:none !important;
  }
  body.ns-m8-film-short-landscape #story-modal #modal-watch-film-button{
    width:100% !important;
    min-width:0 !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 14px !important;
    border-radius:999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
  }
  body.ns-m8-film-short-landscape #story-modal #modal-watch-film-button .action-label{
    display:inline !important;
    position:static !important;
    width:auto !important;
    height:auto !important;
    overflow:visible !important;
    clip:auto !important;
    clip-path:none !important;
    white-space:nowrap !important;
    font-size:.76rem !important;
    line-height:1 !important;
    font-weight:900 !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  body.ns-m8-film-short-landscape #story-modal .film-launch-secondary{
    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 !important;
    border-radius:999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    background:rgba(14,18,16,.48) !important;
    border:1px solid rgba(255,255,255,.12) !important;
  }
  body.ns-m8-film-short-landscape #story-modal .film-launch-secondary span{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
  }
  body.ns-m8-film-short-landscape #story-modal .film-launch-secondary svg,
  body.ns-m8-film-short-landscape #story-modal #modal-watch-film-button svg{
    width:17px !important;
    height:17px !important;
    flex:0 0 17px !important;
  }
}


/* ===== SOURCE: assets/narraspace-mobile-film-landscape-m9.css ===== */
/* NarraSpace M9 — Film landscape mobile shell + composition fix.
   Scope: Film preview in mobile landscape only. Portrait remains untouched.
   This file is intentionally last in the cascade. */

@media (orientation:landscape) and (max-width:1180px) and (max-height:760px){
  /* 1. Film preview owns the entire browser content viewport. */
  body.ns-m8-film-mobile-active #story-modal{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100vh !important;
    height:100dvh !important;
    min-height:100% !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    overflow:hidden !important;
    background:#020504 !important;
    z-index:99999 !important;
    box-sizing:border-box !important;
  }

  body.ns-m8-film-mobile-active #story-modal .document-modal[data-resource-type="film"]{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100vh !important;
    height:100dvh !important;
    min-height:100% !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    overflow:hidden !important;
    box-shadow:none !important;
    box-sizing:border-box !important;
  }

  /* Eliminate every older 16:9 / centered-document constraint. */
  body.ns-m8-film-mobile-active #story-modal .document-modal[data-resource-type="film"] .document-shell,
  body.ns-m8-film-mobile-active #story-modal .document-modal[data-resource-type="film"] .document-viewer,
  body.ns-m8-film-mobile-active #story-modal .document-modal[data-resource-type="film"] .preview-zoom-content,
  body.ns-m8-film-mobile-active #story-modal .document-modal[data-resource-type="film"] #modal-film-launch,
  body.ns-m8-film-mobile-active #story-modal .document-modal[data-resource-type="film"] .film-launch-stage{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    aspect-ratio:auto !important;
    border:0 !important;
    border-radius:0 !important;
    overflow:hidden !important;
    transform:none !important;
    box-sizing:border-box !important;
  }

  body.ns-m8-film-mobile-active #story-modal .document-modal[data-resource-type="film"] .document-viewer{
    display:block !important;
    place-items:unset !important;
    background:#020504 !important;
  }

  /* 2. Top screening bar: identity + close only. */
  body.ns-m8-film-mobile-active #story-modal .document-modal[data-resource-type="film"] .document-topbar{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:20 !important;
    min-height:54px !important;
    height:54px !important;
    padding:8px max(12px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left)) !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    background:linear-gradient(180deg,rgba(2,6,4,.62),rgba(2,6,4,0)) !important;
    border:0 !important;
    box-shadow:none !important;
    pointer-events:none !important;
    box-sizing:border-box !important;
  }
  body.ns-m8-film-mobile-active #story-modal .document-modal[data-resource-type="film"] .document-topbar::before{
    min-height:0 !important;
    font-size:.68rem !important;
    letter-spacing:.11em !important;
    pointer-events:none !important;
  }
  body.ns-m8-film-mobile-active #story-modal .document-modal[data-resource-type="film"] .document-title-wrap{
    display:none !important;
  }
  body.ns-m8-film-mobile-active #story-modal .document-modal[data-resource-type="film"] .document-actions{
    position:static !important;
    width:auto !important;
    height:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:0 !important;
    padding:0 !important;
    margin:0 !important;
    background:none !important;
    border:0 !important;
    pointer-events:auto !important;
  }
  body.ns-m8-film-mobile-active #story-modal .document-modal[data-resource-type="film"] .document-actions > *{
    display:none !important;
  }
  body.ns-m8-film-mobile-active #story-modal .document-modal[data-resource-type="film"] .document-actions > .doc-action.square{
    display:grid !important;
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    padding:0 !important;
    border-radius:999px !important;
    background:rgba(7,12,9,.42) !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.13) !important;
    backdrop-filter:blur(8px) !important;
  }
  body.ns-m8-film-mobile-active #story-modal #modal-more-tools-btn{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  /* 3. Remove generic document UI completely in film landscape. */
  body.ns-m8-film-mobile-active #story-modal .document-toolbar,
  body.ns-m8-film-mobile-active #story-modal .document-info,
  body.ns-m8-film-mobile-active #story-modal .modal-mobile-note,
  body.ns-m8-film-mobile-active #story-modal .creator-protection-notice{
    display:none !important;
  }

  /* 4. Film art is truly full-bleed. */
  body.ns-m8-film-mobile-active #story-modal .film-launch-stage{
    isolation:isolate !important;
    background:#020504 !important;
  }
  body.ns-m8-film-mobile-active #story-modal .film-launch-art{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    background-size:cover !important;
    background-position:center center !important;
    transform:scale(1.008) !important;
    filter:saturate(1.02) contrast(1.02) !important;
    z-index:0 !important;
  }
  body.ns-m8-film-mobile-active #story-modal .film-launch-art::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background:
      linear-gradient(90deg,rgba(3,7,5,.88) 0%,rgba(3,7,5,.72) 25%,rgba(3,7,5,.36) 50%,rgba(3,7,5,.08) 72%,rgba(3,7,5,0) 100%),
      linear-gradient(0deg,rgba(3,7,5,.70) 0%,rgba(3,7,5,.22) 30%,rgba(3,7,5,0) 58%) !important;
    z-index:1 !important;
  }

  /* 5. Independent lower-left story-like information block. */
  body.ns-m8-film-mobile-active #story-modal .film-launch-copy{
    position:absolute !important;
    z-index:4 !important;
    left:max(18px,env(safe-area-inset-left)) !important;
    right:auto !important;
    bottom:max(14px,calc(env(safe-area-inset-bottom) + 10px)) !important;
    width:min(430px,47vw) !important;
    max-width:min(430px,47vw) !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:5px !important;
    text-align:center !important;
    color:#fff !important;
    background:none !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    text-shadow:0 2px 14px rgba(0,0,0,.55) !important;
  }

  /* Top bar already says NarraSpace Screening. */
  body.ns-m8-film-mobile-active #story-modal .film-launch-kicker{
    display:none !important;
  }

  body.ns-m8-film-mobile-active #story-modal .film-launch-title-card{
    display:flex !important;
    width:100% !important;
    min-height:44px !important;
    max-height:15vh !important;
    margin:0 !important;
    align-items:flex-end !important;
    justify-content:center !important;
    overflow:visible !important;
  }
  body.ns-m8-film-mobile-active #story-modal .film-launch-title-card[hidden]{
    display:none !important;
    min-height:0 !important;
  }
  body.ns-m8-film-mobile-active #story-modal .film-launch-title-card img{
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:min(38vw,330px) !important;
    max-height:min(13vh,72px) !important;
    margin:0 auto !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    filter:drop-shadow(0 5px 16px rgba(0,0,0,.35)) !important;
  }
  body.ns-m8-film-mobile-active #story-modal #modal-film-launch-title{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    font-size:clamp(1.35rem,3.6vw,2rem) !important;
    line-height:.95 !important;
    text-align:center !important;
    text-wrap:balance !important;
  }
  body.ns-m8-film-mobile-active #story-modal .film-launch-credit{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    font-size:.76rem !important;
    line-height:1.16 !important;
    text-align:center !important;
  }
  body.ns-m8-film-mobile-active #story-modal .film-launch-meta{
    width:100% !important;
    margin:0 !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:center !important;
    align-items:center !important;
    gap:5px !important;
    overflow:hidden !important;
  }
  body.ns-m8-film-mobile-active #story-modal .film-launch-meta > span:nth-child(n+4){
    display:none !important;
  }
  body.ns-m8-film-mobile-active #story-modal .film-launch-meta > span{
    min-height:28px !important;
    height:28px !important;
    padding:0 9px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:.64rem !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  body.ns-m8-film-mobile-active #story-modal .film-launch-description{
    align-self:stretch !important;
    width:100% !important;
    max-width:100% !important;
    margin:1px 0 0 !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    overflow:hidden !important;
    font-size:.72rem !important;
    line-height:1.28 !important;
    text-align:left !important;
    color:rgba(255,255,255,.90) !important;
  }
  body.ns-m8-film-mobile-active #story-modal .film-launch-copy > .resource-description-more[data-description-kind="film"]{
    align-self:flex-start !important;
    min-height:25px !important;
    height:25px !important;
    margin:0 !important;
    padding:0 8px !important;
    gap:4px !important;
    font-size:.59rem !important;
    border-radius:999px !important;
  }
  body.ns-m8-film-mobile-active #story-modal .film-launch-copy > .resource-description-more[data-description-kind="film"] svg{
    width:10px !important;
    height:10px !important;
  }

  /* One large action + QR + Reflect + Po-opo. */
  body.ns-m8-film-mobile-active #story-modal .film-launch-actions{
    align-self:stretch !important;
    width:100% !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) repeat(3,38px) !important;
    gap:7px !important;
    align-items:center !important;
    margin:1px 0 0 !important;
  }
  body.ns-m8-film-mobile-active #story-modal .film-launch-actions > button[onclick="shareCurrentResource()"]{
    display:none !important;
  }
  body.ns-m8-film-mobile-active #story-modal #modal-watch-film-button{
    width:100% !important;
    min-width:0 !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 13px !important;
    border-radius:999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
  }
  body.ns-m8-film-mobile-active #story-modal #modal-watch-film-button .action-label{
    display:inline !important;
    position:static !important;
    width:auto !important;
    height:auto !important;
    overflow:visible !important;
    clip:auto !important;
    clip-path:none !important;
    opacity:1 !important;
    visibility:visible !important;
    white-space:nowrap !important;
    font-size:.74rem !important;
    font-weight:900 !important;
    line-height:1 !important;
  }
  body.ns-m8-film-mobile-active #story-modal .film-launch-secondary{
    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 !important;
    border-radius:999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    background:rgba(10,15,12,.48) !important;
    border:1px solid rgba(255,255,255,.13) !important;
  }
  body.ns-m8-film-mobile-active #story-modal .film-launch-secondary span{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
  }
  body.ns-m8-film-mobile-active #story-modal .film-launch-secondary svg,
  body.ns-m8-film-mobile-active #story-modal #modal-watch-film-button svg{
    width:17px !important;
    height:17px !important;
    flex:0 0 17px !important;
  }
}

/* Extra-short landscape phones: trim vertically without breaking hierarchy. */
@media (orientation:landscape) and (max-width:980px) and (max-height:430px){
  body.ns-m8-film-mobile-active #story-modal .film-launch-copy{
    bottom:max(10px,calc(env(safe-area-inset-bottom) + 6px)) !important;
    width:min(370px,49vw) !important;
    max-width:min(370px,49vw) !important;
    gap:4px !important;
  }
  body.ns-m8-film-mobile-active #story-modal .film-launch-title-card{
    min-height:36px !important;
    max-height:13vh !important;
  }
  body.ns-m8-film-mobile-active #story-modal .film-launch-title-card img{
    max-width:min(34vw,270px) !important;
    max-height:min(11vh,52px) !important;
  }
  body.ns-m8-film-mobile-active #story-modal .film-launch-credit{
    font-size:.68rem !important;
  }
  body.ns-m8-film-mobile-active #story-modal .film-launch-meta > span{
    min-height:25px !important;
    height:25px !important;
    padding:0 7px !important;
    font-size:.58rem !important;
  }
  body.ns-m8-film-mobile-active #story-modal .film-launch-description{
    -webkit-line-clamp:1 !important;
    font-size:.66rem !important;
  }
  body.ns-m8-film-mobile-active #story-modal .film-launch-copy > .resource-description-more[data-description-kind="film"]{
    min-height:23px !important;
    height:23px !important;
    font-size:.55rem !important;
  }
  body.ns-m8-film-mobile-active #story-modal .film-launch-actions{
    grid-template-columns:minmax(0,1fr) repeat(3,35px) !important;
    gap:6px !important;
  }
  body.ns-m8-film-mobile-active #story-modal #modal-watch-film-button{
    height:35px !important;
    min-height:35px !important;
  }
  body.ns-m8-film-mobile-active #story-modal .film-launch-secondary{
    width:35px !important;
    min-width:35px !important;
    max-width:35px !important;
    height:35px !important;
    min-height:35px !important;
  }
}



/* ===== NarraSpace Reflection QA | 2026-09-16 =====
   Applies to story, film, and music reflection states. */
#review-modal .review-modal-head{
  position:relative !important;
}
#review-modal #review-modal-title{
  color:#fff !important;
  background:transparent !important;
  -webkit-text-fill-color:#fff !important;
  text-shadow:none !important;
  user-select:none !important;
  -webkit-user-select:none !important;
}
#review-modal #review-modal-title::selection{
  color:#fff !important;
  background:rgba(242,207,89,.26) !important;
}
#review-modal .close-btn{
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  line-height:1 !important;
  text-align:center !important;
}
#review-modal .close-btn svg,
#review-modal .close-btn i,
#review-modal .close-btn > *{
  display:block !important;
  margin:0 !important;
  transform:none !important;
  flex:none !important;
}


/* ===== ACTIVE SOURCE: assets/narraspace-music-launch-final-20260916d.css ===== */
/* NarraSpace Music Launch Bundle | 2026-09-15
   Consolidated from the exact active Music CSS files in production order.
   No rule reordering; boundaries retained below for auditability. */

/* ===== SOURCE: assets/narraspace-music-final-v1.css ===== */
/* NarraSpace Music Final V1 — 2026-09-13
   Authoritative Listening Room layer.
   Scope: public Music player only. Does not touch Story, Film, Admin, Po-opo, or archive cards. */

#music-player-modal.music-player-modal{
  --ns-music-gold:#f2cf59;
  --ns-music-ink:#07120c;
  --ns-music-line:rgba(255,255,255,.12);
  --ns-music-muted:rgba(245,247,240,.68);
  position:fixed !important;
  inset:0 !important;
  z-index:230 !important;
  display:grid !important;
  place-items:center !important;
  padding:clamp(14px,2.4vw,30px) !important;
  background:rgba(3,8,5,.78) !important;
  backdrop-filter:blur(16px) saturate(.92) !important;
  -webkit-backdrop-filter:blur(16px) saturate(.92) !important;
}
#music-player-modal.music-player-modal[hidden]{display:none !important;}

#music-player-modal .music-player-shell{
  position:relative !important;
  isolation:isolate !important;
  width:min(1180px,calc(100vw - 40px)) !important;
  max-width:1180px !important;
  height:min(790px,calc(100dvh - 40px)) !important;
  max-height:790px !important;
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) auto !important;
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:28px !important;
  background:#07120c !important;
  color:#fff !important;
  box-shadow:0 34px 100px rgba(0,0,0,.46) !important;
}
#music-player-modal .music-player-shell::before{
  content:"" !important;
  position:absolute !important;
  inset:-34px !important;
  z-index:-3 !important;
  background-image:var(--music-room-cover,none) !important;
  background-size:cover !important;
  background-position:center !important;
  filter:blur(22px) saturate(.92) brightness(.56) !important;
  transform:scale(1.08) !important;
  opacity:.9 !important;
  pointer-events:none !important;
}
#music-player-modal .music-player-shell::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-2 !important;
  background:
    radial-gradient(circle at 18% 30%,rgba(242,207,89,.12),transparent 34%),
    linear-gradient(105deg,rgba(3,10,6,.42),rgba(3,10,6,.72) 55%,rgba(3,10,6,.88)) !important;
  pointer-events:none !important;
}

/* Header: intentionally quiet. Title/artist move into the playback column. */
#music-player-modal .music-player-head{
  position:relative !important;
  z-index:5 !important;
  min-height:66px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 46px !important;
  align-items:center !important;
  gap:12px !important;
  padding:14px 18px 12px 22px !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  background:linear-gradient(180deg,rgba(4,13,8,.58),rgba(4,13,8,.18)) !important;
  box-shadow:none !important;
}
#music-player-modal .music-player-head-copy{
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
}
#music-player-modal .music-player-room-label{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 !important;
  color:#f5dc7d !important;
  font-size:.72rem !important;
  font-weight:950 !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;
}
#music-player-modal .music-player-room-label svg{width:15px !important;height:15px !important;}
#music-player-modal .music-player-close{
  width:44px !important;
  min-width:44px !important;
  height:44px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:999px !important;
  background:rgba(6,15,10,.42) !important;
  color:#fff !important;
  backdrop-filter:blur(8px) !important;
  cursor:pointer !important;
}
#music-player-modal .music-player-close:hover{background:rgba(255,255,255,.10) !important;}

/* Main listening stage: artwork is the hero, transport is the second hero. */
#music-player-modal .music-player-stage{
  position:relative !important;
  z-index:2 !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-columns:minmax(250px,360px) minmax(0,1fr) !important;
  align-items:center !important;
  gap:clamp(28px,4vw,56px) !important;
  padding:clamp(24px,3.2vw,42px) clamp(26px,4vw,52px) !important;
  overflow:hidden !important;
}
#music-player-modal .music-player-art-column{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-width:0 !important;
  gap:0 !important;
  position:relative !important;
  z-index:3 !important;
  pointer-events:none !important;
}
#music-player-modal .music-player-art-wrap{
  position:relative !important;
  display:block !important;
  width:min(100%,350px) !important;
  aspect-ratio:1/1 !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,.20) !important;
  border-radius:26px !important;
  background:rgba(255,255,255,.05) !important;
  box-shadow:0 30px 70px rgba(0,0,0,.42) !important;
  pointer-events:none !important;
}
#music-player-modal .music-player-art-wrap::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05) !important;
  pointer-events:none !important;
}
#music-player-modal .music-player-art{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
}
#music-player-modal .music-player-art-placeholder{
  position:absolute !important;
  inset:0 !important;
  place-items:center !important;
  background:linear-gradient(145deg,rgba(242,207,89,.08),rgba(255,255,255,.02)) !important;
  color:#f2cf59 !important;
}
#music-player-modal .music-player-art-placeholder[hidden]{display:none !important;}
#music-player-modal .music-player-art-placeholder:not([hidden]){display:grid !important;}
#music-player-modal .music-player-art-placeholder svg{width:48px !important;height:48px !important;opacity:.76 !important;}
#music-player-modal .music-player-orbit{display:none !important;}
#music-player-modal .music-player-art-column .music-player-moods{display:none !important;}

#music-player-modal .music-player-copy{
  min-width:0 !important;
  width:100% !important;
  max-width:none !important;
  max-height:100% !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-self:center !important;
  overflow:auto !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  scrollbar-width:thin !important;
}

/* Identity block inserted by the companion runtime. */
#music-player-modal .ns-music-identity{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:5px !important;
  margin:0 0 16px !important;
}
#music-player-modal .music-player-kicker{
  display:inline-flex !important;
  align-items:center !important;
  width:max-content !important;
  min-height:28px !important;
  margin:0 0 2px !important;
  padding:0 9px !important;
  border:1px solid rgba(242,207,89,.34) !important;
  border-radius:999px !important;
  background:rgba(242,207,89,.08) !important;
  color:#f5dc7d !important;
  font-size:.66rem !important;
  font-weight:900 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
}
#music-player-modal #music-player-title{
  margin:0 !important;
  color:#fffdf5 !important;
  font-size:clamp(2rem,4.8vw,4rem) !important;
  line-height:.96 !important;
  font-weight:950 !important;
  letter-spacing:-.035em !important;
  text-wrap:balance !important;
  text-shadow:0 5px 24px rgba(0,0,0,.36) !important;
}
#music-player-modal #music-player-artist{
  margin:3px 0 0 !important;
  color:rgba(245,247,240,.76) !important;
  font-size:clamp(.88rem,1.35vw,1.08rem) !important;
  font-weight:760 !important;
  line-height:1.3 !important;
}
#music-player-modal .music-title-card-img{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:min(520px,80%) !important;
  max-height:112px !important;
  margin:0 0 5px !important;
  object-fit:contain !important;
  object-position:left center !important;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.30)) !important;
}
#music-player-modal.has-title-card #music-player-title{position:absolute !important;width:1px !important;height:1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;}

#music-player-modal .music-player-moods,
#music-player-modal .ns-music-identity .music-player-moods{
  position:static !important;
  width:100% !important;
  max-width:100% !important;
  margin:7px 0 0 !important;
  padding:0 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:6px !important;
  overflow:visible !important;
}
#music-player-modal .music-player-moods span,
#music-player-modal .music-player-moods .audience-guide-badge{
  min-height:27px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:5px 9px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.055) !important;
  color:rgba(255,255,255,.82) !important;
  font-size:.64rem !important;
  line-height:1 !important;
  font-weight:850 !important;
  white-space:nowrap !important;
}

#music-player-modal .music-player-now{
  width:100% !important;
  min-height:0 !important;
  margin:0 0 8px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  color:rgba(255,255,255,.48) !important;
  font-size:.62rem !important;
  font-weight:900 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}
#music-player-modal .music-player-now > i,
#music-player-modal .music-player-now > svg{display:none !important;}

#music-player-modal .music-waveform{
  width:100% !important;
  height:38px !important;
  display:flex !important;
  align-items:center !important;
  gap:3px !important;
  margin:0 0 6px !important;
  overflow:hidden !important;
  opacity:.76 !important;
}
#music-player-modal .music-waveform span{
  flex:1 1 2px !important;
  min-width:1px !important;
  max-width:5px !important;
  border-radius:999px !important;
  background:var(--player-accent,var(--ns-music-gold)) !important;
}
#music-player-modal .music-progress-row{
  width:100% !important;
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) 42px !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 0 18px !important;
  color:rgba(255,255,255,.58) !important;
  font-size:.67rem !important;
  font-weight:850 !important;
}
#music-player-modal .music-progress-row input,
#music-player-modal .music-volume-control input{
  width:100% !important;
  accent-color:var(--player-accent,var(--ns-music-gold)) !important;
}

#music-player-modal .music-player-controls{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:18px !important;
  margin:0 !important;
}
#music-player-modal .music-player-controls button{
  width:50px !important;
  min-width:50px !important;
  height:50px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.15) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
  box-shadow:none !important;
  cursor:pointer !important;
}
#music-player-modal .music-player-controls .primary{
  width:72px !important;
  min-width:72px !important;
  height:72px !important;
  border:0 !important;
  background:var(--player-accent,var(--ns-music-gold)) !important;
  color:#102017 !important;
  box-shadow:0 14px 34px rgba(0,0,0,.28) !important;
}
#music-player-modal .music-player-controls button:hover{transform:translateY(-1px) !important;background:rgba(255,255,255,.10) !important;}
#music-player-modal .music-player-controls .primary:hover{background:var(--player-accent,var(--ns-music-gold)) !important;filter:brightness(1.04) !important;}
#music-player-modal .music-player-controls svg{width:20px !important;height:20px !important;}
#music-player-modal .music-player-controls .primary svg{width:26px !important;height:26px !important;}

#music-player-modal .music-volume-control{
  width:min(310px,82%) !important;
  display:grid !important;
  grid-template-columns:20px minmax(0,1fr) !important;
  align-items:center !important;
  gap:10px !important;
  margin:17px auto 0 !important;
  color:rgba(255,255,255,.56) !important;
}
#music-player-modal .music-volume-control svg{width:17px !important;height:17px !important;}

#music-player-modal .music-player-details{
  width:100% !important;
  margin:22px 0 0 !important;
  padding:14px 16px !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.035) !important;
}
#music-player-modal .music-player-story{
  margin:0 !important;
  max-height:7em !important;
  overflow:auto !important;
  color:rgba(255,255,255,.72) !important;
  font-size:.86rem !important;
  line-height:1.58 !important;
  white-space:pre-line !important;
  scrollbar-width:thin !important;
}
#music-player-modal .music-player-story:empty{display:none !important;}
#music-player-modal .music-related-actions{
  margin:12px 0 0 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}
#music-player-modal .music-related-actions:empty{display:none !important;}
#music-player-modal .music-related-actions button{
  min-height:36px !important;
  padding:0 11px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.05) !important;
  color:#fff !important;
}
#music-player-modal .music-related-actions .action-label{
  position:static !important;
  width:auto !important;
  height:auto !important;
  overflow:visible !important;
  clip:auto !important;
  white-space:nowrap !important;
  font-size:.7rem !important;
  font-weight:850 !important;
}

/* Secondary actions are visually quieter than playback. */
#music-player-modal .music-player-secondary{
  position:relative !important;
  z-index:5 !important;
  width:100% !important;
  min-height:66px !important;
  margin:0 !important;
  padding:10px 18px max(10px,env(safe-area-inset-bottom)) !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  overflow-x:auto !important;
  scrollbar-width:none !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  background:linear-gradient(180deg,rgba(5,14,9,.18),rgba(5,14,9,.62)) !important;
}
#music-player-modal .music-player-secondary::-webkit-scrollbar{display:none !important;}
#music-player-modal .music-player-secondary button{
  flex:0 0 auto !important;
  min-width:44px !important;
  min-height:42px !important;
  padding:0 12px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  border:1px solid rgba(255,255,255,.11) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.045) !important;
  color:rgba(255,255,255,.82) !important;
  font-size:.7rem !important;
  font-weight:850 !important;
  white-space:nowrap !important;
}
#music-player-modal .music-player-secondary button:hover{background:rgba(255,255,255,.09) !important;color:#fff !important;}
#music-player-modal .music-player-secondary button svg{width:16px !important;height:16px !important;}
#music-player-modal .music-player-secondary [data-music-ask-poopo]{
  border-color:rgba(242,207,89,.26) !important;
  color:#f7df83 !important;
}

/* Tablet / compact desktop */
@media (max-width:900px) and (min-width:701px){
  #music-player-modal .music-player-shell{
    width:min(760px,calc(100vw - 24px)) !important;
    height:min(920px,calc(100dvh - 24px)) !important;
  }
  #music-player-modal .music-player-stage{
    grid-template-columns:minmax(210px,280px) minmax(0,1fr) !important;
    gap:24px !important;
    padding:24px !important;
  }
  #music-player-modal .music-player-art-wrap{width:min(100%,270px) !important;}
  #music-player-modal #music-player-title{font-size:clamp(1.8rem,5vw,2.8rem) !important;}
}

/* Phone portrait — one clean vertical listening experience. */
@media (max-width:700px) and (orientation:portrait){
  #music-player-modal.music-player-modal{
    padding:0 !important;
    place-items:stretch !important;
    background:#06110b !important;
    backdrop-filter:none !important;
  }
  #music-player-modal .music-player-shell{
    width:100vw !important;
    max-width:none !important;
    height:100dvh !important;
    max-height:none !important;
    border:0 !important;
    border-radius:0 !important;
    grid-template-rows:auto minmax(0,1fr) auto !important;
  }
  #music-player-modal .music-player-head{
    min-height:58px !important;
    padding:max(8px,env(safe-area-inset-top)) 12px 7px 15px !important;
    grid-template-columns:minmax(0,1fr) 42px !important;
  }
  #music-player-modal .music-player-room-label{font-size:.62rem !important;letter-spacing:.08em !important;}
  #music-player-modal .music-player-close{width:40px !important;min-width:40px !important;height:40px !important;}
  #music-player-modal .music-player-stage{
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:14px !important;
    padding:12px 16px 18px !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
  }
  #music-player-modal .music-player-art-column{width:100% !important;flex:0 0 auto !important;}
  #music-player-modal .music-player-art-wrap{
    width:min(66vw,278px) !important;
    max-width:278px !important;
    border-radius:22px !important;
    box-shadow:0 18px 44px rgba(0,0,0,.36) !important;
  }
  #music-player-modal .music-player-copy{
    width:100% !important;
    flex:0 0 auto !important;
    overflow:visible !important;
  }
  #music-player-modal .ns-music-identity{
    align-items:center !important;
    text-align:center !important;
    margin-bottom:12px !important;
    gap:4px !important;
  }
  #music-player-modal .music-player-kicker{margin-inline:auto !important;}
  #music-player-modal #music-player-title{
    font-size:clamp(1.65rem,8.8vw,2.35rem) !important;
    line-height:.98 !important;
    text-align:center !important;
  }
  #music-player-modal #music-player-artist{font-size:.84rem !important;text-align:center !important;}
  #music-player-modal .music-title-card-img{
    max-width:min(78vw,300px) !important;
    max-height:88px !important;
    margin:0 auto 4px !important;
    object-position:center !important;
  }
  #music-player-modal .music-player-moods,
  #music-player-modal .ns-music-identity .music-player-moods{
    width:100% !important;
    max-width:100% !important;
    margin:7px 0 0 !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    overflow-x:auto !important;
    scrollbar-width:none !important;
    padding:0 1px 2px !important;
  }
  #music-player-modal .music-player-moods::-webkit-scrollbar{display:none !important;}
  #music-player-modal .music-player-now{justify-content:center !important;margin-bottom:5px !important;}
  #music-player-modal .music-waveform{height:31px !important;margin-bottom:3px !important;}
  #music-player-modal .music-progress-row{grid-template-columns:36px minmax(0,1fr) 36px !important;gap:7px !important;margin-bottom:14px !important;font-size:.62rem !important;}
  #music-player-modal .music-player-controls{gap:16px !important;}
  #music-player-modal .music-player-controls button{width:46px !important;min-width:46px !important;height:46px !important;}
  #music-player-modal .music-player-controls .primary{width:66px !important;min-width:66px !important;height:66px !important;}
  #music-player-modal .music-volume-control{width:min(280px,84%) !important;margin-top:14px !important;}
  #music-player-modal .music-player-details{margin-top:18px !important;padding:12px 13px !important;border-radius:14px !important;}
  #music-player-modal .music-player-story{max-height:6.4em !important;font-size:.79rem !important;line-height:1.5 !important;}
  #music-player-modal .music-player-secondary{
    min-height:58px !important;
    padding:8px 10px max(8px,env(safe-area-inset-bottom)) !important;
    gap:7px !important;
    justify-content:center !important;
  }
  #music-player-modal .music-player-secondary button{
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    padding:0 !important;
    border-radius:999px !important;
  }
  #music-player-modal .music-player-secondary button span{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
  }
  #music-player-modal .music-player-secondary .music-player-expand{display:none !important;}
  #music-player-modal .music-room-firefly:nth-child(n+5){display:none !important;}
}

/* Very small portrait phones: keep artwork from swallowing the viewport. */
@media (max-width:380px) and (orientation:portrait),
       (max-width:700px) and (orientation:portrait) and (max-height:720px){
  #music-player-modal .music-player-art-wrap{width:min(52vw,205px) !important;}
  #music-player-modal .music-player-stage{gap:10px !important;padding-top:8px !important;}
  #music-player-modal .ns-music-identity{margin-bottom:8px !important;}
  #music-player-modal #music-player-title{font-size:clamp(1.45rem,7.5vw,2rem) !important;}
  #music-player-modal .music-player-moods span:nth-child(n+4){display:none !important;}
  #music-player-modal .music-player-details{margin-top:12px !important;}
  #music-player-modal .music-player-story{max-height:4.8em !important;}
}

/* Phone/tablet landscape — reference-style two-column player, no vertical squeeze. */
@media (orientation:landscape) and (max-width:1100px) and (max-height:650px){
  #music-player-modal.music-player-modal{
    padding:0 !important;
    place-items:stretch !important;
    background:#06110b !important;
    backdrop-filter:none !important;
  }
  #music-player-modal .music-player-shell{
    width:100vw !important;
    max-width:none !important;
    height:100dvh !important;
    max-height:none !important;
    border:0 !important;
    border-radius:0 !important;
  }
  #music-player-modal .music-player-head{
    min-height:50px !important;
    padding:max(6px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 5px max(14px,env(safe-area-inset-left)) !important;
    grid-template-columns:minmax(0,1fr) 38px !important;
  }
  #music-player-modal .music-player-room-label{font-size:.58rem !important;}
  #music-player-modal .music-player-close{width:36px !important;min-width:36px !important;height:36px !important;}
  #music-player-modal .music-player-stage{
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:minmax(120px,30vw) minmax(0,1fr) !important;
    align-items:center !important;
    gap:18px !important;
    padding:10px max(18px,env(safe-area-inset-right)) 10px max(18px,env(safe-area-inset-left)) !important;
    overflow:hidden !important;
  }
  #music-player-modal .music-player-art-wrap{
    width:min(28vw,calc(100dvh - 120px),220px) !important;
    border-radius:18px !important;
  }
  #music-player-modal .music-player-copy{
    max-height:100% !important;
    overflow:auto !important;
  }
  #music-player-modal .ns-music-identity{gap:3px !important;margin-bottom:7px !important;}
  #music-player-modal .music-player-kicker{min-height:23px !important;padding-inline:7px !important;font-size:.56rem !important;}
  #music-player-modal #music-player-title{font-size:clamp(1.3rem,4.2vw,2.1rem) !important;}
  #music-player-modal #music-player-artist{font-size:.72rem !important;}
  #music-player-modal .music-title-card-img{max-width:min(42vw,320px) !important;max-height:62px !important;}
  #music-player-modal .music-player-moods{margin-top:4px !important;gap:4px !important;}
  #music-player-modal .music-player-moods span{min-height:23px !important;padding:4px 7px !important;font-size:.56rem !important;}
  #music-player-modal .music-player-moods span:nth-child(n+4){display:none !important;}
  #music-player-modal .music-player-now{margin-bottom:3px !important;font-size:.55rem !important;}
  #music-player-modal .music-waveform{height:26px !important;margin-bottom:2px !important;}
  #music-player-modal .music-progress-row{grid-template-columns:32px minmax(0,1fr) 32px !important;gap:6px !important;margin-bottom:7px !important;font-size:.55rem !important;}
  #music-player-modal .music-player-controls{gap:12px !important;}
  #music-player-modal .music-player-controls button{width:38px !important;min-width:38px !important;height:38px !important;}
  #music-player-modal .music-player-controls .primary{width:52px !important;min-width:52px !important;height:52px !important;}
  #music-player-modal .music-player-controls svg{width:17px !important;height:17px !important;}
  #music-player-modal .music-player-controls .primary svg{width:21px !important;height:21px !important;}
  #music-player-modal .music-volume-control{width:min(240px,70%) !important;margin-top:7px !important;}
  #music-player-modal .music-player-details{margin-top:9px !important;padding:8px 10px !important;border-radius:12px !important;}
  #music-player-modal .music-player-story{max-height:3.2em !important;font-size:.67rem !important;line-height:1.42 !important;}
  #music-player-modal .music-related-actions{margin-top:6px !important;}
  #music-player-modal .music-related-actions button{min-height:30px !important;padding-inline:9px !important;}
  #music-player-modal .music-player-secondary{
    min-height:48px !important;
    padding:5px max(10px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)) !important;
    gap:6px !important;
  }
  #music-player-modal .music-player-secondary button{
    min-height:36px !important;
    height:36px !important;
    padding:0 9px !important;
    font-size:.62rem !important;
  }
  #music-player-modal .music-player-secondary .music-player-expand{display:none !important;}
  #music-player-modal .music-room-firefly:nth-child(n+4){display:none !important;}
}

@media (prefers-reduced-motion:reduce){
  #music-player-modal .music-waveform span,
  #music-player-modal .music-room-firefly{animation:none !important;}
  #music-player-modal .music-player-controls button{transition:none !important;}
}


/* ===== SOURCE: assets/narraspace-music-final-v4.css ===== */
/* NarraSpace Music Final V4 — Performance Polish
   2026-09-14
   Scope: Listening Room only.
   Purpose: retain V3 liquid aesthetic while reducing GPU/observer pressure,
   improving range controls, dock clarity, and playback micro-motion. */

#music-player-modal .music-player-shell{
  --ns-v4-spring:cubic-bezier(.2,.82,.24,1);
  --ns-v4-ease:cubic-bezier(.22,.72,.25,1);
}

/* PERFORMANCE: one room blur is enough; individual buttons should not each blur the page. */
#music-player-modal.music-player-modal{
  backdrop-filter:blur(8px) saturate(.94) !important;
  -webkit-backdrop-filter:blur(8px) saturate(.94) !important;
}
#music-player-modal .music-player-shell::before{
  filter:blur(12px) saturate(.88) brightness(.50) !important;
  transform:scale(1.045) !important;
  opacity:.70 !important;
}
#music-player-modal .music-player-close,
#music-player-modal .music-player-controls button,
#music-player-modal .music-player-secondary button,
#music-player-modal .music-related-actions button,
#music-player-modal .music-volume-control,
#music-player-modal .ns-music-transition-pill{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Fewer particles; keep atmosphere without 14 concurrent animations. */
#music-player-modal .music-room-firefly:nth-child(n+7){display:none !important;}
#music-player-modal .music-room-firefly{
  opacity:.36 !important;
  animation-duration:18s !important;
}

/* Open/close animation: no blur filters, only compositor-friendly transforms. */
#music-player-modal:not([hidden]) .music-player-shell{
  animation:nsMusicV4Open .42s var(--ns-v4-spring) both !important;
}
#music-player-modal .music-player-shell.ns-music-room-exit{
  animation:nsMusicV4Close .18s ease both !important;
}
@keyframes nsMusicV4Open{
  from{opacity:0;transform:translateY(8px) scale(.992)}
  to{opacity:1;transform:none}
}
@keyframes nsMusicV4Close{
  to{opacity:0;transform:translateY(5px) scale(.996)}
}

/* Header / shell refinement. */
#music-player-modal .music-player-shell{
  border-color:rgba(255,255,255,.10) !important;
  box-shadow:0 26px 78px rgba(0,0,0,.40) !important;
}
#music-player-modal .music-player-head{
  background:linear-gradient(180deg,rgba(4,13,8,.48),rgba(4,13,8,.10)) !important;
}
#music-player-modal .music-player-close{
  background:rgba(9,18,13,.76) !important;
  border-color:rgba(255,255,255,.11) !important;
  transition:background .16s ease,transform .16s ease !important;
}
#music-player-modal .music-player-close:hover{background:rgba(255,255,255,.09) !important;}
#music-player-modal .music-player-close:active{transform:scale(.94) !important;}

/* Identity: keep track accent secondary to NarraSpace gold. */
#music-player-modal .music-player-kicker{
  border-color:rgba(242,207,89,.38) !important;
  background:rgba(242,207,89,.055) !important;
  color:#f5dc7d !important;
}
#music-player-modal .music-player-now{
  gap:9px !important;
  color:rgba(255,255,255,.54) !important;
}
#music-player-modal .music-player-now::before{
  width:7px !important;
  height:7px !important;
  background:color-mix(in srgb,var(--player-accent,#f2cf59) 62%,#f2cf59 38%) !important;
  box-shadow:none !important;
}
#music-player-modal .music-player-shell.is-playing .music-player-now::before{
  animation:nsMusicV4Dot 1.8s ease-in-out infinite !important;
}
@keyframes nsMusicV4Dot{50%{opacity:.38;transform:scale(.78)}}

/* WAVEFORM: static silhouette + only a fraction of bars animate. */
#music-player-modal .music-waveform span{
  animation:none !important;
  transform-origin:center !important;
  will-change:auto !important;
  opacity:.54 !important;
}
#music-player-modal .music-player-shell.is-playing .music-waveform span:nth-child(5n+1),
#music-player-modal .music-player-shell.is-playing .music-waveform span:nth-child(7n+3){
  animation:nsMusicV4Wave 1.15s ease-in-out infinite alternate !important;
  animation-delay:var(--delay,0s) !important;
  will-change:transform !important;
  opacity:.82 !important;
}
@keyframes nsMusicV4Wave{
  from{transform:scaleY(.72)}
  to{transform:scaleY(1.18)}
}

/* Artwork: no continuous keyframe glow/scale. One calm active state. */
#music-player-modal .music-player-art-wrap{
  transition:transform .48s var(--ns-v4-ease),box-shadow .48s ease !important;
}
#music-player-modal .music-player-shell.is-playing:not(.ns-music-switching) .music-player-art-wrap{
  transform:scale(1.003) !important;
  box-shadow:0 20px 60px rgba(0,0,0,.32),0 0 0 1px color-mix(in srgb,var(--player-accent,#f2cf59) 16%,transparent) !important;
  animation:none !important;
}

/* Track switch: no blur. Fade/translate is much cheaper and feels more iOS-like. */
#music-player-modal .music-player-shell.ns-music-switching .music-player-art-wrap,
#music-player-modal .music-player-shell.ns-music-switching .ns-music-identity,
#music-player-modal .music-player-shell.ns-music-switching .music-waveform,
#music-player-modal .music-player-shell.ns-music-switching .music-player-details{
  filter:none !important;
  opacity:.18 !important;
  transform:translateY(5px) scale(.992) !important;
  transition:opacity .16s ease,transform .19s var(--ns-v4-ease) !important;
}
#music-player-modal .music-player-shell.ns-music-switching.ns-music-prev .music-player-art-wrap,
#music-player-modal .music-player-shell.ns-music-switching.ns-music-prev .ns-music-identity{
  transform:translateX(10px) scale(.992) !important;
}
#music-player-modal .music-player-shell.ns-music-switching.ns-music-next .music-player-art-wrap,
#music-player-modal .music-player-shell.ns-music-switching.ns-music-next .ns-music-identity{
  transform:translateX(-10px) scale(.992) !important;
}
#music-player-modal .music-player-shell.ns-music-switching-in .music-player-art-wrap,
#music-player-modal .music-player-shell.ns-music-switching-in .ns-music-identity,
#music-player-modal .music-player-shell.ns-music-switching-in .music-waveform,
#music-player-modal .music-player-shell.ns-music-switching-in .music-player-details{
  animation:nsMusicV4Return .34s var(--ns-v4-spring) both !important;
}
@keyframes nsMusicV4Return{
  from{opacity:.18;transform:translateY(5px) scale(.994)}
  to{opacity:1;transform:none}
}
#music-player-modal .ns-music-transition-pill{
  top:78px !important;
  min-height:40px !important;
  background:rgba(8,18,12,.94) !important;
  border-color:rgba(255,255,255,.10) !important;
  box-shadow:0 12px 32px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.07) !important;
}

/* Progress slider: remove browser/global focus frame, make track clean and tactile. */
#music-player-modal #music-progress,
#music-player-modal #music-volume{
  outline:none !important;
  box-shadow:none !important;
  border:0 !important;
  background:transparent !important;
  -webkit-tap-highlight-color:transparent !important;
}
#music-player-modal #music-progress:focus,
#music-player-modal #music-progress:focus-visible,
#music-player-modal #music-volume:focus,
#music-player-modal #music-volume:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}
#music-player-modal .music-progress-row{
  gap:14px !important;
}
#music-player-modal #music-progress{
  min-height:28px !important;
  cursor:pointer !important;
}
#music-player-modal #music-progress::-webkit-slider-runnable-track{
  height:5px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.16) !important;
}
#music-player-modal #music-progress::-webkit-slider-thumb{
  -webkit-appearance:none !important;
  appearance:none !important;
  width:17px !important;
  height:17px !important;
  margin-top:-6px !important;
  border:0 !important;
  border-radius:50% !important;
  background:color-mix(in srgb,var(--player-accent,#f2cf59) 70%,#fff1bd 30%) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.34) !important;
}
#music-player-modal #music-progress::-moz-range-track{height:5px !important;border-radius:999px !important;background:rgba(255,255,255,.16) !important;}
#music-player-modal #music-progress::-moz-range-progress{height:5px !important;border-radius:999px !important;background:color-mix(in srgb,var(--player-accent,#f2cf59) 70%,#f2cf59 30%) !important;}
#music-player-modal #music-progress::-moz-range-thumb{width:17px !important;height:17px !important;border:0 !important;border-radius:50% !important;background:#fff1bd !important;}

/* Transport: slightly smaller visually, still generous hit areas. */
#music-player-modal .music-player-controls{gap:18px !important;}
#music-player-modal .music-player-controls button{
  width:56px !important;
  min-width:56px !important;
  height:56px !important;
  min-height:56px !important;
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.11) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 22px rgba(0,0,0,.17) !important;
  transition:transform .16s var(--ns-v4-spring),background .16s ease,border-color .16s ease !important;
}
#music-player-modal .music-player-controls .primary{
  width:82px !important;
  min-width:82px !important;
  height:82px !important;
  min-height:82px !important;
  background:linear-gradient(145deg,
    color-mix(in srgb,var(--player-accent,#f2cf59) 62%,#f2cf59 38%),
    color-mix(in srgb,var(--player-accent,#f2cf59) 74%,#dcb94b 26%)) !important;
  color:#102016 !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 13px 32px rgba(0,0,0,.22) !important;
  animation:none !important;
}
#music-player-modal .music-player-shell.is-playing .music-player-controls .primary{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 13px 32px rgba(0,0,0,.22),0 0 0 5px color-mix(in srgb,var(--player-accent,#f2cf59) 7%,transparent) !important;
}
#music-player-modal .music-player-controls button:hover{transform:translateY(-1px) !important;background:rgba(255,255,255,.075) !important;}
#music-player-modal .music-player-controls .primary:hover{background:linear-gradient(145deg,color-mix(in srgb,var(--player-accent,#f2cf59) 66%,#f2cf59 34%),color-mix(in srgb,var(--player-accent,#f2cf59) 78%,#dcb94b 22%)) !important;}
#music-player-modal .music-player-controls button:active{transform:scale(.96) !important;}

/* Volume: one quiet capsule, no nested white focus box. */
#music-player-modal .music-volume-control{
  width:min(330px,86%) !important;
  min-height:46px !important;
  margin:14px auto 0 !important;
  grid-template-columns:38px minmax(0,1fr) 40px !important;
  gap:7px !important;
  padding:4px 7px 4px 4px !important;
  border:1px solid rgba(255,255,255,.09) !important;
  background:rgba(255,255,255,.035) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045) !important;
}
#music-player-modal .ns-music-volume-toggle{
  width:38px !important;
  min-width:38px !important;
  height:38px !important;
  background:transparent !important;
}
#music-player-modal .ns-music-volume-toggle:hover{background:rgba(255,255,255,.06) !important;}
#music-player-modal .music-volume-control input[type="range"]{min-height:28px !important;}
#music-player-modal .music-volume-control input[type="range"]::-webkit-slider-runnable-track{
  height:4px !important;
  background:linear-gradient(90deg,color-mix(in srgb,var(--player-accent,#f2cf59) 68%,#f2cf59 32%) 0 var(--ns-volume),rgba(255,255,255,.15) var(--ns-volume) 100%) !important;
}
#music-player-modal .music-volume-control input[type="range"]::-webkit-slider-thumb{
  width:16px !important;
  height:16px !important;
  margin-top:-6px !important;
  border:0 !important;
  background:#fff2c8 !important;
  box-shadow:0 2px 7px rgba(0,0,0,.32) !important;
}
#music-player-modal .music-volume-control input[type="range"]::-moz-range-track{height:4px !important;background:rgba(255,255,255,.15) !important;}
#music-player-modal .music-volume-control input[type="range"]::-moz-range-progress{height:4px !important;background:color-mix(in srgb,var(--player-accent,#f2cf59) 68%,#f2cf59 32%) !important;}
#music-player-modal .music-volume-control input[type="range"]::-moz-range-thumb{width:16px !important;height:16px !important;border:0 !important;background:#fff2c8 !important;}
#music-player-modal .ns-music-volume-value{font-size:.60rem !important;color:rgba(255,255,255,.44) !important;}

/* Details: editorial, lighter and less boxed-in. */
#music-player-modal .music-player-details{
  margin-top:18px !important;
  padding:15px 17px !important;
  border:1px solid rgba(255,255,255,.065) !important;
  border-radius:18px !important;
  background:linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.016)) !important;
  box-shadow:none !important;
}
#music-player-modal .ns-music-details-label,
#music-player-modal .ns-music-related-label{
  color:rgba(245,220,125,.70) !important;
  letter-spacing:.095em !important;
}
#music-player-modal .music-player-story{
  color:rgba(255,255,255,.72) !important;
  line-height:1.55 !important;
}
#music-player-modal .music-related-actions button{
  min-height:40px !important;
  border-radius:999px !important;
  background:rgba(242,207,89,.07) !important;
  border-color:rgba(242,207,89,.20) !important;
  color:#f6dfa0 !important;
  box-shadow:none !important;
}

/* One unified bottom liquid dock instead of six disconnected bubbles. */
#music-player-modal .music-player-secondary{
  width:max-content !important;
  max-width:calc(100% - 24px) !important;
  margin:0 auto 14px !important;
  padding:7px !important;
  gap:6px !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:999px !important;
  background:rgba(7,17,11,.76) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 10px 30px rgba(0,0,0,.18) !important;
}
#music-player-modal .music-player-secondary button{
  width:44px !important;
  min-width:44px !important;
  height:44px !important;
  min-height:44px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transition:background .15s ease,transform .15s ease,color .15s ease !important;
}
#music-player-modal .music-player-secondary button:hover{
  background:rgba(255,255,255,.065) !important;
  transform:translateY(-1px) !important;
}
#music-player-modal .music-player-secondary button:active{transform:scale(.94) !important;}
#music-player-modal .music-player-secondary button[data-tooltip="Reflect"],
#music-player-modal .music-player-secondary button[data-tooltip="Ask Po-opo"]{
  color:#f2d66f !important;
}

/* Desktop tooltip is enough; never leave mystery buttons. */
@media (hover:hover) and (pointer:fine){
  #music-player-modal .music-player-secondary button::after{
    bottom:calc(100% + 8px) !important;
    background:#101a13 !important;
    border:1px solid rgba(255,255,255,.08) !important;
    box-shadow:0 8px 22px rgba(0,0,0,.24) !important;
  }
}

/* Phone/tablet performance trims. */
@media (max-width:820px){
  #music-player-modal.music-player-modal{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;background:rgba(3,8,5,.94) !important;}
  #music-player-modal .music-player-shell::before{filter:blur(8px) brightness(.48) !important;opacity:.52 !important;}
  #music-player-modal .music-room-firefly:nth-child(n+4){display:none !important;}
  #music-player-modal .music-player-controls button{width:52px !important;min-width:52px !important;height:52px !important;min-height:52px !important;}
  #music-player-modal .music-player-controls .primary{width:76px !important;min-width:76px !important;height:76px !important;min-height:76px !important;}
  #music-player-modal .music-volume-control{width:min(320px,92%) !important;}
  #music-player-modal .music-player-secondary{margin-bottom:max(10px,env(safe-area-inset-bottom)) !important;}
}
@media (max-width:520px){
  #music-player-modal .music-room-firefly{display:none !important;}
  #music-player-modal .music-player-secondary{padding:5px !important;gap:3px !important;}
  #music-player-modal .music-player-secondary button{width:42px !important;min-width:42px !important;height:42px !important;min-height:42px !important;}
  #music-player-modal .music-player-details{padding:13px 14px !important;border-radius:16px !important;}
}

@media (prefers-reduced-motion:reduce){
  #music-player-modal .music-waveform span,
  #music-player-modal .music-player-now::before,
  #music-player-modal .music-player-shell,
  #music-player-modal .music-player-art-wrap{animation:none !important;transition:none !important;}
}


/* ===== SOURCE: assets/narraspace-music-final-v5.css ===== */
/* NarraSpace Music Final V5 — Centered / Visible / Lightweight
   Scope: Listening Room + Music Archive handoff only.
   Built over V1 base + V4 performance layer. */

/* Stacking: the player must always open above View All Music. */
#music-player-modal.music-player-modal{z-index:240 !important;}
#music-archive-modal.music-archive-modal{z-index:235 !important;}
#music-action-modal{z-index:260 !important;}
body.ns-music-room-open #review-modal{z-index:265 !important;}

/* Performance restraint: no page blur, fewer particles, one ambient cover blur only. */
#music-player-modal.music-player-modal{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  background:rgba(3,9,6,.91) !important;
}
#music-player-modal .music-player-shell::before{
  filter:blur(7px) saturate(.84) brightness(.48) !important;
  transform:scale(1.025) !important;
  opacity:.56 !important;
}
#music-player-modal .music-room-firefly:nth-child(n+5){display:none !important;}
#music-player-modal .music-room-firefly{opacity:.28 !important;animation-duration:24s !important;}

/* Desktop / roomy landscape identity: centered like a designed listening exhibit. */
@media (min-width:821px){
  #music-player-modal .music-player-copy{align-items:stretch !important;}
  #music-player-modal .ns-music-identity{
    align-items:center !important;
    text-align:center !important;
    margin-inline:auto !important;
  }
  #music-player-modal .music-player-kicker{margin-inline:auto !important;}
  #music-player-modal #music-player-title,
  #music-player-modal #music-player-artist{text-align:center !important;margin-inline:auto !important;}
  #music-player-modal .music-title-card-img{
    margin-inline:auto !important;
    object-position:center center !important;
  }
  #music-player-modal .music-player-moods,
  #music-player-modal .ns-music-identity .music-player-moods{justify-content:center !important;}
  #music-player-modal .music-player-now{justify-content:center !important;}
}

/* Make the visualizer read as a graphic, without animating all 52 bars. */
#music-player-modal .music-waveform{
  position:relative !important;
  height:64px !important;
  gap:3px !important;
  padding:7px 3px !important;
  margin:1px 0 7px !important;
  overflow:hidden !important;
  opacity:1 !important;
  mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent) !important;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent) !important;
}
#music-player-modal .music-waveform span{
  height:var(--bar,45%) !important;
  min-height:7px !important;
  max-width:6px !important;
  opacity:.66 !important;
  transform:scaleY(.78) !important;
  animation:none !important;
  transition:transform .22s ease,opacity .22s ease !important;
  background:color-mix(in srgb,var(--player-accent,#f2cf59) 58%,#f2cf59 42%) !important;
}
#music-player-modal .music-player-shell.is-playing .music-waveform span:nth-child(3n+1),
#music-player-modal .music-player-shell.is-playing .music-waveform span:nth-child(4n+2){
  animation:nsMusicV5Bar 1.18s ease-in-out infinite alternate !important;
  animation-delay:var(--delay,0s) !important;
  opacity:.96 !important;
}
#music-player-modal .music-waveform::after{
  content:"";
  position:absolute;
  inset:4px auto 4px -32%;
  width:30%;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--player-accent,#f2cf59) 42%,transparent),transparent);
  opacity:0;
  pointer-events:none;
  transform:translateX(0);
}
#music-player-modal .music-player-shell.is-playing .music-waveform::after{
  opacity:.46;
  animation:nsMusicV5Sweep 2.5s linear infinite;
}
@keyframes nsMusicV5Bar{from{transform:scaleY(.70)}to{transform:scaleY(1.20)}}
@keyframes nsMusicV5Sweep{to{transform:translateX(440%)}}

/* Connected work becomes one purposeful conclusion to the details card. */
#music-player-modal .music-player-details{
  min-height:0 !important;
  padding:16px 18px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:0 !important;
}
#music-player-modal .music-player-details.ns-music-related-only{
  padding-block:14px !important;
}
#music-player-modal .ns-music-related-label{
  width:100% !important;
  margin:14px 0 8px !important;
  padding-top:12px !important;
  border-top:1px solid rgba(255,255,255,.065) !important;
  text-align:center !important;
}
#music-player-modal .music-player-details.ns-music-related-only .ns-music-related-label{
  margin-top:0 !important;
  padding-top:0 !important;
  border-top:0 !important;
}
#music-player-modal .music-related-actions{
  width:100% !important;
  justify-content:center !important;
  margin:0 !important;
}
#music-player-modal .music-related-actions button{
  width:auto !important;
  min-width:190px !important;
  min-height:44px !important;
  padding:0 18px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  font-size:.76rem !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
  background:linear-gradient(145deg,rgba(242,207,89,.12),rgba(242,207,89,.055)) !important;
  border-color:rgba(242,207,89,.25) !important;
}
#music-player-modal .music-related-actions button::after{
  content:"→";
  margin-left:3px;
  opacity:.72;
}

/* V5 track change: no capsule and no polling. A fast directional crossfade + one seam. */
#music-player-modal .ns-music-transition-pill{display:none !important;}
#music-player-modal .music-player-shell{position:relative !important;}
#music-player-modal .ns-v5-seam{
  position:absolute;
  z-index:8;
  top:18%;
  bottom:15%;
  left:32%;
  width:56px;
  pointer-events:none;
  opacity:0;
  transform:translateX(-90vw) skewX(-9deg);
  background:linear-gradient(90deg,transparent,rgba(247,222,139,.14),rgba(255,255,255,.12),transparent);
  filter:none;
}
#music-player-modal .music-player-shell.ns-v5-transition .ns-v5-seam{
  opacity:1;
  animation:nsMusicV5Seam .30s cubic-bezier(.22,.72,.25,1) both;
}
#music-player-modal .music-player-shell.ns-v5-swap-out .music-player-art-wrap,
#music-player-modal .music-player-shell.ns-v5-swap-out .ns-music-identity,
#music-player-modal .music-player-shell.ns-v5-swap-out .music-waveform{
  opacity:.32 !important;
  transform:translateX(var(--ns-v5-shift,-7px)) scale(.996) !important;
  transition:opacity .10s linear,transform .12s cubic-bezier(.22,.72,.25,1) !important;
}
#music-player-modal .music-player-shell.ns-v5-swap-in .music-player-art-wrap,
#music-player-modal .music-player-shell.ns-v5-swap-in .ns-music-identity,
#music-player-modal .music-player-shell.ns-v5-swap-in .music-waveform{
  animation:nsMusicV5In .20s cubic-bezier(.22,.72,.25,1) both !important;
}
#music-player-modal .music-player-shell.ns-v5-prev{--ns-v5-shift:7px;}
#music-player-modal .music-player-shell.ns-v5-next{--ns-v5-shift:-7px;}
@keyframes nsMusicV5Seam{from{transform:translateX(-90vw) skewX(-9deg)}to{transform:translateX(105vw) skewX(-9deg)}}
@keyframes nsMusicV5In{from{opacity:.38;transform:translateX(calc(var(--ns-v5-shift,-7px) * -1)) scale(.997)}to{opacity:1;transform:none}}

/* Keep transport tactile but quiet. */
#music-player-modal .music-player-controls button:focus-visible,
#music-player-modal .music-player-secondary button:focus-visible,
#music-player-modal .music-related-actions button:focus-visible,
#music-player-modal .ns-music-volume-toggle:focus-visible{
  outline:2px solid rgba(245,220,125,.72) !important;
  outline-offset:3px !important;
}

/* Landscape/tablet: centered identity, compact CTA. */
@media (orientation:landscape) and (max-height:760px){
  #music-player-modal .ns-music-identity{align-items:center !important;text-align:center !important;}
  #music-player-modal #music-player-title,
  #music-player-modal #music-player-artist{text-align:center !important;}
  #music-player-modal .music-player-moods{justify-content:center !important;}
  #music-player-modal .music-waveform{height:50px !important;}
  #music-player-modal .music-player-details{margin-top:10px !important;padding:11px 13px !important;}
  #music-player-modal .music-related-actions button{min-height:38px !important;min-width:160px !important;}
}

@media (max-width:820px){
  #music-player-modal .music-waveform{height:46px !important;}
  #music-player-modal .music-player-shell.is-playing .music-waveform::after{animation-duration:3s;opacity:.34;}
  #music-player-modal .music-room-firefly{display:none !important;}
}

@media (prefers-reduced-motion:reduce){
  #music-player-modal .music-player-shell.is-playing .music-waveform::after,
  #music-player-modal .music-player-shell.is-playing .music-waveform span,
  #music-player-modal .music-player-shell.ns-v5-transition .ns-v5-seam,
  #music-player-modal .music-player-shell.ns-v5-swap-in .music-player-art-wrap,
  #music-player-modal .music-player-shell.ns-v5-swap-in .ns-music-identity,
  #music-player-modal .music-player-shell.ns-v5-swap-in .music-waveform{
    animation:none !important;
  }
}


/* ===== SOURCE: assets/narraspace-music-final-v6.css ===== */
/* NarraSpace Music Final V6 — waveform visibility, centered desktop identity,
   lighter transitions, stronger CTA, and footer cleanup.
   Layered on top of V1/V4/V5. */

/* keep player above archive always */
#music-player-modal.music-player-modal{z-index:245 !important;}
#music-archive-modal.music-archive-modal{z-index:235 !important;}

/* hide any unresolved / empty footer action */
#music-player-modal .music-player-secondary button.ns-music-empty-action,
#music-player-modal .music-player-secondary button[hidden],
#music-player-modal .music-player-secondary .music-player-expand{
  display:none !important;
}

/* desktop / large landscape: tighten and center the whole right-side composition */
@media (min-width:821px){
  #music-player-modal .music-player-stage{
    grid-template-columns:minmax(280px,360px) minmax(0,1fr) !important;
    gap:clamp(30px,4vw,60px) !important;
    align-items:center !important;
  }
  #music-player-modal .music-player-copy{
    justify-content:center !important;
    align-self:center !important;
    overflow:visible !important;
  }
  #music-player-modal .music-player-copy > *{
    width:min(100%,760px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  #music-player-modal .ns-music-identity{
    align-items:center !important;
    text-align:center !important;
    gap:7px !important;
    margin:0 auto 18px !important;
  }
  #music-player-modal .music-title-card-img{margin-inline:auto !important;object-position:center center !important;}
  #music-player-modal .music-player-moods,
  #music-player-modal .ns-music-identity .music-player-moods,
  #music-player-modal .music-player-now,
  #music-player-modal .music-player-controls,
  #music-player-modal .music-related-actions{justify-content:center !important;}
  #music-player-modal .music-progress-row{margin-inline:auto !important;}
  #music-player-modal .music-player-details{max-width:760px !important;margin-inline:auto !important;}
}

/* waveform: more like a hero visual, less like a dotted divider */
#music-player-modal .music-waveform{
  --wave-accent:color-mix(in srgb,var(--player-accent,#f2cf59) 82%,#fff4ca 18%);
  position:relative !important;
  width:min(100%,720px) !important;
  height:74px !important;
  margin:4px auto 10px !important;
  padding:10px 16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008)) !important;
  border:1px solid rgba(255,255,255,.05) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
  overflow:hidden !important;
  mask-image:none !important;
  -webkit-mask-image:none !important;
}
#music-player-modal .music-waveform::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.03),transparent);
  opacity:.7;
}
#music-player-modal .music-waveform::after{
  content:"";
  position:absolute;
  inset:10px auto 10px -24%;
  width:24%;
  border-radius:999px;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--wave-accent) 38%,transparent),rgba(255,255,255,.18),transparent);
  transform:translateX(0);
}
#music-player-modal .music-waveform span{
  position:relative !important;
  flex:0 0 clamp(4px,.44vw,7px) !important;
  width:clamp(4px,.44vw,7px) !important;
  min-width:4px !important;
  max-width:7px !important;
  min-height:10px !important;
  height:var(--bar,48%) !important;
  border-radius:999px !important;
  opacity:.96 !important;
  transform-origin:center center !important;
  transform:scaleY(.82) translateZ(0) !important;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--wave-accent) 92%,#fff7d9 8%),
    color-mix(in srgb,var(--player-accent,#f2cf59) 82%,#d9b64a 18%)) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.03),0 0 12px color-mix(in srgb,var(--player-accent,#f2cf59) 10%,transparent) !important;
  transition:transform .16s ease,opacity .16s ease,filter .18s ease !important;
  animation:none !important;
}
#music-player-modal .music-waveform span:nth-child(odd){opacity:.9 !important;}
#music-player-modal .music-player-shell.is-playing .music-waveform span{
  animation:nsMusicV6Wave var(--dur,1.38s) ease-in-out infinite alternate !important;
  animation-delay:var(--delay,0s) !important;
  filter:saturate(1.02) brightness(1.04) !important;
}
#music-player-modal .music-player-shell.is-playing .music-waveform span:nth-child(4n){animation-duration:calc(var(--dur,1.38s) * 1.08) !important;}
#music-player-modal .music-player-shell.is-playing .music-waveform span:nth-child(5n+2){animation-duration:calc(var(--dur,1.38s) * .92) !important;}
#music-player-modal .music-player-shell.is-playing .music-waveform::after{
  opacity:.62;
  animation:nsMusicV6Sweep 2.35s linear infinite;
}
@keyframes nsMusicV6Wave{
  from{transform:scaleY(calc(.74 + var(--pulse-floor,.06))) translateZ(0)}
  to{transform:scaleY(calc(1 + var(--amp,.28))) translateZ(0)}
}
@keyframes nsMusicV6Sweep{to{transform:translateX(520%);}}

/* progress row and controls feel more centered / display-like */
#music-player-modal .music-progress-row{
  width:min(100%,760px) !important;
  grid-template-columns:52px minmax(0,1fr) 52px !important;
  gap:12px !important;
  margin:0 auto 18px !important;
}
#music-player-modal #music-progress::-webkit-slider-runnable-track{height:6px !important;}
#music-player-modal #music-progress::-moz-range-track,
#music-player-modal #music-progress::-moz-range-progress{height:6px !important;}
#music-player-modal #music-progress::-webkit-slider-thumb{width:20px !important;height:20px !important;margin-top:-7px !important;}
#music-player-modal #music-progress::-moz-range-thumb{width:20px !important;height:20px !important;}

#music-player-modal .music-player-controls{
  width:min(100%,520px) !important;
  margin-inline:auto !important;
  gap:22px !important;
}
#music-player-modal .music-player-controls button{
  width:62px !important;
  min-width:62px !important;
  height:62px !important;
  min-height:62px !important;
}
#music-player-modal .music-player-controls .primary{
  width:92px !important;
  min-width:92px !important;
  height:92px !important;
  min-height:92px !important;
}

/* volume redesign: cleaner and slightly more premium */
#music-player-modal .music-volume-control{
  width:min(420px,92%) !important;
  min-height:54px !important;
  margin:16px auto 0 !important;
  grid-template-columns:42px minmax(0,1fr) 52px !important;
  gap:10px !important;
  padding:6px 10px 6px 6px !important;
  border-radius:20px !important;
  border:1px solid rgba(255,255,255,.095) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.024)) !important;
}
#music-player-modal .ns-music-volume-toggle{
  width:40px !important;
  min-width:40px !important;
  height:40px !important;
  border-radius:14px !important;
}
#music-player-modal .music-volume-control input[type="range"]::-webkit-slider-runnable-track{height:6px !important;border-radius:999px !important;}
#music-player-modal .music-volume-control input[type="range"]::-moz-range-track,
#music-player-modal .music-volume-control input[type="range"]::-moz-range-progress{height:6px !important;border-radius:999px !important;}
#music-player-modal .music-volume-control input[type="range"]::-webkit-slider-thumb{width:18px !important;height:18px !important;margin-top:-6px !important;}
#music-player-modal .music-volume-control input[type="range"]::-moz-range-thumb{width:18px !important;height:18px !important;}
#music-player-modal .ns-music-volume-value{font-size:.74rem !important;font-weight:850 !important;color:rgba(255,255,255,.66) !important;}

/* connected work area / CTA */
#music-player-modal .music-player-details{
  width:min(100%,760px) !important;
  margin:18px auto 0 !important;
  gap:0 !important;
}
#music-player-modal .ns-music-details-label,
#music-player-modal .ns-music-related-label{
  font-size:.78rem !important;
  font-weight:900 !important;
}
#music-player-modal .music-player-story{
  max-height:none !important;
  overflow:visible !important;
}
#music-player-modal .ns-music-related-label{
  margin:16px 0 10px !important;
  padding-top:14px !important;
  text-align:center !important;
  border-top:1px solid rgba(255,255,255,.07) !important;
}
#music-player-modal .music-related-actions{
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
  margin:0 !important;
}
#music-player-modal .music-related-actions button{
  min-width:220px !important;
  min-height:48px !important;
  padding:0 22px !important;
  gap:10px !important;
  border-radius:999px !important;
  border:1px solid rgba(242,207,89,.26) !important;
  background:linear-gradient(135deg,rgba(242,207,89,.16),rgba(242,207,89,.06)) !important;
  color:#f7e4a6 !important;
  font-size:.82rem !important;
  font-weight:950 !important;
  letter-spacing:.01em !important;
  box-shadow:0 10px 26px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
#music-player-modal .music-related-actions button:hover{transform:translateY(-1px) !important;}
#music-player-modal .music-related-actions button::after{content:"→";opacity:.85;margin-left:2px;}

/* footer dock: one clean pill, no mystery empty slot */
#music-player-modal .music-player-secondary{
  position:relative !important;
  z-index:8 !important;
  width:max-content !important;
  max-width:calc(100% - 28px) !important;
  margin:14px auto 14px !important;
  padding:8px !important;
  gap:6px !important;
}
#music-player-modal .music-player-secondary button{
  width:46px !important;
  min-width:46px !important;
  height:46px !important;
  min-height:46px !important;
}

/* new transition: lighter and cleaner than the previous liquid seam */
#music-player-modal .music-player-shell{--ns-v6-shift:14px;}
#music-player-modal .music-player-shell.ns-v6-prev{--ns-v6-shift:14px;}
#music-player-modal .music-player-shell.ns-v6-next{--ns-v6-shift:-14px;}
#music-player-modal .music-player-shell.ns-v6-switching .music-player-art-wrap,
#music-player-modal .music-player-shell.ns-v6-switching .ns-music-identity,
#music-player-modal .music-player-shell.ns-v6-switching .music-waveform,
#music-player-modal .music-player-shell.ns-v6-switching .music-progress-row,
#music-player-modal .music-player-shell.ns-v6-switching .music-player-controls,
#music-player-modal .music-player-shell.ns-v6-switching .music-volume-control,
#music-player-modal .music-player-shell.ns-v6-switching .music-player-details{
  opacity:.18 !important;
  transform:translateX(var(--ns-v6-shift)) translateY(2px) scale(.992) !important;
  transition:opacity .12s linear,transform .18s cubic-bezier(.22,.72,.25,1) !important;
}
#music-player-modal .music-player-shell.ns-v6-enter .music-player-art-wrap,
#music-player-modal .music-player-shell.ns-v6-enter .ns-music-identity,
#music-player-modal .music-player-shell.ns-v6-enter .music-waveform,
#music-player-modal .music-player-shell.ns-v6-enter .music-progress-row,
#music-player-modal .music-player-shell.ns-v6-enter .music-player-controls,
#music-player-modal .music-player-shell.ns-v6-enter .music-volume-control,
#music-player-modal .music-player-shell.ns-v6-enter .music-player-details{
  animation:nsMusicV6Enter .26s cubic-bezier(.22,.72,.25,1) both !important;
}
@keyframes nsMusicV6Enter{
  from{opacity:.22;transform:translateX(calc(var(--ns-v6-shift) * -1)) translateY(2px) scale(.994)}
  to{opacity:1;transform:none}
}

/* tablets / landscape tablets */
@media (orientation:landscape) and (max-height:820px){
  #music-player-modal .music-player-shell{height:min(760px,calc(100dvh - 24px)) !important;}
  #music-player-modal .music-player-stage{padding:22px clamp(18px,3vw,34px) !important;gap:24px !important;}
  #music-player-modal .music-waveform{height:64px !important;margin-bottom:8px !important;}
  #music-player-modal .music-volume-control{width:min(380px,94%) !important;}
  #music-player-modal .music-player-details{margin-top:14px !important;}
  #music-player-modal .music-player-secondary{margin-top:10px !important;}
}

/* phones */
@media (max-width:820px){
  #music-player-modal .music-waveform{height:56px !important;padding:7px 10px !important;gap:3px !important;}
  #music-player-modal .music-progress-row{grid-template-columns:42px minmax(0,1fr) 42px !important;}
  #music-player-modal .music-player-controls{gap:16px !important;}
  #music-player-modal .music-player-controls button{width:54px !important;min-width:54px !important;height:54px !important;min-height:54px !important;}
  #music-player-modal .music-player-controls .primary{width:78px !important;min-width:78px !important;height:78px !important;min-height:78px !important;}
  #music-player-modal .music-volume-control{width:min(340px,94%) !important;min-height:48px !important;grid-template-columns:38px minmax(0,1fr) 46px !important;}
  #music-player-modal .music-related-actions button{min-width:190px !important;min-height:44px !important;}
}

@media (prefers-reduced-motion:reduce){
  #music-player-modal .music-waveform span,
  #music-player-modal .music-waveform::after,
  #music-player-modal .music-player-shell.ns-v6-enter .music-player-art-wrap,
  #music-player-modal .music-player-shell.ns-v6-enter .ns-music-identity,
  #music-player-modal .music-player-shell.ns-v6-enter .music-waveform,
  #music-player-modal .music-player-shell.ns-v6-enter .music-progress-row,
  #music-player-modal .music-player-shell.ns-v6-enter .music-player-controls,
  #music-player-modal .music-player-shell.ns-v6-enter .music-volume-control,
  #music-player-modal .music-player-shell.ns-v6-enter .music-player-details{
    animation:none !important;
  }
}


/* ===== SOURCE: assets/narraspace-music-final-v7.css ===== */
/* NarraSpace Music Final V7 — NarraSpace Lock
   Fixed brand palette, instant transport, accurate sliders, visible lightweight waveform. */

#music-player-modal.music-player-modal,
#music-player-modal .music-player-shell{
  --player-accent:#f2cf59 !important;
  --ns-music-gold:#f2cf59 !important;
  --ns-v7-gold:#f2cf59;
  --ns-v7-gold-soft:#f7df89;
  --ns-v7-cream:#fff7dc;
}

/* No track-derived pink/purple accents. */
#music-player-modal .music-player-kicker,
#music-player-modal .music-player-now::before,
#music-player-modal .music-waveform span,
#music-player-modal .music-player-controls .primary,
#music-player-modal #music-progress,
#music-player-modal #music-volume,
#music-player-modal .music-player-secondary button[data-tooltip="Reflect"],
#music-player-modal .music-player-secondary button[data-tooltip="Ask Po-opo"]{
  --player-accent:#f2cf59 !important;
}

/* Identity remains centered on desktop / landscape. */
@media (min-width:821px){
  #music-player-modal .ns-music-identity{
    align-items:center !important;
    text-align:center !important;
    margin-inline:auto !important;
  }
  #music-player-modal #music-player-title,
  #music-player-modal #music-player-artist{text-align:center !important;margin-inline:auto !important;}
  #music-player-modal .music-player-moods,
  #music-player-modal .music-player-now{justify-content:center !important;}
}

/* WAVEFORM — signature NarraSpace soundtrack graphic.
   Static silhouette is always visible; only half the bars move while playing. */
#music-player-modal .music-waveform{
  width:min(100%,720px) !important;
  height:68px !important;
  margin:3px auto 10px !important;
  padding:8px 14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  border-radius:20px !important;
  background:linear-gradient(180deg,rgba(242,207,89,.035),rgba(255,255,255,.008)) !important;
  border:1px solid rgba(242,207,89,.08) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;
  overflow:hidden !important;
  mask-image:none !important;
  -webkit-mask-image:none !important;
}
#music-player-modal .music-waveform::after{display:none !important;animation:none !important;}
#music-player-modal .music-waveform span{
  flex:0 0 clamp(4px,.42vw,6px) !important;
  width:clamp(4px,.42vw,6px) !important;
  min-width:4px !important;
  max-width:6px !important;
  min-height:9px !important;
  height:var(--bar,var(--fallback,46%)) !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,#f9e59b 0%,#f2cf59 58%,#cfae3f 100%) !important;
  box-shadow:0 0 8px rgba(242,207,89,.09) !important;
  opacity:.90 !important;
  transform:scaleY(.88) translateZ(0) !important;
  transform-origin:center !important;
  animation:none !important;
  transition:transform .14s ease,opacity .14s ease !important;
}
/* fail-safe silhouette if JS initializes late */
#music-player-modal .music-waveform span:nth-child(12n+1){--fallback:26%;}
#music-player-modal .music-waveform span:nth-child(12n+2){--fallback:42%;}
#music-player-modal .music-waveform span:nth-child(12n+3){--fallback:58%;}
#music-player-modal .music-waveform span:nth-child(12n+4){--fallback:38%;}
#music-player-modal .music-waveform span:nth-child(12n+5){--fallback:72%;}
#music-player-modal .music-waveform span:nth-child(12n+6){--fallback:48%;}
#music-player-modal .music-waveform span:nth-child(12n+7){--fallback:82%;}
#music-player-modal .music-waveform span:nth-child(12n+8){--fallback:54%;}
#music-player-modal .music-waveform span:nth-child(12n+9){--fallback:66%;}
#music-player-modal .music-waveform span:nth-child(12n+10){--fallback:34%;}
#music-player-modal .music-waveform span:nth-child(12n+11){--fallback:56%;}
#music-player-modal .music-waveform span:nth-child(12n+12){--fallback:30%;}

#music-player-modal .music-player-shell.is-playing .music-waveform span:nth-child(2n+1){
  animation:nsMusicV7Wave var(--dur,1.28s) ease-in-out infinite alternate !important;
  animation-delay:var(--delay,0s) !important;
  opacity:1 !important;
}
#music-player-modal .music-player-shell.is-playing .music-waveform span:nth-child(4n+2){
  animation:nsMusicV7WaveSoft calc(var(--dur,1.28s) * 1.12) ease-in-out infinite alternate !important;
  animation-delay:var(--delay,0s) !important;
}
@keyframes nsMusicV7Wave{from{transform:scaleY(.72) translateZ(0)}to{transform:scaleY(1.26) translateZ(0)}}
@keyframes nsMusicV7WaveSoft{from{transform:scaleY(.84) translateZ(0)}to{transform:scaleY(1.12) translateZ(0)}}

/* Timeline is always NarraSpace gold. V7 JS controls the exact fill. */
#music-player-modal #music-progress,
#music-player-modal #music-volume{
  -webkit-appearance:none !important;
  appearance:none !important;
  border:0 !important;
  outline:none !important;
  box-shadow:none !important;
  background-repeat:no-repeat !important;
  cursor:pointer !important;
  touch-action:pan-x !important;
}
#music-player-modal #music-progress{
  height:30px !important;
  background:
    linear-gradient(90deg,#f2cf59 0 var(--ns-v7-progress,0%),rgba(255,255,255,.17) var(--ns-v7-progress,0%) 100%) center/100% 6px no-repeat !important;
}
#music-player-modal #music-progress::-webkit-slider-runnable-track,
#music-player-modal #music-volume::-webkit-slider-runnable-track{
  height:6px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#music-player-modal #music-progress::-moz-range-track,
#music-player-modal #music-volume::-moz-range-track,
#music-player-modal #music-progress::-moz-range-progress,
#music-player-modal #music-volume::-moz-range-progress{
  height:6px !important;
  border:0 !important;
  background:transparent !important;
}
#music-player-modal #music-progress::-webkit-slider-thumb,
#music-player-modal #music-volume::-webkit-slider-thumb{
  -webkit-appearance:none !important;
  appearance:none !important;
  width:20px !important;
  height:20px !important;
  margin-top:-7px !important;
  border:0 !important;
  border-radius:50% !important;
  background:#fff1bd !important;
  box-shadow:0 2px 9px rgba(0,0,0,.35),0 0 0 3px rgba(242,207,89,.08) !important;
}
#music-player-modal #music-progress::-moz-range-thumb,
#music-player-modal #music-volume::-moz-range-thumb{
  width:20px !important;
  height:20px !important;
  border:0 !important;
  border-radius:50% !important;
  background:#fff1bd !important;
  box-shadow:0 2px 9px rgba(0,0,0,.35) !important;
}

/* Instant transport with larger / easier hit targets. */
#music-player-modal .music-player-controls{gap:20px !important;}
#music-player-modal .music-player-controls button{
  width:66px !important;
  min-width:66px !important;
  height:66px !important;
  min-height:66px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.055) !important;
  transition:transform .10s ease,background .12s ease,border-color .12s ease !important;
  -webkit-tap-highlight-color:transparent !important;
}
#music-player-modal .music-player-controls button:hover{background:rgba(255,255,255,.085) !important;border-color:rgba(242,207,89,.20) !important;}
#music-player-modal .music-player-controls button:active{transform:scale(.92) !important;}
#music-player-modal .music-player-controls .primary{
  position:relative !important;
  width:94px !important;
  min-width:94px !important;
  height:94px !important;
  min-height:94px !important;
  background:linear-gradient(145deg,#f7db72,#e9bd43) !important;
  color:#0d1b12 !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:0 14px 32px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.30) !important;
}
#music-player-modal .music-player-controls .primary::after{
  content:"";
  position:absolute;
  inset:-8px;
  border:2px solid rgba(242,207,89,.0);
  border-radius:50%;
  pointer-events:none;
  transform:scale(.94);
  opacity:0;
}
#music-player-modal .music-player-shell.is-playing .music-player-controls .primary::after{
  animation:nsMusicV7PlayRing 1.75s ease-out infinite !important;
}
@keyframes nsMusicV7PlayRing{
  0%{opacity:.58;transform:scale(.92);border-color:rgba(242,207,89,.46)}
  72%,100%{opacity:0;transform:scale(1.14);border-color:rgba(242,207,89,0)}
}

/* Volume capsule: slimmer, accurate fill, 100% visually reaches the end. */
#music-player-modal .music-volume-control{
  width:min(430px,92%) !important;
  min-height:52px !important;
  margin:15px auto 0 !important;
  grid-template-columns:42px minmax(0,1fr) 54px !important;
  gap:10px !important;
  padding:5px 10px 5px 5px !important;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.09) !important;
  background:rgba(255,255,255,.028) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
}
#music-player-modal #music-volume{
  height:30px !important;
  background:
    linear-gradient(90deg,#f2cf59 0 var(--ns-v7-volume,85%),rgba(255,255,255,.17) var(--ns-v7-volume,85%) 100%) center/100% 6px no-repeat !important;
}
#music-player-modal .ns-music-volume-toggle{
  width:42px !important;
  min-width:42px !important;
  height:42px !important;
  min-height:42px !important;
  border-radius:13px !important;
  color:#f3e6b6 !important;
}
#music-player-modal .ns-music-volume-value{
  min-width:48px !important;
  text-align:right !important;
  color:rgba(255,255,255,.76) !important;
  font-size:.76rem !important;
  font-weight:900 !important;
}

/* About + Connected Work must stay visible, compact and intentional. */
#music-player-modal .music-player-details{
  width:min(100%,760px) !important;
  max-height:none !important;
  margin:16px auto 0 !important;
  padding:14px 16px !important;
  overflow:visible !important;
}
@media (min-width:940px){
  #music-player-modal .music-player-details:not(.ns-music-related-only):not(.ns-music-details-empty){
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(210px,250px) !important;
    grid-template-areas:"about connected" "story related" !important;
    column-gap:22px !important;
    row-gap:6px !important;
    align-items:center !important;
  }
  #music-player-modal .music-player-details .ns-music-details-label{grid-area:about !important;margin:0 !important;}
  #music-player-modal .music-player-details .music-player-story{grid-area:story !important;margin:0 !important;max-height:4.8em !important;overflow:hidden !important;}
  #music-player-modal .music-player-details .ns-music-related-label{
    grid-area:connected !important;
    margin:0 0 6px !important;
    padding:0 !important;
    border:0 !important;
    text-align:center !important;
  }
  #music-player-modal .music-player-details .music-related-actions{grid-area:related !important;}
}
#music-player-modal .music-player-details.ns-music-related-only{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  padding:13px 16px !important;
}
#music-player-modal .music-player-details.ns-music-related-only .ns-music-related-label{margin:0 0 8px !important;padding:0 !important;border:0 !important;}
#music-player-modal .music-related-actions button{
  min-width:210px !important;
  min-height:46px !important;
  padding:0 20px !important;
  background:linear-gradient(135deg,rgba(242,207,89,.14),rgba(242,207,89,.055)) !important;
  border-color:rgba(242,207,89,.25) !important;
  color:#f7e3a0 !important;
}

/* No track-switch visual transition in V7. */
#music-player-modal .ns-v5-seam,
#music-player-modal .ns-music-transition-pill{display:none !important;animation:none !important;}
#music-player-modal .music-player-shell.ns-v5-transition *,
#music-player-modal .music-player-shell.ns-v5-swap-out *,
#music-player-modal .music-player-shell.ns-v5-swap-in *,
#music-player-modal .music-player-shell.ns-v6-switching *,
#music-player-modal .music-player-shell.ns-v6-enter *{
  animation:none !important;
  transition:none !important;
  transform:none !important;
  opacity:1 !important;
}

/* Responsive touch targets. */
@media (max-width:820px){
  #music-player-modal .music-waveform{height:58px !important;padding:7px 9px !important;gap:3px !important;}
  #music-player-modal .music-player-controls{gap:15px !important;}
  #music-player-modal .music-player-controls button{width:58px !important;min-width:58px !important;height:58px !important;min-height:58px !important;}
  #music-player-modal .music-player-controls .primary{width:82px !important;min-width:82px !important;height:82px !important;min-height:82px !important;}
  #music-player-modal .music-volume-control{width:min(350px,94%) !important;grid-template-columns:40px minmax(0,1fr) 48px !important;}
}

@media (prefers-reduced-motion:reduce){
  #music-player-modal .music-waveform span,
  #music-player-modal .music-player-controls .primary::after{animation:none !important;}
}


/* ===== SOURCE: assets/narraspace-music-final-v8.css ===== */
/* NarraSpace Music Final V8 — Stable Layout Restore
   Purpose: restore the approved Listening Room hierarchy after V7,
   while keeping V7's fixed gold controls and lightweight behavior. */

/* Header must stay quiet: label left, close right. */
#music-player-modal .music-player-head{
  min-height:66px !important;
  grid-template-columns:minmax(0,1fr) 46px !important;
  align-items:center !important;
  padding:14px 18px 12px 22px !important;
}
#music-player-modal .music-player-head-copy{
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  overflow:hidden !important;
}
#music-player-modal .music-player-head-copy > .music-player-kicker,
#music-player-modal .music-player-head-copy > #music-player-title,
#music-player-modal .music-player-head-copy > #music-player-artist,
#music-player-modal .music-player-head-copy > .music-player-title-card{
  display:none !important;
}
#music-player-modal .music-player-room-label{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Main stage restores a balanced artwork / player composition. */
#music-player-modal .music-player-stage{
  grid-template-columns:minmax(270px,350px) minmax(0,1fr) !important;
  align-items:center !important;
  gap:clamp(34px,4vw,58px) !important;
  padding:clamp(24px,3vw,38px) clamp(28px,4vw,50px) !important;
}
#music-player-modal .music-player-art-wrap{
  width:min(100%,340px) !important;
  border-radius:24px !important;
}
#music-player-modal .music-player-copy{
  justify-content:center !important;
  align-self:center !important;
  overflow:visible !important;
}

/* Identity belongs inside the right player column, never in the header. */
#music-player-modal .ns-music-identity{
  width:min(100%,760px) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
  gap:6px !important;
  margin:0 auto 14px !important;
}
#music-player-modal .ns-music-identity .music-player-kicker{
  display:inline-flex !important;
  margin:0 auto 3px !important;
}
#music-player-modal .ns-music-identity #music-player-title{
  display:block !important;
  width:100% !important;
  max-width:760px !important;
  margin:0 auto !important;
  text-align:center !important;
  font-size:clamp(2.35rem,4.7vw,4.35rem) !important;
  line-height:.94 !important;
  letter-spacing:-.042em !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  hyphens:none !important;
}
#music-player-modal .ns-music-identity #music-player-artist{
  display:block !important;
  width:100% !important;
  margin:4px auto 0 !important;
  text-align:center !important;
  font-size:clamp(.94rem,1.35vw,1.12rem) !important;
}
#music-player-modal .ns-music-identity .music-player-moods{
  width:100% !important;
  justify-content:center !important;
  margin:8px 0 0 !important;
}
#music-player-modal .ns-music-identity .music-player-title-card{
  display:block !important;
  width:100% !important;
  text-align:center !important;
}
#music-player-modal .ns-music-identity .music-title-card-img{
  display:block !important;
  max-width:min(520px,82%) !important;
  max-height:108px !important;
  margin:0 auto 5px !important;
  object-position:center center !important;
}

/* Tighter vertical rhythm now that the header is no longer overloaded. */
#music-player-modal .music-player-now{
  margin:0 auto 5px !important;
  justify-content:center !important;
}
#music-player-modal .music-waveform{
  height:66px !important;
  margin:2px auto 6px !important;
}
#music-player-modal .music-progress-row{
  margin-bottom:14px !important;
}
#music-player-modal .music-volume-control{
  margin-top:13px !important;
}

/* Editorial details card: no clipping, no awkward cut-off. */
#music-player-modal .music-player-details{
  width:min(100%,760px) !important;
  max-height:none !important;
  min-height:0 !important;
  margin:15px auto 0 !important;
  padding:14px 16px !important;
  overflow:visible !important;
}
#music-player-modal .music-player-story{
  max-height:none !important;
  overflow:visible !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:3 !important;
}
#music-player-modal .music-player-details.ns-music-related-only{
  padding:13px 16px !important;
}
#music-player-modal .music-related-actions button{
  min-width:220px !important;
  min-height:46px !important;
}

/* Dock stays visually separate but no longer floats too far from content. */
#music-player-modal .music-player-secondary{
  margin:8px auto 12px !important;
}

/* Landscape / shorter desktop windows: preserve the same hierarchy. */
@media (orientation:landscape) and (max-height:780px) and (min-width:821px){
  #music-player-modal .music-player-shell{
    height:min(740px,calc(100dvh - 24px)) !important;
  }
  #music-player-modal .music-player-stage{
    grid-template-columns:minmax(230px,310px) minmax(0,1fr) !important;
    gap:24px !important;
    padding:18px 24px !important;
  }
  #music-player-modal .music-player-art-wrap{width:min(100%,300px) !important;}
  #music-player-modal .ns-music-identity{margin-bottom:9px !important;gap:4px !important;}
  #music-player-modal .ns-music-identity #music-player-title{font-size:clamp(1.9rem,4vw,3.2rem) !important;}
  #music-player-modal .music-waveform{height:52px !important;margin-bottom:4px !important;}
  #music-player-modal .music-progress-row{margin-bottom:10px !important;}
  #music-player-modal .music-player-controls button{width:56px !important;min-width:56px !important;height:56px !important;min-height:56px !important;}
  #music-player-modal .music-player-controls .primary{width:80px !important;min-width:80px !important;height:80px !important;min-height:80px !important;}
  #music-player-modal .music-volume-control{min-height:46px !important;margin-top:10px !important;}
  #music-player-modal .music-player-details{margin-top:10px !important;padding:11px 13px !important;}
  #music-player-modal .music-player-story{-webkit-line-clamp:2 !important;}
  #music-player-modal .music-player-secondary{margin-top:5px !important;margin-bottom:8px !important;}
}

/* Mobile keeps identity inside the player body and stacks cleanly. */
@media (max-width:820px){
  #music-player-modal .music-player-head-copy > .music-player-kicker,
  #music-player-modal .music-player-head-copy > #music-player-title,
  #music-player-modal .music-player-head-copy > #music-player-artist,
  #music-player-modal .music-player-head-copy > .music-player-title-card{
    display:none !important;
  }
  #music-player-modal .ns-music-identity #music-player-title{
    font-size:clamp(2rem,10vw,3rem) !important;
  }
  #music-player-modal .ns-music-identity{margin-bottom:11px !important;}
}


/* ===== SOURCE: assets/narraspace-music-final-v9.css ===== */
/* NarraSpace Music Final V9 — details cleanup + responsive controls.
   Scope: Listening Room only. */

/* Make the two most important controls effortless to hit. */
#music-player-modal .music-player-close{
  width:54px !important;
  min-width:54px !important;
  height:54px !important;
  min-height:54px !important;
  border-radius:999px !important;
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:transparent !important;
  cursor:pointer !important;
  transition:transform .10s ease, background .12s ease, border-color .12s ease !important;
}
#music-player-modal .music-player-close svg{width:24px !important;height:24px !important;}
#music-player-modal .music-player-close:hover{background:rgba(255,255,255,.09) !important;border-color:rgba(255,255,255,.18) !important;}
#music-player-modal .music-player-close:active,
#music-player-modal .music-player-close.is-pressed{transform:scale(.92) !important;}

#music-player-modal #music-main-toggle{
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:transparent !important;
  cursor:pointer !important;
  transition:transform .10s ease, box-shadow .14s ease, filter .14s ease !important;
}
#music-player-modal #music-main-toggle:active,
#music-player-modal #music-main-toggle.is-pressed{transform:scale(.94) !important;}
#music-player-modal .music-player-shell.is-playing #music-main-toggle{
  box-shadow:0 12px 30px rgba(0,0,0,.24),0 0 0 5px rgba(242,207,89,.10) !important;
}
#music-player-modal .music-player-controls button:not(.primary){
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:transparent !important;
}

/* Details card becomes a deliberate editorial component. */
#music-player-modal .music-player-details{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:0 !important;
  padding:18px 20px !important;
  border-radius:22px !important;
  background:linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.014)) !important;
  overflow:hidden !important;
}
#music-player-modal .ns-music-details-label,
#music-player-modal .ns-music-related-label,
#music-player-modal .ns-music-rights-label{
  margin:0 0 7px !important;
  padding:0 !important;
  border:0 !important;
  color:rgba(245,220,125,.82) !important;
  font-size:.72rem !important;
  font-weight:950 !important;
  letter-spacing:.095em !important;
  text-transform:uppercase !important;
  line-height:1.2 !important;
}
#music-player-modal .music-player-story{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  max-height:none !important;
  overflow:visible !important;
  color:rgba(255,255,255,.76) !important;
  font-size:.84rem !important;
  line-height:1.55 !important;
  white-space:normal !important;
  background:transparent !important;
  -webkit-line-clamp:unset !important;
}
#music-player-modal .ns-music-rights-note{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:7px !important;
  margin-top:10px !important;
  padding:9px 11px !important;
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.025) !important;
  color:rgba(255,255,255,.58) !important;
  font-size:.70rem !important;
  line-height:1.35 !important;
}
#music-player-modal .ns-music-rights-note svg{width:14px !important;height:14px !important;color:#e8cb6b !important;flex:0 0 auto !important;}

/* Connected work is clearly separated and never collides with About. */
#music-player-modal .ns-music-related-label{
  margin-top:16px !important;
  padding-top:14px !important;
  border-top:1px solid rgba(255,255,255,.07) !important;
  text-align:center !important;
}
#music-player-modal .music-related-actions{
  width:100% !important;
  margin:0 !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}
#music-player-modal .music-related-actions button{
  min-width:220px !important;
  min-height:48px !important;
  padding:0 22px !important;
  border-radius:999px !important;
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:transparent !important;
}

/* If there is no editorial description, do not leave a fake About heading. */
#music-player-modal .music-player-details.ns-music-no-about .ns-music-details-label,
#music-player-modal .music-player-details.ns-music-no-about .music-player-story{
  display:none !important;
}
#music-player-modal .music-player-details.ns-music-no-about .ns-music-rights-note{
  margin-top:0 !important;
}
#music-player-modal .music-player-details.ns-music-no-about .ns-music-related-label{
  margin-top:13px !important;
}
#music-player-modal .music-player-details.ns-music-rights-only{
  padding-block:14px !important;
}

/* Roomy desktop: two balanced columns only when both editorial copy and connected work exist. */
@media (min-width:980px){
  #music-player-modal .music-player-details.ns-music-has-about.ns-music-has-related{
    grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr) !important;
    grid-template-areas:
      "about connected"
      "story related"
      "rights related" !important;
    column-gap:26px !important;
    row-gap:5px !important;
    align-items:center !important;
  }
  #music-player-modal .music-player-details.ns-music-has-about.ns-music-has-related .ns-music-details-label{grid-area:about !important;}
  #music-player-modal .music-player-details.ns-music-has-about.ns-music-has-related .music-player-story{grid-area:story !important;}
  #music-player-modal .music-player-details.ns-music-has-about.ns-music-has-related .ns-music-rights-note{grid-area:rights !important;}
  #music-player-modal .music-player-details.ns-music-has-about.ns-music-has-related .ns-music-related-label{
    grid-area:connected !important;
    margin:0 0 7px !important;
    padding:0 !important;
    border:0 !important;
    text-align:center !important;
  }
  #music-player-modal .music-player-details.ns-music-has-about.ns-music-has-related .music-related-actions{grid-area:related !important;}
}

@media (max-width:820px){
  #music-player-modal .music-player-close{width:50px !important;min-width:50px !important;height:50px !important;min-height:50px !important;}
  #music-player-modal .music-player-details{padding:15px 16px !important;border-radius:18px !important;}
  #music-player-modal .music-player-story{font-size:.79rem !important;line-height:1.5 !important;}
  #music-player-modal .music-related-actions button{width:100% !important;min-width:0 !important;}
}

/* Header geometry follows the larger close hit target. */
#music-player-modal .music-player-head{
  grid-template-columns:minmax(0,1fr) 58px !important;
  min-height:72px !important;
}

/* Playback state is immediate and static rather than another looping effect. */
#music-player-modal .music-player-controls .primary::after{
  animation:none !important;
  transition:opacity .12s ease,transform .12s ease,border-color .12s ease !important;
}
#music-player-modal .music-player-shell.is-playing .music-player-controls .primary::after{
  opacity:.62 !important;
  transform:scale(1.03) !important;
  border-color:rgba(242,207,89,.30) !important;
  animation:none !important;
}


/* ===== SOURCE: assets/narraspace-music-final-v11.css ===== */
/* NarraSpace Music Final V11 — details card trap fix.
   Scope: Listening Room details card only. */

#music-player-modal .music-player-details{
  position:relative !important;
  display:block !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  padding:20px 22px !important;
  border-radius:24px !important;
  overflow:visible !important;
  background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.018)) !important;
  box-sizing:border-box !important;
}
#music-player-modal .ns-music-details-main,
#music-player-modal .ns-music-details-side{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:0 !important;
}
#music-player-modal .ns-music-details-main[hidden],
#music-player-modal .ns-music-details-side[hidden]{display:none !important;}

#music-player-modal .ns-music-details-label,
#music-player-modal .ns-music-related-label{
  display:block !important;
  margin:0 0 10px !important;
  color:rgba(245,220,125,.88) !important;
  font-size:.74rem !important;
  font-weight:950 !important;
  letter-spacing:.095em !important;
  text-transform:uppercase !important;
  line-height:1.15 !important;
}
#music-player-modal .music-player-story{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  min-height:1px !important;
  max-height:none !important;
  overflow:visible !important;
  color:rgba(255,255,255,.84) !important;
  font-size:.92rem !important;
  line-height:1.65 !important;
  white-space:normal !important;
  text-wrap:pretty !important;
  background:transparent !important;
  border:0 !important;
}
#music-player-modal .music-player-story:empty{display:none !important;}
#music-player-modal .ns-music-rights-note{
  display:flex !important;
  align-items:flex-start !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin:14px 0 0 !important;
  padding:11px 13px !important;
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.03) !important;
  color:rgba(255,255,255,.60) !important;
  font-size:.72rem !important;
  line-height:1.45 !important;
}
#music-player-modal .ns-music-rights-note[hidden]{display:none !important;}
#music-player-modal .ns-music-rights-note svg{width:14px !important;height:14px !important;color:#e8cb6b !important;flex:0 0 auto !important;margin-top:1px !important;}

#music-player-modal .music-related-actions{
  display:flex !important;
  width:100% !important;
  justify-content:flex-start !important;
  align-items:center !important;
  margin:0 !important;
  padding:0 !important;
}
#music-player-modal .music-related-actions:empty{display:none !important;}
#music-player-modal .music-related-actions button{
  width:100% !important;
  max-width:300px !important;
  min-width:220px !important;
  min-height:52px !important;
  padding:0 22px !important;
  border-radius:999px !important;
}

@media (min-width:980px){
  #music-player-modal .music-player-details{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(260px,320px) !important;
    column-gap:32px !important;
    row-gap:0 !important;
    align-items:start !important;
  }
  #music-player-modal .music-player-details:not(.ns-music-has-related){
    grid-template-columns:minmax(0,1fr) !important;
  }
  #music-player-modal .ns-music-details-main{
    grid-column:1 !important;
    align-self:start !important;
  }
  #music-player-modal .ns-music-details-side{
    grid-column:2 !important;
    align-self:start !important;
    min-height:100% !important;
    padding-left:6px !important;
  }
  #music-player-modal .ns-music-related-label{
    margin-top:0 !important;
    text-align:center !important;
  }
  #music-player-modal .music-related-actions{
    justify-content:center !important;
  }
  #music-player-modal .music-related-actions button{
    margin-top:4px !important;
  }
}

@media (max-width:979px){
  #music-player-modal .music-player-details{
    display:flex !important;
    flex-direction:column !important;
    gap:16px !important;
    padding:18px 18px !important;
  }
  #music-player-modal .ns-music-details-side{
    padding-top:14px !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
  }
  #music-player-modal .ns-music-related-label{
    margin-bottom:10px !important;
    text-align:left !important;
  }
  #music-player-modal .music-related-actions button{
    max-width:none !important;
    min-width:0 !important;
  }
}


/* ===== SOURCE: assets/narraspace-music-final-v12.css ===== */
/* NarraSpace Music Final V12 — Interaction Stability
   Scope: Listening Room controls only. V11 layout is intentionally frozen. */

#music-player-modal button{
  -webkit-tap-highlight-color:transparent !important;
  touch-action:manipulation !important;
  user-select:none !important;
}
#music-player-modal .music-player-close,
#music-player-modal .music-player-controls button,
#music-player-modal .ns-music-volume-toggle,
#music-player-modal .music-related-actions button,
#music-player-modal .music-player-secondary button{
  position:relative !important;
  z-index:20 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
}

/* Larger real hit targets without changing the approved visual hierarchy. */
#music-player-modal .music-player-close{
  width:58px !important;
  min-width:58px !important;
  height:58px !important;
  min-height:58px !important;
}
#music-player-modal .music-player-controls button:not(.primary){
  width:66px !important;
  min-width:66px !important;
  height:66px !important;
  min-height:66px !important;
}
#music-player-modal .music-player-controls .primary{
  width:96px !important;
  min-width:96px !important;
  height:96px !important;
  min-height:96px !important;
}
#music-player-modal .ns-music-volume-toggle{
  width:44px !important;
  min-width:44px !important;
  height:44px !important;
  min-height:44px !important;
}
#music-player-modal .music-related-actions button{
  min-height:54px !important;
}
#music-player-modal .music-player-secondary button{
  width:48px !important;
  min-width:48px !important;
  height:48px !important;
  min-height:48px !important;
}

/* Immediate tactile response. No laggy animation. */
#music-player-modal button[data-ns-music-action]{
  transition:transform .08s ease,background-color .10s ease,border-color .10s ease,box-shadow .10s ease !important;
}
#music-player-modal button[data-ns-music-action].is-pressed,
#music-player-modal button[data-ns-music-action]:active{
  transform:scale(.93) !important;
}
#music-player-modal #music-main-toggle.is-pressed,
#music-player-modal #music-main-toggle:active{
  transform:scale(.95) !important;
}
#music-player-modal button[data-ns-music-action="prev"].is-pressed svg{transform:translateX(-2px) !important;}
#music-player-modal button[data-ns-music-action="next"].is-pressed svg{transform:translateX(2px) !important;}

/* Busy state is feedback, not a disabled-looking dead control. */
#music-player-modal button.ns-music-action-busy{
  opacity:.78 !important;
  pointer-events:none !important;
}

/* Keep all action layers above decorative/ambient surfaces. */
#music-player-modal .music-player-controls,
#music-player-modal .music-volume-control,
#music-player-modal .music-related-actions,
#music-player-modal .music-player-secondary,
#music-player-modal .music-player-head{
  position:relative !important;
  z-index:15 !important;
}

@media (max-width:820px){
  #music-player-modal .music-player-close{width:54px !important;min-width:54px !important;height:54px !important;min-height:54px !important;}
  #music-player-modal .music-player-controls button:not(.primary){width:58px !important;min-width:58px !important;height:58px !important;min-height:58px !important;}
  #music-player-modal .music-player-controls .primary{width:84px !important;min-width:84px !important;height:84px !important;min-height:84px !important;}
  #music-player-modal .music-player-secondary button{width:46px !important;min-width:46px !important;height:46px !important;min-height:46px !important;}
}


/* ===== SOURCE: assets/narraspace-music-landscape-final.css ===== */
/* NarraSpace final Music-only responsive/button patch.
   Deliberately contains NO Po-opo/companion selectors. */

@media (hover:hover) and (pointer:fine) and (min-width:951px){
  #music-mini-player.music-mini-player{
    z-index:10120 !important;
    isolation:isolate !important;
    pointer-events:auto !important;
  }
  #music-mini-player.music-mini-player::before,
  #music-mini-player.music-mini-player::after,
  #music-mini-player .music-mini-progress,
  #music-mini-player .music-mini-progress *{pointer-events:none !important;}
  #music-mini-player .music-mini-main{
    position:relative !important;z-index:2 !important;min-width:0 !important;flex:1 1 auto !important;padding-right:6px !important;
  }
  #music-mini-player button{
    position:relative !important;z-index:4 !important;pointer-events:auto !important;cursor:pointer !important;touch-action:manipulation !important;-webkit-tap-highlight-color:transparent !important;
  }
  #music-mini-player > button:not(.music-mini-main){
    width:52px !important;min-width:52px !important;height:52px !important;min-height:52px !important;flex:0 0 52px !important;
  }
}

/* ---------- MUSIC LISTENING ROOM: action layers always clickable ---------- */
#music-player-modal .music-room-fireflies,
#music-player-modal .music-room-fireflies *,
#music-player-modal .music-player-orbit,
#music-player-modal .music-player-orbit::before,
#music-player-modal .music-player-orbit::after,
#music-player-modal .music-waveform,
#music-player-modal .music-waveform *,
#music-player-modal .music-player-details::before,
#music-player-modal .music-player-details::after,
#music-player-modal .music-player-secondary::before,
#music-player-modal .music-player-secondary::after{
  pointer-events:none !important;
}

#music-player-modal .music-player-head,
#music-player-modal .music-player-stage,
#music-player-modal .music-player-copy,
#music-player-modal .music-player-controls,
#music-player-modal .music-volume-control,
#music-player-modal .music-player-details,
#music-player-modal .music-related-actions,
#music-player-modal .music-player-secondary{
  position:relative !important;
  z-index:12 !important;
}

#music-player-modal .music-player-close,
#music-player-modal .music-player-controls button,
#music-player-modal .ns-music-volume-toggle,
#music-player-modal #music-progress,
#music-player-modal #music-volume,
#music-player-modal .music-related-actions button,
#music-player-modal .music-player-secondary button{
  position:relative !important;
  z-index:30 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
}

/* ---------- DESKTOP DETAILS CARD: keep the clean approved arrangement ---------- */
#music-player-modal .music-player-details{
  position:relative !important;
  display:block !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  padding:20px 22px !important;
  border-radius:24px !important;
  overflow:visible !important;
  background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.018)) !important;
  box-sizing:border-box !important;
}
#music-player-modal .ns-music-details-main,
#music-player-modal .ns-music-details-side{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:0 !important;
}
#music-player-modal .ns-music-details-main[hidden],
#music-player-modal .ns-music-details-side[hidden]{display:none !important;}
#music-player-modal .ns-music-details-label,
#music-player-modal .ns-music-related-label{
  display:block !important;
  margin:0 0 10px !important;
  color:rgba(245,220,125,.88) !important;
  font-size:.74rem !important;
  font-weight:950 !important;
  letter-spacing:.095em !important;
  text-transform:uppercase !important;
  line-height:1.15 !important;
}
#music-player-modal .music-player-story{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  min-height:1px !important;
  max-height:none !important;
  overflow:visible !important;
  color:rgba(255,255,255,.84) !important;
  font-size:.92rem !important;
  line-height:1.65 !important;
  white-space:normal !important;
  text-wrap:pretty !important;
  background:transparent !important;
  border:0 !important;
}
#music-player-modal .music-player-story:empty{display:none !important;}
#music-player-modal .ns-music-rights-note{
  display:flex !important;
  align-items:flex-start !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin:14px 0 0 !important;
  padding:11px 13px !important;
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.03) !important;
  color:rgba(255,255,255,.60) !important;
  font-size:.72rem !important;
  line-height:1.45 !important;
}
#music-player-modal .ns-music-rights-note[hidden]{display:none !important;}
#music-player-modal .ns-music-rights-note svg{width:14px !important;height:14px !important;color:#e8cb6b !important;flex:0 0 auto !important;margin-top:1px !important;}
#music-player-modal .music-related-actions{
  display:flex !important;
  width:100% !important;
  justify-content:flex-start !important;
  align-items:center !important;
  margin:0 !important;
  padding:0 !important;
}
#music-player-modal .music-related-actions:empty{display:none !important;}
#music-player-modal .music-related-actions button{
  width:100% !important;
  max-width:300px !important;
  min-width:220px !important;
  min-height:52px !important;
  padding:0 22px !important;
  border-radius:999px !important;
}

@media (min-width:980px){
  #music-player-modal .music-player-details{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(260px,320px) !important;
    column-gap:32px !important;
    row-gap:0 !important;
    align-items:start !important;
  }
  #music-player-modal .music-player-details:not(.ns-music-has-related){
    grid-template-columns:minmax(0,1fr) !important;
  }
  #music-player-modal .ns-music-details-main{
    grid-column:1 !important;
    align-self:start !important;
  }
  #music-player-modal .ns-music-details-side{
    grid-column:2 !important;
    align-self:start !important;
    min-height:100% !important;
    padding-left:6px !important;
  }
  #music-player-modal .ns-music-related-label{
    margin-top:0 !important;
    text-align:center !important;
  }
  #music-player-modal .music-related-actions{justify-content:center !important;}
  #music-player-modal .music-related-actions button{margin-top:4px !important;}
}

@media (max-width:979px){
  #music-player-modal .music-player-details{
    display:flex !important;
    flex-direction:column !important;
    gap:16px !important;
    padding:18px 18px !important;
  }
  #music-player-modal .ns-music-details-side{
    padding-top:14px !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
  }
  #music-player-modal .ns-music-related-label{
    margin-bottom:10px !important;
    text-align:left !important;
  }
  #music-player-modal .music-related-actions button{
    max-width:none !important;
    min-width:0 !important;
  }
}

/* ---------- MOBILE / TABLET LANDSCAPE: keep details visible ---------- */
@media (orientation:landscape) and (max-width:1180px) and (max-height:560px){
  body.ns-music-room-open{
    overflow:hidden !important;
  }

  #music-player-modal.music-player-modal{
    padding:0 !important;
    place-items:stretch !important;
    background:#041009 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  #music-player-modal .music-player-shell{
    width:100vw !important;
    max-width:none !important;
    min-height:100dvh !important;
    height:100dvh !important;
    border-radius:0 !important;
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) auto !important;
    overflow:hidden !important;
    box-shadow:none !important;
  }
  #music-player-modal .music-player-head{
    padding:8px max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left)) !important;
    min-height:52px !important;
    gap:10px !important;
  }
  #music-player-modal .music-player-head-copy{
    min-width:0 !important;
    gap:2px !important;
  }
  #music-player-modal .music-player-room-label{
    font-size:.72rem !important;
    letter-spacing:.08em !important;
  }
  #music-player-modal .music-player-close{
    width:48px !important;
    min-width:48px !important;
    height:48px !important;
    min-height:48px !important;
    flex:0 0 48px !important;
  }
  #music-player-modal .music-player-close svg{width:20px !important;height:20px !important;}

  #music-player-modal .music-player-stage{
    min-height:0 !important;
    height:100% !important;
    grid-template-columns:minmax(128px,26%) minmax(0,1fr) !important;
    align-items:start !important;
    gap:clamp(10px,2.4vw,22px) !important;
    padding:6px max(12px,env(safe-area-inset-right)) 6px max(12px,env(safe-area-inset-left)) !important;
    overflow:auto !important;
    overscroll-behavior:contain !important;
  }
  #music-player-modal .music-player-art-column{
    height:auto !important;
    justify-content:flex-start !important;
    overflow:visible !important;
    padding-top:2px !important;
  }
  #music-player-modal .music-player-art-wrap{
    width:min(25vw,calc(100dvh - 170px),210px) !important;
    max-width:210px !important;
    max-height:240px !important;
    border-radius:16px !important;
  }

  #music-player-modal .music-player-copy{
    height:auto !important;
    min-height:0 !important;
    justify-content:flex-start !important;
    overflow:visible !important;
    padding:0 !important;
  }
  #music-player-modal .ns-music-identity{
    width:100% !important;
    margin:0 auto 4px !important;
    gap:2px !important;
  }
  #music-player-modal .ns-music-identity .music-player-kicker{display:none !important;}
  #music-player-modal .ns-music-identity #music-player-title{
    max-width:100% !important;
    font-size:clamp(1.25rem,4.2vw,2.05rem) !important;
    line-height:.98 !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    overflow:hidden !important;
  }
  #music-player-modal .ns-music-identity #music-player-artist{
    margin-top:2px !important;
    font-size:.72rem !important;
    line-height:1.18 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  #music-player-modal .music-player-moods{display:none !important;}
  #music-player-modal .music-player-now{
    justify-content:center !important;
    margin:2px 0 1px !important;
    font-size:.51rem !important;
    min-height:12px !important;
  }
  #music-player-modal .music-waveform{
    width:min(100%,650px) !important;
    height:34px !important;
    margin:0 auto 2px !important;
    padding:4px 10px !important;
    gap:2px !important;
    border-radius:14px !important;
  }
  #music-player-modal .music-waveform span{
    flex-basis:3px !important;
    width:3px !important;
    min-width:2px !important;
    max-width:4px !important;
  }
  #music-player-modal .music-progress-row{
    width:min(100%,680px) !important;
    grid-template-columns:38px minmax(0,1fr) 38px !important;
    gap:7px !important;
    margin:0 auto 3px !important;
    font-size:.58rem !important;
  }
  #music-player-modal #music-progress{min-height:22px !important;}
  #music-player-modal .music-player-controls{
    gap:12px !important;
    margin:0 auto !important;
  }
  #music-player-modal .music-player-controls button{
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    min-height:44px !important;
  }
  #music-player-modal .music-player-controls .primary{
    width:62px !important;
    min-width:62px !important;
    height:62px !important;
    min-height:62px !important;
  }
  #music-player-modal .music-player-controls button svg{width:18px !important;height:18px !important;}
  #music-player-modal .music-player-controls .primary svg{width:23px !important;height:23px !important;}

  #music-player-modal .music-volume-control{
    width:min(360px,82%) !important;
    min-height:36px !important;
    margin:3px auto 0 !important;
    grid-template-columns:32px minmax(0,1fr) 38px !important;
    padding:2px 7px 2px 2px !important;
    border-radius:14px !important;
  }
  #music-player-modal .ns-music-volume-toggle{
    width:32px !important;
    min-width:32px !important;
    height:32px !important;
  }
  #music-player-modal .ns-music-volume-value{font-size:.56rem !important;}

  /* VISIBLE even on short landscape. Stack vertically and allow compact reading. */
  #music-player-modal .music-player-details{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    margin-top:8px !important;
    padding:12px 14px !important;
    border-radius:16px !important;
  }
  #music-player-modal .ns-music-details-main,
  #music-player-modal .ns-music-details-side{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    min-width:0 !important;
  }
  #music-player-modal .ns-music-details-side{
    padding-top:10px !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
  }
  #music-player-modal .ns-music-details-label,
  #music-player-modal .ns-music-related-label{
    margin:0 0 8px !important;
    font-size:.62rem !important;
    line-height:1.1 !important;
  }
  #music-player-modal .music-player-story{
    font-size:.72rem !important;
    line-height:1.42 !important;
  }
  #music-player-modal .ns-music-rights-note{
    margin-top:8px !important;
    padding:8px 10px !important;
    font-size:.62rem !important;
    line-height:1.35 !important;
  }
  #music-player-modal .music-related-actions{
    justify-content:flex-start !important;
  }
  #music-player-modal .music-related-actions button{
    max-width:none !important;
    min-width:0 !important;
    min-height:42px !important;
    padding:0 16px !important;
    font-size:.76rem !important;
  }

  #music-player-modal .music-player-secondary{
    align-self:stretch !important;
    width:100% !important;
    max-width:none !important;
    min-height:48px !important;
    height:auto !important;
    margin:0 !important;
    padding:4px max(10px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)) !important;
    gap:5px !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    border:0 !important;
    border-top:1px solid rgba(255,255,255,.07) !important;
    border-radius:0 !important;
    background:rgba(4,13,8,.92) !important;
    box-shadow:none !important;
  }
  #music-player-modal .music-player-secondary button{
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    min-height:38px !important;
  }

  body.ns-music-room-open .network-status.show,
  body.ns-music-room-open .toast.show{
    left:50% !important;
    right:auto !important;
    top:54px !important;
    bottom:auto !important;
    transform:translateX(-50%) !important;
    max-width:min(340px,60vw) !important;
    min-height:34px !important;
    padding:6px 10px !important;
    font-size:.66rem !important;
    z-index:260 !important;
  }
}



/* ===== LAUNCH2 CORRECTION — 2026-09-15 =====
   Scope: Listening Room only. Fixes clipped Connected Work CTA, cramped short-desktop
   geometry, action hit targets, and keeps the bottom dock outside the content flow.
   This is part of the single consolidated Music stylesheet (not an extra CSS layer). */
#music-player-modal .music-player-stage{min-height:0 !important;}
#music-player-modal .music-player-copy{min-height:0 !important;}
#music-player-modal .music-related-actions{position:relative !important;z-index:32 !important;}
#music-player-modal .music-related-actions button{position:relative !important;z-index:33 !important;pointer-events:auto !important;}
#music-player-modal .music-player-secondary{pointer-events:auto !important;}

/* A roomy desktop can keep the approved composition, but the right column must never
   project outside its stage and become unclickable behind the footer/shell clip. */
@media (min-width:980px){
  #music-player-modal .music-player-copy{
    max-height:100% !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    scrollbar-width:thin !important;
    padding:0 4px 4px !important;
  }
}

/* The live 1230x814 class of viewport was vertically overfull. Compact only this
   short-desktop range; phone/tablet portrait and the dedicated <=560px landscape
   treatment remain under their existing responsive rules. */
@media (min-width:980px) and (min-height:561px) and (max-height:920px){
  #music-player-modal.music-player-modal{padding:8px 16px !important;}
  #music-player-modal .music-player-shell{
    height:calc(100dvh - 16px) !important;
    max-height:none !important;
  }
  #music-player-modal .music-player-head{
    min-height:62px !important;
    padding:8px 16px 8px 20px !important;
    grid-template-columns:minmax(0,1fr) 52px !important;
  }
  #music-player-modal .music-player-close{
    width:50px !important;min-width:50px !important;height:50px !important;min-height:50px !important;
  }
  #music-player-modal .music-player-stage{
    grid-template-columns:minmax(245px,325px) minmax(0,1fr) !important;
    gap:28px !important;
    padding:14px 26px 10px !important;
    align-items:center !important;
    overflow:hidden !important;
  }
  #music-player-modal .music-player-art-wrap{width:min(100%,315px) !important;}
  #music-player-modal .ns-music-identity{margin:0 auto 8px !important;gap:4px !important;}
  #music-player-modal .ns-music-identity #music-player-title{font-size:clamp(2rem,4.15vw,3.6rem) !important;}
  #music-player-modal .ns-music-identity #music-player-artist{font-size:clamp(.86rem,1.2vw,1.02rem) !important;}
  #music-player-modal .ns-music-identity .music-player-moods{margin-top:5px !important;}
  #music-player-modal .music-player-now{margin-bottom:2px !important;}
  #music-player-modal .music-waveform{height:46px !important;margin:0 auto 3px !important;padding:6px 12px !important;}
  #music-player-modal .music-progress-row{margin:0 auto 7px !important;}
  #music-player-modal .music-player-controls{gap:16px !important;}
  #music-player-modal .music-player-controls button:not(.primary){width:54px !important;min-width:54px !important;height:54px !important;min-height:54px !important;}
  #music-player-modal .music-player-controls .primary{width:76px !important;min-width:76px !important;height:76px !important;min-height:76px !important;}
  #music-player-modal .music-volume-control{min-height:44px !important;margin:8px auto 0 !important;padding-block:3px !important;}
  #music-player-modal .music-player-details{margin:8px auto 0 !important;padding:12px 14px !important;border-radius:18px !important;}
  #music-player-modal .music-player-story{font-size:.80rem !important;line-height:1.45 !important;}
  #music-player-modal .ns-music-details-label,
  #music-player-modal .ns-music-related-label{font-size:.68rem !important;margin-bottom:7px !important;}
  #music-player-modal .music-related-actions button{min-height:42px !important;padding:0 16px !important;}
  #music-player-modal .music-player-secondary{margin:4px auto 6px !important;padding:5px !important;gap:4px !important;}
  #music-player-modal .music-player-secondary button{width:44px !important;min-width:44px !important;height:44px !important;min-height:44px !important;}
}

/* ===== FINAL4 SINGLE-CONTROLLER HARDENING — 2026-09-15 =====
   The runtime is the only Music action owner. Keep controls above decorative layers,
   keep Connected Work fully clickable, and guarantee child modals render over Music. */
#music-player-modal .music-player-secondary button,
#music-player-modal .music-related-actions button {
  pointer-events:auto !important;
  position:relative !important;
  z-index:40 !important;
  touch-action:manipulation !important;
}
#music-player-modal .music-player-details,
#music-player-modal .ns-music-details-side,
#music-player-modal .music-related-actions {
  overflow:visible !important;
}
#music-player-modal .music-related-actions button {
  max-width:100% !important;
}
#music-player-modal .music-player-expand,
#music-player-modal button[onclick*="toggleCurrentMusicSaved"],
#music-player-modal #music-save-label {
  display:none !important;
}
/* QR / Reflection / Music action dialogs must never sit behind the Listening Room. */
#review-modal.show,
#qr-modal.show,
#music-action-modal.show {
  z-index:3200 !important;
  pointer-events:auto !important;
}

/* FINAL4 responsive interaction clearance.
   On narrow/short screens, details must contribute their real height to the
   scrollable stage instead of shrinking underneath the persistent action dock. */
body.ns-music-room-open #review-modal.show,
body.ns-music-room-open #qr-modal.show,
body.ns-music-room-open #music-action-modal.show {
  z-index:3200 !important;
  pointer-events:auto !important;
}
@media (max-width:979px){
  #music-player-modal .music-player-stage{
    padding-bottom:76px !important;
    scroll-padding-bottom:76px !important;
  }
  #music-player-modal .music-player-copy{
    max-height:none !important;
    height:auto !important;
    align-self:start !important;
  }
  #music-player-modal .music-player-details{
    flex:0 0 auto !important;
    flex-shrink:0 !important;
    height:auto !important;
    min-height:max-content !important;
  }
}
@media (orientation:landscape) and (max-width:1180px) and (max-height:560px){
  #music-player-modal .music-player-stage{
    height:auto !important;
    min-height:0 !important;
    align-content:start !important;
    padding-bottom:72px !important;
  }
  #music-player-modal .music-player-copy{
    height:max-content !important;
    max-height:none !important;
    overflow:visible !important;
  }
  #music-player-modal .music-player-details{
    flex:0 0 auto !important;
    height:auto !important;
    min-height:max-content !important;
    overflow:visible !important;
  }
}


/* ===== NarraSpace Launch QA | 2026-09-16 =====
   Final responsive fixes from live-device screenshots.
   Scope: Listening Room + mini player only. */

/* Desktop/tablet: never trap About / Connected Work below a clipped stage.
   Header and action dock stay fixed while only the listening stage can scroll. */
@media (min-width:701px){
  #music-player-modal .music-player-stage{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    align-items:start !important;
    scrollbar-gutter:stable !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
  }
  #music-player-modal .music-player-stage::-webkit-scrollbar{width:7px !important;}
  #music-player-modal .music-player-stage::-webkit-scrollbar-track{background:transparent !important;}
  #music-player-modal .music-player-stage::-webkit-scrollbar-thumb{
    background:rgba(242,207,89,.24) !important;
    border-radius:999px !important;
  }
  #music-player-modal .music-player-art-column{
    position:sticky !important;
    top:20px !important;
    align-self:start !important;
  }
  #music-player-modal .music-player-copy{
    align-self:start !important;
    padding-bottom:8px !important;
  }
}

/* Short laptops / browser windows: compact first, scroll only if still necessary. */
@media (min-width:901px) and (max-height:900px){
  #music-player-modal.music-player-modal{padding:12px !important;}
  #music-player-modal .music-player-shell{
    width:min(1180px,calc(100vw - 24px)) !important;
    height:calc(100dvh - 24px) !important;
    max-height:none !important;
  }
  #music-player-modal .music-player-head{
    min-height:58px !important;
    padding:10px 16px 9px 20px !important;
  }
  #music-player-modal .music-player-stage{
    grid-template-columns:minmax(230px,330px) minmax(0,1fr) !important;
    gap:clamp(24px,3vw,38px) !important;
    padding:18px 30px 16px !important;
  }
  #music-player-modal .music-player-art-wrap{width:min(29vw,320px) !important;}
  #music-player-modal #music-player-title{
    font-size:clamp(2.05rem,4.5vw,3.65rem) !important;
    line-height:.92 !important;
  }
  #music-player-modal .ns-music-identity{margin-bottom:8px !important;}
  #music-player-modal .music-waveform{height:32px !important;margin-bottom:2px !important;}
  #music-player-modal .music-progress-row{margin-bottom:10px !important;}
  #music-player-modal .music-player-controls{gap:16px !important;}
  #music-player-modal .music-player-controls button{width:52px !important;min-width:52px !important;height:52px !important;}
  #music-player-modal .music-player-controls .primary{width:72px !important;min-width:72px !important;height:72px !important;}
  #music-player-modal .music-volume-control{margin-top:10px !important;}
  #music-player-modal .music-player-details{margin-top:12px !important;padding:12px 14px !important;}
  #music-player-modal .music-player-story{max-height:5.2em !important;}
  #music-player-modal .music-player-secondary{min-height:58px !important;padding-top:7px !important;padding-bottom:7px !important;}
}

/* Every Music action is a real touch/click target. */
#music-player-modal .music-player-secondary button,
#music-player-modal .music-related-actions button{
  position:relative !important;
  z-index:20 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:transparent !important;
}

/* Mini player: reserve independent cells for Play and Close so they never overlap. */
#music-mini-player.music-mini-player{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 48px 48px !important;
  align-items:center !important;
  column-gap:8px !important;
  padding:6px 8px 7px !important;
  box-sizing:border-box !important;
}
#music-mini-player .music-mini-main{
  grid-column:1 !important;
  min-width:0 !important;
  width:auto !important;
  max-width:100% !important;
  margin:0 !important;
}
#music-mini-player > button[data-music-mini-action="play"]{
  grid-column:2 !important;
}
#music-mini-player > button[data-music-mini-action="close"]{
  grid-column:3 !important;
}
#music-mini-player > button[data-music-mini-action="play"],
#music-mini-player > button[data-music-mini-action="close"]{
  position:relative !important;
  inset:auto !important;
  width:48px !important;
  min-width:48px !important;
  height:48px !important;
  min-height:48px !important;
  margin:0 !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  transform:none !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
}
#music-mini-player .music-mini-progress{
  position:absolute !important;
  left:8px !important;
  right:8px !important;
  bottom:2px !important;
  width:auto !important;
  pointer-events:none !important;
}
@media (max-width:520px){
  #music-mini-player.music-mini-player{
    grid-template-columns:minmax(0,1fr) 44px 44px !important;
    column-gap:6px !important;
    padding-left:6px !important;
    padding-right:6px !important;
  }
  #music-mini-player > button[data-music-mini-action="play"],
  #music-mini-player > button[data-music-mini-action="close"]{
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    min-height:44px !important;
  }
}

/* ===== NarraSpace Desktop Listening Room + Mini Player Final Polish | 2026-09-16b =====
   Goals: use the PC viewport more efficiently; keep About + Connected Work visible;
   honor the mini player's native hidden state. */

/* The QA grid declaration must never override the HTML hidden attribute. */
#music-mini-player.music-mini-player[hidden]{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
#music-mini-player.music-mini-player:not([hidden]){
  visibility:visible !important;
  pointer-events:auto !important;
}

/* Desktop: nearly full-window Listening Room, while keeping comfortable edge breathing room. */
@media (min-width:980px) and (min-height:650px){
  #music-player-modal.music-player-modal{
    padding:6px 8px !important;
  }
  #music-player-modal .music-player-shell{
    width:min(1320px,calc(100vw - 16px)) !important;
    max-width:1320px !important;
    height:calc(100dvh - 12px) !important;
    max-height:none !important;
    border-radius:24px !important;
  }
  #music-player-modal .music-player-head{
    min-height:56px !important;
    padding:8px 16px 7px 20px !important;
  }
  #music-player-modal .music-player-close{
    width:46px !important;
    min-width:46px !important;
    height:46px !important;
    min-height:46px !important;
  }
  #music-player-modal .music-player-stage{
    grid-template-columns:minmax(240px,310px) minmax(0,1fr) !important;
    gap:clamp(24px,2.8vw,38px) !important;
    padding:10px 28px 8px !important;
    align-items:start !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
  #music-player-modal .music-player-art-column{
    top:10px !important;
  }
  #music-player-modal .music-player-art-wrap{
    width:min(25vw,300px) !important;
  }
  #music-player-modal .music-player-copy{
    justify-content:flex-start !important;
    align-self:start !important;
    padding-top:2px !important;
    padding-bottom:4px !important;
    overflow:visible !important;
  }
  #music-player-modal .ns-music-identity{
    margin:0 auto 5px !important;
    gap:3px !important;
  }
  #music-player-modal #music-player-title{
    font-size:clamp(2rem,4vw,3.35rem) !important;
    line-height:.92 !important;
  }
  #music-player-modal #music-player-artist{
    font-size:clamp(.82rem,1.15vw,1rem) !important;
  }
  #music-player-modal .music-player-moods{
    margin-top:4px !important;
  }
  #music-player-modal .music-player-now{
    margin-bottom:1px !important;
  }
  #music-player-modal .music-waveform{
    height:28px !important;
    margin:0 auto 1px !important;
    padding:4px 10px !important;
  }
  #music-player-modal .music-progress-row{
    margin:0 auto 5px !important;
  }
  #music-player-modal .music-player-controls{
    gap:14px !important;
  }
  #music-player-modal .music-player-controls button:not(.primary){
    width:50px !important;
    min-width:50px !important;
    height:50px !important;
    min-height:50px !important;
  }
  #music-player-modal .music-player-controls .primary{
    width:68px !important;
    min-width:68px !important;
    height:68px !important;
    min-height:68px !important;
  }
  #music-player-modal .music-volume-control{
    min-height:38px !important;
    margin:5px auto 0 !important;
    padding-block:2px !important;
  }
  #music-player-modal .music-player-details{
    margin:7px auto 0 !important;
    padding:11px 14px !important;
    border-radius:17px !important;
    grid-template-columns:minmax(0,1fr) minmax(235px,290px) !important;
    column-gap:24px !important;
  }
  #music-player-modal .ns-music-details-label,
  #music-player-modal .ns-music-related-label{
    margin-bottom:6px !important;
    font-size:.66rem !important;
  }
  #music-player-modal .music-player-story{
    max-height:4.6em !important;
    overflow-y:auto !important;
    font-size:.79rem !important;
    line-height:1.45 !important;
  }
  #music-player-modal .ns-music-rights-note{
    margin-top:7px !important;
    padding:7px 9px !important;
    font-size:.64rem !important;
  }
  #music-player-modal .music-related-actions button{
    min-width:190px !important;
    min-height:42px !important;
    padding:0 15px !important;
  }
  #music-player-modal .music-player-secondary{
    min-height:56px !important;
    padding:6px 14px max(6px,env(safe-area-inset-bottom)) !important;
  }
  #music-player-modal .music-player-secondary button{
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    min-height:44px !important;
  }
}

/* Very roomy PC screens can show more of the About copy without needing its inner scroll. */
@media (min-width:1200px) and (min-height:900px){
  #music-player-modal .music-player-art-wrap{width:min(26vw,325px) !important;}
  #music-player-modal .music-player-story{max-height:7.2em !important;}
  #music-player-modal .music-player-details{padding:14px 16px !important;}
}

/* ===== NarraSpace Music Final Contained Desktop + Mini Minimize Polish | 2026-09-16c =====
   Preserve the original centered Listening Room vibe, keep details visible,
   and make the mini-player a true continuation state after minimizing. */

/* Main Listening Room: contained, centered, not edge-to-edge. */
@media (min-width:980px) and (min-height:650px){
  #music-player-modal.music-player-modal{
    padding:20px 28px !important;
    place-items:center !important;
  }
  #music-player-modal .music-player-shell{
    width:min(1180px,calc(100vw - 56px)) !important;
    max-width:1180px !important;
    height:min(790px,calc(100dvh - 40px)) !important;
    max-height:min(790px,calc(100dvh - 40px)) !important;
    border-radius:24px !important;
    overflow:hidden !important;
  }
  #music-player-modal .music-player-head{
    min-height:58px !important;
    padding:9px 18px 8px 22px !important;
  }
  #music-player-modal .music-player-close{
    width:46px !important;
    min-width:46px !important;
    height:46px !important;
    min-height:46px !important;
  }
  #music-player-modal .music-player-stage{
    grid-template-columns:minmax(250px,320px) minmax(0,1fr) !important;
    gap:clamp(30px,3.6vw,48px) !important;
    padding:18px 40px 12px !important;
    align-items:center !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    scrollbar-gutter:stable !important;
  }
  #music-player-modal .music-player-art-column{
    align-self:center !important;
    top:auto !important;
  }
  #music-player-modal .music-player-art-wrap{
    width:min(27vw,320px) !important;
    max-height:320px !important;
  }
  #music-player-modal .music-player-copy{
    align-self:center !important;
    justify-content:center !important;
    padding:0 !important;
    overflow:visible !important;
  }
  #music-player-modal .ns-music-identity{
    margin:0 auto 7px !important;
    gap:4px !important;
  }
  #music-player-modal #music-player-title{
    font-size:clamp(2.2rem,4.35vw,3.7rem) !important;
    line-height:.94 !important;
  }
  #music-player-modal #music-player-artist{
    font-size:clamp(.86rem,1.15vw,1.03rem) !important;
  }
  #music-player-modal .music-player-moods{margin-top:5px !important;}
  #music-player-modal .music-player-now{margin:0 auto 1px !important;}
  #music-player-modal .music-waveform{
    height:30px !important;
    margin:0 auto 1px !important;
    padding:4px 10px !important;
  }
  #music-player-modal .music-progress-row{margin:0 auto 7px !important;}
  #music-player-modal .music-player-controls{gap:16px !important;}
  #music-player-modal .music-player-controls button:not(.primary){
    width:52px !important;min-width:52px !important;height:52px !important;min-height:52px !important;
  }
  #music-player-modal .music-player-controls .primary{
    width:72px !important;min-width:72px !important;height:72px !important;min-height:72px !important;
  }
  #music-player-modal .music-volume-control{
    min-height:40px !important;
    margin:7px auto 0 !important;
    padding-block:3px !important;
  }
  #music-player-modal .music-player-details{
    width:100% !important;
    max-width:none !important;
    margin:9px auto 0 !important;
    padding:11px 14px !important;
    border-radius:17px !important;
    grid-template-columns:minmax(0,1fr) minmax(220px,270px) !important;
    column-gap:22px !important;
    min-height:112px !important;
    overflow:visible !important;
  }
  #music-player-modal .ns-music-details-label,
  #music-player-modal .ns-music-related-label{
    margin-bottom:5px !important;
    font-size:.66rem !important;
  }
  #music-player-modal .music-player-story{
    max-height:3.7em !important;
    overflow-y:auto !important;
    font-size:.78rem !important;
    line-height:1.42 !important;
    padding-right:4px !important;
  }
  #music-player-modal .ns-music-rights-note{
    margin-top:6px !important;
    padding:6px 9px !important;
    font-size:.62rem !important;
  }
  #music-player-modal .music-related-actions button{
    width:100% !important;
    min-width:0 !important;
    min-height:42px !important;
    padding:0 14px !important;
  }
  #music-player-modal .music-player-secondary{
    min-height:58px !important;
    margin:0 !important;
    padding:6px 14px max(6px,env(safe-area-inset-bottom)) !important;
  }
  #music-player-modal .music-player-secondary button{
    width:44px !important;min-width:44px !important;height:44px !important;min-height:44px !important;
  }
}

/* Shorter laptops keep the same centered vibe and compact vertically before scrolling. */
@media (min-width:980px) and (min-height:650px) and (max-height:780px){
  #music-player-modal.music-player-modal{padding:14px 24px !important;}
  #music-player-modal .music-player-shell{
    width:min(1160px,calc(100vw - 48px)) !important;
    height:calc(100dvh - 28px) !important;
    max-height:calc(100dvh - 28px) !important;
  }
  #music-player-modal .music-player-head{min-height:54px !important;padding-block:7px !important;}
  #music-player-modal .music-player-stage{padding:11px 34px 8px !important;gap:30px !important;}
  #music-player-modal .music-player-art-wrap{width:min(24vw,285px) !important;max-height:285px !important;}
  #music-player-modal #music-player-title{font-size:clamp(2rem,4vw,3.2rem) !important;}
  #music-player-modal .music-waveform{height:26px !important;}
  #music-player-modal .music-progress-row{margin-bottom:4px !important;}
  #music-player-modal .music-player-controls button:not(.primary){width:48px !important;min-width:48px !important;height:48px !important;min-height:48px !important;}
  #music-player-modal .music-player-controls .primary{width:66px !important;min-width:66px !important;height:66px !important;min-height:66px !important;}
  #music-player-modal .music-volume-control{margin-top:4px !important;min-height:36px !important;}
  #music-player-modal .music-player-details{margin-top:6px !important;min-height:104px !important;padding:9px 12px !important;}
  #music-player-modal .music-player-story{max-height:3.15em !important;font-size:.75rem !important;}
  #music-player-modal .ns-music-rights-note{margin-top:4px !important;padding:5px 8px !important;}
  #music-player-modal .music-player-secondary{min-height:52px !important;padding-block:4px !important;}
  #music-player-modal .music-player-secondary button{width:42px !important;min-width:42px !important;height:42px !important;min-height:42px !important;}
}

/* Mini-player continuation state. It is hidden until runtime explicitly reveals it. */
#music-mini-player.music-mini-player[hidden]{display:none !important;}
#music-mini-player.music-mini-player:not([hidden]){
  display:grid !important;
  width:min(430px,calc(100vw - 24px)) !important;
  max-width:430px !important;
  grid-template-columns:minmax(0,1fr) 50px 50px !important;
  column-gap:10px !important;
  align-items:center !important;
  padding:7px 8px 8px !important;
  border-radius:10px !important;
  overflow:hidden !important;
  pointer-events:auto !important;
}
#music-mini-player .music-mini-main{
  min-width:0 !important;
  height:54px !important;
  border-radius:8px !important;
  padding:5px 8px !important;
  gap:10px !important;
  touch-action:manipulation !important;
}
#music-mini-player .music-mini-art{
  width:46px !important;
  min-width:46px !important;
  height:46px !important;
  border-radius:7px !important;
  overflow:hidden !important;
}
#music-mini-player .music-mini-copy{min-width:0 !important;}
#music-mini-player .music-mini-copy strong,
#music-mini-player .music-mini-copy small{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
#music-mini-player > button[data-music-mini-action="play"],
#music-mini-player > button[data-music-mini-action="close"]{
  width:50px !important;min-width:50px !important;height:50px !important;min-height:50px !important;
  border-radius:999px !important;
  display:grid !important;
  place-items:center !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  transition:transform .12s ease,background-color .15s ease,opacity .15s ease !important;
}
#music-mini-player > button[data-music-mini-action="play"]:active,
#music-mini-player > button[data-music-mini-action="close"]:active,
#music-player-modal button[data-music-action]:active{transform:scale(.94) !important;}

/* Busy feedback prevents repeated clicks while an action/audio request is resolving. */
#music-player-modal button[data-music-action].is-busy,
#music-player-modal button[data-music-action].is-loading,
#music-mini-player button.is-busy,
#music-mini-player button.is-loading{
  position:relative !important;
  cursor:progress !important;
  pointer-events:none !important;
  opacity:.78 !important;
}
#music-player-modal button[data-music-action].is-busy::after,
#music-player-modal button[data-music-action].is-loading::after,
#music-mini-player button.is-busy::after,
#music-mini-player button.is-loading::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:16px !important;
  height:16px !important;
  margin:-8px 0 0 -8px !important;
  border:2px solid rgba(255,255,255,.28) !important;
  border-top-color:currentColor !important;
  border-radius:50% !important;
  animation:ns-music-control-spin .65s linear infinite !important;
  pointer-events:none !important;
}
#music-player-modal button[data-music-action].is-busy > svg,
#music-player-modal button[data-music-action].is-busy > i,
#music-player-modal button[data-music-action].is-loading > svg,
#music-player-modal button[data-music-action].is-loading > i,
#music-mini-player button.is-busy > svg,
#music-mini-player button.is-busy > i,
#music-mini-player button.is-loading > svg,
#music-mini-player button.is-loading > i{opacity:.12 !important;}
@keyframes ns-music-control-spin{to{transform:rotate(360deg)}}

@media (max-width:520px){
  #music-mini-player.music-mini-player:not([hidden]){
    width:calc(100vw - 16px) !important;
    max-width:none !important;
    grid-template-columns:minmax(0,1fr) 46px 46px !important;
    column-gap:7px !important;
    padding:6px !important;
  }
  #music-mini-player .music-mini-main{height:50px !important;padding:4px 6px !important;gap:8px !important;}
  #music-mini-player .music-mini-art{width:42px !important;min-width:42px !important;height:42px !important;}
  #music-mini-player > button[data-music-mini-action="play"],
  #music-mini-player > button[data-music-mini-action="close"]{
    width:46px !important;min-width:46px !important;height:46px !important;min-height:46px !important;
  }
}


/* ===== NarraSpace Music QA d | Centered actions + deterministic mini close ===== */
/* Center the five utility actions as one balanced dock across desktop and mobile. */
#music-player-modal .music-player-secondary{
  width:max-content !important;
  max-width:calc(100% - 28px) !important;
  margin:0 auto max(10px,env(safe-area-inset-bottom)) !important;
  justify-content:center !important;
  justify-self:center !important;
  align-self:center !important;
  text-align:center !important;
}
#music-player-modal .music-player-secondary button{
  display:grid !important;
  place-items:center !important;
  flex:0 0 auto !important;
}
#music-player-modal .music-player-secondary button > svg,
#music-player-modal .music-player-secondary button > i{
  margin:0 !important;
  display:block !important;
}

/* Mini controls always sit above the text/open surface and own their click area. */
#music-mini-player.music-mini-player{isolation:isolate !important;}
#music-mini-player .music-mini-main{position:relative !important;z-index:2 !important;}
#music-mini-player > button[data-music-mini-action="play"],
#music-mini-player > button[data-music-mini-action="close"]{
  position:relative !important;
  z-index:8 !important;
  display:grid !important;
  place-items:center !important;
  cursor:pointer !important;
}
#music-mini-player > button[data-music-mini-action="play"] > svg,
#music-mini-player > button[data-music-mini-action="close"] > svg{
  width:24px !important;
  height:24px !important;
  margin:0 !important;
  pointer-events:none !important;
}
#music-mini-player.music-mini-player[hidden]{display:none !important;}


/* ===== ACTIVE SOURCE: assets/narraspace-collaborators-launch.css ===== */
/* NarraSpace Collaborators Launch Shelf | 2026-09-15
   Based on the approved restore treatment; homepage details remain in profile modal. */
/* NarraSpace Collaborators — old-index visual restore
   Scope: public collaborator shelf only. Keeps data/profile modal logic intact. */

body:not(.admin-mode) #editorial-collaborators .phase8b-section-head{
  text-align:center !important;
  align-items:center !important;
  justify-content:center !important;
}
body:not(.admin-mode) #editorial-collaborators .phase8b-section-head > *{
  margin-left:auto !important;
  margin-right:auto !important;
}

body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid{
  width:min(1120px,calc(100vw - 48px)) !important;
  max-width:1120px !important;
  margin:0 auto !important;
  padding:18px 0 12px !important;
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:clamp(28px,4vw,58px) !important;
  align-items:start !important;
  justify-items:center !important;
  overflow:visible !important;
}

body:not(.admin-mode) #editorial-collaborators .phase8b-person-card,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(n){
  width:min(100%,172px) !important;
  min-width:0 !important;
  max-width:172px !important;
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  isolation:auto !important;
  transform:none !important;
}
body:not(.admin-mode) #editorial-collaborators .phase8b-person-card::before,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-card::after{
  content:none !important;
  display:none !important;
}

body:not(.admin-mode) #editorial-collaborators .phase8b-person-image{
  width:116px !important;
  height:116px !important;
  min-width:116px !important;
  min-height:116px !important;
  flex:0 0 116px !important;
  margin:0 auto 4px !important;
  border-radius:999px !important;
  overflow:hidden !important;
  border:4px solid rgba(255,255,255,.92) !important;
  box-shadow:0 10px 24px rgba(29,58,37,.14) !important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease !important;
}
body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:hover .phase8b-person-image,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:focus-visible .phase8b-person-image{
  transform:translateY(-3px) scale(1.025) !important;
  border-color:rgba(246,213,101,.96) !important;
  box-shadow:0 15px 30px rgba(29,58,37,.18),0 0 0 4px rgba(246,213,101,.12) !important;
}

body:not(.admin-mode) #editorial-collaborators .phase8b-person-copy{
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:6px !important;
  text-align:center !important;
  background:transparent !important;
  overflow:visible !important;
}

/* Homepage shelf stays clean: details belong in the profile modal. */
body:not(.admin-mode) #editorial-collaborators .phase8b-person-role,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-affiliation{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

body:not(.admin-mode) #editorial-collaborators .phase8b-person-name{
  display:block !important;
  position:static !important;
  width:100% !important;
  max-width:168px !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  color:#203b29 !important;
  font-size:clamp(.88rem,1vw,1rem) !important;
  font-weight:900 !important;
  line-height:1.16 !important;
  text-align:center !important;
  white-space:normal !important;
  text-wrap:balance !important;
  overflow:visible !important;
}

body:not(.admin-mode) #editorial-collaborators .phase8b-linked-works{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
body:not(.admin-mode) #editorial-collaborators .phase8b-view-profile{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  width:auto !important;
  min-width:0 !important;
  min-height:28px !important;
  height:auto !important;
  margin:0 !important;
  padding:3px 4px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#31583a !important;
  font-size:.70rem !important;
  font-weight:850 !important;
  line-height:1 !important;
  text-decoration:none !important;
}
body:not(.admin-mode) #editorial-collaborators .phase8b-view-profile:hover{
  color:#173923 !important;
  text-decoration:underline !important;
  text-underline-offset:3px !important;
}

@media (min-width:481px) and (max-width:819px){
  body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid{
    width:min(650px,calc(100% - 28px)) !important;
    max-width:650px !important;
    padding:10px 8px 16px !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    column-gap:clamp(8px,2vw,18px) !important;
    row-gap:24px !important;
  }
  body:not(.admin-mode) #editorial-collaborators .phase8b-person-card,
  body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(n){
    grid-column:span 2 !important;
    width:min(100%,150px) !important;
    max-width:150px !important;
  }
  body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(4){grid-column:2 / span 2 !important;}
  body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(5){grid-column:4 / span 2 !important;}
  body:not(.admin-mode) #editorial-collaborators .phase8b-person-image{
    width:88px !important;height:88px !important;min-width:88px !important;min-height:88px !important;flex-basis:88px !important;
  }
}

@media (max-width:480px){
  body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:10px 16px 14px !important;
    display:flex !important;
    gap:14px !important;
    justify-content:flex-start !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory !important;
  }
  body:not(.admin-mode) #editorial-collaborators .phase8b-person-card,
  body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(n){
    flex:0 0 126px !important;
    width:126px !important;
    min-width:126px !important;
    max-width:126px !important;
    scroll-snap-align:start !important;
  }
  body:not(.admin-mode) #editorial-collaborators .phase8b-person-image{
    width:76px !important;height:76px !important;min-width:76px !important;min-height:76px !important;flex-basis:76px !important;
  }
  body:not(.admin-mode) #editorial-collaborators .phase8b-person-name{font-size:.82rem !important;}
}


/* Launch contract: one-line authority for the public collaborator shelf. */
body:not(.admin-mode) #editorial-collaborators .phase8b-person-role,
body:not(.admin-mode) #editorial-collaborators .phase8b-person-affiliation{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}
body:not(.admin-mode) #editorial-collaborators .phase8b-person-name{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  width:100% !important;
  min-width:0 !important;
  max-width:178px !important;
  min-height:2.3em !important;
  line-height:1.16 !important;
  white-space:normal !important;
  overflow:visible !important;
  overflow-wrap:anywhere !important;
  text-align:center !important;
}


/* ===== PREVIOUSLY INLINE: icon fallback ===== */
html.lucide-unavailable button:has(> i[data-lucide]):not(:has(span)):not(:has(svg))::after,
    html.lucide-unavailable a:has(> i[data-lucide]):not(:has(span)):not(:has(svg))::after{
      content:attr(aria-label);font-size:.64rem;line-height:1.05;font-weight:800;text-align:center;max-width:6.5rem;overflow-wrap:anywhere;
    }
    html.lucide-unavailable button:has(> i[data-lucide]):not(:has(span)):not(:has(svg)) > i[data-lucide],
    html.lucide-unavailable a:has(> i[data-lucide]):not(:has(span)):not(:has(svg)) > i[data-lucide]{display:none!important;}


/* ===== PREVIOUSLY RUNTIME-INJECTED: FinalStudio public presentation ===== */
body:not(.admin-mode) #stories { order: 3 !important; }
        body:not(.admin-mode) #editorial-people, body:not(.admin-mode) #editorial-collaborators { order: 4 !important; padding-block: clamp(24px,4vw,46px) !important; background: #fff9ea !important; }
        body:not(.admin-mode) #music { order: 5 !important; }
        body:not(.admin-mode) #editorial-people .phase8b-section-head, body:not(.admin-mode) #editorial-collaborators .phase8b-section-head { width: min(1120px, calc(100vw - 34px)) !important; max-width: min(1120px, calc(100vw - 34px)) !important; margin: 0 auto 14px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: end !important; gap: 12px !important; text-align: left !important; }
        body:not(.admin-mode) #editorial-people .phase8b-people-grid, body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid { width: min(1120px, calc(100vw - 34px)) !important; max-width: min(1120px, calc(100vw - 34px)) !important; margin: 0 auto !important; padding: 4px 2px 12px !important; display: flex !important; grid-template-columns: none !important; gap: clamp(18px,3vw,34px) !important; align-items: start !important; justify-content: flex-start !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x proximity !important; -webkit-overflow-scrolling: touch !important; mask-image: none !important; }
        body:not(.admin-mode) #editorial-people .phase8b-person-card, body:not(.admin-mode) #editorial-collaborators .phase8b-person-card { flex: 0 0 112px !important; min-width: 112px !important; max-width: 112px !important; min-height: 126px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; display: grid !important; justify-items: center !important; align-content: start !important; gap: 8px !important; text-align: center !important; overflow: visible !important; scroll-snap-align: start !important; }
        body:not(.admin-mode) #editorial-people .phase8b-person-card:hover, body:not(.admin-mode) #editorial-people .phase8b-person-card:focus-visible, body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:hover, body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:focus-visible { transform: none !important; box-shadow: none !important; outline: none !important; }
        body:not(.admin-mode) #editorial-people .phase8b-person-card::before, body:not(.admin-mode) #editorial-people .phase8b-person-card::after, body:not(.admin-mode) #editorial-collaborators .phase8b-person-card::before, body:not(.admin-mode) #editorial-collaborators .phase8b-person-card::after { content: none !important; display: none !important; }
        body:not(.admin-mode) #editorial-people .phase8b-person-image, body:not(.admin-mode) #editorial-collaborators .phase8b-person-image { width: 72px !important; height: 72px !important; min-width: 72px !important; min-height: 72px !important; border-radius: 999px !important; border: 3px solid rgba(255,253,244,.95) !important; background: #edf5e5 !important; box-shadow: 0 8px 20px rgba(25,52,34,.14) !important; overflow: hidden !important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important; }
        body:not(.admin-mode) #editorial-people .phase8b-person-card:hover .phase8b-person-image, body:not(.admin-mode) #editorial-people .phase8b-person-card:focus-visible .phase8b-person-image, body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:hover .phase8b-person-image, body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:focus-visible .phase8b-person-image { transform: translateY(-2px) scale(1.035) !important; border-color: rgba(246,213,101,.95) !important; box-shadow: 0 13px 24px rgba(29,58,37,.24), inset 0 0 0 2px rgba(255,253,244,.68) !important; }
        body:not(.admin-mode) #editorial-people .phase8b-person-image img, body:not(.admin-mode) #editorial-collaborators .phase8b-person-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
        body:not(.admin-mode) #editorial-people .phase8b-person-copy, body:not(.admin-mode) #editorial-collaborators .phase8b-person-copy { width: 100% !important; min-width: 0 !important; padding: 0 !important; display: grid !important; justify-items: center !important; gap: 5px !important; background: transparent !important; }
        body:not(.admin-mode) #editorial-people .phase8b-person-name, body:not(.admin-mode) #editorial-collaborators .phase8b-person-name { width: 100% !important; max-width: 112px !important; color: #203b29 !important; font-size: .84rem !important; line-height: 1.1 !important; font-weight: 900 !important; white-space: normal !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; }
        body:not(.admin-mode) #editorial-people .phase8b-person-bio, body:not(.admin-mode) #editorial-people .phase8b-type-indicators, body:not(.admin-mode) #editorial-collaborators .phase8b-person-bio, body:not(.admin-mode) #editorial-collaborators .phase8b-type-indicators { display: none !important; }
        body:not(.admin-mode) #editorial-people .phase8b-linked-works, body:not(.admin-mode) #editorial-collaborators .phase8b-linked-works { width: auto !important; display: flex !important; justify-content: center !important; gap: 0 !important; margin-top: 0 !important; }
        body:not(.admin-mode) #editorial-people .phase8b-view-profile, body:not(.admin-mode) #editorial-collaborators .phase8b-view-profile { width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; border-radius: 999px !important; padding: 0 !important; display: inline-grid !important; place-items: center !important; background: rgba(255,253,244,.9) !important; border: 1px solid rgba(52,78,50,.18) !important; color: #31583a !important; box-shadow: 0 5px 12px rgba(25,52,34,.08) !important; font-size: 0 !important; }
        @media (max-width: 760px) { body:not(.admin-mode) #editorial-people .phase8b-people-grid, body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid { width: calc(100vw - 28px) !important; gap: 18px !important; } body:not(.admin-mode) #editorial-people .phase8b-person-card, body:not(.admin-mode) #editorial-collaborators .phase8b-person-card { flex-basis: 104px !important; min-width: 104px !important; max-width: 104px !important; } body:not(.admin-mode) #editorial-people .phase8b-person-image, body:not(.admin-mode) #editorial-collaborators .phase8b-person-image { width: 66px !important; height: 66px !important; min-width: 66px !important; min-height: 66px !important; } }


        /* Collaborator Spotlight Row — final public treatment */
        body:not(.admin-mode) #editorial-people {
          padding: clamp(42px, 5.5vw, 76px) 0 !important;
          background:
            radial-gradient(circle at 50% 0%, rgba(246, 213, 101, .10), transparent 34%),
            linear-gradient(180deg, #fffaf0 0%, #f8f3e6 100%) !important;
          overflow: hidden !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-section-head {
          width: min(1180px, calc(100vw - 40px)) !important;
          max-width: min(1180px, calc(100vw - 40px)) !important;
          margin: 0 auto clamp(24px, 3vw, 38px) !important;
          display: grid !important;
          grid-template-columns: minmax(0, 1fr) auto !important;
          grid-template-areas: "eyebrow action" "title action" "copy action" !important;
          align-items: center !important;
          column-gap: clamp(24px, 5vw, 72px) !important;
          row-gap: 8px !important;
          text-align: left !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-section-head .phase8b-eyebrow {
          grid-area: eyebrow !important;
          justify-self: start !important;
          margin: 0 !important;
          min-height: 34px !important;
          padding: 8px 13px !important;
          border: 1px solid rgba(54, 87, 58, .15) !important;
          border-radius: 999px !important;
          background: rgba(255, 253, 244, .78) !important;
          color: #36573a !important;
          font-size: .72rem !important;
          font-weight: 900 !important;
          letter-spacing: .06em !important;
          text-transform: uppercase !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-section-head .phase8b-eyebrow svg {
          width: 15px !important;
          height: 15px !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-section-head .section-title {
          grid-area: title !important;
          margin: 0 !important;
          color: #183c2b !important;
          font-size: clamp(2rem, 3.6vw, 3.15rem) !important;
          line-height: 1.02 !important;
          text-align: left !important;
          letter-spacing: -.035em !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-section-head > p {
          grid-area: copy !important;
          max-width: 760px !important;
          margin: 0 !important;
          color: #5f6c58 !important;
          font-size: clamp(.92rem, 1.2vw, 1.05rem) !important;
          font-weight: 650 !important;
          line-height: 1.62 !important;
          text-align: left !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-view-all-people {
          grid-area: action !important;
          align-self: center !important;
          min-width: 210px !important;
          min-height: 48px !important;
          padding: 0 18px !important;
          border: 1px solid rgba(54, 87, 58, .18) !important;
          border-radius: 999px !important;
          background: rgba(255, 253, 244, .86) !important;
          color: #21482f !important;
          box-shadow: 0 12px 28px rgba(38, 65, 41, .07) !important;
          display: inline-flex !important;
          align-items: center !important;
          justify-content: space-between !important;
          gap: 14px !important;
          font-family: inherit !important;
          font-size: .9rem !important;
          font-weight: 900 !important;
          cursor: pointer !important;
          transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-view-all-people:hover,
        body:not(.admin-mode) #editorial-people .phase8b-view-all-people:focus-visible {
          transform: translateY(-2px) !important;
          border-color: rgba(141, 139, 28, .42) !important;
          background: #fffdf4 !important;
          box-shadow: 0 17px 34px rgba(38, 65, 41, .12) !important;
          outline: none !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-view-all-people svg {
          width: 19px !important;
          height: 19px !important;
          transition: transform .2s ease !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-view-all-people:hover svg {
          transform: translateX(3px) !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-people-grid {
          width: min(1180px, calc(100vw - 40px)) !important;
          max-width: min(1180px, calc(100vw - 40px)) !important;
          margin: 0 auto !important;
          padding: 2px 0 12px !important;
          display: grid !important;
          grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
          gap: clamp(14px, 1.7vw, 22px) !important;
          align-items: stretch !important;
          overflow: visible !important;
          mask-image: none !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-person-card {
          position: relative !important;
          min-width: 0 !important;
          max-width: none !important;
          min-height: 260px !important;
          padding: 20px 15px 17px !important;
          border: 1px solid rgba(54, 87, 58, .12) !important;
          border-radius: 24px !important;
          background: linear-gradient(180deg, rgba(255, 254, 249, .98), rgba(250, 247, 236, .94)) !important;
          box-shadow: 0 16px 34px rgba(34, 58, 37, .08) !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: flex-start !important;
          gap: 13px !important;
          text-align: center !important;
          overflow: hidden !important;
          cursor: pointer !important;
          isolation: isolate !important;
          transition: transform .24s cubic-bezier(.2,.82,.22,1), box-shadow .24s ease, border-color .24s ease !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-person-card::before {
          content: "" !important;
          display: block !important;
          position: absolute !important;
          inset: 0 0 auto !important;
          height: 92px !important;
          background: linear-gradient(135deg, rgba(221, 235, 210, .62), rgba(255, 239, 184, .52)) !important;
          z-index: -1 !important;
          pointer-events: none !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-person-card::after {
          content: "" !important;
          display: block !important;
          position: absolute !important;
          width: 74px !important;
          height: 74px !important;
          right: -34px !important;
          top: -34px !important;
          border-radius: 999px !important;
          background: rgba(246, 213, 101, .17) !important;
          z-index: -1 !important;
          pointer-events: none !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-person-card:hover,
        body:not(.admin-mode) #editorial-people .phase8b-person-card:focus-visible {
          transform: translateY(-7px) !important;
          border-color: rgba(150, 146, 34, .32) !important;
          box-shadow: 0 25px 50px rgba(34, 58, 37, .14) !important;
          outline: none !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-person-image {
          width: 120px !important;
          height: 120px !important;
          min-width: 120px !important;
          min-height: 120px !important;
          flex: 0 0 120px !important;
          border: 4px solid rgba(255, 253, 244, .96) !important;
          border-radius: 999px !important;
          background: linear-gradient(145deg, #eaf3e3, #fff1bd) !important;
          box-shadow: 0 13px 28px rgba(31, 58, 37, .17) !important;
          overflow: hidden !important;
          transition: transform .24s cubic-bezier(.2,.82,.22,1), box-shadow .24s ease !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-person-card:hover .phase8b-person-image,
        body:not(.admin-mode) #editorial-people .phase8b-person-card:focus-visible .phase8b-person-image {
          transform: scale(1.045) !important;
          box-shadow: 0 18px 34px rgba(31, 58, 37, .23), 0 0 0 4px rgba(246, 213, 101, .22) !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-person-image img {
          width: 100% !important;
          height: 100% !important;
          object-fit: cover !important;
          object-position: center !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-person-card--collaborator .phase8b-person-image img {
          object-fit: contain !important;
          padding: 10px !important;
          background: #fffef8 !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-person-placeholder {
          width: 100% !important;
          height: 100% !important;
          display: grid !important;
          place-content: center !important;
          justify-items: center !important;
          gap: 7px !important;
          color: #36573a !important;
          background:
            radial-gradient(circle at 35% 26%, rgba(255,255,255,.82), transparent 34%),
            linear-gradient(145deg, #edf5e6, #fff1bf) !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-person-placeholder svg {
          width: 30px !important;
          height: 30px !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-person-placeholder span {
          font-size: .56rem !important;
          font-weight: 900 !important;
          line-height: 1.15 !important;
          letter-spacing: .04em !important;
          text-transform: uppercase !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-person-copy {
          width: 100% !important;
          min-width: 0 !important;
          padding: 0 !important;
          display: flex !important;
          flex: 1 !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: flex-start !important;
          gap: 5px !important;
          background: transparent !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-person-name {
          width: 100% !important;
          max-width: none !important;
          margin: 0 !important;
          color: #1e3e2b !important;
          font-family: var(--heading-font) !important;
          font-size: clamp(1rem, 1.25vw, 1.18rem) !important;
          font-weight: 900 !important;
          line-height: 1.15 !important;
          text-align: center !important;
          white-space: normal !important;
          display: -webkit-box !important;
          -webkit-box-orient: vertical !important;
          -webkit-line-clamp: 2 !important;
          overflow: hidden !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-person-role {
          color: #71804e !important;
          font-size: .72rem !important;
          font-weight: 900 !important;
          line-height: 1.25 !important;
          text-transform: uppercase !important;
          letter-spacing: .045em !important;
          display: -webkit-box !important;
          -webkit-box-orient: vertical !important;
          -webkit-line-clamp: 2 !important;
          overflow: hidden !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-person-affiliation {
          color: #687163 !important;
          font-size: .72rem !important;
          font-weight: 700 !important;
          line-height: 1.3 !important;
          display: -webkit-box !important;
          -webkit-box-orient: vertical !important;
          -webkit-line-clamp: 1 !important;
          overflow: hidden !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-linked-works {
          width: 100% !important;
          margin-top: auto !important;
          padding-top: 6px !important;
          display: flex !important;
          justify-content: center !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-view-profile {
          width: auto !important;
          height: auto !important;
          min-width: 0 !important;
          min-height: 34px !important;
          padding: 7px 11px !important;
          border: 1px solid rgba(54, 87, 58, .14) !important;
          border-radius: 999px !important;
          background: rgba(255, 253, 244, .82) !important;
          color: #31583a !important;
          box-shadow: none !important;
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 7px !important;
          font-size: .7rem !important;
          font-weight: 900 !important;
          line-height: 1 !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-view-profile svg {
          width: 14px !important;
          height: 14px !important;
          transition: transform .2s ease !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-person-card:hover .phase8b-view-profile svg {
          transform: translate(2px, -2px) !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-featured-person {
          position: absolute !important;
          z-index: 4 !important;
          top: 12px !important;
          right: 12px !important;
          min-height: 26px !important;
          padding: 5px 8px !important;
          border: 1px solid rgba(151, 130, 18, .24) !important;
          border-radius: 999px !important;
          background: rgba(255, 246, 198, .92) !important;
          color: #66590d !important;
          box-shadow: 0 7px 16px rgba(72, 62, 13, .08) !important;
          display: inline-flex !important;
          align-items: center !important;
          gap: 5px !important;
          font-size: .59rem !important;
          font-weight: 950 !important;
          letter-spacing: .03em !important;
          text-transform: uppercase !important;
        }
        body:not(.admin-mode) #editorial-people .phase8b-featured-person svg {
          width: 12px !important;
          height: 12px !important;
        }
        @media (max-width: 1040px) {
          body:not(.admin-mode) #editorial-people .phase8b-people-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
          }
          body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n+4) {
            display: none !important;
          }
        }
        @media (max-width: 760px) {
          body:not(.admin-mode) #editorial-people {
            padding: 36px 0 44px !important;
          }
          body:not(.admin-mode) #editorial-people .phase8b-section-head {
            width: calc(100vw - 32px) !important;
            max-width: calc(100vw - 32px) !important;
            margin-bottom: 22px !important;
            grid-template-columns: 1fr !important;
            grid-template-areas: "eyebrow" "title" "copy" "action" !important;
            row-gap: 9px !important;
          }
          body:not(.admin-mode) #editorial-people .phase8b-section-head .section-title {
            font-size: clamp(1.8rem, 9vw, 2.55rem) !important;
          }
          body:not(.admin-mode) #editorial-people .phase8b-view-all-people {
            width: 100% !important;
            min-width: 0 !important;
            margin-top: 7px !important;
          }
          body:not(.admin-mode) #editorial-people .phase8b-people-grid {
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
            padding: 2px 18px 16px !important;
            display: flex !important;
            gap: 14px !important;
            overflow-x: auto !important;
            overflow-y: visible !important;
            scroll-snap-type: x mandatory !important;
            scroll-padding-inline: 18px !important;
            -webkit-overflow-scrolling: touch !important;
          }
          body:not(.admin-mode) #editorial-people .phase8b-person-card,
          body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n+4) {
            display: flex !important;
            flex: 0 0 min(72vw, 248px) !important;
            min-width: min(72vw, 248px) !important;
            max-width: min(72vw, 248px) !important;
            min-height: 272px !important;
            scroll-snap-align: start !important;
          }
          body:not(.admin-mode) #editorial-people .phase8b-person-image {
            width: 112px !important;
            height: 112px !important;
            min-width: 112px !important;
            min-height: 112px !important;
            flex-basis: 112px !important;
          }
        }
        @media (max-width: 420px) {
          body:not(.admin-mode) #editorial-people .phase8b-person-card,
          body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n+4) {
            flex-basis: min(78vw, 238px) !important;
            min-width: min(78vw, 238px) !important;
            max-width: min(78vw, 238px) !important;
          }
        }
        @media (prefers-reduced-motion: reduce) {
          body:not(.admin-mode) #editorial-people .phase8b-person-card,
          body:not(.admin-mode) #editorial-people .phase8b-person-image,
          body:not(.admin-mode) #editorial-people .phase8b-view-all-people,
          body:not(.admin-mode) #editorial-people .phase8b-view-profile svg {
            transition: none !important;
          }
        }


/* ===== PREVIOUSLY RUNTIME-INJECTED: V31 final polish ===== */
body:not(.admin-mode) #editorial-people .phase8b-person-card,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-card{
      min-height:0!important;height:auto!important;overflow:visible!important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-copy,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-copy{
      width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;
      display:grid!important;grid-template-rows:auto auto auto!important;justify-items:center!important;
      align-content:start!important;gap:5px!important;padding:0!important;background:transparent!important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-name,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-name{
      order:1!important;width:100%!important;max-width:178px!important;min-height:2.35em!important;height:auto!important;
      margin:0!important;padding:0!important;color:#203b29!important;font-size:clamp(.88rem,1vw,1rem)!important;
      font-weight:950!important;line-height:1.16!important;text-align:center!important;white-space:normal!important;
      display:flex!important;align-items:flex-start!important;justify-content:center!important;overflow:visible!important;
      -webkit-line-clamp:unset!important;text-wrap:balance!important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-role,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-role,
    body:not(.admin-mode) #editorial-people .phase8b-person-affiliation,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-affiliation{
      display:none!important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-linked-works,
    body:not(.admin-mode) #editorial-collaborators .phase8b-linked-works{
      order:3!important;width:auto!important;height:auto!important;margin:1px 0 0!important;padding:0!important;
      display:flex!important;justify-content:center!important;align-items:center!important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-view-profile,
    body:not(.admin-mode) #editorial-collaborators .phase8b-view-profile{
      width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;padding:0!important;
      border-radius:999px!important;background:rgba(255,253,244,.96)!important;border:1px solid rgba(43,75,50,.15)!important;
      color:#31583a!important;box-shadow:0 7px 16px rgba(25,52,34,.09)!important;display:grid!important;place-items:center!important;
      font-size:0!important;transition:transform .18s ease,background .18s ease,box-shadow .18s ease!important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-view-profile span,
    body:not(.admin-mode) #editorial-collaborators .phase8b-view-profile span{display:none!important;}
    body:not(.admin-mode) #editorial-people .phase8b-view-profile svg,
    body:not(.admin-mode) #editorial-collaborators .phase8b-view-profile svg{
      width:17px!important;height:17px!important;transform:none!important;
    }
    body:not(.admin-mode) #editorial-people .phase8b-person-card:hover .phase8b-view-profile,
    body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:hover .phase8b-view-profile{
      transform:translateY(-1px)!important;background:#f7f0d0!important;box-shadow:0 9px 20px rgba(25,52,34,.12)!important;
    }
    body:not(.admin-mode) #story-modal .document-modal[data-resource-type="film"] .document-actions > #modal-qr-link{
      display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;
    }
    body:not(.admin-mode) #story-modal .film-launch-actions .film-launch-qr{
      display:inline-flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;
    }
    @media(max-width:700px){
      body:not(.admin-mode) #editorial-people .phase8b-person-name,
      body:not(.admin-mode) #editorial-collaborators .phase8b-person-name{min-height:2.3em!important;max-width:132px!important;font-size:.82rem!important;}
      body:not(.admin-mode) #editorial-people .phase8b-view-profile,
      body:not(.admin-mode) #editorial-collaborators .phase8b-view-profile{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;}
    }


/* ===== PREVIOUSLY RUNTIME-INJECTED: V29 late public polish (final authority) ===== */
body:not(.admin-mode) #editorial-people .phase8b-person-card,
        body:not(.admin-mode) #editorial-collaborators .phase8b-person-card,
        body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n),
        body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(n){background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;transform:none!important;isolation:auto!important;}
        body:not(.admin-mode) #editorial-people .phase8b-person-card::before,
        body:not(.admin-mode) #editorial-people .phase8b-person-card::after,
        body:not(.admin-mode) #editorial-collaborators .phase8b-person-card::before,
        body:not(.admin-mode) #editorial-collaborators .phase8b-person-card::after{content:none!important;display:none!important;}
        body:not(.admin-mode) #editorial-people .phase8b-person-card:hover,
        body:not(.admin-mode) #editorial-people .phase8b-person-card:focus-visible,
        body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:hover,
        body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:focus-visible{background:transparent!important;border:0!important;box-shadow:none!important;transform:none!important;outline:none!important;}
        body:not(.admin-mode) #editorial-people .phase8b-person-card:hover .phase8b-person-image,
        body:not(.admin-mode) #editorial-people .phase8b-person-card:focus-visible .phase8b-person-image,
        body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:hover .phase8b-person-image,
        body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:focus-visible .phase8b-person-image{transform:translateY(-3px) scale(1.035)!important;border-color:rgba(246,213,101,.96)!important;box-shadow:0 14px 28px rgba(29,58,37,.20),0 0 0 4px rgba(246,213,101,.16)!important;}
        body:not(.admin-mode) #editorial-people .phase8b-person-copy,
        body:not(.admin-mode) #editorial-collaborators .phase8b-person-copy{display:flex!important;visibility:visible!important;opacity:1!important;background:transparent!important;min-height:0!important;height:auto!important;}
        body:not(.admin-mode) #editorial-people .phase8b-person-name,
        body:not(.admin-mode) #editorial-collaborators .phase8b-person-name{display:block!important;visibility:visible!important;opacity:1!important;position:static!important;width:100%!important;max-width:160px!important;min-height:1.1em!important;height:auto!important;margin:0!important;padding:0!important;color:#203b29!important;font-size:clamp(.88rem,1vw,1rem)!important;font-weight:950!important;line-height:1.15!important;text-align:center!important;white-space:normal!important;overflow:visible!important;text-wrap:balance!important;-webkit-line-clamp:unset!important;}
        body:not(.admin-mode) #editorial-people .phase8b-person-role{display:block!important;visibility:visible!important;opacity:1!important;position:static!important;max-width:160px!important;min-height:0!important;height:auto!important;margin:4px 0 0!important;color:#6a784d!important;font-size:.62rem!important;line-height:1.2!important;text-align:center!important;}
        body:not(.admin-mode) #editorial-collaborators .phase8b-person-role,
        body:not(.admin-mode) #editorial-collaborators .phase8b-person-affiliation{display:none!important;visibility:hidden!important;opacity:0!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;}
        body:not(.admin-mode) #editorial-people .phase8b-linked-works,
        body:not(.admin-mode) #editorial-collaborators .phase8b-linked-works{display:flex!important;width:auto!important;margin-top:5px!important;padding-top:0!important;}
        body:not(.admin-mode) #editorial-people .phase8b-view-profile,
        body:not(.admin-mode) #editorial-collaborators .phase8b-view-profile{width:auto!important;min-width:0!important;height:auto!important;min-height:26px!important;padding:2px!important;border:0!important;border-radius:0!important;background:transparent!important;color:#31583a!important;box-shadow:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;font-size:.69rem!important;font-weight:900!important;}
        @media(min-width:820px){
          body:not(.admin-mode) #editorial-people .phase8b-people-grid,
          body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid{width:min(1120px,calc(100vw - 48px))!important;max-width:1120px!important;margin:0 auto!important;padding:8px 0 12px!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:clamp(26px,3vw,48px)!important;justify-items:center!important;align-items:start!important;overflow:visible!important;}
          body:not(.admin-mode) #editorial-people .phase8b-person-card,
          body:not(.admin-mode) #editorial-collaborators .phase8b-person-card,
          body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n),
          body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(n){display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;width:min(100%,170px)!important;min-width:0!important;max-width:170px!important;min-height:0!important;height:auto!important;padding:0!important;gap:8px!important;}
          body:not(.admin-mode) #editorial-people .phase8b-person-image,
          body:not(.admin-mode) #editorial-collaborators .phase8b-person-image{width:116px!important;height:116px!important;min-width:116px!important;min-height:116px!important;flex:0 0 116px!important;margin:0 auto 3px!important;border-radius:999px!important;overflow:hidden!important;}
        }
        @media(min-width:481px) and (max-width:819px){
          body:not(.admin-mode) #editorial-people .phase8b-people-grid,
          body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid{width:min(650px,calc(100% - 28px))!important;max-width:650px!important;margin:0 auto!important;padding:6px 8px 14px!important;display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;column-gap:clamp(8px,2vw,18px)!important;row-gap:24px!important;justify-items:center!important;overflow:visible!important;}
          body:not(.admin-mode) #editorial-people .phase8b-person-card,
          body:not(.admin-mode) #editorial-collaborators .phase8b-person-card,
          body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n),
          body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(n){display:flex!important;grid-column:span 2!important;flex-direction:column!important;align-items:center!important;width:min(100%,150px)!important;min-width:0!important;max-width:150px!important;min-height:0!important;height:auto!important;padding:0!important;gap:7px!important;}
          body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(4),body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(4){grid-column:2 / span 2!important;}
          body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(5),body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(5){grid-column:4 / span 2!important;}
          body:not(.admin-mode) #editorial-people .phase8b-person-image,body:not(.admin-mode) #editorial-collaborators .phase8b-person-image{width:88px!important;height:88px!important;min-width:88px!important;min-height:88px!important;flex:0 0 88px!important;}
        }
        @media(max-width:480px){
          body:not(.admin-mode) #editorial-people .phase8b-people-grid,
          body:not(.admin-mode) #editorial-collaborators .phase8b-people-grid{width:100%!important;max-width:100%!important;margin:0!important;padding:6px 16px 12px!important;display:flex!important;gap:14px!important;justify-content:flex-start!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory!important;}
          body:not(.admin-mode) #editorial-people .phase8b-person-card,
          body:not(.admin-mode) #editorial-collaborators .phase8b-person-card,
          body:not(.admin-mode) #editorial-people .phase8b-person-card:nth-child(n),
          body:not(.admin-mode) #editorial-collaborators .phase8b-person-card:nth-child(n){display:flex!important;flex:0 0 126px!important;width:126px!important;min-width:126px!important;max-width:126px!important;min-height:0!important;height:auto!important;padding:0!important;gap:7px!important;scroll-snap-align:start!important;}
          body:not(.admin-mode) #editorial-people .phase8b-person-image,body:not(.admin-mode) #editorial-collaborators .phase8b-person-image{width:76px!important;height:76px!important;min-width:76px!important;min-height:76px!important;flex:0 0 76px!important;}
        }


/* ===== 2026-09-19 launch stability normalization =====
   Keeps closed overlays from owning pointer events and constrains modal children
   without changing NarraSpace's visual direction. */
#music-player-modal[hidden],
#music-archive-modal[hidden],
#music-action-modal[hidden],
#story-modal[hidden],
#story-description-modal[hidden],
#qr-modal[hidden],
#review-modal[hidden],
#beta-status-modal[hidden],
#login-modal[hidden]{
  display:none !important;
  pointer-events:none !important;
}
#music-player-modal *,
#story-modal *,
#story-description-modal *,
#qr-modal *,
#review-modal *{box-sizing:border-box;}
#music-player-modal .music-player-stage > *,
#music-player-modal .music-player-copy,
#music-player-modal .music-player-details,
#story-modal .document-modal,
#story-modal .document-viewer,
#story-modal .film-launch-copy{min-width:0;}

/* Short landscape devices: keep the current composition but guarantee a safe
   scrollable center instead of allowing actions to fall below browser chrome. */
@media (orientation:landscape) and (max-width:980px) and (max-height:430px){
  #music-player-modal.music-player-modal{
    padding:max(5px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)) !important;
  }
  #music-player-modal .music-player-shell{
    max-width:100% !important;
    max-height:calc(100dvh - max(10px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
    overflow:hidden !important;
  }
  #music-player-modal .music-player-stage{
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
  }
  body.ns-m8-film-mobile-active #story-modal .document-modal{
    max-height:100dvh !important;
    overflow:hidden !important;
  }
  body.ns-m8-film-mobile-active #story-modal .film-launch-copy{
    max-height:calc(100dvh - max(20px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
  }
}