* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'DM Sans', sans-serif; background: #F4F6F8; color: #3A3F48; line-height: 1.75; font-size: 15px; }
h1, h2, h3 { font-family: 'DM Sans', sans-serif; font-weight: 500; color: #1A1E24; }

.sidebar { position: fixed; left: 0; top: 0; width: 240px; height: 100vh; background: #D8DDE4; border-right: 1px solid; border-image: linear-gradient(180deg, #B0B8C4, #D8DDE4, #B0B8C4) 1; padding: 32px 0; z-index: 10; transform: translateX(-240px); animation: slideIn 0.4s ease-out forwards; }
@keyframes slideIn { to { transform: translateX(0); } }
.sidebar-logo { font-weight: 500; font-size: 18px; color: #1A1E24; padding: 0 24px 24px; border-bottom: 1px solid #B0B8C4; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 12px 24px; color: #6A7280; text-decoration: none; font-weight: 300; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; transition: background 0.2s ease, color 0.2s ease; }
.nav-item:hover { background: #F4F6F8; color: #2BA8A0; }
.nav-item:hover svg { transform: scaleX(-1); transition: transform 0.2s ease; }
.nav-item svg { transition: transform 0.2s ease; }

.ambient-fish { position: fixed; top: 40px; z-index: 5; animation: swimAcross 45s linear infinite; pointer-events: none; }
@keyframes swimAcross { 0% { left: -100px; } 100% { left: calc(100vw + 100px); } }
.fish-angel { animation: fishSway 2s ease-in-out infinite alternate; }
@keyframes fishSway { 0% { transform: rotate(-3deg); } 100% { transform: rotate(3deg); } }

.main-content { margin-left: 240px; padding: 0 48px; max-width: 960px; }
.header-bar { padding: 48px 0 32px; }
.header-bar h1 { font-size: 32px; margin-bottom: 8px; }
.header-desc { color: #6A7280; font-size: 15px; }

.chrome-divider { height: 1px; background: linear-gradient(90deg, #B0B8C4, #D8DDE4, #B0B8C4); margin: 8px 0; }

.content-block { padding: 40px 0; opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease; }
.content-block.visible { opacity: 1; transform: translateY(0); }
.content-block h2 { font-size: 24px; margin-bottom: 16px; }
.content-block p { margin-bottom: 12px; }
.content-block code { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: #5A6370; }

.research-cards { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.research-card { flex: 1; min-width: 240px; background: #F4F6F8; border: 1px solid #B0B8C4; padding: 20px; transition: transform 0.4s ease; }
.research-card.visible { transform: rotate(0deg) !important; }
.card-label { font-weight: 300; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #6A7280; display: block; margin-bottom: 8px; }
.research-card h3 { font-size: 18px; margin-bottom: 8px; color: #1A1E24; }
.research-card p { font-size: 14px; color: #3A3F48; }
.doi { display: block; margin-top: 8px; }

.team-list { margin-top: 16px; }
.team-member { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid #D8DDE4; }
.member-role { font-weight: 300; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: #6A7280; min-width: 140px; }
.member-name { color: #1A1E24; font-weight: 500; }

.publication-list { margin-top: 16px; }
.pub-entry { display: flex; gap: 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid #D8DDE4; flex-wrap: wrap; }
.pub-year { font-weight: 500; color: #E86B3A; min-width: 48px; }
.pub-title { flex: 1; color: #1A1E24; }
.pub-entry code { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #6A7280; }

.aquarium-strip { position: relative; height: 60px; background: linear-gradient(180deg, #E8F0F4, #F4F6F8); margin-left: 240px; overflow: hidden; }
.strip-fish { position: absolute; top: 50%; transform: translateY(-50%); animation-timing-function: linear; animation-iteration-count: infinite; }
.f1 { animation: swim1 20s linear infinite; top: 20%; }
.f2 { animation: swim2 28s linear infinite; top: 60%; }
.f3 { animation: swim3 35s linear infinite; top: 40%; }
.f4 { animation: swim4 22s linear infinite; top: 75%; }
.f5 { animation: swim5 30s linear infinite; top: 15%; }
@keyframes swim1 { 0% { left: -60px; } 100% { left: calc(100% + 60px); } }
@keyframes swim2 { 0% { left: calc(100% + 60px); } 100% { left: -60px; } }
@keyframes swim3 { 0% { left: -40px; } 100% { left: calc(100% + 40px); } }
@keyframes swim4 { 0% { left: calc(100% + 60px); } 100% { left: -60px; } }
@keyframes swim5 { 0% { left: -60px; } 100% { left: calc(100% + 60px); } }

/* Palette: #B0B8C4 #D8DDE4 #E86B3A #2BA8A0 */
@media (max-width: 768px) {
    .sidebar { position: relative; width: 100%; height: auto; transform: translateX(0); animation: none; border-right: none; border-bottom: 1px solid #B0B8C4; display: flex; flex-wrap: wrap; gap: 0; padding: 16px; }
    .sidebar-logo { padding: 0 16px 0 0; border-bottom: none; }
    .nav-item { padding: 8px 12px; }
    .main-content { margin-left: 0; padding: 0 24px; }
    .aquarium-strip { margin-left: 0; }
}