:root {
--spf-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--spf-primary-color: #4285F4; --spf-secondary-color: #34A853; --spf-card-bg: #ffffff;
--spf-text-color: #202124;
--spf-meta-color: #5f6368;
--spf-border-color: #e0e0e0;
--spf-badge-bg: #f1f3f4;
--spf-button-text-color: #fff;
--spf-card-shadow: 0 1px 3px rgba(0,0,0,0.06);
--spf-card-hover-shadow: 0 4px 8px rgba(0,0,0,0.1);
--spf-error-bg: #fce8e6;
--spf-error-text: #d93025;
--spf-error-border: #f9c6c2;
--spf-border-radius: 8px;
--spf-spacing-unit: 1rem;
}   @media (prefers-color-scheme: dark) {
:root {
--spf-card-bg: #2d2d2d;
--spf-text-color: #e8eaed;
--spf-meta-color: #9aa0a6;
--spf-border-color: #4d4d4d;
--spf-badge-bg: #3c4043;
--spf-card-shadow: 0 1px 3px rgba(0,0,0,0.3);
--spf-card-hover-shadow: 0 4px 8px rgba(0,0,0,0.4);
--spf-error-bg: #3c1919;
--spf-error-text: #f28b82;
--spf-error-border: #5c2b2b;
}
}   .spf-container {
font-family: var(--spf-font-family);
width: 100%;
max-width: 900px;
margin: 0 auto;
color: var(--spf-text-color);
}
.spf-publication-list {
display: flex;
flex-direction: column;
gap: calc(var(--spf-spacing-unit) * 1.5);
}   .spf-profile {
align-items: center;
background-color: var(--spf-card-bg);
border: 1px solid var(--spf-border-color);
border-radius: var(--spf-border-radius);
box-shadow: var(--spf-card-shadow);
display: flex;
gap: calc(var(--spf-spacing-unit) * 1.5);
margin-bottom: calc(var(--spf-spacing-unit) * 2);
padding: calc(var(--spf-spacing-unit) * 1.5);
}
.spf-profile-photo-link {
display: block;
flex: 0 0 auto;
line-height: 0;
}
.spf-profile-photo {
aspect-ratio: 1 / 1;
border-radius: 50%;
display: block;
height: 120px;
object-fit: cover;
width: 120px;
}
.spf-profile-content {
flex: 1 1 auto;
min-width: 0;
text-align: var(--spf-profile-text-align, center);
}
.spf-profile-name {
color: var(--spf-text-color);
font-size: 2rem;
line-height: 1.15;
margin: 0 0 calc(var(--spf-spacing-unit) * 0.45);
}
.spf-profile-name a,
.spf-profile-affiliation a,
.spf-profile-meta a,
.spf-profile-interests a {
color: inherit;
text-decoration-thickness: 1px;
text-underline-offset: 0.12em;
}
.spf-profile-name a {
text-decoration: none;
}
.spf-profile-name a:hover,
.spf-profile-affiliation a:hover,
.spf-profile-meta a:hover,
.spf-profile-interests a:hover {
color: var(--spf-primary-color);
}
.spf-profile-affiliation,
.spf-profile-meta {
color: var(--spf-text-color);
font-size: 1rem;
line-height: 1.45;
margin: 0 0 calc(var(--spf-spacing-unit) * 0.35);
}
.spf-profile-meta {
color: var(--spf-meta-color);
}
.spf-profile-separator {
margin: 0 0.45em;
opacity: 0.75;
}
.spf-profile-interests {
display: flex;
flex-wrap: wrap;
gap: calc(var(--spf-spacing-unit) * 0.4);
justify-content: var(--spf-profile-content-align, center);
margin-top: calc(var(--spf-spacing-unit) * 0.65);
}
.spf-profile-interests a,
.spf-profile-interests span {
background-color: var(--spf-badge-bg);
border: 1px solid var(--spf-border-color);
border-color: color-mix(in srgb, var(--spf-primary-color) 32%, transparent);
border-radius: 999px;
color: var(--spf-primary-color);
display: inline-block;
font-size: 0.88em;
font-weight: 600;
line-height: 1.3;
padding: 0.35em 0.75em;
text-decoration: none;
}
@supports (background: color-mix(in srgb, #000 20%, transparent)) {
.spf-profile-interests a,
.spf-profile-interests span {
background-color: color-mix(in srgb, var(--spf-primary-color) 18%, transparent);
}
}
.spf-publication-item {
background-color: var(--spf-card-bg);
border: 1px solid var(--spf-border-color);
border-radius: var(--spf-border-radius);
padding: calc(var(--spf-spacing-unit) * 1.25);
transition: box-shadow 0.3s ease, transform 0.3s ease;
box-shadow: var(--spf-card-shadow);
display: flex;
flex-direction: column;
}
.spf-publication-item:hover {
transform: translateY(-4px);
box-shadow: var(--spf-card-hover-shadow);
}   .spf-item-header .spf-item-title {
font-size: 1.2em;
margin: 0 0 calc(var(--spf-spacing-unit) * 0.5);
color: var(--spf-text-color);
line-height: 1.4;
}
.spf-item-header .spf-item-title a {
color: inherit;
text-decoration: none;
transition: color 0.2s;
}
.spf-item-header .spf-item-title a:hover {
color: var(--spf-primary-color);
text-decoration: underline;
}
.spf-item-meta {
font-size: 0.9em;
color: var(--spf-meta-color);
display: flex;
flex-wrap: wrap; gap: calc(var(--spf-spacing-unit) * 0.25) calc(var(--spf-spacing-unit) * 0.75);
margin-bottom: calc(var(--spf-spacing-unit) * 0.75);
line-height: 1.5;
}
.spf-item-meta .spf-authors {
font-weight: 500;
}
.spf-item-meta .spf-journal::before {
content: '·';
margin: 0 0.5em;
opacity: 0.7;
}
.spf-item-abstract {
font-size: 0.95em;
line-height: 1.6;
border-left: 3px solid var(--spf-secondary-color);
padding-left: var(--spf-spacing-unit);
margin: calc(var(--spf-spacing-unit) * 0.5) 0;
color: var(--spf-meta-color);
}
.spf-item-footer {
margin-top: auto; padding-top: var(--spf-spacing-unit);
text-align: right;
}
.spf-year {
display: inline-block;
background-color: var(--spf-badge-bg);
color: var(--spf-text-color);
padding: 0.25em 0.75em;
border-radius: 1em;
font-size: 0.8em;
font-weight: 600;
}   .spf-more-link-wrapper {
text-align: center;
margin-top: calc(var(--spf-spacing-unit) * 2);
}
.spf-button {
display: inline-block;
background-color: var(--spf-primary-color);
color: var(--spf-button-text-color);
padding: 0.75em 1.5em;
border-radius: var(--spf-border-radius);
text-decoration: none;
font-weight: 600;
transition: background-color 0.2s, filter 0.2s, transform 0.2s;
}
.spf-button:hover {
background-color: var(--spf-primary-color);
filter: brightness(0.92);
transform: translateY(-2px);
color: var(--spf-button-text-color);
}
.spf-error {
color: var(--spf-error-text);
background-color: var(--spf-error-bg);
border: 1px solid var(--spf-error-border);
padding: var(--spf-spacing-unit);
border-radius: var(--spf-border-radius);
}   @media (max-width: 600px) {
.spf-profile {
align-items: flex-start;
flex-direction: column;
gap: var(--spf-spacing-unit);
padding: var(--spf-spacing-unit);
}
.spf-profile-photo {
height: 96px;
width: 96px;
}
.spf-profile-name {
font-size: 1.45rem;
}
.spf-publication-item {
padding: var(--spf-spacing-unit);
}
.spf-item-header .spf-item-title {
font-size: 1.1em; }
.spf-item-meta, .spf-item-abstract {
font-size: 0.85em; }
}