/**
* pt-141 mastery course styles
*
* extends the base learn page styles with course-specific theming,
* paywall ui, loading states, and interactive visualization containers.
* aligned to the shared mountain-meadow interactive palette.
*/
/* ============================================================
course header badge
============================================================ */
.pt-course-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 14px;
border-radius: 100px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: lowercase;
background: linear-gradient(
135deg,
rgba(var(--meadow-500-rgb, 16, 185, 129), 0.18),
rgba(var(--meadow-400-rgb, 52, 211, 158), 0.1)
);
color: var(--meadow-300, #6ee7bf);
border: 1px solid rgba(var(--meadow-500-rgb, 16, 185, 129), 0.24);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow:
0 2px 8px rgba(var(--meadow-500-rgb, 16, 185, 129), 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.pt-course-badge i {
width: 14px;
height: 14px;
}
/* ============================================================
loading skeleton for paid content
============================================================ */
.pt-loading {
position: relative;
min-height: 120px;
}
.pt-loading::after {
content: '';
position: absolute;
inset: 0;
border-radius: 12px;
background: linear-gradient(90deg,
var(--color-bg-card, rgba(255, 255, 255, 0.03)) 25%,
rgba(255, 255, 255, 0.06) 50%,
var(--color-bg-card, rgba(255, 255, 255, 0.03)) 75%);
background-size: 200% 100%;
animation: pt-shimmer 1.5s ease-in-out infinite;
}
@keyframes pt-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* light mode loading skeleton */
[data-theme="light"] .pt-loading::after {
background: linear-gradient(90deg,
rgba(0, 0, 0, 0.04) 25%,
rgba(0, 0, 0, 0.08) 50%,
rgba(0, 0, 0, 0.04) 75%);
background-size: 200% 100%;
}
/* ============================================================
paywall cta
============================================================ */
.pt-paywall {
text-align: center;
padding: 48px 24px;
border-radius: 16px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
margin: 32px 0;
}
.pt-paywall-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 16px;
margin-bottom: 16px;
background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.12);
color: var(--meadow-400, #34d39e);
}
.pt-paywall-title {
font-size: 1.15rem;
font-weight: 700;
margin: 0 0 8px;
}
.pt-paywall-title--success {
color: var(--meadow-400, #34d39e);
}
.pt-paywall-desc {
font-size: 0.9rem;
color: var(--text-secondary, #a3a3a3);
line-height: 1.6;
margin: 0 0 20px;
max-width: 520px;
margin-inline: auto;
}
.pt-paywall--cert {
border-color: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.2);
background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.04);
}
/* ============================================================
stat grid
============================================================ */
.pt-stat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 12px;
margin: 24px 0;
}
.pt-stat-card {
text-align: center;
padding: 16px 12px;
border-radius: 12px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}
.pt-stat-value {
font-size: 1.1rem;
font-weight: 700;
color: var(--meadow-400, #34d39e);
margin-bottom: 4px;
}
.pt-stat-label {
font-size: 0.72rem;
color: var(--text-secondary, #a3a3a3);
line-height: 1.3;
}
/* ============================================================
interactive area styling
============================================================ */
.pt-interactive-header {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: lowercase;
color: var(--meadow-400, #34d39e);
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(var(--meadow-500-rgb, 16, 185, 129), 0.2);
}
.pt-interactive-body {
min-height: 200px;
position: relative;
}
.pt-interactive-hint {
font-size: 0.8rem;
color: var(--text-secondary, #a3a3a3);
text-align: center;
margin-top: 12px;
font-style: italic;
}
/* neurotransmitter detail panel */
.pt-neuro-detail {
margin-top: 16px;
padding: 16px;
border-radius: 12px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
animation: pt-fade-in 0.3s ease;
}
.pt-neuro-detail-header {
font-size: 0.9rem;
padding-left: 12px;
margin-bottom: 8px;
}
.pt-neuro-detail-text {
font-size: 0.85rem;
line-height: 1.6;
color: var(--text-secondary, #a3a3a3);
margin: 0;
}
@keyframes pt-fade-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================================
cert input
============================================================ */
.pt-cert-form {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
margin-top: 12px;
}
.pt-cert-input {
padding: 8px 16px;
border-radius: 8px;
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.15));
background: rgba(255, 255, 255, 0.05);
color: var(--text-primary, #fafafa);
font-size: 0.9rem;
min-width: 200px;
}
[data-theme="light"] .pt-cert-input {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.15);
color: #1a1a1a;
}
/* ============================================================
key terms grid
============================================================ */
.pt-terms-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
gap: 12px;
margin: 18px 0;
}
.pt-term-card {
position: relative;
border-radius: 14px;
background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.08);
overflow: hidden;
transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.pt-term-card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, rgba(52,211,158,0.9), rgba(16,185,129,0.5));
opacity: 0;
transition: opacity 0.25s ease;
}
.pt-term-card:hover {
border-color: rgba(52,211,158,0.22);
background: linear-gradient(135deg, rgba(52,211,158,0.06), rgba(255,255,255,0.02));
transform: translateY(-1px);
}
.pt-term-card[open] {
border-color: rgba(52,211,158,0.35);
background: linear-gradient(135deg, rgba(52,211,158,0.08), rgba(255,255,255,0.02));
}
.pt-term-card[open]::before {
opacity: 1;
}.pt-term-card[open] .pt-term-chev,
.pt-term-card[open] .pt-term-chevron {
transform: rotate(90deg);
}
.pt-term-summary {
padding: 14px 16px;
cursor: pointer;
list-style: none;
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: center;
}
.pt-term-summary::-webkit-details-marker { display: none; }
.pt-term-summary::marker { display: none; content: ''; }
.pt-term-monogram {
display: none;
width: 36px;
height: 36px;
border-radius: 9px;
display: none;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(52,211,158,0.15), rgba(16,185,129,0.06));
border: 1px solid rgba(52,211,158,0.22);
color: var(--meadow-400, #34d39e);
font-weight: 700;
font-size: 0.95rem;
letter-spacing: -0.02em;
flex-shrink: 0;
text-transform: uppercase;
font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.pt-term-meta {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.pt-term-name {
font-size: 1rem;
font-weight: 600;
color: var(--color-text, #fff);
letter-spacing: -0.01em;
line-height: 1.2;
}
.pt-term-cat {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255,255,255,0.62);
font-weight: 500;
}.pt-term-chev,
.pt-term-chevron {
width: 16px;
height: 16px;
color: rgba(255,255,255,0.4);
transition: transform 0.2s ease, color 0.2s ease;
flex-shrink: 0;
}.pt-term-card:hover .pt-term-chev,
.pt-term-card:hover .pt-term-chevron,
.pt-term-card[open] .pt-term-chev,
.pt-term-card[open] .pt-term-chevron {
color: var(--meadow-400, #34d39e);
}
.pt-term-body {
padding: 4px 16px 16px 16px;
font-size: 0.84rem;
line-height: 1.65;
color: var(--color-muted, rgba(255,255,255,0.7));
}
[data-theme="light"] .pt-term-card {
background: linear-gradient(135deg, rgba(15,23,42,0.02), rgba(15,23,42,0.005));
border-color: rgba(15,23,42,0.08);
}
[data-theme="light"] .pt-term-card:hover {
border-color: rgba(16,185,129,0.3);
background: linear-gradient(135deg, rgba(16,185,129,0.04), rgba(15,23,42,0.005));
}
[data-theme="light"] .pt-term-card[open] {
border-color: rgba(16,185,129,0.4);
background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(15,23,42,0.005));
}
[data-theme="light"] .pt-term-monogram {
display: none;
background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(16,185,129,0.04));
border-color: rgba(16,185,129,0.25);
color: #047852;
}
[data-theme="light"] .pt-term-name { color: #1a1a1a; }
[data-theme="light"] .pt-term-cat { color: rgba(15,23,42,0.5); }[data-theme="light"] .pt-term-chev,
[data-theme="light"] .pt-term-chevron { color: rgba(15,23,42,0.4); }
[data-theme="light"] .pt-term-body { color: rgba(15,23,42,0.7); }
/* ============================================================
comparison layout
============================================================ */
.pt-comparison-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
margin: 16px 0;
}
.pt-comparison-card {
padding: 20px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
border: 1px solid rgba(255,255,255,0.1);
}
.pt-comparison-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.pt-comparison-title {
font-size: 0.9rem;
font-weight: 700;
color: var(--color-text, #fff);
margin: 0;
}
.pt-comparison-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.pt-comparison-list li {
font-size: 0.8rem;
line-height: 1.55;
color: var(--color-muted, rgba(255,255,255,0.6));
padding-left: 12px;
position: relative;
}
.pt-comparison-list li::before {
content: '';
position: absolute;
left: 0;
top: 7px;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--meadow-400, #34d39e);
}
/* ============================================================
light theme overrides
============================================================ */
[data-theme="light"] .pt-term-card {
background: rgba(0,0,0,0.02);
border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .pt-term-card[open] { border-color: rgba(16,185,129,0.3); }
[data-theme="light"] .pt-comparison-card {
background: rgba(0,0,0,0.02);
border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .pt-stat-card {
background: rgba(0,0,0,0.02);
border-color: rgba(0,0,0,0.1);
}
/* ============================================================
responsive
============================================================ */
@media (max-width: 600px) {
.pt-stat-grid {
grid-template-columns: repeat(2, 1fr);
}
.pt-terms-grid { grid-template-columns: 1fr; }
.pt-comparison-layout { grid-template-columns: 1fr; }
}
/* ============================================================
dosing snapshot -- free preview block above paywall
============================================================ */
.pt-dosing-snapshot .pt-comparison-card {
background: linear-gradient(135deg, rgba(52,211,158,0.08), rgba(52,211,158,0.02));
border-color: rgba(52,211,158,0.22);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
[data-theme="light"] .pt-dosing-snapshot .pt-comparison-card {
background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(16,185,129,0.015));
border-color: rgba(16,185,129,0.2);
}
/* ============================================================
unit 2 -- tuftsin to sermorelin derivation chain
============================================================ */
.pt-derivation-body {
display: flex;
flex-direction: column;
gap: 14px;
align-items: center;
padding: 8px 4px;
}
.pt-derivation-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
}
.pt-derivation-tag {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: lowercase;
color: var(--meadow-300, #6ee7bf);
padding: 4px 10px;
border-radius: 100px;
background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.12);
border: 1px solid rgba(var(--meadow-500-rgb, 16, 185, 129), 0.22);
white-space: nowrap;
}
.pt-derivation-tag--child {
color: #fff;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.55), rgba(52, 211, 158, 0.4));
border-color: rgba(52, 211, 158, 0.5);
}
[data-theme="light"] .pt-derivation-tag {
color: #047852;
background: rgba(16, 185, 129, 0.08);
border-color: rgba(16, 185, 129, 0.25);
}
[data-theme="light"] .pt-derivation-tag--child {
color: #fff;
background: linear-gradient(135deg, #10b981, #059669);
border-color: #10b981;
}
.pt-residue-chain {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
justify-content: center;
}
.pt-residue {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 56px;
padding: 8px 10px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(52, 211, 158, 0.18), rgba(16, 185, 129, 0.06));
border: 1px solid rgba(52, 211, 158, 0.3);
cursor: default;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.pt-residue::after {
content: '';
position: absolute;
right: -8px;
top: 50%;
width: 8px;
height: 1px;
background: rgba(52, 211, 158, 0.5);
transform: translateY(-50%);
}
.pt-residue:last-child::after { display: none; }
.pt-residue-pos {
font-size: 0.6rem;
color: rgba(255, 255, 255, 0.4);
font-family: 'JetBrains Mono', ui-monospace, monospace;
line-height: 1;
}
.pt-residue-aa {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--meadow-300, #6ee7bf);
line-height: 1.2;
margin-top: 2px;
}
.pt-residue--added {
background: linear-gradient(135deg, rgba(167, 139, 250, 0.22), rgba(167, 139, 250, 0.06));
border-color: rgba(167, 139, 250, 0.5);
animation: pt-residue-grow 0.45s ease-out backwards;
}
.pt-residue--added .pt-residue-aa { color: #c4b5fd; }
.pt-residue--added::after { background: rgba(167, 139, 250, 0.55); }
.pt-residue-chain--child .pt-residue--added:nth-child(5) { animation-delay: 0.05s; }
.pt-residue-chain--child .pt-residue--added:nth-child(6) { animation-delay: 0.2s; }
.pt-residue-chain--child .pt-residue--added:nth-child(7) { animation-delay: 0.35s; }
@keyframes pt-residue-grow {
from { opacity: 0; transform: translateX(-12px) scale(0.85); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
.pt-residue:hover {
transform: translateY(-2px);
border-color: rgba(52, 211, 158, 0.7);
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.18);
}
.pt-residue--added:hover {
border-color: rgba(167, 139, 250, 0.85);
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.2);
}
.pt-residue[data-tip]:hover::before {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
width: max-content;
max-width: 200px;
padding: 6px 10px;
border-radius: 8px;
background: rgba(15, 23, 42, 0.95);
color: #fff;
font-size: 0.72rem;
line-height: 1.4;
text-align: center;
pointer-events: none;
z-index: 10;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
[data-theme="light"] .pt-residue {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.03));
border-color: rgba(16, 185, 129, 0.3);
}
[data-theme="light"] .pt-residue-pos { color: rgba(15, 23, 42, 0.45); }
[data-theme="light"] .pt-residue-aa { color: #047852; }
[data-theme="light"] .pt-residue--added {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.03));
border-color: rgba(139, 92, 246, 0.35);
}
[data-theme="light"] .pt-residue--added .pt-residue-aa { color: #6d28d9; }
.pt-derivation-bridge {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
color: rgba(167, 139, 250, 0.85);
}
.pt-derivation-bridge-line {
width: 1px;
height: 18px;
background: linear-gradient(180deg, rgba(52, 211, 158, 0.6), rgba(167, 139, 250, 0.7));
}
.pt-derivation-bridge-label {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
color: #c4b5fd;
}
[data-theme="light"] .pt-derivation-bridge-label { color: #6d28d9; }
.pt-derivation-legend {
display: flex;
gap: 18px;
flex-wrap: wrap;
justify-content: center;
margin-top: 6px;
font-size: 0.72rem;
color: var(--text-secondary, #a3a3a3);
}
.pt-derivation-key {
display: inline-flex;
align-items: center;
gap: 6px;
}
.pt-derivation-swatch {
width: 12px;
height: 12px;
border-radius: 3px;
border: 1px solid;
}
.pt-derivation-swatch--parent {
background: rgba(52, 211, 158, 0.25);
border-color: rgba(52, 211, 158, 0.5);
}
.pt-derivation-swatch--added {
background: rgba(167, 139, 250, 0.28);
border-color: rgba(167, 139, 250, 0.55);
}
/* ============================================================
unit 3 -- GABA-A pentamer with binding sites
============================================================ */
.pt-gaba-body {
display: flex;
flex-direction: column;
gap: 16px;
padding: 8px 4px;
}
.pt-gaba-svg-wrap {
width: 100%;
max-width: 520px;
margin: 0 auto;
}
.pt-gaba-svg { width: 100%; height: auto; display: block; }
.pt-gaba-subunit {
fill: rgba(52, 211, 158, 0.18);
stroke: rgba(52, 211, 158, 0.55);
stroke-width: 1.5;
transition: fill 0.2s ease, stroke 0.2s ease;
}
[data-theme="light"] .pt-gaba-subunit {
fill: rgba(16, 185, 129, 0.1);
stroke: rgba(16, 185, 129, 0.5);
}
.pt-gaba-label {
fill: var(--meadow-300, #6ee7bf);
font-size: 12px;
font-weight: 700;
text-anchor: middle;
dominant-baseline: middle;
pointer-events: none;
}
[data-theme="light"] .pt-gaba-label { fill: #047852; }
.pt-gaba-pore {
fill: rgba(15, 23, 42, 0.6);
stroke: rgba(255, 255, 255, 0.15);
stroke-width: 1;
}
[data-theme="light"] .pt-gaba-pore {
fill: rgba(15, 23, 42, 0.05);
stroke: rgba(15, 23, 42, 0.15);
}
.pt-gaba-pore-label {
fill: rgba(255, 255, 255, 0.55);
font-size: 10px;
text-anchor: middle;
dominant-baseline: middle;
pointer-events: none;
}
[data-theme="light"] .pt-gaba-pore-label { fill: rgba(15, 23, 42, 0.55); }
.pt-gaba-site {
cursor: pointer;
transition: filter 0.2s ease;
}
.pt-gaba-site circle {
transition: stroke-width 0.2s ease;
}
.pt-gaba-site:hover { filter: brightness(1.18); }
.pt-gaba-site:hover circle { stroke-width: 2.5; }
.pt-gaba-site-bzd circle {
fill: rgba(251, 191, 36, 0.85);
stroke: #fbbf24;
}
.pt-gaba-site-sermorelin circle {
fill: rgba(167, 139, 250, 0.85);
stroke: #a78bfa;
}
.pt-gaba-site-gaba circle {
fill: rgba(52, 211, 158, 0.95);
stroke: var(--meadow-400, #34d39e);
}
.pt-gaba-site-label {
font-size: 9px;
font-weight: 700;
text-anchor: middle;
dominant-baseline: middle;
pointer-events: none;
fill: #0f172a;
}
.pt-gaba-legend {
display: grid;
grid-template-columns: repeat(3, minmax(140px, 1fr));
gap: 10px;
font-size: 0.74rem;
}
.pt-gaba-legend-item {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px;
border-radius: 10px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}
.pt-gaba-legend-head {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
color: var(--color-text, #fff);
}
.pt-gaba-legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.pt-gaba-legend-dot--bzd { background: #fbbf24; }
.pt-gaba-legend-dot--sermorelin { background: #a78bfa; }
.pt-gaba-legend-dot--gaba { background: var(--meadow-400, #34d39e); }
.pt-gaba-legend-text {
font-size: 0.72rem;
color: var(--text-secondary, #a3a3a3);
line-height: 1.45;
}
[data-theme="light"] .pt-gaba-legend-item {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .pt-gaba-legend-head { color: #1a1a1a; }
[data-theme="light"] .pt-gaba-legend-text { color: rgba(15, 23, 42, 0.7); }
@media (max-width: 600px) {
.pt-gaba-legend { grid-template-columns: 1fr; }
}
/* ============================================================
unit 4 -- BDNF cascade chart
============================================================ */
.pt-bdnf-body {
display: flex;
flex-direction: column;
gap: 12px;
padding: 8px 4px;
}
.pt-bdnf-svg-wrap { width: 100%; }
.pt-bdnf-svg { width: 100%; height: auto; display: block; }
.pt-bdnf-axis {
stroke: rgba(255, 255, 255, 0.15);
stroke-width: 1;
}
[data-theme="light"] .pt-bdnf-axis { stroke: rgba(15, 23, 42, 0.18); }
.pt-bdnf-grid {
stroke: rgba(255, 255, 255, 0.06);
stroke-width: 1;
stroke-dasharray: 3 3;
}
[data-theme="light"] .pt-bdnf-grid { stroke: rgba(15, 23, 42, 0.06); }
.pt-bdnf-tick {
fill: rgba(255, 255, 255, 0.5);
font-size: 10px;
}
[data-theme="light"] .pt-bdnf-tick { fill: rgba(15, 23, 42, 0.55); }
.pt-bdnf-axis-label {
fill: var(--text-secondary, #a3a3a3);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: lowercase;
}
[data-theme="light"] .pt-bdnf-axis-label { fill: rgba(15, 23, 42, 0.65); }
.pt-bdnf-baseline {
stroke: rgba(255, 255, 255, 0.35);
stroke-width: 1;
stroke-dasharray: 4 3;
}
[data-theme="light"] .pt-bdnf-baseline { stroke: rgba(15, 23, 42, 0.3); }
.pt-bdnf-baseline-label {
fill: rgba(255, 255, 255, 0.5);
font-size: 9px;
font-style: italic;
}
[data-theme="light"] .pt-bdnf-baseline-label { fill: rgba(15, 23, 42, 0.55); }
.pt-bdnf-area {
fill: url(#slkBdnfGrad);
opacity: 0.85;
}
.pt-bdnf-line {
fill: none;
stroke: var(--meadow-400, #34d39e);
stroke-width: 2.5;
stroke-linejoin: round;
stroke-linecap: round;
}
.pt-bdnf-point {
fill: var(--meadow-400, #34d39e);
stroke: #fff;
stroke-width: 2;
cursor: pointer;
}
[data-theme="light"] .pt-bdnf-point { stroke: #fff; }
.pt-bdnf-value {
fill: var(--meadow-300, #6ee7bf);
font-size: 10px;
font-weight: 700;
text-anchor: middle;
pointer-events: none;
}
[data-theme="light"] .pt-bdnf-value { fill: #047852; }
.pt-bdnf-caption {
font-size: 0.74rem;
color: var(--text-secondary, #a3a3a3);
text-align: center;
line-height: 1.5;
margin: 0;
}
[data-theme="light"] .pt-bdnf-caption { color: rgba(15, 23, 42, 0.7); }
.pt-bdnf-region-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 8px;
border-radius: 100px;
font-weight: 600;
font-size: 0.7rem;
color: var(--meadow-300, #6ee7bf);
background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.14);
border: 1px solid rgba(var(--meadow-500-rgb, 16, 185, 129), 0.25);
margin: 0 4px;
}
[data-theme="light"] .pt-bdnf-region-pill {
color: #047852;
background: rgba(16, 185, 129, 0.08);
border-color: rgba(16, 185, 129, 0.22);
}
/* ============================================================
unit 5 -- cytokine dose slider
============================================================ */
.pt-cyto-body {
display: flex;
flex-direction: column;
gap: 18px;
padding: 8px 4px;
}
.pt-cyto-slider-row {
display: flex;
flex-direction: column;
gap: 8px;
}
.pt-cyto-slider-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
font-size: 0.78rem;
color: var(--text-secondary, #a3a3a3);
}
.pt-cyto-slider-readout {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.85rem;
font-weight: 700;
color: var(--meadow-300, #6ee7bf);
}
[data-theme="light"] .pt-cyto-slider-readout { color: #047852; }
.pt-cyto-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.08);
outline: none;
cursor: pointer;
}
[data-theme="light"] .pt-cyto-slider { background: rgba(15, 23, 42, 0.08); }
.pt-cyto-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--meadow-400, #34d39e);
border: 2px solid #fff;
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
cursor: grab;
}
.pt-cyto-slider::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--meadow-400, #34d39e);
border: 2px solid #fff;
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
cursor: grab;
}
.pt-cyto-slider-ticks {
display: flex;
justify-content: space-between;
font-size: 0.68rem;
color: var(--text-secondary, #a3a3a3);
}
.pt-cyto-bars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.pt-cyto-bar {
padding: 12px;
border-radius: 12px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
display: flex;
flex-direction: column;
gap: 8px;
}
[data-theme="light"] .pt-cyto-bar {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.08);
}
.pt-cyto-bar-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 6px;
}
.pt-cyto-bar-name {
font-size: 0.78rem;
font-weight: 700;
color: var(--color-text, #fff);
letter-spacing: -0.01em;
}
[data-theme="light"] .pt-cyto-bar-name { color: #1a1a1a; }
.pt-cyto-bar-tag {
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary, #a3a3a3);
}
.pt-cyto-bar-track {
position: relative;
height: 10px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.05);
overflow: hidden;
}
[data-theme="light"] .pt-cyto-bar-track { background: rgba(15, 23, 42, 0.06); }
.pt-cyto-bar-fill {
position: absolute;
inset: 0;
transform-origin: left center;
transform: scaleX(var(--pt-cyto-fill, 0.5));
border-radius: 6px;
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease;
}
.pt-cyto-bar-baseline {
position: absolute;
top: -4px;
bottom: -4px;
width: 1px;
left: 50%;
background: rgba(255, 255, 255, 0.45);
transform: translateX(-0.5px);
}
[data-theme="light"] .pt-cyto-bar-baseline { background: rgba(15, 23, 42, 0.4); }
.pt-cyto-bar--pro .pt-cyto-bar-fill {
background: linear-gradient(90deg, #f59e0b, #ef4444);
}
.pt-cyto-bar--anti .pt-cyto-bar-fill {
background: linear-gradient(90deg, var(--meadow-400, #34d39e), #6ee7bf);
}
.pt-cyto-bar-value {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.74rem;
color: var(--text-secondary, #a3a3a3);
}
.pt-cyto-bar-arrow {
font-size: 0.78rem;
font-weight: 700;
}
.pt-cyto-bar-arrow--down { color: #34d39e; }
.pt-cyto-bar-arrow--up { color: #34d39e; }
.pt-cyto-bar-arrow--neutral { color: var(--text-secondary, #a3a3a3); }
.pt-cyto-note {
font-size: 0.74rem;
color: var(--text-secondary, #a3a3a3);
text-align: center;
line-height: 1.5;
padding: 8px 10px;
border-radius: 8px;
background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.06);
border: 1px solid rgba(var(--meadow-500-rgb, 16, 185, 129), 0.18);
}
[data-theme="light"] .pt-cyto-note {
color: rgba(15, 23, 42, 0.7);
background: rgba(16, 185, 129, 0.04);
border-color: rgba(16, 185, 129, 0.18);
}
@media (max-width: 600px) {
.pt-cyto-bars { grid-template-columns: 1fr; }
}
/* ============================================================
unit 1 free-page bespoke widgets
------------------------------------------------------------
.pt-subhead -- light eyebrow above prose blocks
.pt-grf-trim -- GHRH(1-44) -> sermorelin(1-29) residue
strip, highlighting the C-terminal
15-residue trim. shape:
.pt-evidence-grid + tiers (solid/moderate/weak/missing) +
.pt-evidence-pill -- mirror motsc-evidence-* shape
.pt-quote-callout/-source/-body/-attrib -- regulatory pull-quote
.pt-popularity-grid -- 3-up "why this regulatory hook matters"
cards. shape:
.pt-axis-flow -- horizontal GHRH -> GH -> IGF-1 chain
with arrows. shape:
.pt-pulse-rail -- pulsatile-vs-continuous side-by-side
comparison. shape:
.pt-roadmap-list -- unit 2-9 preview list, mirror
kpv-roadmap-* shape. ol with
.pt-roadmap-item children carrying
.pt-roadmap-num + .pt-roadmap-body
(h3.pt-roadmap-title + p.pt-roadmap-desc).
the css here is intentionally minimal -- agent for unit 5 can
refine padding/animation once the unit interactive lands.
============================================================ */
.pt-subhead {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--meadow-400, #34d39e);
margin: 22px 0 10px;
}
[data-theme="light"] .pt-subhead { color: #047852; }
/* GHRH(1-44) -> sermorelin(1-29) trim residue strip */
.pt-grf-trim {
margin: 18px 0 6px;
padding: 14px;
border-radius: 12px;
background: var(--color-bg-card, rgba(255,255,255,0.03));
border: 1px solid var(--color-border, rgba(255,255,255,0.08));
}
[data-theme="light"] .pt-grf-trim {
background: rgba(0,0,0,0.02);
border-color: rgba(0,0,0,0.08);
}
.pt-grf-row {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: center;
}
.pt-grf-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
padding: 4px 6px;
border-radius: 6px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.72rem;
font-weight: 700;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.6);
}
[data-theme="light"] .pt-grf-pill {
background: rgba(0,0,0,0.03);
border-color: rgba(0,0,0,0.1);
color: rgba(15,23,42,0.55);
}
.pt-grf-pill--kept {
background: linear-gradient(135deg, rgba(52,211,158,0.22), rgba(16,185,129,0.08));
border-color: rgba(52,211,158,0.45);
color: var(--meadow-300, #6ee7bf);
}
[data-theme="light"] .pt-grf-pill--kept {
background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(16,185,129,0.04));
border-color: rgba(16,185,129,0.3);
color: #047852;
}
.pt-grf-pill--trimmed {
opacity: 0.45;
text-decoration: line-through;
}
.pt-grf-trim-caption {
margin-top: 12px;
font-size: 0.78rem;
line-height: 1.55;
text-align: center;
color: var(--text-secondary, #a3a3a3);
}
[data-theme="light"] .pt-grf-trim-caption { color: rgba(15,23,42,0.65); }
/* evidence ceiling grid (mirrors motsc evidence pattern) */
.pt-evidence-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
margin: 18px 0;
}
.pt-evidence-tier {
padding: 18px;
border-radius: 14px;
background: var(--color-bg-card, rgba(255,255,255,0.03));
border: 1px solid var(--color-border, rgba(255,255,255,0.08));
border-top-width: 3px;
}
[data-theme="light"] .pt-evidence-tier {
background: rgba(0,0,0,0.02);
border-color: rgba(0,0,0,0.08);
}
.pt-evidence-tier--solid { border-top-color: #10b981; }
.pt-evidence-tier--moderate { border-top-color: #34d39e; }
.pt-evidence-tier--weak { border-top-color: #f59e0b; }
.pt-evidence-tier--missing { border-top-color: #ef4444; }
.pt-evidence-header {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 10px;
}
.pt-evidence-pill {
align-self: flex-start;
display: inline-flex;
padding: 2px 10px;
border-radius: 100px;
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.pt-evidence-pill--solid { background: rgba(16,185,129,0.18); color: var(--meadow-300, #6ee7bf); }
.pt-evidence-pill--moderate { background: rgba(52,211,158,0.18); color: var(--meadow-300, #6ee7bf); }
.pt-evidence-pill--weak { background: rgba(245,158,11,0.18); color: #fbbf24; }
.pt-evidence-pill--missing { background: rgba(239,68,68,0.18); color: #fca5a5; }
[data-theme="light"] .pt-evidence-pill--solid { color: #047852; }
[data-theme="light"] .pt-evidence-pill--moderate { color: #047852; }
[data-theme="light"] .pt-evidence-pill--weak { color: #b45309; }
[data-theme="light"] .pt-evidence-pill--missing { color: #b91c1c; }
.pt-evidence-headline {
font-size: 0.95rem;
font-weight: 700;
margin: 0;
color: var(--color-text, #fff);
}
[data-theme="light"] .pt-evidence-headline { color: #1a1a1a; }
.pt-evidence-claims {
margin: 8px 0 0;
padding-left: 18px;
font-size: 0.82rem;
line-height: 1.55;
color: var(--color-muted, rgba(255,255,255,0.7));
}
[data-theme="light"] .pt-evidence-claims { color: rgba(15,23,42,0.72); }
.pt-evidence-claims li { margin-bottom: 6px; }
/* regulatory pull-quote */
.pt-quote-callout {
margin: 20px 0;
padding: 18px 20px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(52,211,158,0.08), rgba(52,211,158,0.02));
border: 1px solid rgba(52,211,158,0.22);
border-left-width: 3px;
}
[data-theme="light"] .pt-quote-callout {
background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(16,185,129,0.015));
border-color: rgba(16,185,129,0.22);
}
.pt-quote-source {
margin: 0 0 8px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--meadow-300, #6ee7bf);
}
[data-theme="light"] .pt-quote-source { color: #047852; }
.pt-quote-body {
margin: 0 0 10px;
font-size: 0.92rem;
line-height: 1.65;
color: var(--color-text, #fff);
font-style: italic;
}
[data-theme="light"] .pt-quote-body { color: #1a1a1a; }
.pt-quote-attrib {
display: block;
font-size: 0.75rem;
font-style: normal;
color: var(--text-secondary, #a3a3a3);
}
[data-theme="light"] .pt-quote-attrib { color: rgba(15,23,42,0.65); }
/* "why this matters now" 3-card grid */
.pt-popularity-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin: 18px 0;
}
.pt-popularity-card {
padding: 16px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.08);
}
[data-theme="light"] .pt-popularity-card {
background: linear-gradient(135deg, rgba(0,0,0,0.025), rgba(0,0,0,0.005));
border-color: rgba(0,0,0,0.08);
}
.pt-popularity-card h4 {
margin: 0 0 8px;
font-size: 0.9rem;
color: var(--color-text, #fff);
}
[data-theme="light"] .pt-popularity-card h4 { color: #1a1a1a; }
.pt-popularity-card p {
margin: 0;
font-size: 0.82rem;
line-height: 1.55;
color: var(--color-muted, rgba(255,255,255,0.65));
}
[data-theme="light"] .pt-popularity-card p { color: rgba(15,23,42,0.72); }
/* GH/IGF-1 axis horizontal flow */
.pt-axis-flow {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 10px;
margin: 18px 0 6px;
padding: 16px 12px;
border-radius: 12px;
background: var(--color-bg-card, rgba(255,255,255,0.03));
border: 1px solid var(--color-border, rgba(255,255,255,0.08));
}
[data-theme="light"] .pt-axis-flow {
background: rgba(0,0,0,0.02);
border-color: rgba(0,0,0,0.08);
}
.pt-axis-node {
flex: 1 1 130px;
min-width: 130px;
padding: 12px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(52,211,158,0.14), rgba(16,185,129,0.04));
border: 1px solid rgba(52,211,158,0.3);
}
[data-theme="light"] .pt-axis-node {
background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.03));
border-color: rgba(16,185,129,0.28);
}
.pt-axis-node-name {
font-size: 0.82rem;
font-weight: 700;
color: var(--meadow-300, #6ee7bf);
margin: 0 0 4px;
}
[data-theme="light"] .pt-axis-node-name { color: #047852; }
.pt-axis-node-note {
margin: 0;
font-size: 0.74rem;
line-height: 1.45;
color: var(--text-secondary, #a3a3a3);
}
[data-theme="light"] .pt-axis-node-note { color: rgba(15,23,42,0.65); }
.pt-axis-arrow {
display: flex;
align-items: center;
color: rgba(52,211,158,0.7);
font-weight: 700;
font-size: 1.1rem;
}
[data-theme="light"] .pt-axis-arrow { color: rgba(16,185,129,0.7); }
/* pulsatile vs continuous comparison rail */
.pt-pulse-rail {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
margin: 18px 0;
}
.pt-pulse-card {
padding: 16px;
border-radius: 12px;
border: 1px solid var(--color-border, rgba(255,255,255,0.08));
background: var(--color-bg-card, rgba(255,255,255,0.03));
}
[data-theme="light"] .pt-pulse-card {
background: rgba(0,0,0,0.02);
border-color: rgba(0,0,0,0.08);
}
.pt-pulse-card--pulsatile {
border-color: rgba(52,211,158,0.4);
background: linear-gradient(135deg, rgba(52,211,158,0.08), rgba(16,185,129,0.02));
}
[data-theme="light"] .pt-pulse-card--pulsatile {
border-color: rgba(16,185,129,0.28);
background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(16,185,129,0.015));
}
.pt-pulse-card--continuous {
border-color: rgba(245,158,11,0.4);
background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(245,158,11,0.02));
}
[data-theme="light"] .pt-pulse-card--continuous {
border-color: rgba(245,158,11,0.3);
background: linear-gradient(135deg, rgba(245,158,11,0.06), rgba(245,158,11,0.015));
}
.pt-pulse-card h4 {
margin: 0 0 8px;
font-size: 0.95rem;
color: var(--color-text, #fff);
}
[data-theme="light"] .pt-pulse-card h4 { color: #1a1a1a; }
.pt-pulse-card p {
margin: 0 0 6px;
font-size: 0.84rem;
line-height: 1.55;
color: var(--color-muted, rgba(255,255,255,0.7));
}
[data-theme="light"] .pt-pulse-card p { color: rgba(15,23,42,0.72); }
/* roadmap list (mirrors kpv-roadmap shape) */
.pt-roadmap-list {
list-style: none;
margin: 18px 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.pt-roadmap-item {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 12px 14px;
border-radius: 12px;
background: var(--color-bg-card, rgba(255,255,255,0.03));
border: 1px solid var(--color-border, rgba(255,255,255,0.08));
}
[data-theme="light"] .pt-roadmap-item {
background: rgba(0,0,0,0.02);
border-color: rgba(0,0,0,0.08);
}
.pt-roadmap-num {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(52,211,158,0.18), rgba(16,185,129,0.06));
border: 1px solid rgba(52,211,158,0.3);
color: var(--meadow-300, #6ee7bf);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.85rem;
font-weight: 700;
}
[data-theme="light"] .pt-roadmap-num {
background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.03));
border-color: rgba(16,185,129,0.28);
color: #047852;
}
.pt-roadmap-body { min-width: 0; }
.pt-roadmap-title {
margin: 0 0 4px;
font-size: 0.95rem;
color: var(--color-text, #fff);
}
[data-theme="light"] .pt-roadmap-title { color: #1a1a1a; }
.pt-roadmap-desc {
margin: 0;
font-size: 0.82rem;
line-height: 1.55;
color: var(--color-muted, rgba(255,255,255,0.65));
}
[data-theme="light"] .pt-roadmap-desc { color: rgba(15,23,42,0.7); }
@media (max-width: 600px) {
.pt-evidence-grid,
.pt-popularity-grid,
.pt-pulse-rail { grid-template-columns: 1fr; }
.pt-axis-flow { flex-direction: column; }
.pt-axis-arrow { transform: rotate(90deg); align-self: center; }
}
/* ============================================================
reduced motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
.pt-loading::after {
animation: none;
}
.pt-neuro-detail {
animation: none;
}
.pt-residue--added {
animation: none;
}
.pt-cyto-bar-fill {
transition: none;
}
}
/* ============================================================
bespoke widgets per unit -- assembled from css/_sermorelin-fragments/
============================================================ */
/* --- 02-chemistry --- */
/* ============================================================
sermorelin unit 2 -- chemistry and structure
bespoke widgets used by the chemistry migration body_html
============================================================
vocabulary introduced in this fragment:
- .pt-sequence-strip horizontal residue strip (1..29) with N/C-term cap markers
- .pt-residue-table three-row table mapping key residues to their side-chain jobs
- .pt-modification-bars stability/half-life bars across plain sermorelin vs DPP-IV-resistant analogs
- .pt-cleavage-diagram compact diagram showing DPP-IV cleavage at Ala2-Asp3
- .pt-analog-family-grid sermorelin/tesamorelin/CJC-1295/modified-GRF chemistry comparison cards
============================================================ */
/* ---------- .pt-sequence-strip ---------- */
.pt-sequence-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
padding: 16px;
margin: 18px 0;
border-radius: 14px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}
.pt-sequence-strip-cap {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 10px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.18);
color: var(--meadow-300, #6ee7bf);
border: 1px solid rgba(var(--meadow-500-rgb, 16, 185, 129), 0.32);
}
.pt-sequence-strip-pos {
display: inline-flex;
flex-direction: column;
align-items: center;
min-width: 28px;
padding: 6px 4px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
line-height: 1.1;
}
.pt-sequence-strip-pos--active {
background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.18);
border-color: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.4);
}
.pt-sequence-strip-pos--cleavage {
background: rgba(239, 68, 68, 0.16);
border-color: rgba(239, 68, 68, 0.4);
}
.pt-sequence-strip-letter {
font-size: 0.95rem;
font-weight: 700;
color: var(--text-primary, #fafafa);
}
.pt-sequence-strip-num {
font-size: 0.62rem;
color: var(--text-secondary, #a3a3a3);
margin-top: 2px;
}
.pt-sequence-strip-caption {
flex-basis: 100%;
margin-top: 10px;
font-size: 0.82rem;
color: var(--text-secondary, #a3a3a3);
line-height: 1.5;
}
[data-theme='light'] .pt-sequence-strip-pos {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.08);
}
[data-theme='light'] .pt-sequence-strip-letter {
color: var(--text-primary, #0f172a);
}
/* ---------- .pt-residue-table ---------- */
.pt-residue-table {
display: flex;
flex-direction: column;
gap: 10px;
margin: 18px 0;
}
.pt-residue-table-row {
display: grid;
grid-template-columns: 56px 1fr;
gap: 14px;
padding: 12px 14px;
border-radius: 12px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}
.pt-residue-table-letter {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 1.15rem;
font-weight: 700;
background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.18);
color: var(--meadow-300, #6ee7bf);
}
.pt-residue-table-meta {
display: flex;
flex-direction: column;
gap: 4px;
}
.pt-residue-table-name {
font-size: 0.92rem;
font-weight: 700;
color: var(--text-primary, #fafafa);
}
.pt-residue-table-role {
font-size: 0.83rem;
color: var(--text-secondary, #a3a3a3);
line-height: 1.55;
}
[data-theme='light'] .pt-residue-table-name {
color: var(--text-primary, #0f172a);
}
/* ---------- .pt-modification-bars ---------- */
.pt-modification-bars {
display: flex;
flex-direction: column;
gap: 12px;
margin: 18px 0;
}
.pt-modification-row {
display: grid;
grid-template-columns: minmax(160px, 1fr) 2fr minmax(180px, 1fr);
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: 10px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}
.pt-modification-label {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-primary, #fafafa);
}
.pt-modification-track {
position: relative;
height: 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
overflow: hidden;
}
.pt-modification-fill {
position: absolute;
inset: 0 auto 0 0;
border-radius: 999px;
background: linear-gradient(90deg,
rgba(var(--meadow-500-rgb, 16, 185, 129), 0.6),
rgba(var(--meadow-400-rgb, 52, 211, 158), 0.8));
}
.pt-modification-fill--low { background: linear-gradient(90deg, #ef4444, #f59e0b); }
.pt-modification-fill--mid { background: linear-gradient(90deg, #f59e0b, #34d39e); }
.pt-modification-fill--high { background: linear-gradient(90deg, #34d39e, #10b981); }
.pt-modification-note {
font-size: 0.78rem;
color: var(--text-secondary, #a3a3a3);
line-height: 1.45;
}
[data-theme='light'] .pt-modification-track {
background: rgba(0, 0, 0, 0.08);
}
[data-theme='light'] .pt-modification-label {
color: var(--text-primary, #0f172a);
}
/* ---------- .pt-cleavage-diagram ---------- */
.pt-cleavage-diagram {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 16px;
margin: 18px 0;
border-radius: 14px;
background: rgba(239, 68, 68, 0.06);
border: 1px dashed rgba(239, 68, 68, 0.32);
}
.pt-cleavage-diagram-residue {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
padding: 6px 10px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
font-family: var(--font-mono, ui-monospace, monospace);
font-weight: 700;
}
.pt-cleavage-diagram-scissor {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
color: #ef4444;
font-size: 1.1rem;
font-weight: 900;
}
.pt-cleavage-diagram-caption {
flex-basis: 100%;
margin-top: 10px;
font-size: 0.82rem;
color: var(--text-secondary, #a3a3a3);
line-height: 1.55;
}
[data-theme='light'] .pt-cleavage-diagram-residue {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.08);
}
/* ---------- .pt-analog-family-grid ---------- */
.pt-analog-family-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
margin: 18px 0;
}
.pt-analog-family-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px;
border-radius: 14px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}
.pt-analog-family-name {
font-size: 0.98rem;
font-weight: 700;
color: var(--text-primary, #fafafa);
}
.pt-analog-family-mod {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 0.78rem;
color: var(--meadow-300, #6ee7bf);
word-break: break-word;
}
.pt-analog-family-list {
margin: 6px 0 0;
padding-left: 18px;
}
.pt-analog-family-list li {
font-size: 0.83rem;
color: var(--text-secondary, #a3a3a3);
line-height: 1.55;
margin-bottom: 4px;
}
[data-theme='light'] .pt-analog-family-name {
color: var(--text-primary, #0f172a);
}
/* --- 03-ghrh-receptor --- */
/* ============================================================
sermorelin unit 3 -- GHRH receptor signaling
bespoke widgets used by the ghrh-receptor migration body_html
============================================================
vocabulary introduced in this fragment:
- .pt-cascade-rail vertical cAMP/PKA/CREB cascade with brake annotations
- .pt-signaling-flow horizontal node->node flow of receptor->messenger->effector
- .pt-pulse-comparison pulsatile-vs-continuous comparison cards (different from free-unit pt-pulse-rail)
- .pt-receptor-anatomy diagram-style card for class B GPCR two-domain handshake
- .pt-desens-loop receptor desensitization/resensitization loop visual
============================================================ */
/* ---------- .pt-cascade-rail ---------- */
.pt-cascade-rail {
list-style: none;
margin: 18px 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
counter-reset: smlcascade;
}
.pt-cascade-step {
display: grid;
grid-template-columns: 38px 1fr;
gap: 14px;
padding: 14px;
border-radius: 14px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
position: relative;
}
.pt-cascade-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 12px;
font-weight: 700;
background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.18);
color: var(--meadow-300, #6ee7bf);
border: 1px solid rgba(var(--meadow-500-rgb, 16, 185, 129), 0.32);
}
.pt-cascade-body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.pt-cascade-title {
font-size: 0.95rem;
font-weight: 700;
color: var(--text-primary, #fafafa);
}
.pt-cascade-text {
font-size: 0.83rem;
color: var(--text-secondary, #a3a3a3);
line-height: 1.55;
}
.pt-cascade-brake {
margin-top: 6px;
padding: 8px 10px;
border-radius: 8px;
background: rgba(245, 158, 11, 0.1);
border: 1px solid rgba(245, 158, 11, 0.28);
font-size: 0.78rem;
color: #fbbf24;
line-height: 1.5;
}
[data-theme='light'] .pt-cascade-title {
color: var(--text-primary, #0f172a);
}
[data-theme='light'] .pt-cascade-brake {
color: #b45309;
background: rgba(245, 158, 11, 0.12);
}
/* ---------- .pt-signaling-flow ---------- */
.pt-signaling-flow {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 10px;
padding: 16px;
margin: 18px 0;
border-radius: 14px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}
.pt-signaling-node {
flex: 1 1 140px;
padding: 12px;
border-radius: 12px;
background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.08);
border: 1px solid rgba(var(--meadow-500-rgb, 16, 185, 129), 0.24);
}
.pt-signaling-node-name {
font-size: 0.88rem;
font-weight: 700;
color: var(--meadow-300, #6ee7bf);
margin-bottom: 4px;
font-family: var(--font-mono, ui-monospace, monospace);
}
.pt-signaling-node-text {
font-size: 0.78rem;
color: var(--text-secondary, #a3a3a3);
line-height: 1.5;
}
.pt-signaling-arrow {
align-self: center;
color: var(--meadow-400, #34d39e);
font-weight: 900;
font-size: 1.1rem;
}
/* ---------- .pt-pulse-comparison ---------- */
.pt-pulse-comparison {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
margin: 18px 0;
}
.pt-pulse-comparison-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px;
border-radius: 14px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}
.pt-pulse-comparison-card--good {
border-color: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.32);
}
.pt-pulse-comparison-card--risk {
border-color: rgba(245, 158, 11, 0.32);
}
.pt-pulse-comparison-tag {
align-self: flex-start;
padding: 3px 10px;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.pt-pulse-comparison-card--good .pt-pulse-comparison-tag {
background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.18);
color: var(--meadow-300, #6ee7bf);
}
.pt-pulse-comparison-card--risk .pt-pulse-comparison-tag {
background: rgba(245, 158, 11, 0.18);
color: #fbbf24;
}
.pt-pulse-comparison-title {
font-size: 0.95rem;
font-weight: 700;
color: var(--text-primary, #fafafa);
}
.pt-pulse-comparison-list {
margin: 6px 0 0;
padding-left: 18px;
}
.pt-pulse-comparison-list li {
font-size: 0.83rem;
color: var(--text-secondary, #a3a3a3);
line-height: 1.55;
margin-bottom: 4px;
}
[data-theme='light'] .pt-pulse-comparison-title {
color: var(--text-primary, #0f172a);
}
/* ---------- .pt-receptor-anatomy ---------- */
.pt-receptor-anatomy {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin: 18px 0;
padding: 16px;
border-radius: 14px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}
.pt-receptor-anatomy-part {
display: flex;
flex-direction: column;
gap: 6px;
}
.pt-receptor-anatomy-label {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--meadow-300, #6ee7bf);
}
.pt-receptor-anatomy-text {
font-size: 0.85rem;
color: var(--text-secondary, #a3a3a3);
line-height: 1.55;
}
/* ---------- .pt-desens-loop ---------- */
.pt-desens-loop {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
margin: 18px 0;
}
.pt-desens-loop-step {
padding: 12px;
border-radius: 12px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
position: relative;
}
.pt-desens-loop-step-num {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.18);
color: var(--meadow-300, #6ee7bf);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 8px;
}
.pt-desens-loop-title {
font-size: 0.88rem;
font-weight: 700;
color: var(--text-primary, #fafafa);
margin-bottom: 4px;
}
.pt-desens-loop-text {
font-size: 0.78rem;
color: var(--text-secondary, #a3a3a3);
line-height: 1.5;
}
[data-theme='light'] .pt-desens-loop-title {
color: var(--text-primary, #0f172a);
}
/* --- 04-gh-axis --- */
/* ============================================================
sermorelin unit 4 -- gh-axis bespoke widgets
------------------------------------------------------------
widget vocabulary introduced in this fragment:
.pt-axis-cascade -- vertical hypothalamus -> pituitary
-> liver -> periphery cascade strip
with reciprocal feedback arrows
.pt-feedback-loop -- 3-up feedback-loop card grid
(long-loop / short-loop / ultrashort)
.pt-pulse-frequency-chart -- 6 to 12 daily pulses visualized as a
horizontal rail of bars with the
largest bar tagged SWS onset
.pt-somatotrope-anatomy -- 2-up cell anatomy card pair
(storage granules vs receptor surface)
.pt-sleep-pulse-card -- sleep-onset GH-pulse callout pair
============================================================ */
/* ------------------------------------------------------------
.pt-axis-cascade
vertical cascade of axis nodes with feedback arrows between
------------------------------------------------------------ */
.pt-axis-cascade {
display: grid;
gap: 0.75rem;
padding: 1.25rem;
margin: 1.5rem 0;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.18);
background: rgba(15, 23, 42, 0.45);
}
[data-theme="light"] .pt-axis-cascade {
background: rgba(248, 250, 252, 0.85);
border-color: rgba(148, 163, 184, 0.28);
}
.pt-axis-cascade-row {
display: grid;
grid-template-columns: 8rem 1fr;
gap: 1rem;
align-items: start;
padding: 0.75rem 1rem;
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, 0.15);
background: rgba(255, 255, 255, 0.03);
}
[data-theme="light"] .pt-axis-cascade-row {
background: rgba(255, 255, 255, 0.75);
border-color: rgba(148, 163, 184, 0.22);
}
.pt-axis-cascade-stage {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(148, 163, 184, 0.95);
}
.pt-axis-cascade-name {
font-weight: 600;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .pt-axis-cascade-name { color: rgba(15, 23, 42, 0.92); }
.pt-axis-cascade-desc {
font-size: 0.92rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .pt-axis-cascade-desc { color: rgba(30, 41, 59, 0.85); }
.pt-axis-cascade-feedback {
grid-column: 1 / -1;
margin-top: 0.4rem;
padding: 0.4rem 0.75rem;
border-radius: 8px;
background: rgba(34, 197, 94, 0.1);
font-size: 0.85rem;
color: rgba(187, 247, 208, 0.95);
}
[data-theme="light"] .pt-axis-cascade-feedback {
background: rgba(16, 185, 129, 0.12);
color: rgba(6, 95, 70, 0.95);
}
/* ------------------------------------------------------------
.pt-feedback-loop
3-up cards for long-loop, short-loop, ultrashort feedback
------------------------------------------------------------ */
.pt-feedback-loop {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.pt-feedback-loop-card {
padding: 1.1rem 1.25rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.2);
background: rgba(15, 23, 42, 0.45);
border-top: 3px solid rgba(96, 165, 250, 0.65);
}
[data-theme="light"] .pt-feedback-loop-card {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(148, 163, 184, 0.28);
}
.pt-feedback-loop-card--long { border-top-color: #60a5fa; }
.pt-feedback-loop-card--short { border-top-color: #34d399; }
.pt-feedback-loop-card--ultra { border-top-color: #f59e0b; }
.pt-feedback-loop-name {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(148, 163, 184, 0.95);
margin-bottom: 0.3rem;
}
.pt-feedback-loop-title {
font-weight: 600;
margin-bottom: 0.45rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .pt-feedback-loop-title { color: rgba(15, 23, 42, 0.92); }
.pt-feedback-loop-body {
font-size: 0.92rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .pt-feedback-loop-body { color: rgba(30, 41, 59, 0.85); }
/* ------------------------------------------------------------
.pt-pulse-frequency-chart
horizontal rail of vertical bars representing the daily GH pulses
------------------------------------------------------------ */
.pt-pulse-frequency-chart {
margin: 1.5rem 0;
padding: 1.25rem;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.18);
background: rgba(15, 23, 42, 0.45);
}
[data-theme="light"] .pt-pulse-frequency-chart {
background: rgba(248, 250, 252, 0.85);
border-color: rgba(148, 163, 184, 0.28);
}
.pt-pulse-frequency-title {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(148, 163, 184, 0.95);
margin-bottom: 0.75rem;
}
.pt-pulse-frequency-rail {
display: flex;
align-items: flex-end;
gap: 0.5rem;
height: 7rem;
border-bottom: 1px dashed rgba(148, 163, 184, 0.35);
padding-bottom: 0.4rem;
}
.pt-pulse-frequency-bar {
flex: 1;
background: linear-gradient(180deg, rgba(96, 165, 250, 0.7), rgba(96, 165, 250, 0.25));
border-radius: 4px 4px 0 0;
position: relative;
}
.pt-pulse-frequency-bar--sws {
background: linear-gradient(180deg, rgba(245, 158, 11, 0.85), rgba(245, 158, 11, 0.3));
}
.pt-pulse-frequency-bar-label {
position: absolute;
bottom: -1.4rem;
left: 50%;
transform: translateX(-50%);
font-size: 0.7rem;
color: rgba(148, 163, 184, 0.9);
white-space: nowrap;
}
.pt-pulse-frequency-caption {
margin-top: 1.6rem;
font-size: 0.88rem;
line-height: 1.5;
color: rgba(203, 213, 225, 0.85);
}
[data-theme="light"] .pt-pulse-frequency-caption { color: rgba(30, 41, 59, 0.82); }
/* ------------------------------------------------------------
.pt-somatotrope-anatomy
2-up anatomy card pair
------------------------------------------------------------ */
.pt-somatotrope-anatomy {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.pt-somatotrope-anatomy-card {
padding: 1.1rem 1.25rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.2);
background: rgba(15, 23, 42, 0.45);
}
[data-theme="light"] .pt-somatotrope-anatomy-card {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(148, 163, 184, 0.28);
}
.pt-somatotrope-anatomy-tag {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
color: rgba(94, 234, 212, 0.95);
margin-bottom: 0.4rem;
}
.pt-somatotrope-anatomy-title {
font-weight: 600;
margin-bottom: 0.45rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .pt-somatotrope-anatomy-title { color: rgba(15, 23, 42, 0.92); }
.pt-somatotrope-anatomy-body {
font-size: 0.92rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .pt-somatotrope-anatomy-body { color: rgba(30, 41, 59, 0.85); }
/* ------------------------------------------------------------
.pt-sleep-pulse-card
sleep-onset GH-pulse callout pair
------------------------------------------------------------ */
.pt-sleep-pulse-card {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
margin: 1.25rem 0;
padding: 1.1rem 1.25rem;
border-radius: 14px;
border: 1px solid rgba(245, 158, 11, 0.25);
background: rgba(245, 158, 11, 0.06);
}
[data-theme="light"] .pt-sleep-pulse-card {
background: rgba(254, 243, 199, 0.5);
border-color: rgba(217, 119, 6, 0.3);
}
.pt-sleep-pulse-stage {
font-size: 0.74rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
color: rgba(252, 211, 77, 0.95);
margin-bottom: 0.35rem;
}
[data-theme="light"] .pt-sleep-pulse-stage { color: rgba(180, 83, 9, 0.95); }
.pt-sleep-pulse-body {
font-size: 0.92rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.9);
}
[data-theme="light"] .pt-sleep-pulse-body { color: rgba(30, 41, 59, 0.88); }
@media (max-width: 640px) {
.pt-axis-cascade-row { grid-template-columns: 1fr; gap: 0.4rem; }
.pt-pulse-frequency-rail { height: 5.5rem; }
}
/* --- 05-pediatric-ghd --- */
/* ============================================================
sermorelin unit 5 -- pediatric-ghd bespoke widgets (MARQUEE)
------------------------------------------------------------
widget vocabulary introduced in this fragment:
.pt-pediatric-trial-grid -- 2-up trial card pair for
Thorner 1985 + Geref ISG 1996
.pt-growth-velocity-chart -- baseline / year-1 / year-2
cm/yr bar trio for the Geref data
.pt-geref-history-rail -- vertical historical timeline
(1982 GHRH isolation -> 2013 FR)
.pt-translation-comparison -- 2-column pediatric vs adult
evidence-base comparison
.pt-case-grid (+ .pt-case-card / -pill / -title / -body /
-takeaway) -- case-based teaching widget
mirrored from kpv-case-grid
.pt-pediatric-presentation -- 3-up presentation card grid
(auxology / labs / imaging)
============================================================ */
/* ------------------------------------------------------------
.pt-pediatric-trial-grid
2-up trial card pair
------------------------------------------------------------ */
.pt-pediatric-trial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.pt-pediatric-trial-card {
padding: 1.15rem 1.3rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
border-top: 3px solid #10b981;
}
[data-theme="light"] .pt-pediatric-trial-card {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.pt-pediatric-trial-author {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(94, 234, 212, 0.95);
margin-bottom: 0.25rem;
}
.pt-pediatric-trial-design {
font-size: 0.85rem;
color: rgba(148, 163, 184, 0.95);
margin-bottom: 0.45rem;
}
.pt-pediatric-trial-readout {
font-size: 0.92rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.9);
margin-bottom: 0.5rem;
}
[data-theme="light"] .pt-pediatric-trial-readout { color: rgba(30, 41, 59, 0.88); }
.pt-pediatric-trial-effect {
font-size: 0.82rem;
font-weight: 600;
padding: 0.3rem 0.6rem;
border-radius: 8px;
background: rgba(16, 185, 129, 0.12);
color: rgba(187, 247, 208, 0.95);
display: inline-block;
}
[data-theme="light"] .pt-pediatric-trial-effect {
background: rgba(16, 185, 129, 0.15);
color: rgba(6, 95, 70, 0.95);
}
/* ------------------------------------------------------------
.pt-growth-velocity-chart
horizontal cm/yr bar trio for baseline / year-1 / year-2
------------------------------------------------------------ */
.pt-growth-velocity-chart {
margin: 1.5rem 0;
padding: 1.25rem;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.2);
background: rgba(15, 23, 42, 0.45);
}
[data-theme="light"] .pt-growth-velocity-chart {
background: rgba(248, 250, 252, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.pt-growth-velocity-title {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(148, 163, 184, 0.95);
margin-bottom: 0.85rem;
}
.pt-growth-velocity-row {
display: grid;
grid-template-columns: 7rem 1fr 4rem;
gap: 0.75rem;
align-items: center;
margin-bottom: 0.55rem;
}
.pt-growth-velocity-label {
font-size: 0.88rem;
color: rgba(226, 232, 240, 0.9);
}
[data-theme="light"] .pt-growth-velocity-label { color: rgba(30, 41, 59, 0.88); }
.pt-growth-velocity-track {
height: 0.9rem;
border-radius: 6px;
background: rgba(148, 163, 184, 0.15);
overflow: hidden;
}
.pt-growth-velocity-fill {
height: 100%;
background: linear-gradient(90deg, #10b981, #34d399);
border-radius: 6px;
}
.pt-growth-velocity-fill--baseline { background: linear-gradient(90deg, #94a3b8, #cbd5e1); }
.pt-growth-velocity-fill--year1 { background: linear-gradient(90deg, #10b981, #34d399); }
.pt-growth-velocity-fill--year2 { background: linear-gradient(90deg, #059669, #10b981); }
.pt-growth-velocity-value {
font-size: 0.88rem;
font-weight: 600;
text-align: right;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .pt-growth-velocity-value { color: rgba(15, 23, 42, 0.92); }
.pt-growth-velocity-caption {
margin-top: 0.6rem;
font-size: 0.85rem;
line-height: 1.45;
color: rgba(203, 213, 225, 0.82);
}
[data-theme="light"] .pt-growth-velocity-caption { color: rgba(30, 41, 59, 0.78); }
/* ------------------------------------------------------------
.pt-geref-history-rail
vertical historical timeline (1982 -> 2013)
------------------------------------------------------------ */
.pt-geref-history-rail {
margin: 1.5rem 0;
padding: 1.25rem 1.25rem 1.25rem 2rem;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.2);
background: rgba(15, 23, 42, 0.45);
position: relative;
}
[data-theme="light"] .pt-geref-history-rail {
background: rgba(248, 250, 252, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.pt-geref-history-item {
position: relative;
padding: 0.65rem 0 0.65rem 1.5rem;
border-left: 2px solid rgba(96, 165, 250, 0.35);
}
.pt-geref-history-item::before {
content: '';
position: absolute;
left: -7px;
top: 1rem;
width: 12px;
height: 12px;
border-radius: 50%;
background: #60a5fa;
border: 2px solid rgba(15, 23, 42, 0.95);
}
[data-theme="light"] .pt-geref-history-item::before {
border-color: rgba(248, 250, 252, 0.95);
}
.pt-geref-history-year {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(96, 165, 250, 0.95);
margin-bottom: 0.2rem;
}
.pt-geref-history-title {
font-weight: 600;
margin-bottom: 0.3rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .pt-geref-history-title { color: rgba(15, 23, 42, 0.92); }
.pt-geref-history-body {
font-size: 0.9rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .pt-geref-history-body { color: rgba(30, 41, 59, 0.85); }
/* ------------------------------------------------------------
.pt-translation-comparison
2-column pediatric-vs-adult evidence-base contrast
------------------------------------------------------------ */
.pt-translation-comparison {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.pt-translation-comparison-card {
padding: 1.15rem 1.3rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
}
[data-theme="light"] .pt-translation-comparison-card {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.pt-translation-comparison-card--pediatric { border-top: 3px solid #10b981; }
.pt-translation-comparison-card--adult { border-top: 3px solid #f59e0b; }
.pt-translation-comparison-tag {
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 0.35rem;
}
.pt-translation-comparison-card--pediatric .pt-translation-comparison-tag { color: rgba(94, 234, 212, 0.95); }
.pt-translation-comparison-card--adult .pt-translation-comparison-tag { color: rgba(252, 211, 77, 0.95); }
.pt-translation-comparison-title {
font-weight: 600;
margin-bottom: 0.45rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .pt-translation-comparison-title { color: rgba(15, 23, 42, 0.92); }
.pt-translation-comparison-body {
font-size: 0.9rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.88);
}
[data-theme="light"] .pt-translation-comparison-body { color: rgba(30, 41, 59, 0.85); }
.pt-translation-comparison-list {
font-size: 0.88rem;
line-height: 1.5;
padding-left: 1.1rem;
margin: 0.5rem 0 0;
color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .pt-translation-comparison-list { color: rgba(30, 41, 59, 0.82); }
/* ------------------------------------------------------------
.pt-case-grid -- case-based teaching widget
mirrored from kpv-case-grid (4 cases A/B/C/D)
------------------------------------------------------------ */
.pt-case-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.pt-case-card {
padding: 1.1rem 1.25rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
border-top: 3px solid #60a5fa;
}
[data-theme="light"] .pt-case-card {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.pt-case-card[data-case="A"] { border-top-color: #047857; }
.pt-case-card[data-case="B"] { border-top-color: #b45309; }
.pt-case-card[data-case="C"] { border-top-color: #1d4ed8; }
.pt-case-card[data-case="D"] { border-top-color: #b91c1c; }
.pt-case-pill {
display: inline-block;
padding: 0.2rem 0.55rem;
border-radius: 6px;
background: rgba(96, 165, 250, 0.15);
color: rgba(191, 219, 254, 0.95);
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 0.5rem;
}
[data-theme="light"] .pt-case-pill { background: rgba(96, 165, 250, 0.18); color: rgba(30, 64, 175, 0.95); }
.pt-case-title {
font-weight: 600;
margin-bottom: 0.45rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .pt-case-title { color: rgba(15, 23, 42, 0.92); }
.pt-case-body {
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 0.55rem;
color: rgba(226, 232, 240, 0.88);
}
[data-theme="light"] .pt-case-body { color: rgba(30, 41, 59, 0.85); }
.pt-case-takeaway {
font-size: 0.86rem;
line-height: 1.45;
padding: 0.55rem 0.75rem;
border-radius: 8px;
background: rgba(148, 163, 184, 0.08);
color: rgba(203, 213, 225, 0.92);
border-left: 3px solid rgba(148, 163, 184, 0.45);
}
[data-theme="light"] .pt-case-takeaway {
background: rgba(148, 163, 184, 0.12);
color: rgba(30, 41, 59, 0.88);
}
/* ------------------------------------------------------------
.pt-pediatric-presentation
3-up presentation card grid
------------------------------------------------------------ */
.pt-pediatric-presentation {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.pt-pediatric-presentation-card {
padding: 1rem 1.2rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
}
[data-theme="light"] .pt-pediatric-presentation-card {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.pt-pediatric-presentation-tag {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: rgba(94, 234, 212, 0.95);
margin-bottom: 0.3rem;
}
.pt-pediatric-presentation-title {
font-weight: 600;
margin-bottom: 0.4rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .pt-pediatric-presentation-title { color: rgba(15, 23, 42, 0.92); }
.pt-pediatric-presentation-body {
font-size: 0.9rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .pt-pediatric-presentation-body { color: rgba(30, 41, 59, 0.85); }
@media (max-width: 640px) {
.pt-growth-velocity-row { grid-template-columns: 5rem 1fr 3.5rem; gap: 0.5rem; }
}
/* --- 06-adult-use --- */
/* ============================================================
sermorelin unit 6 -- adult-use bespoke widgets
------------------------------------------------------------
widget vocabulary introduced in this fragment:
.pt-somatopause-rail -- vertical age-decade rail
mapping GH decline by decade
.pt-rudman-card -- 2-card cluster contrasting
Rudman 1990 rhGH vs sermorelin
extrapolation reality
.pt-body-comp-bars -- horizontal bars for
lean-mass / fat-mass / IGF-1
deltas in the small adult studies
.pt-recovery-claims-grid -- claim vs source vs verdict
grid for community recovery claims
.pt-adult-evidence-tier -- collapsible tier strip for
the adult evidence map
============================================================ */
/* ------------------------------------------------------------
.pt-somatopause-rail
vertical age-decade rail (decade tag + delta + body)
------------------------------------------------------------ */
.pt-somatopause-rail {
margin: 1.5rem 0;
padding: 1.25rem 1.25rem 1.25rem 2rem;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.2);
background: rgba(15, 23, 42, 0.45);
position: relative;
}
[data-theme="light"] .pt-somatopause-rail {
background: rgba(248, 250, 252, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.pt-somatopause-item {
position: relative;
padding: 0.65rem 0 0.65rem 1.5rem;
border-left: 2px solid rgba(252, 211, 77, 0.4);
}
.pt-somatopause-item::before {
content: '';
position: absolute;
left: -7px;
top: 1rem;
width: 12px;
height: 12px;
border-radius: 50%;
background: #f59e0b;
border: 2px solid rgba(15, 23, 42, 0.95);
}
[data-theme="light"] .pt-somatopause-item::before {
border-color: rgba(248, 250, 252, 0.95);
}
.pt-somatopause-decade {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(252, 211, 77, 0.95);
margin-bottom: 0.2rem;
}
.pt-somatopause-delta {
font-weight: 600;
margin-bottom: 0.3rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .pt-somatopause-delta { color: rgba(15, 23, 42, 0.92); }
.pt-somatopause-body {
font-size: 0.9rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .pt-somatopause-body { color: rgba(30, 41, 59, 0.85); }
/* ------------------------------------------------------------
.pt-rudman-card
2-card cluster: rhGH evidence vs sermorelin extrapolation
------------------------------------------------------------ */
.pt-rudman-cluster {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.pt-rudman-card {
padding: 1.15rem 1.3rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
}
[data-theme="light"] .pt-rudman-card {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.pt-rudman-card--actual { border-top: 3px solid #10b981; }
.pt-rudman-card--claim { border-top: 3px solid #ef4444; }
.pt-rudman-card-tag {
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 0.35rem;
}
.pt-rudman-card--actual .pt-rudman-card-tag { color: rgba(94, 234, 212, 0.95); }
.pt-rudman-card--claim .pt-rudman-card-tag { color: rgba(252, 165, 165, 0.95); }
.pt-rudman-card-title {
font-weight: 600;
margin-bottom: 0.45rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .pt-rudman-card-title { color: rgba(15, 23, 42, 0.92); }
.pt-rudman-card-body {
font-size: 0.9rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.88);
}
[data-theme="light"] .pt-rudman-card-body { color: rgba(30, 41, 59, 0.85); }
/* ------------------------------------------------------------
.pt-body-comp-bars
horizontal bars for lean / fat / IGF-1 deltas
------------------------------------------------------------ */
.pt-body-comp-bars {
margin: 1.5rem 0;
padding: 1.25rem;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.2);
background: rgba(15, 23, 42, 0.45);
}
[data-theme="light"] .pt-body-comp-bars {
background: rgba(248, 250, 252, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.pt-body-comp-bars-title {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(148, 163, 184, 0.95);
margin-bottom: 0.85rem;
}
.pt-body-comp-row {
display: grid;
grid-template-columns: 8rem 1fr 5rem;
gap: 0.75rem;
align-items: center;
margin-bottom: 0.55rem;
}
.pt-body-comp-label {
font-size: 0.88rem;
color: rgba(226, 232, 240, 0.9);
}
[data-theme="light"] .pt-body-comp-label { color: rgba(30, 41, 59, 0.88); }
.pt-body-comp-track {
height: 0.9rem;
border-radius: 6px;
background: rgba(148, 163, 184, 0.15);
overflow: hidden;
}
.pt-body-comp-fill {
height: 100%;
border-radius: 6px;
background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.pt-body-comp-fill--lean { background: linear-gradient(90deg, #10b981, #34d399); }
.pt-body-comp-fill--fat { background: linear-gradient(90deg, #ef4444, #f87171); }
.pt-body-comp-fill--igf1 { background: linear-gradient(90deg, #60a5fa, #93c5fd); }
.pt-body-comp-value {
font-size: 0.88rem;
font-weight: 600;
text-align: right;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .pt-body-comp-value { color: rgba(15, 23, 42, 0.92); }
.pt-body-comp-caption {
margin-top: 0.6rem;
font-size: 0.85rem;
line-height: 1.45;
color: rgba(203, 213, 225, 0.82);
}
[data-theme="light"] .pt-body-comp-caption { color: rgba(30, 41, 59, 0.78); }
/* ------------------------------------------------------------
.pt-recovery-claims-grid
claim / source / verdict grid for community recovery claims
------------------------------------------------------------ */
.pt-recovery-claims-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.pt-recovery-claim-card {
padding: 1.05rem 1.2rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
border-top: 3px solid #94a3b8;
}
[data-theme="light"] .pt-recovery-claim-card {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.pt-recovery-claim-card[data-verdict="supported"] { border-top-color: #10b981; }
.pt-recovery-claim-card[data-verdict="mixed"] { border-top-color: #f59e0b; }
.pt-recovery-claim-card[data-verdict="unsupported"] { border-top-color: #ef4444; }
.pt-recovery-claim-pill {
display: inline-block;
padding: 0.2rem 0.55rem;
border-radius: 6px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 0.45rem;
background: rgba(148, 163, 184, 0.18);
color: rgba(226, 232, 240, 0.95);
}
.pt-recovery-claim-card[data-verdict="supported"] .pt-recovery-claim-pill {
background: rgba(16, 185, 129, 0.18);
color: rgba(187, 247, 208, 0.95);
}
.pt-recovery-claim-card[data-verdict="mixed"] .pt-recovery-claim-pill {
background: rgba(245, 158, 11, 0.18);
color: rgba(253, 230, 138, 0.95);
}
.pt-recovery-claim-card[data-verdict="unsupported"] .pt-recovery-claim-pill {
background: rgba(239, 68, 68, 0.18);
color: rgba(252, 165, 165, 0.95);
}
.pt-recovery-claim-title {
font-weight: 600;
margin-bottom: 0.45rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .pt-recovery-claim-title { color: rgba(15, 23, 42, 0.92); }
.pt-recovery-claim-source {
font-size: 0.82rem;
line-height: 1.5;
color: rgba(148, 163, 184, 0.92);
margin-bottom: 0.45rem;
}
.pt-recovery-claim-verdict {
font-size: 0.86rem;
line-height: 1.45;
padding: 0.55rem 0.75rem;
border-radius: 8px;
background: rgba(148, 163, 184, 0.08);
color: rgba(203, 213, 225, 0.92);
border-left: 3px solid rgba(148, 163, 184, 0.45);
}
[data-theme="light"] .pt-recovery-claim-verdict {
background: rgba(148, 163, 184, 0.12);
color: rgba(30, 41, 59, 0.88);
}
/* ------------------------------------------------------------
.pt-adult-evidence-tier
compact tier strip for the adult evidence map
------------------------------------------------------------ */
.pt-adult-evidence-tier {
margin: 1.5rem 0;
padding: 1.15rem 1.25rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
border-left: 4px solid #94a3b8;
}
[data-theme="light"] .pt-adult-evidence-tier {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.pt-adult-evidence-tier--solid { border-left-color: #10b981; }
.pt-adult-evidence-tier--moderate { border-left-color: #f59e0b; }
.pt-adult-evidence-tier--weak { border-left-color: #ef4444; }
.pt-adult-evidence-tier--missing { border-left-color: #6b7280; }
.pt-adult-evidence-tier-header {
display: flex;
align-items: baseline;
gap: 0.65rem;
margin-bottom: 0.5rem;
flex-wrap: wrap;
}
.pt-adult-evidence-tier-pill {
display: inline-block;
padding: 0.2rem 0.55rem;
border-radius: 6px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
background: rgba(148, 163, 184, 0.18);
color: rgba(226, 232, 240, 0.95);
}
.pt-adult-evidence-tier--solid .pt-adult-evidence-tier-pill {
background: rgba(16, 185, 129, 0.2);
color: rgba(187, 247, 208, 0.95);
}
.pt-adult-evidence-tier--moderate .pt-adult-evidence-tier-pill {
background: rgba(245, 158, 11, 0.2);
color: rgba(253, 230, 138, 0.95);
}
.pt-adult-evidence-tier--weak .pt-adult-evidence-tier-pill {
background: rgba(239, 68, 68, 0.2);
color: rgba(252, 165, 165, 0.95);
}
.pt-adult-evidence-tier-title {
font-weight: 600;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .pt-adult-evidence-tier-title { color: rgba(15, 23, 42, 0.92); }
.pt-adult-evidence-tier-body {
font-size: 0.9rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.88);
}
[data-theme="light"] .pt-adult-evidence-tier-body { color: rgba(30, 41, 59, 0.85); }
.pt-adult-evidence-tier-claims {
font-size: 0.88rem;
line-height: 1.5;
padding-left: 1.15rem;
margin: 0.55rem 0 0;
color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .pt-adult-evidence-tier-claims { color: rgba(30, 41, 59, 0.82); }
@media (max-width: 640px) {
.pt-body-comp-row { grid-template-columns: 6rem 1fr 4rem; gap: 0.5rem; }
}
/* --- 07-vs-other-analogs --- */
/* ============================================================
sermorelin unit 7 -- vs-other-analogs bespoke widgets
------------------------------------------------------------
widget vocabulary introduced in this fragment:
.pt-analog-timeline (+ .pt-milestones / .pt-milestone)
-- historical timeline of the
GH-axis analog family
(1982 GHRH -> 2008 MK-677)
.pt-pk-comparison-grid -- mechanism / half-life /
approval / route grid for
each analog vs sermorelin
.pt-stack-strategy-card -- dual-pathway GHRH+GHRP
synergy explainer card
.pt-analog-positioning -- where-sermorelin-sits radar
fallback strip
.pt-receptor-split-grid -- GHRHR-side vs GHSR-side
2-column receptor split
============================================================ */
/* ------------------------------------------------------------
.pt-analog-timeline + .pt-milestones / .pt-milestone
horizontal milestone strip (year + title + body)
------------------------------------------------------------ */
.pt-analog-timeline {
margin: 1.5rem 0;
padding: 1.25rem;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.2);
background: rgba(15, 23, 42, 0.45);
overflow-x: auto;
}
[data-theme="light"] .pt-analog-timeline {
background: rgba(248, 250, 252, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.pt-milestones {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
position: relative;
}
.pt-milestone {
padding: 1rem 1.15rem;
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.55);
border-top: 3px solid #60a5fa;
position: relative;
}
[data-theme="light"] .pt-milestone {
background: rgba(255, 255, 255, 0.92);
border-color: rgba(148, 163, 184, 0.3);
}
.pt-milestone-year {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(96, 165, 250, 0.95);
margin-bottom: 0.3rem;
}
.pt-milestone-title {
font-weight: 600;
margin-bottom: 0.4rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .pt-milestone-title { color: rgba(15, 23, 42, 0.92); }
.pt-milestone-body {
font-size: 0.88rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .pt-milestone-body { color: rgba(30, 41, 59, 0.85); }
/* ------------------------------------------------------------
.pt-pk-comparison-grid
per-analog 4-column comparison
------------------------------------------------------------ */
.pt-pk-comparison-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.pt-pk-comparison-card {
padding: 1.1rem 1.25rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
border-top: 3px solid #60a5fa;
}
[data-theme="light"] .pt-pk-comparison-card {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.pt-pk-comparison-card[data-receptor="ghrhr"] { border-top-color: #10b981; }
.pt-pk-comparison-card[data-receptor="ghsr"] { border-top-color: #a855f7; }
.pt-pk-comparison-card[data-receptor="ghr"] { border-top-color: #f59e0b; }
.pt-pk-comparison-name {
font-weight: 700;
margin-bottom: 0.35rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .pt-pk-comparison-name { color: rgba(15, 23, 42, 0.95); }
.pt-pk-comparison-rows {
display: grid;
gap: 0.35rem;
margin-top: 0.5rem;
}
.pt-pk-comparison-row {
display: grid;
grid-template-columns: 6rem 1fr;
gap: 0.5rem;
font-size: 0.86rem;
line-height: 1.45;
}
.pt-pk-comparison-key {
text-transform: uppercase;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
color: rgba(148, 163, 184, 0.95);
padding-top: 0.15rem;
}
.pt-pk-comparison-val {
color: rgba(226, 232, 240, 0.9);
}
[data-theme="light"] .pt-pk-comparison-val { color: rgba(30, 41, 59, 0.88); }
/* ------------------------------------------------------------
.pt-stack-strategy-card
dual-pathway GHRH + GHRP synergy explainer
------------------------------------------------------------ */
.pt-stack-strategy-card {
margin: 1.5rem 0;
padding: 1.25rem 1.4rem;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.5);
border-left: 4px solid #a855f7;
}
[data-theme="light"] .pt-stack-strategy-card {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(148, 163, 184, 0.3);
}
.pt-stack-strategy-tag {
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: rgba(216, 180, 254, 0.95);
margin-bottom: 0.35rem;
}
.pt-stack-strategy-title {
font-weight: 600;
margin-bottom: 0.5rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .pt-stack-strategy-title { color: rgba(15, 23, 42, 0.92); }
.pt-stack-strategy-arms {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.85rem;
margin: 0.6rem 0 0.65rem;
}
.pt-stack-strategy-arm {
padding: 0.7rem 0.85rem;
border-radius: 10px;
background: rgba(148, 163, 184, 0.1);
border: 1px solid rgba(148, 163, 184, 0.2);
}
[data-theme="light"] .pt-stack-strategy-arm {
background: rgba(248, 250, 252, 0.85);
}
.pt-stack-strategy-arm-name {
font-weight: 600;
font-size: 0.88rem;
margin-bottom: 0.25rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .pt-stack-strategy-arm-name { color: rgba(15, 23, 42, 0.95); }
.pt-stack-strategy-arm-body {
font-size: 0.85rem;
line-height: 1.45;
color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .pt-stack-strategy-arm-body { color: rgba(30, 41, 59, 0.85); }
/* ------------------------------------------------------------
.pt-analog-positioning
where-sermorelin-sits strip
------------------------------------------------------------ */
.pt-analog-positioning {
margin: 1.5rem 0;
padding: 1.2rem 1.35rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
border-top: 3px solid #10b981;
}
[data-theme="light"] .pt-analog-positioning {
background: rgba(255, 255, 255, 0.88);
border-color: rgba(148, 163, 184, 0.3);
}
.pt-analog-positioning-title {
font-weight: 600;
margin-bottom: 0.5rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .pt-analog-positioning-title { color: rgba(15, 23, 42, 0.92); }
.pt-analog-positioning-list {
font-size: 0.9rem;
line-height: 1.55;
padding-left: 1.15rem;
margin: 0;
color: rgba(226, 232, 240, 0.88);
}
[data-theme="light"] .pt-analog-positioning-list { color: rgba(30, 41, 59, 0.85); }
/* ------------------------------------------------------------
.pt-receptor-split-grid
2-column GHRHR-side vs GHSR-side anatomy
------------------------------------------------------------ */
.pt-receptor-split-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.pt-receptor-split-card {
padding: 1.1rem 1.25rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
}
[data-theme="light"] .pt-receptor-split-card {
background: rgba(255, 255, 255, 0.88);
border-color: rgba(148, 163, 184, 0.3);
}
.pt-receptor-split-card--ghrhr { border-top: 3px solid #10b981; }
.pt-receptor-split-card--ghsr { border-top: 3px solid #a855f7; }
.pt-receptor-split-tag {
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 0.35rem;
}
.pt-receptor-split-card--ghrhr .pt-receptor-split-tag { color: rgba(94, 234, 212, 0.95); }
.pt-receptor-split-card--ghsr .pt-receptor-split-tag { color: rgba(216, 180, 254, 0.95); }
.pt-receptor-split-title {
font-weight: 600;
margin-bottom: 0.45rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .pt-receptor-split-title { color: rgba(15, 23, 42, 0.92); }
.pt-receptor-split-body {
font-size: 0.9rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.88);
}
[data-theme="light"] .pt-receptor-split-body { color: rgba(30, 41, 59, 0.85); }
@media (max-width: 640px) {
.pt-pk-comparison-row { grid-template-columns: 5rem 1fr; }
}
/* --- 08-safety-quality --- */
/* ============================================================
sermorelin unit 8 -- safety-quality bespoke widgets
------------------------------------------------------------
widget vocabulary introduced in this fragment:
.pt-ae-pyramid -- inline SVG AE-frequency
pyramid (mild -> serious)
used in the first-after-intro
section. fingerprint classifier
reads this as infographicType
'svg'.
.pt-ae-table -- pediatric vs adult AE-frequency
side-by-side comparison
.pt-monitoring-protocol -- IGF-1 monitoring schedule rail
(baseline / 6-8 wk / quarterly)
.pt-quality-checklist -- numbered CoA / procurement
checklist card
.pt-red-flag-list -- vendor marketing red-flag list
with severity dots
============================================================ */
/* ------------------------------------------------------------
.pt-ae-pyramid -- SVG infographic (used inline in section-interactive)
the actual SVG is hand-authored in the HTML; this rule provides
responsive sizing + light-mode label color overrides
------------------------------------------------------------ */
.pt-ae-pyramid {
width: 100%;
max-width: 600px;
height: auto;
display: block;
margin: 0 auto;
}
[data-theme="dark"] .pt-ae-pyramid text[fill="#0f172a"] {
fill: #f8fafc;
}
/* ------------------------------------------------------------
.pt-ae-table -- pediatric vs adult AE frequency comparison
------------------------------------------------------------ */
.pt-ae-table {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 0;
margin: 1.5rem 0;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(148, 163, 184, 0.22);
}
.pt-ae-table-cell {
padding: 0.7rem 0.95rem;
font-size: 0.9rem;
line-height: 1.45;
background: rgba(15, 23, 42, 0.45);
color: rgba(226, 232, 240, 0.9);
border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}
.pt-ae-table-cell--head {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(94, 234, 212, 0.95);
background: rgba(15, 23, 42, 0.7);
}
[data-theme="light"] .pt-ae-table-cell {
background: rgba(255, 255, 255, 0.85);
color: rgba(30, 41, 59, 0.88);
border-bottom-color: rgba(148, 163, 184, 0.2);
}
[data-theme="light"] .pt-ae-table-cell--head {
background: rgba(248, 250, 252, 0.95);
color: rgba(15, 76, 71, 0.95);
}
.pt-ae-table-cell--label {
font-weight: 600;
}
/* ------------------------------------------------------------
.pt-monitoring-protocol -- IGF-1 monitoring rail
------------------------------------------------------------ */
.pt-monitoring-protocol {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.85rem;
margin: 1.5rem 0;
}
.pt-monitoring-step {
padding: 1rem 1.15rem;
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
border-top: 3px solid #60a5fa;
}
[data-theme="light"] .pt-monitoring-step {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.pt-monitoring-step-when {
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: rgba(147, 197, 253, 0.95);
margin-bottom: 0.3rem;
}
.pt-monitoring-step-what {
font-weight: 600;
margin-bottom: 0.4rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .pt-monitoring-step-what { color: rgba(15, 23, 42, 0.92); }
.pt-monitoring-step-body {
font-size: 0.88rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .pt-monitoring-step-body { color: rgba(30, 41, 59, 0.85); }
/* ------------------------------------------------------------
.pt-quality-checklist -- numbered CoA / procurement checklist
------------------------------------------------------------ */
.pt-quality-checklist {
margin: 1.5rem 0;
padding: 1.25rem 1.4rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
border-left: 4px solid #10b981;
}
[data-theme="light"] .pt-quality-checklist {
background: rgba(248, 250, 252, 0.85);
}
.pt-quality-checklist-title {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(94, 234, 212, 0.95);
margin-bottom: 0.6rem;
}
.pt-quality-checklist-list {
list-style: none;
counter-reset: pt-q-counter;
padding: 0;
margin: 0;
}
.pt-quality-checklist-item {
counter-increment: pt-q-counter;
position: relative;
padding: 0.5rem 0 0.5rem 2.1rem;
font-size: 0.92rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.9);
border-bottom: 1px dashed rgba(148, 163, 184, 0.18);
}
.pt-quality-checklist-item:last-child { border-bottom: none; }
.pt-quality-checklist-item::before {
content: counter(pt-q-counter, decimal-leading-zero);
position: absolute;
left: 0;
top: 0.55rem;
font-size: 0.78rem;
font-weight: 700;
color: rgba(16, 185, 129, 0.95);
background: rgba(16, 185, 129, 0.12);
padding: 0.1rem 0.4rem;
border-radius: 5px;
}
[data-theme="light"] .pt-quality-checklist-item { color: rgba(30, 41, 59, 0.88); }
/* ------------------------------------------------------------
.pt-red-flag-list -- vendor red-flag list with severity dots
------------------------------------------------------------ */
.pt-red-flag-list {
list-style: none;
padding: 0;
margin: 1.25rem 0;
display: grid;
gap: 0.55rem;
}
.pt-red-flag-item {
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
gap: 0.7rem;
padding: 0.7rem 0.95rem;
border-radius: 10px;
background: rgba(15, 23, 42, 0.45);
border: 1px solid rgba(148, 163, 184, 0.22);
border-left: 3px solid #f87171;
font-size: 0.92rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.9);
}
[data-theme="light"] .pt-red-flag-item {
background: rgba(255, 255, 255, 0.85);
color: rgba(30, 41, 59, 0.88);
}
.pt-red-flag-item--high { border-left-color: #dc2626; }
.pt-red-flag-item--med { border-left-color: #f59e0b; }
.pt-red-flag-item--low { border-left-color: #facc15; }
.pt-red-flag-dot {
width: 10px;
height: 10px;
border-radius: 50%;
margin-top: 0.45rem;
background: #f87171;
}
.pt-red-flag-item--high .pt-red-flag-dot { background: #dc2626; }
.pt-red-flag-item--med .pt-red-flag-dot { background: #f59e0b; }
.pt-red-flag-item--low .pt-red-flag-dot { background: #facc15; }
.pt-red-flag-claim {
font-weight: 600;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .pt-red-flag-claim { color: rgba(15, 23, 42, 0.92); }
.pt-red-flag-why {
font-size: 0.86rem;
color: rgba(203, 213, 225, 0.85);
margin-top: 0.25rem;
line-height: 1.45;
}
[data-theme="light"] .pt-red-flag-why { color: rgba(30, 41, 59, 0.78); }
@media (max-width: 640px) {
.pt-ae-table { grid-template-columns: 1fr; }
.pt-ae-table-cell--head { border-bottom: 1px solid rgba(148, 163, 184, 0.25); }
}
/* --- 09-administration-regulatory --- */
/* ============================================================
sermorelin unit 9 -- administration-regulatory bespoke widgets
------------------------------------------------------------
widget vocabulary introduced in this fragment:
.pt-route-matrix -- 4-up route-comparison grid
(SubQ / intranasal / oral / IV)
.pt-dose-framework -- pediatric vs adult community
dose-framework comparison card
.pt-reconstitution-table -- vial mass / BAC volume / per-100u
math table
.pt-reg-status-card -- regulatory status panel with
Geref history rail + 503A status
.pt-research-roadmap -- prioritized future-research
list with priority pills
============================================================ */
/* ------------------------------------------------------------
.pt-route-matrix -- 4-up route comparison
------------------------------------------------------------ */
.pt-route-matrix {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.95rem;
margin: 1.5rem 0;
}
.pt-route-card {
padding: 1rem 1.15rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
border-top: 3px solid #60a5fa;
}
.pt-route-card--primary { border-top-color: #10b981; }
.pt-route-card--niche { border-top-color: #f59e0b; }
.pt-route-card--blocked { border-top-color: #b91c1c; }
.pt-route-card--clinical { border-top-color: #6366f1; }
[data-theme="light"] .pt-route-card {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.pt-route-card-name {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(94, 234, 212, 0.95);
margin-bottom: 0.3rem;
}
.pt-route-card--niche .pt-route-card-name { color: rgba(252, 211, 77, 0.95); }
.pt-route-card--blocked .pt-route-card-name { color: rgba(254, 178, 178, 0.95); }
.pt-route-card--clinical .pt-route-card-name { color: rgba(165, 180, 252, 0.95); }
.pt-route-card-bioavail {
font-weight: 600;
margin-bottom: 0.4rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .pt-route-card-bioavail { color: rgba(15, 23, 42, 0.92); }
.pt-route-card-body {
font-size: 0.88rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .pt-route-card-body { color: rgba(30, 41, 59, 0.85); }
/* ------------------------------------------------------------
.pt-dose-framework -- pediatric vs adult dose comparison
------------------------------------------------------------ */
.pt-dose-framework {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.pt-dose-framework-card {
padding: 1.1rem 1.25rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
}
.pt-dose-framework-card--validated { border-top: 3px solid #10b981; }
.pt-dose-framework-card--community { border-top: 3px solid #f59e0b; }
[data-theme="light"] .pt-dose-framework-card {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(148, 163, 184, 0.3);
}
.pt-dose-framework-tag {
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 0.35rem;
}
.pt-dose-framework-card--validated .pt-dose-framework-tag { color: rgba(94, 234, 212, 0.95); }
.pt-dose-framework-card--community .pt-dose-framework-tag { color: rgba(252, 211, 77, 0.95); }
.pt-dose-framework-title {
font-weight: 600;
margin-bottom: 0.45rem;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .pt-dose-framework-title { color: rgba(15, 23, 42, 0.92); }
.pt-dose-framework-body {
font-size: 0.9rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.88);
}
[data-theme="light"] .pt-dose-framework-body { color: rgba(30, 41, 59, 0.85); }
.pt-dose-framework-list {
font-size: 0.88rem;
line-height: 1.55;
padding-left: 1.1rem;
margin: 0.55rem 0 0;
color: rgba(226, 232, 240, 0.85);
}
[data-theme="light"] .pt-dose-framework-list { color: rgba(30, 41, 59, 0.82); }
/* ------------------------------------------------------------
.pt-reconstitution-table -- vial / BAC volume / per-unit math
------------------------------------------------------------ */
.pt-reconstitution-table {
margin: 1.5rem 0;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(148, 163, 184, 0.22);
display: grid;
grid-template-columns: 1fr 1fr 1fr 1.4fr;
}
.pt-reconstitution-cell {
padding: 0.7rem 0.9rem;
font-size: 0.9rem;
line-height: 1.45;
background: rgba(15, 23, 42, 0.45);
color: rgba(226, 232, 240, 0.9);
border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}
.pt-reconstitution-cell--head {
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(147, 197, 253, 0.95);
background: rgba(15, 23, 42, 0.7);
}
[data-theme="light"] .pt-reconstitution-cell {
background: rgba(255, 255, 255, 0.85);
color: rgba(30, 41, 59, 0.88);
border-bottom-color: rgba(148, 163, 184, 0.2);
}
[data-theme="light"] .pt-reconstitution-cell--head {
background: rgba(248, 250, 252, 0.95);
color: rgba(29, 78, 216, 0.95);
}
/* ------------------------------------------------------------
.pt-reg-status-card -- regulatory status panel
------------------------------------------------------------ */
.pt-reg-status-card {
margin: 1.5rem 0;
padding: 1.25rem 1.4rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.45);
border-left: 4px solid #6366f1;
}
[data-theme="light"] .pt-reg-status-card {
background: rgba(248, 250, 252, 0.85);
}
.pt-reg-status-header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.75rem;
flex-wrap: wrap;
margin-bottom: 0.6rem;
}
.pt-reg-status-title {
font-weight: 600;
color: rgba(248, 250, 252, 0.95);
}
[data-theme="light"] .pt-reg-status-title { color: rgba(15, 23, 42, 0.92); }
.pt-reg-status-pill {
display: inline-block;
padding: 0.25rem 0.6rem;
border-radius: 6px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
background: rgba(99, 102, 241, 0.18);
color: rgba(196, 181, 253, 0.95);
}
[data-theme="light"] .pt-reg-status-pill { background: rgba(99, 102, 241, 0.18); color: rgba(67, 56, 202, 0.95); }
.pt-reg-status-pill--ok { background: rgba(16, 185, 129, 0.15); color: rgba(187, 247, 208, 0.95); }
.pt-reg-status-pill--caution { background: rgba(245, 158, 11, 0.15); color: rgba(253, 230, 138, 0.95); }
.pt-reg-status-pill--banned { background: rgba(220, 38, 38, 0.15); color: rgba(254, 202, 202, 0.95); }
[data-theme="light"] .pt-reg-status-pill--ok { color: rgba(6, 95, 70, 0.95); }
[data-theme="light"] .pt-reg-status-pill--caution { color: rgba(146, 64, 14, 0.95); }
[data-theme="light"] .pt-reg-status-pill--banned { color: rgba(153, 27, 27, 0.95); }
.pt-reg-status-body {
font-size: 0.92rem;
line-height: 1.55;
color: rgba(226, 232, 240, 0.88);
}
[data-theme="light"] .pt-reg-status-body { color: rgba(30, 41, 59, 0.85); }
/* ------------------------------------------------------------
.pt-research-roadmap -- prioritized future-research list
------------------------------------------------------------ */
.pt-research-roadmap {
list-style: none;
padding: 0;
margin: 1.5rem 0;
display: grid;
gap: 0.65rem;
}
.pt-research-roadmap-item {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.8rem;
align-items: start;
padding: 0.75rem 1rem;
border-radius: 10px;
background: rgba(15, 23, 42, 0.45);
border: 1px solid rgba(148, 163, 184, 0.22);
}
[data-theme="light"] .pt-research-roadmap-item {
background: rgba(255, 255, 255, 0.85);
}
.pt-research-roadmap-priority {
display: inline-block;
padding: 0.2rem 0.55rem;
border-radius: 6px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
align-self: start;
background: rgba(96, 165, 250, 0.15);
color: rgba(191, 219, 254, 0.95);
}
.pt-research-roadmap-priority--p1 { background: rgba(220, 38, 38, 0.15); color: rgba(254, 202, 202, 0.95); }
.pt-research-roadmap-priority--p2 { background: rgba(245, 158, 11, 0.18); color: rgba(253, 230, 138, 0.95); }
.pt-research-roadmap-priority--p3 { background: rgba(16, 185, 129, 0.15); color: rgba(187, 247, 208, 0.95); }
[data-theme="light"] .pt-research-roadmap-priority--p1 { color: rgba(153, 27, 27, 0.95); }
[data-theme="light"] .pt-research-roadmap-priority--p2 { color: rgba(146, 64, 14, 0.95); }
[data-theme="light"] .pt-research-roadmap-priority--p3 { color: rgba(6, 95, 70, 0.95); }
.pt-research-roadmap-body {
font-size: 0.92rem;
line-height: 1.5;
color: rgba(226, 232, 240, 0.9);
}
[data-theme="light"] .pt-research-roadmap-body { color: rgba(30, 41, 59, 0.88); }
@media (max-width: 640px) {
.pt-reconstitution-table { grid-template-columns: 1fr 1fr; }
}
/* ============================================================
bespoke widget vocabulary for paid units (commit 2/3)
each unit gets a unique class family so the widget-variety
gate passes and visual sections do not collapse into the
shared course-feature-grid fallback.
============================================================ */
/* shared interactive stub (commit 2 placeholder; replaced in commit 3) */
.pt-interactive-stub {
padding: 24px;
background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
border: 1px dashed var(--color-border, rgba(255, 255, 255, 0.12));
border-radius: 12px;
text-align: center;
color: var(--color-text-muted, #94a3b8);
font-size: 0.9rem;
}
/* unit 2: mc4r-system (mc4r locale card + receptor profile bars) */
.pt-mc4r-locale-card {
padding: 18px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(52, 211, 158, 0.04));
border: 1px solid rgba(16, 185, 129, 0.18);
margin: 16px 0;
}
.pt-mc4r-locale-header { font-weight: 700; margin-bottom: 8px; }
.pt-mc4r-locale-list { margin: 0; padding-left: 18px; }
.pt-mc-receptor-bar { margin: 20px 0; display: flex; flex-direction: column; gap: 8px; }
.pt-mc-receptor-row { display: grid; grid-template-columns: 64px 1fr 1fr; align-items: center; gap: 10px; font-size: 0.85rem; }
.pt-mc-receptor-name { font-weight: 700; font-family: "JetBrains Mono", monospace; }
.pt-mc-receptor-fill { height: 18px; border-radius: 6px; }
.pt-mc-receptor-fill--none { background: rgba(148, 163, 184, 0.25); }
.pt-mc-receptor-fill--low { background: linear-gradient(90deg, rgba(251, 191, 36, 0.4), rgba(251, 191, 36, 0.55)); }
.pt-mc-receptor-fill--mid { background: linear-gradient(90deg, rgba(96, 165, 250, 0.45), rgba(96, 165, 250, 0.65)); }
.pt-mc-receptor-fill--high { background: linear-gradient(90deg, rgba(16, 185, 129, 0.55), rgba(16, 185, 129, 0.75)); }
.pt-mc-receptor-note { color: var(--color-text-muted, #94a3b8); }
.pt-mc-receptor-caption { color: var(--color-text-muted, #94a3b8); font-size: 0.8rem; margin-top: 10px; line-height: 1.6; }
/* unit 3: chemistry (cyclic strip + bridge diagram + mtii-vs-pt141 rail) */
.pt-cyclic-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08)); margin: 16px 0; font-family: "JetBrains Mono", monospace; }
.pt-cyclic-cap { padding: 4px 8px; background: rgba(148, 163, 184, 0.15); border-radius: 6px; font-size: 0.85rem; }
.pt-cyclic-cap--decisive { background: rgba(16, 185, 129, 0.18); color: var(--meadow-300, #6ee7bf); font-weight: 700; }
.pt-cyclic-bracket { font-size: 1.2rem; font-weight: 700; color: var(--color-text-muted, #94a3b8); }
.pt-cyclic-residue { padding: 4px 8px; background: rgba(255, 255, 255, 0.05); border-radius: 6px; font-size: 0.85rem; }
.pt-cyclic-residue--linear { background: rgba(148, 163, 184, 0.2); }
.pt-cyclic-residue--bridge { background: rgba(96, 165, 250, 0.25); color: #93c5fd; font-weight: 700; }
.pt-cyclic-residue--pharmacophore { background: rgba(16, 185, 129, 0.22); color: var(--meadow-300, #6ee7bf); font-weight: 600; }
.pt-cyclic-caption { width: 100%; color: var(--color-text-muted, #94a3b8); font-family: var(--font-sans, system-ui); font-size: 0.8rem; line-height: 1.6; margin-top: 10px; }
.pt-bridge-diagram { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 18px; border-radius: 12px; background: rgba(96, 165, 250, 0.08); border: 1px solid rgba(96, 165, 250, 0.22); margin: 16px 0; }
.pt-bridge-residue { padding: 12px; border-radius: 10px; text-align: center; }
.pt-bridge-residue--asp { background: rgba(251, 191, 36, 0.18); }
.pt-bridge-residue--lys { background: rgba(167, 139, 250, 0.2); }
.pt-bridge-tag { display: block; font-size: 0.75rem; color: var(--color-text-muted, #94a3b8); margin-top: 4px; }
.pt-bridge-bond { font-weight: 700; color: var(--meadow-300, #6ee7bf); text-align: center; }
.pt-bridge-caption { grid-column: 1 / -1; color: var(--color-text-muted, #94a3b8); font-size: 0.8rem; line-height: 1.6; }
.pt-mtii-vs-pt141-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 16px 0; }
.pt-mtii-vs-pt141-card { padding: 16px; border-radius: 12px; background: var(--color-bg-card, rgba(255, 255, 255, 0.03)); border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08)); }
.pt-mtii-vs-pt141-card--mt2 { border-left: 4px solid rgba(251, 191, 36, 0.55); }
.pt-mtii-vs-pt141-card--pt141 { border-left: 4px solid rgba(16, 185, 129, 0.55); }
.pt-mtii-vs-pt141-tag { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted, #94a3b8); margin-bottom: 6px; }
.pt-mtii-vs-pt141-sequence { font-family: "JetBrains Mono", monospace; font-size: 0.85rem; padding: 8px; background: rgba(0, 0, 0, 0.12); border-radius: 6px; margin: 8px 0; word-break: break-all; }
.pt-mtii-vs-pt141-effects { margin: 8px 0 0; padding-left: 18px; font-size: 0.85rem; }
/* unit 4: cns-mechanism (pde5-vs-cns + downstream flow) */
.pt-pde5-vs-cns-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 16px 0; }
.pt-pde5-vs-cns-card { padding: 16px; border-radius: 12px; background: var(--color-bg-card, rgba(255, 255, 255, 0.03)); border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08)); }
.pt-pde5-vs-cns-card--pde5 { border-top: 3px solid rgba(96, 165, 250, 0.55); }
.pt-pde5-vs-cns-card--pt141 { border-top: 3px solid rgba(16, 185, 129, 0.55); }
.pt-pde5-vs-cns-title { font-weight: 700; margin-bottom: 8px; }
.pt-pde5-vs-cns-list { margin: 0; padding-left: 18px; font-size: 0.85rem; }
.pt-downstream-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px; border-radius: 12px; background: rgba(167, 139, 250, 0.06); border: 1px solid rgba(167, 139, 250, 0.2); margin: 16px 0; }
.pt-downstream-node { flex: 1; min-width: 140px; padding: 10px 12px; background: rgba(255, 255, 255, 0.04); border-radius: 8px; }
.pt-downstream-node--start { background: rgba(16, 185, 129, 0.15); }
.pt-downstream-node--end { background: rgba(167, 139, 250, 0.18); }
.pt-downstream-arrow { font-weight: 700; color: var(--color-text-muted, #94a3b8); }
.pt-downstream-name { font-weight: 700; font-size: 0.9rem; }
.pt-downstream-note { font-size: 0.78rem; color: var(--color-text-muted, #94a3b8); margin-top: 4px; }
.pt-downstream-branch { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 200px; }
.pt-downstream-branch-card { padding: 8px 10px; background: rgba(255, 255, 255, 0.04); border-radius: 8px; }
/* unit 5: reconnect (phase2b bars + trial flow + results card) */
.pt-phase2b-bars { display: flex; flex-direction: column; gap: 6px; margin: 16px 0; }
.pt-phase2b-row { display: grid; grid-template-columns: 120px 1fr 1fr; align-items: center; gap: 10px; font-size: 0.83rem; }
.pt-phase2b-label { font-weight: 700; font-family: "JetBrains Mono", monospace; }
.pt-phase2b-bar { padding: 4px 8px; height: 22px; display: flex; align-items: center; border-radius: 6px; font-size: 0.78rem; color: rgba(0,0,0,0.85); }
.pt-phase2b-bar--low { background: rgba(148, 163, 184, 0.35); }
.pt-phase2b-bar--mid { background: rgba(96, 165, 250, 0.45); }
.pt-phase2b-bar--high { background: rgba(16, 185, 129, 0.55); }
.pt-phase2b-bar--toxic { background: rgba(248, 113, 113, 0.5); }
.pt-phase2b-note { color: var(--color-text-muted, #94a3b8); font-size: 0.78rem; }
.pt-phase2b-caption { color: var(--color-text-muted, #94a3b8); font-size: 0.78rem; line-height: 1.6; margin-top: 8px; }
.pt-reconnect-trial-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px; border-radius: 12px; background: rgba(96, 165, 250, 0.08); border: 1px solid rgba(96, 165, 250, 0.22); margin: 16px 0; }
.pt-reconnect-stage { flex: 1; min-width: 160px; padding: 10px; background: rgba(255, 255, 255, 0.04); border-radius: 8px; }
.pt-reconnect-stage-name { font-weight: 700; font-size: 0.9rem; }
.pt-reconnect-stage-text { font-size: 0.78rem; color: var(--color-text-muted, #94a3b8); margin-top: 4px; }
.pt-reconnect-arrow { font-weight: 700; color: var(--color-text-muted, #94a3b8); }
.pt-reconnect-results-card { padding: 18px; border-radius: 12px; background: rgba(16, 185, 129, 0.07); border: 1px solid rgba(16, 185, 129, 0.22); margin: 16px 0; }
.pt-reconnect-results-row { margin-bottom: 14px; }
.pt-reconnect-results-name { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 6px; }
.pt-reconnect-results-bars { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.pt-reconnect-results-bar { padding: 4px 8px; border-radius: 6px; font-size: 0.78rem; color: rgba(0,0,0,0.85); }
.pt-reconnect-results-bar--drug { background: rgba(16, 185, 129, 0.55); }
.pt-reconnect-results-bar--placebo { background: rgba(148, 163, 184, 0.4); }
.pt-reconnect-results-stat { display: block; font-size: 0.78rem; color: var(--color-text-muted, #94a3b8); margin-top: 4px; }
/* unit 6: dosing (dosing card + injection grid + pk curve + cap explainer) */
.pt-dosing-card { padding: 18px; border-radius: 12px; background: var(--color-bg-card, rgba(255, 255, 255, 0.04)); border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08)); margin: 16px 0; }
.pt-dosing-card-header { font-weight: 700; margin-bottom: 12px; }
.pt-dosing-card-body { display: flex; flex-direction: column; gap: 8px; }
.pt-dosing-card-row { display: grid; grid-template-columns: 130px 1fr; gap: 10px; font-size: 0.88rem; }
.pt-dosing-card-label { color: var(--color-text-muted, #94a3b8); }
.pt-dosing-card-value { font-weight: 600; }
.pt-injection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 16px 0; }
.pt-injection-card { padding: 14px; border-radius: 10px; background: var(--color-bg-card, rgba(255, 255, 255, 0.03)); border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08)); }
.pt-injection-card--warn { border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.06); }
.pt-injection-icon { font-weight: 700; text-transform: lowercase; font-size: 0.85rem; margin-bottom: 6px; color: var(--meadow-300, #6ee7bf); }
.pt-injection-text { font-size: 0.83rem; color: var(--color-text-muted, #94a3b8); line-height: 1.5; }
.pt-pk-curve { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px; background: rgba(96, 165, 250, 0.06); border: 1px solid rgba(96, 165, 250, 0.18); margin: 16px 0; }
.pt-pk-curve-row { display: grid; grid-template-columns: 100px 1fr 1fr; align-items: center; gap: 10px; font-size: 0.82rem; }
.pt-pk-curve-label { font-weight: 700; font-family: "JetBrains Mono", monospace; }
.pt-pk-curve-bar { height: 14px; background: linear-gradient(90deg, rgba(96, 165, 250, 0.35), rgba(96, 165, 250, 0.55)); border-radius: 4px; }
.pt-pk-curve-note { color: var(--color-text-muted, #94a3b8); font-size: 0.78rem; }
.pt-pk-curve-caption { color: var(--color-text-muted, #94a3b8); font-size: 0.78rem; line-height: 1.6; }
.pt-cap-explainer { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 16px 0; }
.pt-cap-explainer-card { padding: 16px; border-radius: 10px; background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.25); text-align: center; }
.pt-cap-explainer-num { font-size: 2.2rem; font-weight: 800; color: #fca5a5; margin-bottom: 4px; }
.pt-cap-explainer-text { font-size: 0.82rem; color: var(--color-text-muted, #94a3b8); }
/* unit 7: safety (bp monitor strip + hyperpigmentation gallery + contraindication panel) */
.pt-bp-monitor-strip { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 12px; background: rgba(248, 113, 113, 0.07); border: 1px solid rgba(248, 113, 113, 0.22); margin: 16px 0; }
.pt-bp-monitor-strip-row { display: grid; grid-template-columns: 130px 1fr 1.2fr; align-items: center; gap: 10px; font-size: 0.83rem; }
.pt-bp-monitor-strip-label { font-weight: 700; font-family: "JetBrains Mono", monospace; }
.pt-bp-monitor-strip-bar { padding: 6px 10px; height: 24px; display: flex; align-items: center; border-radius: 6px; font-size: 0.78rem; color: rgba(0,0,0,0.85); font-weight: 600; }
.pt-bp-monitor-strip-row--baseline .pt-bp-monitor-strip-bar { background: rgba(148, 163, 184, 0.4); }
.pt-bp-monitor-strip-row--peak .pt-bp-monitor-strip-bar { background: rgba(248, 113, 113, 0.6); }
.pt-bp-monitor-strip-row--recover .pt-bp-monitor-strip-bar { background: rgba(148, 163, 184, 0.4); }
.pt-bp-monitor-strip-note { color: var(--color-text-muted, #94a3b8); font-size: 0.78rem; }
.pt-bp-monitor-strip-caption { color: var(--color-text-muted, #94a3b8); font-size: 0.78rem; line-height: 1.6; }
.pt-hyperpigmentation-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 16px 0; }
.pt-hyperpigmentation-gallery-card { padding: 14px; border-radius: 10px; background: rgba(167, 139, 250, 0.08); border: 1px solid rgba(167, 139, 250, 0.22); }
.pt-hyperpigmentation-gallery-region { font-weight: 700; text-transform: lowercase; margin-bottom: 6px; color: #c4b5fd; }
.pt-hyperpigmentation-gallery-text { font-size: 0.82rem; color: var(--color-text-muted, #94a3b8); line-height: 1.5; }
.pt-hyperpigmentation-gallery-caption { grid-column: 1 / -1; color: var(--color-text-muted, #94a3b8); font-size: 0.78rem; line-height: 1.6; }
.pt-contraindication-panel { padding: 16px; border-radius: 12px; background: rgba(248, 113, 113, 0.05); border: 1px solid rgba(248, 113, 113, 0.2); margin: 16px 0; }
.pt-contraindication-panel-header { font-weight: 700; margin-bottom: 12px; }
.pt-contraindication-panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pt-contraindication-panel-card { padding: 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); }
.pt-contraindication-panel-card--hard { border-left: 4px solid rgba(248, 113, 113, 0.6); }
.pt-contraindication-panel-card--caution { border-left: 4px solid rgba(251, 191, 36, 0.55); }
.pt-contraindication-panel-tag { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted, #94a3b8); margin-bottom: 6px; }
.pt-contraindication-panel-card ul { margin: 0; padding-left: 16px; font-size: 0.85rem; }
/* unit 8: off-label-ed (program halt card) */
.pt-program-halt-card { padding: 16px; border-radius: 12px; background: rgba(251, 191, 36, 0.07); border: 1px solid rgba(251, 191, 36, 0.22); margin: 16px 0; }
.pt-program-halt-card-tag { font-weight: 700; font-size: 0.85rem; margin-bottom: 10px; color: #fcd34d; }
.pt-program-halt-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.pt-program-halt-card-cell { padding: 10px; background: rgba(255, 255, 255, 0.03); border-radius: 8px; }
.pt-program-halt-card-label { font-weight: 700; font-size: 0.82rem; margin-bottom: 6px; text-transform: lowercase; }
.pt-program-halt-card-cell ul { margin: 0; padding-left: 16px; font-size: 0.82rem; }
/* unit 9: vs-melanotan2 (family comparator + edit side-by-side + tradeoff spectrum) */
.pt-family-comparator { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 16px 0; }
.pt-family-comparator-card { padding: 14px; border-radius: 10px; background: var(--color-bg-card, rgba(255, 255, 255, 0.03)); border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08)); text-align: center; }
.pt-family-comparator-card--mt1 { border-top: 3px solid rgba(251, 191, 36, 0.55); }
.pt-family-comparator-card--mt2 { border-top: 3px solid rgba(248, 113, 113, 0.55); }
.pt-family-comparator-card--pt141 { border-top: 3px solid rgba(16, 185, 129, 0.55); }
.pt-family-comparator-card--imc { border-top: 3px solid rgba(96, 165, 250, 0.55); }
.pt-family-comparator-name { font-weight: 700; margin-bottom: 4px; }
.pt-family-comparator-receptor { font-size: 0.8rem; color: var(--color-text-muted, #94a3b8); margin-bottom: 4px; font-family: "JetBrains Mono", monospace; }
.pt-family-comparator-indication { font-size: 0.82rem; }
.pt-edit-side-by-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 16px 0; }
.pt-edit-side-by-side-card { padding: 16px; border-radius: 12px; background: var(--color-bg-card, rgba(255, 255, 255, 0.03)); border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08)); }
.pt-edit-side-by-side-card--mt2 { border-left: 4px solid rgba(248, 113, 113, 0.55); }
.pt-edit-side-by-side-card--pt141 { border-left: 4px solid rgba(16, 185, 129, 0.55); }
.pt-edit-side-by-side-name { font-weight: 700; margin-bottom: 8px; }
.pt-edit-side-by-side-seq { font-family: "JetBrains Mono", monospace; font-size: 0.85rem; padding: 8px; background: rgba(0, 0, 0, 0.12); border-radius: 6px; margin: 8px 0; word-break: break-all; }
.pt-edit-side-by-side-effect { font-size: 0.82rem; color: var(--color-text-muted, #94a3b8); line-height: 1.6; }
.pt-tradeoff-spectrum { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px; background: rgba(167, 139, 250, 0.06); border: 1px solid rgba(167, 139, 250, 0.2); margin: 16px 0; }
.pt-tradeoff-spectrum-row { display: grid; grid-template-columns: 130px 1fr 1fr; align-items: center; gap: 8px; font-size: 0.82rem; }
.pt-tradeoff-spectrum-name { font-weight: 700; font-family: "JetBrains Mono", monospace; }
.pt-tradeoff-spectrum-bar { padding: 4px 8px; height: 22px; display: flex; align-items: center; border-radius: 6px; font-size: 0.76rem; color: rgba(0,0,0,0.85); }
.pt-tradeoff-spectrum-bar--tan { background: rgba(251, 191, 36, 0.4); }
.pt-tradeoff-spectrum-bar--libido { background: rgba(167, 139, 250, 0.45); }
.pt-tradeoff-spectrum-caption { color: var(--color-text-muted, #94a3b8); font-size: 0.78rem; line-height: 1.6; margin-top: 8px; }