/* P.ai.mon F · 分享与课程阅读 */

.shares-page {
  --share-cyan: #9ba8cf;
  --share-blue: #7784b5;
  --share-violet: #b2a1c7;
  --share-warm: #caa47b;
  --share-panel: rgba(255, 255, 255, 0.055);
  --share-panel-strong: rgba(255, 255, 255, 0.085);
  --share-line: rgba(255, 255, 255, 0.11);
  background: radial-gradient(circle at 82% 12%, rgba(91,101,160,0.1), transparent 31rem), linear-gradient(180deg,#07070a 0%,#050506 42%,#050506 100%);
}
.shares-page #header.shares-header { z-index: 52; padding-top: clamp(18px,2vw,28px); padding-bottom: clamp(18px,2vw,28px); background: linear-gradient(to bottom,rgba(5,5,6,.9),rgba(5,5,6,.4),transparent); transform: translateY(0) !important; }
.shares-page #header.shares-header.scrolled { background: rgba(7,7,10,.74); border-bottom: 1px solid var(--share-line); backdrop-filter: blur(22px) saturate(1.12); -webkit-backdrop-filter: blur(22px) saturate(1.12); }
.shares-page #main-content { min-height: 80vh; }
.eyebrow { color: var(--share-cyan); font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--color-text-muted); font-size: .78rem; }
.breadcrumb a { transition: color 160ms ease; }

.share-library,.course-hero,.curriculum { width: min(1120px,calc(100% - (2 * var(--padding-x)))); margin-inline: auto; }
.share-library { padding: clamp(150px,18vh,220px) 0 150px; }
.share-intro { max-width: 760px; }
.share-intro h1 { margin-top: 18px; font-size: clamp(2.35rem,4.6vw,4.6rem); line-height: 1.02; letter-spacing: -.052em; text-wrap: balance; }
html[lang="en"] .share-intro h1 { font-size: clamp(2.2rem,4.1vw,4.05rem); letter-spacing: -.045em; }
.share-intro > p:last-child { max-width: 610px; margin-top: 26px; color: var(--color-text-secondary); font-size: 1rem; line-height: 1.75; }
.share-entry-grid { grid-template-columns: 1fr; margin-top: 54px; }
.share-course-entry { min-height: 390px; align-items: flex-start; justify-content: flex-end; padding: clamp(32px,5vw,60px); text-align: left; }
.share-course-entry .app-card-content { max-width: 690px; }
.share-course-bg { opacity: .92; background-image: url('中间文件/分享/产品经理精品课卡片背景-v1.webp'); background-position: center; background-size: cover; }
.share-course-entry .app-card-gradient { background: linear-gradient(90deg,rgba(5,8,16,.96) 0%,rgba(5,8,16,.78) 44%,rgba(5,8,16,.22) 82%,rgba(5,8,16,.12) 100%); }
.share-course-meta { display: flex; gap: 8px; margin-bottom: 48px; }
.share-course-meta span { padding: 7px 11px; border: 1px solid rgba(208,215,235,.2); border-radius: 999px; background: rgba(7,10,18,.26); color: rgba(229,232,242,.74); font-family: var(--font-mono); font-size: .64rem; letter-spacing: .06em; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.share-course-entry .app-card-name { font-size: clamp(1.8rem,3.4vw,3.35rem); letter-spacing: -.045em; }
.share-course-entry .app-card-tagline { max-width: 620px; margin-top: 14px; color: rgba(240,241,250,.7); font-size: .95rem; line-height: 1.75; }
.share-course-entry .app-card-arrow { margin-top: 14px; color: #9eaad2; }

.course-overview-page #main-content { padding-top: 130px; }
.course-overview-page #main-content > .breadcrumb { width: min(1120px,calc(100% - (2 * var(--padding-x)))); margin: 0 auto; }
.course-hero { padding: 58px 0 82px; }
.course-kicker { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--share-line); color: var(--share-cyan); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; }
.course-hero h1 { margin-top: 44px; font-size: clamp(2.3rem,4.2vw,4.25rem); line-height: 1.02; letter-spacing: -.052em; }
html[lang="en"] .course-hero h1 { font-size: clamp(2.15rem,3.8vw,3.8rem); letter-spacing: -.044em; }
.course-hero h1 span { color: var(--color-text-muted); }
.course-purpose { max-width: 820px; margin-top: 34px; color: var(--color-text-secondary); font-size: clamp(.98rem,1.25vw,1.12rem); line-height: 1.85; }
.course-purpose strong { display: block; margin-bottom: 8px; color: var(--share-cyan); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; }
.curriculum { padding: 80px 0 150px; border-top: 1px solid var(--share-line); }
.section-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.section-heading-row h2 { margin-top: 8px; font-size: clamp(1.9rem,3.25vw,3rem); letter-spacing: -.04em; }
.curriculum-phase { margin-top: 72px; }
.phase-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 22px; }
.phase-heading > div > span,.phase-heading > span { color: var(--color-text-muted); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; }
.phase-heading h2 { margin-top: 7px; font-size: clamp(1.55rem,2.7vw,2.65rem); letter-spacing: -.035em; }
.phase-heading p { margin-top: 8px; color: var(--color-text-muted); font-size: .84rem; line-height: 1.6; }
.lesson-grid { border-top: 1px solid var(--share-line); }
.lesson-card { display: grid; grid-template-columns: 64px minmax(0,1fr) 20px; gap: 20px; align-items: center; padding: 22px 10px; border-bottom: 1px solid var(--share-line); transition: background-color 180ms ease,padding-left 180ms ease; }
.lesson-number { color: var(--share-cyan); font-family: var(--font-mono); font-size: .72rem; }
.lesson-card h3 { font-size: clamp(1rem,1.5vw,1.2rem); letter-spacing: -.018em; }
.share-intro h1,.course-hero h1,.lesson-card h3,.lesson-sidebar-panel nav a,.lesson-hero h1,.lesson-pager-card strong { overflow-wrap: anywhere; }
.lesson-card > svg { transition: transform 180ms ease; }

.lesson-page { --lesson-drawer-width: 304px; --lesson-drawer-shift: 152px; overflow-x: clip; }
.lesson-light-field { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.lesson-light-orb { position: absolute; border-radius: 50%; filter: blur(66px); will-change: transform; }
.lesson-light-orb--a { top: -12vh; left: 18vw; width: 52vw; height: 42vw; background: rgba(91,105,182,.39); animation: lessonLightA 19s ease-in-out infinite alternate; }
.lesson-light-orb--b { top: 38vh; right: -16vw; width: 48vw; height: 48vw; background: rgba(150,111,171,.29); animation: lessonLightB 24s ease-in-out infinite alternate; }
.lesson-light-orb--c { bottom: -24vh; left: -10vw; width: 42vw; height: 42vw; background: rgba(170,127,99,.19); animation: lessonLightC 22s ease-in-out infinite alternate; }
@keyframes lessonLightA { from { transform: translate3d(-4vw,-2vh,0) scale(.94); } to { transform: translate3d(10vw,8vh,0) scale(1.1); } }
@keyframes lessonLightB { from { transform: translate3d(3vw,-4vh,0) scale(1); } to { transform: translate3d(-13vw,7vh,0) scale(.9); } }
@keyframes lessonLightC { from { transform: translate3d(-3vw,5vh,0) scale(.92); } to { transform: translate3d(12vw,-8vh,0) scale(1.08); } }
.lesson-particles { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.lesson-page #footer,.lesson-page #footer-top-btn { z-index: 1; }
.lesson-page #main-content { position: relative; z-index: 1; }
.lesson-page #main-content { padding-top: 105px; }
.lesson-layout { display: block; width: min(860px,calc(100% - (2 * var(--padding-x)))); margin: 0 auto; transition: transform 280ms cubic-bezier(.2,.8,.2,1); }
.lesson-sidebar-toggle { position: fixed; top: 122px; left: 20px; z-index: 45; display: flex; width: 52px; height: 44px; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--share-line); border-radius: 11px; background: rgba(12,12,16,.76); color: var(--color-text-secondary); box-shadow: 0 12px 34px rgba(0,0,0,.16); cursor: pointer; opacity: 1; transform: translate3d(0,0,0); transition: opacity 180ms ease,transform 240ms cubic-bezier(.2,.8,.2,1),background-color 180ms ease; backdrop-filter: blur(18px) saturate(1.08); -webkit-backdrop-filter: blur(18px) saturate(1.08); }
.lesson-sidebar-toggle span { font-family: var(--font-mono); font-size: .6rem; }
.lesson-sidebar-toggle:focus-visible,.lesson-sidebar-close:focus-visible { outline: 2px solid rgba(155,168,207,.68); outline-offset: 3px; }
.lesson-sidebar-open .lesson-sidebar-toggle { opacity: 0; transform: translate3d(-12px,0,0); pointer-events: none; }
.lesson-sidebar-panel { position: fixed; inset: 88px auto 0 0; z-index: 44; display: flex; width: min(var(--lesson-drawer-width),calc(100vw - 24px)); flex-direction: column; border-right: 1px solid var(--share-line); background: rgba(10,10,14,.9); box-shadow: 18px 0 54px rgba(0,0,0,.2); visibility: hidden; transform: translate3d(-100%,0,0); transition: transform 280ms cubic-bezier(.2,.8,.2,1),visibility 0s linear 280ms; backdrop-filter: blur(26px) saturate(1.12); -webkit-backdrop-filter: blur(26px) saturate(1.12); }
.lesson-sidebar-open .lesson-sidebar-panel { visibility: visible; transform: translate3d(0,0,0); transition-delay: 0s; }
.lesson-sidebar-header { display: flex; min-height: 82px; align-items: center; gap: 12px; padding: 16px 14px 16px 22px; border-bottom: 1px solid var(--share-line); }
.sidebar-course-title { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.sidebar-course-title span { font-size: .92rem; font-weight: 650; }
.sidebar-course-title strong { color: var(--color-text-muted); font-family: var(--font-mono); font-size: .63rem; font-weight: 400; letter-spacing: .04em; }
.lesson-sidebar-close { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border: 1px solid transparent; border-radius: 9px; color: var(--color-text-muted); cursor: pointer; transition: color 160ms ease,background-color 160ms ease,border-color 160ms ease; }
.lesson-sidebar-current { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 22px; border-bottom: 1px solid var(--share-line); color: var(--color-text-muted); font-size: .68rem; }
.lesson-sidebar-current strong { color: var(--share-cyan); font-family: var(--font-mono); font-size: .66rem; font-weight: 500; }
.lesson-sidebar-panel nav { flex: 1; overflow-y: auto; padding: 10px 10px 24px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.lesson-sidebar-panel nav a { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 9px; padding: 10px 12px; border-radius: 9px; color: var(--color-text-secondary); font-size: .75rem; line-height: 1.42; transition: color 160ms ease,background-color 160ms ease; }
.lesson-sidebar-panel nav a > span:first-child { color: var(--color-text-muted); font-family: var(--font-mono); font-size: .6rem; }
.lesson-sidebar-panel nav a.active { background: rgba(155,168,207,.13); color: var(--color-text); }
.lesson-sidebar-panel nav a.active > span:first-child { color: var(--share-cyan); }
.lesson-sidebar-backdrop { position: fixed; inset: 0; z-index: 43; display: none; background: rgba(4,4,7,.34); opacity: 0; pointer-events: none; transition: opacity 220ms ease; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.lesson-article { min-width: 0; padding-bottom: 120px; }
.lesson-hero { padding: 58px 0 50px; }
.lesson-position { display: flex; justify-content: space-between; gap: 20px; color: var(--color-text-muted); font-family: var(--font-mono); font-size: .68rem; line-height: 1.5; letter-spacing: .03em; }
.lesson-position span:first-child { color: var(--share-cyan); white-space: nowrap; }
.lesson-hero h1 { max-width: 780px; margin-top: 24px; font-size: clamp(1.9rem,3.25vw,3.35rem); line-height: 1.08; letter-spacing: -.046em; text-wrap: balance; }
.lesson-hero > p { max-width: 730px; margin-top: 28px; color: var(--color-text-secondary); font-size: .98rem; line-height: 1.82; }
.lesson-hero > p strong { display: block; margin-bottom: 6px; color: var(--share-violet); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .05em; }
.markdown-body { padding-top: 48px; color: rgba(240,241,250,.82); font-size: 1rem; line-height: 1.9; }
.markdown-body > * { max-width: 100%; }
.markdown-body h2 { margin: 5rem 0 1.6rem; color: var(--color-text); font-size: clamp(1.55rem,2.5vw,2.15rem); line-height: 1.26; letter-spacing: -.032em; text-wrap: balance; }
.markdown-body h2:first-child { margin-top: 1rem; }
.markdown-body h3 { margin: 3.2rem 0 1.2rem; color: var(--color-text); font-size: clamp(1.2rem,2vw,1.5rem); line-height: 1.35; letter-spacing: -.022em; }
.markdown-body h4 { margin: 2.4rem 0 1rem; color: var(--color-text); font-size: 1.05rem; }
.markdown-body p { margin: 1.15rem 0; }
.markdown-body strong { color: var(--color-text); font-weight: 650; }
.markdown-body em { color: var(--share-warm); }
.markdown-body a { color: var(--share-cyan); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.markdown-body a { overflow-wrap: anywhere; }
.markdown-body hr { height: 1px; margin: 4rem 0; border: 0; background: var(--share-line); }
.markdown-body hr:has(+ h2) { display: none; }
.markdown-body ul,.markdown-body ol { margin: 1.25rem 0; padding-left: 1.5rem; }
.markdown-body ul { list-style: disc; }
.markdown-body ol { list-style: decimal; }
.markdown-body li { margin: .68rem 0; padding-left: .3rem; }
.markdown-body li::marker { color: var(--share-cyan); font-family: var(--font-mono); }
.markdown-body blockquote { margin: 2.1rem 0; padding: 1.25rem 1.4rem 1.25rem 1.6rem; border-left: 3px solid var(--share-cyan); border-radius: 0 14px 14px 0; background: linear-gradient(90deg,rgba(155,168,207,.1),rgba(155,168,207,.025)); color: var(--color-text); }
.markdown-body blockquote p { margin: .4rem 0; }
.markdown-body code { padding: .14em .38em; border: 1px solid var(--share-line); border-radius: 5px; background: rgba(255,255,255,.055); color: #d8dcff; font-family: var(--font-mono); font-size: .84em; }
.markdown-body pre { overflow: auto; margin: 2rem 0; padding: 22px; border: 1px solid var(--share-line); border-radius: 14px; background: #090b10; color: #dfe8ef; line-height: 1.65; }
.markdown-body pre code { padding: 0; border: 0; background: none; color: inherit; font-size: .78rem; }
.table-scroll { position: relative; overflow-x: auto; margin: 2.1rem 0; border: 1px solid var(--share-line); border-radius: 14px; background: rgba(255,255,255,.025); overscroll-behavior-x: contain; scrollbar-width: thin; }
.table-scroll:focus-visible { outline-offset: 3px; }
.markdown-body table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .82rem; line-height: 1.58; }
.markdown-body th,.markdown-body td { padding: 12px 14px; border-right: 1px solid var(--share-line); border-bottom: 1px solid var(--share-line); text-align: left; vertical-align: top; }
.markdown-body th:last-child,.markdown-body td:last-child { border-right: 0; }
.markdown-body tr:last-child td { border-bottom: 0; }
.markdown-body th { position: sticky; top: 0; z-index: 1; background: #14151a; color: var(--color-text); font-weight: 650; }
.markdown-body tbody tr:nth-child(even) { background: rgba(255,255,255,.018); }
.text-diagram { margin: 2.4rem 0; border: 1px solid rgba(168,140,255,.25); border-radius: 16px; overflow: hidden; background: radial-gradient(circle at 90% 20%,rgba(168,140,255,.12),transparent 45%),#090a10; }
.text-diagram figcaption { padding: 11px 18px; border-bottom: 1px solid var(--share-line); color: var(--share-violet); font-family: var(--font-mono); font-size: .67rem; letter-spacing: .08em; }
.text-diagram pre { margin: 0; border: 0; border-radius: 0; background: transparent; }
.course-visual { --visual-bg: rgba(12,13,19,.84); --visual-card: rgba(255,255,255,.055); --visual-card-strong: rgba(255,255,255,.085); --visual-border: rgba(188,197,224,.14); --visual-muted: rgba(226,229,240,.58); position: relative; overflow: hidden; margin: 2.6rem 0; padding: clamp(18px,3vw,28px); border: 1px solid var(--visual-border); border-radius: 20px; background: radial-gradient(circle at 12% 0,rgba(106,130,202,.16),transparent 36%),radial-gradient(circle at 100% 100%,rgba(159,119,172,.13),transparent 42%),var(--visual-bg); box-shadow: 0 20px 52px rgba(0,0,0,.16); }
.course-visual-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.course-visual-caption span { color: var(--color-text); font-size: clamp(1rem,1.8vw,1.25rem); font-weight: 680; letter-spacing: -.02em; }
.course-visual-caption strong { color: var(--visual-muted); font-family: var(--font-mono); font-size: .62rem; font-weight: 500; letter-spacing: .035em; text-align: right; }
.journey-persona { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 11px 14px; border: 1px solid var(--visual-border); border-radius: 12px; background: rgba(120,139,196,.075); }
.journey-persona span { flex: none; color: var(--share-cyan); font-family: var(--font-mono); font-size: .61rem; letter-spacing: .06em; text-transform: uppercase; }
.journey-persona strong { color: var(--color-text-secondary); font-size: .76rem; font-weight: 530; line-height: 1.55; }
.journey-stages { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.journey-stage { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--visual-border); border-radius: 14px; background: var(--visual-card); }
.journey-stage::before { position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg,#8798cb,#ad96bc); content: ''; }
.journey-stage:not(:last-child)::after { position: absolute; top: 25px; right: -8px; z-index: 2; width: 14px; height: 1px; background: rgba(165,178,215,.45); content: ''; }
.journey-stage header { display: flex; min-height: 54px; align-items: center; gap: 9px; padding: 12px; border-bottom: 1px solid var(--visual-border); }
.journey-stage header span { color: var(--share-cyan); font-family: var(--font-mono); font-size: .57rem; }
.journey-stage header strong { color: var(--color-text); font-size: .8rem; font-weight: 650; line-height: 1.35; }
.journey-stage dl { margin: 0; }
.journey-detail { min-height: 74px; padding: 10px 11px; border-bottom: 1px solid var(--visual-border); }
.journey-detail:last-child { border-bottom: 0; }
.journey-detail dt { margin-bottom: 4px; color: var(--visual-muted); font-family: var(--font-mono); font-size: .55rem; letter-spacing: .04em; }
.journey-detail dd { margin: 0; color: var(--color-text-secondary); font-size: .68rem; line-height: 1.52; overflow-wrap: anywhere; }
.journey-detail--emotion { min-height: 60px; background: rgba(124,141,194,.075); }
.journey-detail--emotion dd { color: var(--color-text); font-size: .77rem; letter-spacing: .03em; }
.journey-detail--pain dd { color: #d1adad; }
.journey-detail--opportunity { background: rgba(153,126,177,.07); }
.journey-detail--opportunity dd { color: #c5bad0; font-weight: 580; }
.funnel-steps { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.funnel-step { width: calc(100% - (var(--funnel-level) * 8%)); margin-inline: auto !important; padding: 0 !important; }
.funnel-step::marker { content: ''; }
.funnel-connector { display: flex; height: 38px; align-items: center; justify-content: center; gap: 7px; color: var(--visual-muted); }
.funnel-connector svg { width: 16px; height: 16px; overflow: visible; }
.funnel-connector path { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.funnel-connector span { min-width: 36px; padding: 3px 7px; border: 1px solid var(--visual-border); border-radius: 999px; background: var(--visual-card); font-family: var(--font-mono); font-size: .55rem; text-align: center; }
.funnel-bar { display: grid; grid-template-columns: 34px minmax(82px,.65fr) auto minmax(145px,1.35fr); min-height: 70px; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid var(--visual-border); border-radius: 14px; background: var(--visual-card); box-shadow: inset 3px 0 0 var(--funnel-accent); }
.funnel-step:nth-child(1) { --funnel-accent: #8598d0; }
.funnel-step:nth-child(2) { --funnel-accent: #789fbd; }
.funnel-step:nth-child(3) { --funnel-accent: #9b8fbd; }
.funnel-step:nth-child(4) { --funnel-accent: #b89189; }
.funnel-step:nth-child(5) { --funnel-accent: #b982a5; }
.funnel-letter { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--funnel-accent); border-radius: 50%; color: var(--funnel-accent); font-family: var(--font-mono); font-size: .62rem; font-weight: 700; }
.funnel-name { color: var(--color-text); font-size: .8rem; font-weight: 650; }
.funnel-count { color: var(--color-text); font-family: var(--font-mono); font-size: clamp(.85rem,1.7vw,1.1rem); font-weight: 600; font-variant-numeric: tabular-nums; }
.funnel-description { color: var(--color-text-secondary); font-size: .69rem; line-height: 1.5; }
.lesson-pager { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 84px; padding-top: 28px; border-top: 1px solid var(--share-line); }
.lesson-pager-card { display: flex; align-items: center; gap: 16px; min-height: 126px; padding: 20px; border: 1px solid var(--share-line); border-radius: 16px; background: var(--share-panel); transition: border-color 180ms ease,background-color 180ms ease,transform 180ms ease; }
.lesson-pager-card--next { justify-content: flex-end; text-align: right; }
.lesson-pager-card span { display: flex; flex-direction: column; gap: 7px; }
.lesson-pager-card small { color: var(--color-text-muted); font-family: var(--font-mono); font-size: .63rem; }
.lesson-pager-card strong { font-size: .88rem; line-height: 1.45; }
.shares-footer { position: relative; }

body.light-mode.shares-page { --share-cyan: #606c93; --share-blue: #66739e; --share-violet: #746788; --share-warm: #8d6745; --share-panel: rgba(0,0,0,.035); --share-panel-strong: rgba(0,0,0,.055); --share-line: rgba(0,0,0,.11); background: radial-gradient(circle at 82% 12%,rgba(100,112,170,.065),transparent 31rem),linear-gradient(180deg,#f5f5f7 0%,#f5f5f7 100%); }
body.light-mode.shares-page #header.shares-header { background: linear-gradient(to bottom,rgba(245,245,247,.92),rgba(245,245,247,.5),transparent); }
body.light-mode.shares-page #header.shares-header.scrolled { background: rgba(245,245,247,.78); }
body.light-mode .share-course-entry .share-course-bg { opacity: .9; filter: none; }
body.light-mode .share-course-entry .app-card-gradient { background: linear-gradient(90deg,rgba(4,7,12,.94),rgba(4,7,12,.58) 65%,rgba(4,7,12,.12)); }
body.light-mode .share-course-entry .app-card-name { color: #fff !important; }
body.light-mode .share-course-entry .app-card-tagline { color: rgba(240,241,250,.76) !important; }
body.light-mode .share-course-entry .app-card-arrow { color: #b6c0dd; }
body.light-mode .lesson-light-orb--a { background: rgba(118,137,202,.28); }
body.light-mode .lesson-light-orb--b { background: rgba(167,126,171,.21); }
body.light-mode .lesson-light-orb--c { background: rgba(197,151,116,.14); }
body.light-mode .lesson-sidebar-toggle,body.light-mode .lesson-sidebar-panel { background: rgba(245,245,247,.9); box-shadow: 0 18px 52px rgba(25,28,42,.1); }
body.light-mode .markdown-body { color: rgba(29,29,31,.78); }
body.light-mode .markdown-body th { background: #e8e8ed; }
body.light-mode .markdown-body code { color: #3f477e; }
body.light-mode .markdown-body pre,body.light-mode .text-diagram { background: #12141b; color: #eef3f6; }
body.light-mode .course-visual { --visual-bg: rgba(255,255,255,.7); --visual-card: rgba(255,255,255,.72); --visual-card-strong: rgba(255,255,255,.92); --visual-border: rgba(67,76,108,.16); --visual-muted: rgba(56,61,78,.62); background: radial-gradient(circle at 10% 0,rgba(113,133,192,.13),transparent 38%),radial-gradient(circle at 100% 100%,rgba(166,125,169,.11),transparent 42%),var(--visual-bg); box-shadow: 0 18px 44px rgba(48,53,77,.08); }
body.light-mode .journey-persona { background: rgba(102,121,177,.075); }
body.light-mode .journey-detail--emotion { background: rgba(105,123,180,.075); }
body.light-mode .journey-detail--pain dd { color: #925e5e; }
body.light-mode .journey-detail--opportunity { background: rgba(137,104,151,.075); }
body.light-mode .journey-detail--opportunity dd { color: #725d7c; }

@media (hover:hover) and (pointer:fine) {
  .breadcrumb a:hover { color: var(--color-text); }
  .lesson-card:hover { padding-left: 18px; background: rgba(255,255,255,.035); }
  .lesson-card:hover > svg { transform: translateX(4px); }
  .lesson-pager-card:hover { transform: translateY(-3px); border-color: rgba(155,168,207,.34); background: var(--share-panel-strong); }
  .lesson-sidebar-panel nav a:hover { color: var(--color-text); background: rgba(255,255,255,.045); }
  .lesson-sidebar-close:hover,.lesson-sidebar-toggle:hover { color: var(--color-text); border-color: var(--share-line); background-color: var(--share-panel-strong); }
}
@media (min-width:1181px) {
  .lesson-sidebar-open .lesson-layout { transform: translate3d(var(--lesson-drawer-shift),0,0); }
}
@media (max-width:1180px) {
  .lesson-sidebar-backdrop { display: block; }
  .lesson-sidebar-open .lesson-sidebar-backdrop { opacity: 1; pointer-events: auto; }
}
@media (max-width:820px) {
  .lesson-page { --lesson-drawer-width: 310px; }
  .lesson-sidebar-panel { top: 70px; }
  .lesson-sidebar-toggle { top: 88px; left: 12px; width: 46px; }
  .lesson-sidebar-header { min-height: 76px; padding-left: 18px; }
  .lesson-sidebar-current { padding-inline: 18px; }
}
@media (max-width:680px) {
  .share-library { padding: 120px 0 100px; }
  .share-intro h1 { font-size: clamp(2.3rem,10.5vw,3.35rem); }
  html[lang="en"] .share-intro h1 { font-size: clamp(2.05rem,9vw,2.85rem); }
  .share-course-entry { min-height: 370px; padding: 28px 24px; }
  .share-course-meta { margin-bottom: 52px; }
  .course-overview-page #main-content { padding-top: 104px; }
  .course-hero { padding: 42px 0 64px; }
  .course-hero h1 { margin-top: 34px; font-size: clamp(2.15rem,9.5vw,3.05rem); }
  html[lang="en"] .course-hero h1 { font-size: clamp(1.95rem,8.6vw,2.7rem); }
  .curriculum { padding: 66px 0 100px; }
  .curriculum-phase { margin-top: 54px; }
  .phase-heading { align-items: flex-start; }
  .phase-heading > span { padding-top: 23px; }
  .lesson-card { grid-template-columns: 38px minmax(0,1fr) 18px; gap: 8px; padding: 19px 4px; }
  .lesson-page #main-content { padding-top: 82px; }
  .lesson-hero { padding: 70px 0 42px; }
  .lesson-position { align-items: flex-start; flex-direction: column; gap: 7px; }
  .lesson-hero h1 { font-size: clamp(1.85rem,8vw,2.65rem); }
  .markdown-body { padding-top: 34px; font-size: .98rem; line-height: 1.85; }
  .markdown-body h2 { margin-top: 4.25rem; }
  .markdown-body table { min-width: 560px; font-size: .78rem; }
  .markdown-body th,.markdown-body td { padding: 10px 11px; }
  .course-visual { margin-inline: -4px; padding: 16px; border-radius: 17px; }
  .course-visual-caption { display: block; margin-bottom: 18px; }
  .course-visual-caption strong { display: block; margin-top: 5px; text-align: left; }
  .journey-persona { align-items: flex-start; flex-direction: column; gap: 4px; }
  .journey-stages { overflow-x: auto; grid-template-columns: repeat(4,minmax(270px,74vw)); gap: 10px; padding-bottom: 8px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .journey-stage { scroll-snap-align: start; }
  .journey-stage:not(:last-child)::after { display: none; }
  .journey-detail { min-height: 0; }
  .funnel-step { width: calc(100% - (var(--funnel-level) * 3%)); }
  .funnel-connector { height: 34px; }
  .funnel-bar { grid-template-columns: 30px minmax(0,1fr) auto; gap: 9px; padding: 12px; }
  .funnel-description { grid-column: 2 / -1; }
  .lesson-pager { grid-template-columns: 1fr; }
  .lesson-pager-card { min-height: 108px; }
}
@media (prefers-reduced-motion:reduce) {
  .lesson-particles { display: none; }
  .lesson-light-orb { animation: none; }
  .lesson-layout,.lesson-sidebar-panel,.lesson-sidebar-toggle,.lesson-sidebar-backdrop { transition: none; }
  .lesson-card,.lesson-pager-card { transition: none; }
}