@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .btn-primary {
        @apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-md transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary/50;
    }
    .section-title {
        @apply text-[clamp(1.2rem,2.5vw,1.8rem)] font-bold text-neutral-dark mb-4 relative inline-block;
    }
    
    /* 自定义头部高度 */
    .mobile-header {
        height: 3rem;
    }
    
    .section-title::after {
        @apply content-[''] absolute bottom-0 left-0 w-1/6 h-1 bg-primary rounded-full;
    }
    
    /* 作品列表项样式 - 简洁但装饰丰富 */
    .work-list-item {
        @apply relative overflow-hidden rounded-xl border border-gray-200 bg-white transition-all duration-300;
    }
    
    .work-title {
        @apply font-medium text-gray-900;
    }
    
    .work-content {
        @apply text-gray-600 leading-relaxed;
    }
    
    .work-stats {
        @apply flex flex-wrap items-center justify-between gap-3 pt-3 border-t border-gray-100;
    }
    
    /* 作品列表项悬停效果 */
    .work-list-item:hover {
        @apply shadow-lg;
    }
    
    /* 作品区域标题特殊装饰 */
    .works-section-title::after {
        @apply bg-gradient-to-r from-green-500 to-blue-500;
    }
    
    /* 主要作品区域特殊装饰 */
    .works-section-title::after {
        @apply w-1/4;
    }
    
    /* 添加动画关键帧 */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .animate-fade-in-up {
        animation: fadeInUp 0.6s ease-out forwards;
    }
    
    /* 减少移动端动画以提高性能 */
    @media (max-width: 768px) {
        .animate-fade-in-up,
        .poem-card:hover,
        .mobile-menu-item:hover,
        .mobile-menu-item:active {
            animation: none;
            transform: none;
            transition: none;
        }
        
        .poem-card:hover {
            transform: none;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0,  0, 0, 0.06);
        }
        
        .mobile-menu-item:hover,
        .mobile-menu-item:active {
            transform: none;
            scale: none;
        }
    }
    
    /* 时间线样式 - 重新设计 */
    #poet-timeline {
        @apply relative py-2 px-0;
    }
    
    /* 时间线连接线 */
    #poet-timeline::before {
        @apply content-[''] absolute left-4 top-0 bottom-0 w-0.5 bg-gradient-to-b from-blue-400 via-purple-400 to-amber-400;
    }
    
    /* 时间线节点 */
    .timeline-node {
        @apply absolute -left-3 top-2 w-8 h-8 rounded-full flex items-center justify-center shadow-lg transform transition-all duration-300;
    }
    
    /* 时间线卡片 */
    .timeline-card {
        @apply bg-transparent rounded-xl transition-all duration-300 overflow-hidden border-0 shadow-none;
    }
    
    .timeline-card:hover {
        @apply shadow-none;
    }
    
    /* 时间线卡片头部 */
    .timeline-card-header {
        @apply px-0 pt-4 pb-3 bg-gradient-to-r border-0;
    }
    
    /* 时间线内容 */
    .timeline-content {
        @apply p-0;
    }
    
    .timeline-content p {
        @apply mb-3 last:mb-0 text-base leading-relaxed px-0;
    }
    
    /* 经典名篇标签 */
    .famous-badge {
        @apply ml-3 px-2.5 py-1 bg-gradient-to-r from-amber-500 to-orange-500 text-white text-xs font-bold rounded-full shadow-sm;
    }
    
    /* 影响项样式 - 重新设计 */
    #poet-influences .timeline-item {
        @apply relative pl-6 pb-6 border-l-2 border-blue-200 last:border-0;
    }
    
    #poet-influences .timeline-item::before {
        @apply content-[''] absolute -left-2 top-0 w-4 h-4 rounded-full bg-blue-500 border-4 border-white shadow;
    }
    
    /* 移动端时间线优化 */
    @media (max-width: 768px) {
        #poet-timeline::before {
            @apply left-3;
        }
        
        .timeline-node {
            @apply -left-2 w-6 h-6;
        }
        
        .timeline-node span {
            @apply text-xs;
        }
        
        .timeline-card-header {
            @apply px-0 pt-3 pb-2 border-0;
        }
        
        .timeline-content {
            @apply p-0;
        }
        
        .timeline-content p {
            @apply text-sm mb-2 px-0;
        }
        
        .famous-badge {
            @apply ml-2 px-2 py-0.5 text-[10px];
        }
        
        /* 移动端经典名句优化 */
        #poet-quotes {
            @apply px-1;
        }
        
        #poet-quotes p {
            @apply text-sm;
        }
        
        /* 经典名句指示器优化 */
        .quote-indicator {
            @apply transition-all duration-300;
        }
        
        /* 经典名句装饰元素响应式优化 */
        #poet-quotes .quote-decoration {
            top: 3px;
            height: 14px;
        }
        
        /* 移动端影响项优化 */
        #poet-influences .timeline-item {
            @apply pl-5 pb-5;
        }
        
        #poet-influences .timeline-item::before {
            @apply w-3 h-3 -left-1.5 border-2;
        }
    }
    
    /* 诗歌卡片悬停效果 */
    .poem-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    
    /* 移动端面包屑导航优化 */
    @media (max-width: 768px) {
        .breadcrumb-container {
            @apply overflow-x-auto whitespace-nowrap pb-2;
        }
        .breadcrumb-container ol {
            @apply inline-flex items-center space-x-1 min-w-max;
        }
    }
    
    /* 移动端触摸目标优化 */
    @media (max-width: 768px) {
        /* 优化触摸目标大小，确保合适的点击区域但不过大 */
        button, a, .cursor-pointer {
            min-height: 8px;
            min-width: 8px;
        }
        
        /* 作品卡片触摸优化 */
        .works-grid .rounded-xl {
            min-height: 80px;
        }
        
        /* 相关诗人触摸优化 */
        #related-poets .flex {
            min-height: 60px;
        }
        
        /* 经典名句触摸优化 */
        #poet-quotes .p-2 {
            min-height: 50px;
        }
    }
    
    /* 移动端整体布局优化 */
    @media (max-width: 1024px) {
        .main-content {
            @apply px-4;
        }
        
        /* 面包屑导航优化 */
        .breadcrumb-container ol {
            @apply flex-nowrap;
        }
        
        /* 诗人标题区域优化 */
        .poet-header {
            @apply p-3;
        }
        
        /* 按钮在移动端优化 */
        .poet-header button {
            @apply w-auto max-w-[45%] text-[10px] px-2 py-1;
        }
        
        /* 内容区域优化 */
        .content-grid {
            @apply gap-4;
        }
        
        /* 主要内容区优化 */
        .main-section {
            @apply p-4;
        }
        
        /* 侧边栏优化 */
        .sidebar-section {
            @apply p-4;
        }
        
        /* 时间线优化 */
        .timeline-item {
            @apply pl-4 pb-4;
        }
        
        /* 作品列表优化 */
        .works-container {
            @apply gap-3;
        }
        
        /* 诗人详情标题在移动端调整 */
        .poet-header .flex-col {
            @apply gap-3;
        }
        
        /* 按钮在移动端调整 */
        .poet-header .flex {
            @apply gap-2;
        }
        
        /* 主要作品区域在移动端优化 */
        .works-section-title {
            @apply text-xl;
        }
    }
    
    /* 小屏幕设备优化 */
    @media (max-width: 768px) {
        /* 调整主内容网格为单列布局 */
        .content-grid {
            @apply grid-cols-1 gap-5;
        }
        
        /* 侧边栏在移动端变为正常板块 */
        .sidebar-content-area {
            @apply order-first;
        }
        
        /* 调整诗人标题区域 */
        .poet-header {
            @apply p-4 text-center;
        }
        
        .poet-header .flex-col {
            @apply items-center text-center;
        }
        
        .poet-header .flex {
            @apply justify-center mt-3 flex-wrap;
        }
        
        /* 作品列表调整为单列 */
        .works-container {
            @apply space-y-4;
        }
        
        /* 时间线进一步优化 */
        .timeline-item {
            @apply pl-5 pb-5;
        }
        
        /* 作品列表优化 */
        .works-container {
            @apply gap-4;
        }
        
        /* 诗人详情标题在移动端调整 */
        .poet-header .flex-col {
            @apply gap-4;
        }
        
        /* 按钮在移动端调整 */
        .poet-header .flex {
            @apply gap-3;
        }
        
        /* 调整板块内边距 */
        .main-section, .sidebar-section {
            @apply p-4;
        }
        
        /* 经典名句板块优化 */
        #poet-quotes .p-2 {
            @apply p-3;
        }
        
        /* 相关诗人板块优化 */
        #related-poets .flex {
            @apply flex-col items-center text-center;
        }
        
        #related-poets .flex .flex-shrink-0 {
            @apply mb-2;
        }
        
        /* 优化移动端文字样式 */
        body {
            @apply text-base leading-normal;
        }
        
        /* 诗人姓名标题优化 */
        #poet-name {
            @apply text-2xl sm:text-3xl font-bold text-neutral-dark mb-3 sm:mb-4;
        }
        
        /* 板块标题优化 */
        .section-title {
            @apply text-xl sm:text-2xl mb-3 sm:mb-4;
        }
        
        /* 作品标题优化 */
        .work-title {
            @apply text-base sm:text-lg mb-2;
        }
        
        /* 作品内容优化 */
        .work-content {
            @apply text-sm sm:text-base leading-relaxed;
        }
        
        /* 时间线内容优化 */
        .timeline-content p {
            @apply text-sm sm:text-base mb-2;
        }
        
        /* 诗人简介优化 */
        #poet-intro p {
            @apply text-sm sm:text-base leading-[1.6] sm:leading-[1.7];
        }
        
        /* 标签文字优化 */
        .inline-flex {
            @apply text-xs sm:text-sm;
        }
        
        /* 按钮文字优化 */
        .poet-header button {
            @apply text-sm;
        }
        
        /* 历史评价优化 */
        #poet-evaluations p {
            @apply text-sm sm:text-base leading-[1.6];
        }
        
        /* 经典名句优化 */
        #poet-quotes p {
            @apply text-sm sm:text-base leading-[1.6];
        }
        
        /* 相关诗人优化 */
        #related-poets p {
            @apply text-sm leading-[1.5];
        }
        
        /* 学习资源优化 */
        .sidebar-section h3 {
            @apply text-base;
        }
        
        .sidebar-section p {
            @apply text-xs sm:text-sm;
        }
        
        /* 作品列表项在移动端优化 */
        .work-list-item {
            @apply p-4;
        }
        
        .work-title {
            @apply text-lg;
        }
        
        .work-content {
            @apply text-sm;
        }
        
        .work-tag {
            @apply text-xs px-2 py-0.5;
        }
    }
    
    /* 超小屏幕优化 */
    @media (max-width: 480px) {
        .poet-header {
            @apply p-3;
        }
        
        .main-section, .sidebar-section {
            @apply p-3;
        }
        
        .content-grid {
            @apply gap-3;
        }
        
        .section-title {
            @apply text-lg mb-3;
        }
        
        .timeline-item {
            @apply pl-3 pb-3;
        }
        
        /* 面包屑导航在超小屏幕上进一步优化 */
        .breadcrumb-container {
            @apply text-xs;
        }
        
        .breadcrumb-container i {
            @apply text-xs mx-1;
        }
        
        /* 诗人标题在超小屏幕优化 */
        #poet-name {
            @apply text-2xl mb-2;
        }
        
        /* 按钮在超小屏幕优化 */
        .poet-header button {
            @apply px-2 py-1 text-[10px];
        }
        
        .poet-header button i {
            @apply mr-1;
        }
        
        /* 作品列表项在超小屏幕优化 */
        .work-list-item {
            @apply p-3;
        }
        
        .work-list-item .flex {
            @apply flex-col items-center text-center;
        }
        
        .work-list-item .flex .flex-shrink-0 {
            @apply mb-2;
        }
        
        /* 调整作品列表项内边距 */
        .work-list-item .rounded-xl {
            @apply p-3;
        }
        
        /* 调整按钮大小 */
        .poet-header .px-3 {
            @apply px-2;
        }
        
        /* 主要作品区域在超小屏幕优化 */
        .works-section-title {
            @apply text-xl;
        }
        
        .works-section-title i {
            @apply mr-2 text-xl;
        }
        
        /* 全面优化移动端文字排版 - 资深UI设计师优化方案 */
        
        /* 基础文本样式优化 */
        .prose {
            @apply max-w-none text-gray-700;
        }
        
        .prose p {
            @apply text-sm leading-[1.7] tracking-wide;
        }
        
        /* 诗人简介优化 */
        #poet-intro {
            @apply space-y-4 leading-[1.7] text-gray-700;
        }
        
        #poet-intro p {
            @apply text-sm leading-[1.7] tracking-wide whitespace-pre-wrap;
            letter-spacing: 0.02em;
        }
        
        /* 人物生平全面优化 */
        #poet-timeline {
            @apply mt-2 px-0;
        }
        
        #poet-timeline .space-y-6 {
            @apply space-y-8;
        }
        
        /* 人物生平段落样式优化 - 确保不同参数下段落换行一致 */
        #poet-timeline p {
            @apply text-sm leading-[1.7] text-gray-700 tracking-wide whitespace-pre-wrap;
            letter-spacing: 0.02em;
        }
        
        /* 历史评价段落样式优化 */
        #poet-evaluations p {
            @apply text-sm leading-[1.7] text-gray-700 tracking-wide whitespace-pre-wrap;
            letter-spacing: 0.02em;
        }
        
        /* 经典名句段落样式优化 */
        #poet-quotes p {
            @apply text-sm leading-[1.7] tracking-wide whitespace-pre-wrap;
            letter-spacing: 0.02em;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
            
        /* 经典名句标题样式 */
        #poet-quotes h2 {
            @apply text-base font-medium text-gray-900 mb-3;
        }
            
        /* 经典名句装饰元素样式 */
        #poet-quotes .quote-decoration {
            position: absolute;
            left: 0;
            top: 4px;
            width: 3px;
            height: 16px;
            background: linear-gradient(to bottom, #3b82f6, #60a5fa);
            border-radius: 2px;
        }
        
        #poet-timeline h3 {
            @apply text-base font-bold mb-3 text-gray-900;
        }
        
        #poet-timeline .flex-1 {
            @apply pb-6;
        }
        
        #poet-timeline .text-gray-600 {
            @apply text-gray-700;
        }
        
        /* 优化时间线节点和连接线 */
        #poet-timeline .h-8 {
            @apply h-6;
        }
        
        #poet-timeline .w-8 {
            @apply w-6;
        }
        
        /* 历史评价优化 */
        #poet-evaluations {
            @apply space-y-5;
        }
        
        /* 优化卡片内边距，增加呼吸空间 */
        .main-section {
            @apply p-5;
        }
        
        /* 优化作品列表项文字排版 */
        .work-list-item p {
            @apply text-sm leading-[1.7] text-gray-700 tracking-wide;
            letter-spacing: 0.02em;
        }
        
        /* 作品列表项装饰样式 */
        .work-list-item {
            @apply relative overflow-hidden rounded-xl border border-gray-200 bg-white transition-all duration-300;
        }
        
        .work-list-item:hover {
            @apply border-blue-300;
        }
        
        /* 作品标题样式 */
        .work-title {
            @apply font-medium text-gray-900 flex items-center;
        }
        
        .work-title {
            @apply text-base mb-2;
        }
        
        .work-title i {
            @apply mr-2;
        }
        
        /* 作品内容样式 */
        .work-content {
            @apply text-gray-600 leading-relaxed;
        }
        
        .work-content {
            @apply text-sm mb-3;
        }
        
        /* 作品标签样式 */
        .work-tag {
            @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-700;
        }
        
        /* 优化标签大小和间距 */
        .inline-flex {
            @apply text-xs px-2 py-0.5 m-0.5;
        }
        
        /* 优化标签大小 */
        .inline-flex {
            @apply text-xs px-2 py-0.5;
        }
        
        /* 移动端字体大小优化 */
        body {
            @apply text-base;
        }
        
        h1#poet-name {
            @apply text-2xl sm:text-3xl;
        }
        
        .section-title {
            @apply text-xl sm:text-2xl;
        }
        
        .work-title {
            @apply text-sm;
        }
        
        .work-content {
            @apply text-xs;
        }
        
        .timeline-content p {
            @apply text-xs;
        }
        
        #poet-intro p {
            @apply text-xs leading-[1.6];
        }
        
        /* 标签文字优化 */
        .inline-flex {
            @apply text-xs;
        }
        
        /* 按钮文字优化 */
        .poet-header button {
            @apply text-xs;
        }
        
        /* 作品统计信息在超小屏幕上优化 */
        .work-stats {
            @apply flex-col items-start gap-2;
        }
        
        .work-stats > div {
            @apply text-xs;
        }
    }
    
    /* 横向移动设备优化 */
    @media (max-height: 500px) and (orientation: landscape) {
        .poet-header {
            @apply p-2;
        }
        
        .main-section, .sidebar-section {
            @apply p-2;
        }
        
        .content-grid {
            @apply gap-2;
        }
        
        .section-title {
            @apply text-base mb-2;
        }
    }
    
    /* 移动端作品卡片优化 */
    @media (max-width: 768px) {
        .work-card, .work-card-famous {
            @apply p-4;
        }
        
        .work-title {
            @apply text-base mb-2;
        }
        
        .work-title-famous {
            @apply text-lg mb-3;
        }
        
        .work-content {
            @apply text-sm;
        }
        
        .work-content-famous {
            @apply text-base;
        }
        
        .work-tag {
            @apply text-xs px-2 py-0.5;
        }
    }
    
    /* 超小屏幕作品卡片优化 */
    @media (max-width: 480px) {
        .work-card, .work-card-famous {
            @apply p-3;
        }
        
        .work-title {
            @apply text-sm mb-2;
        }
        
        .work-title-famous {
            @apply text-base mb-3;
        }
        
        .work-content, .work-content-famous {
            @apply text-sm;
        }
        
        .work-tag {
            @apply text-[10px] px-1.5 py-0.5;
        }
        
        /* 调整著名作品卡片在超小屏幕上的间距 */
        .work-card-famous {
            @apply mb-4;
        }
        
        .work-title-famous {
            @apply text-lg mb-2;
        }
        
        .work-content-famous {
            @apply mb-4;
        }
    }
    
    /* 移动端按钮优化 - 符合规范 */
    @media (max-width: 768px) {
        .btn-primary, .btn-secondary {
            @apply px-4 py-2 text-sm rounded-lg;
        }
        
        .btn-icon {
            @apply text-sm;
        }
        
        /* 代表作品按钮优化 */
        #representative-works-btn {
            @apply px-4 py-2.5 text-sm;
        }
    }
    
    /* 移动端文字可读性优化 */
    @media (max-width: 768px) {
        /* 优化段落间距 */
        .prose p {
            @apply mb-4;
        }
        
        /* 优化标题与内容间距 */
        .section-title {
            @apply mb-4;
        }
        
        /* 优化列表项间距 */
        .prose ul li, .prose ol li {
            @apply mb-2;
        }
        
        /* 优化链接样式 */
        .prose a {
            @apply text-blue-600 underline hover:text-blue-800 transition-colors duration-200;
        }
        
        /* 优化引用样式 */
        .prose blockquote {
            @apply border-l-4 border-blue-500 pl-4 italic text-gray-700;
        }
        
        /* 优化代码样式 */
        .prose code {
            @apply bg-gray-100 text-red-600 px-1.5 py-0.5 rounded text-sm font-mono;
        }
        
        /* 优化强调文本 */
        .prose strong {
            @apply font-bold text-gray-900;
        }
        
        /* 优化斜体文本 */
        .prose em {
            @apply italic text-gray-700;
        }
        
        /* 优化分割线 */
        .prose hr {
            @apply border-gray-200 my-6;
        }
        
        /* 优化图片样式 */
        .prose img {
            @apply rounded-lg shadow-md;
        }
        
        /* 优化表格样式 */
        .prose table {
            @apply min-w-full divide-y divide-gray-200 my-6;
        }
        
        .prose th {
            @apply bg-gray-50 px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
        }
        
        .prose td {
            @apply px-4 py-2 whitespace-nowrap text-sm text-gray-700;
        }
        
        /* 优化表单元素 */
        .prose input, .prose textarea, .prose select {
            @apply border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
        }
        
        /* 优化按钮样式 */
        .prose button {
            @apply bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors duration-200;
        }
    }
    
    /* 移动端诗人页面布局优化 */
    @media (max-width: 768px) {
        .poet-container {
            @apply px-2;
        }
        
        .poet-content-wrapper {
            @apply max-w-full mx-auto;
        }
        
        /* 优化诗人标题区域 */
        .poet-header {
            @apply p-4 rounded-xl;
        }
        
        /* 优化板块间距 */
        .poet-section {
            @apply mb-5;
        }
        
        /* 优化板块内边距 */
        .poet-section-content {
            @apply p-4;
        }
    }
    
    @media (max-width: 480px) {
        .poet-container {
            @apply px-1;
        }
        
        .poet-header {
            @apply p-3;
        }
        
        .poet-section-content {
            @apply p-3;
        }
        
        /* 超小屏幕经典名句优化 */
        #poet-quotes {
            @apply px-2;
        }
        
        #poet-quotes p {
            @apply text-xs leading-[1.6];
        }
        
        /* 超小屏幕时间线优化 */
        #poet-timeline {
            @apply px-0;
        }
        
        .timeline-card-header {
            @apply px-0 pt-2 pb-1;
        }
        
        .timeline-content {
            @apply p-0;
        }
        
        .timeline-content p {
            @apply text-xs mb-1 px-0;
        }
        
        /* 超小屏幕经典名句标题优化 */
        #poet-quotes h2 {
            @apply text-sm font-medium mb-2;
        }
        
        /* 超小屏幕经典名句装饰元素优化 */
        #poet-quotes .quote-decoration {
            top: 2px;
            height: 12px;
        }
    }
    
    /* 特定屏幕尺寸优化 */
    @media (max-width: 320px) {
        /* 超小屏幕设备（如iPhone SE） */
        .work-list-item {
            @apply p-2;
        }
        
        .work-title {
            @apply text-xs;
        }
        
        .work-content {
            @apply text-xs;
        }
        
        .work-stats {
            @apply flex-col gap-1;
        }
        
        .work-stats > div {
            @apply text-[10px];
        }
    }
    
    @media (min-width: 321px) and (max-width: 375px) {
        /* 小屏幕设备（如iPhone 6/7/8） */
        .work-list-item {
            @apply p-3;
        }
        
        .work-title {
            @apply text-sm;
        }
        
        .work-content {
            @apply text-sm;
        }
        
        .work-stats {
            @apply flex-col gap-1.5;
        }
        
        .work-stats > div {
            @apply text-xs;
        }
    }
    
    @media (min-width: 376px) and (max-width: 414px) {
        /* 中等屏幕设备（如iPhone Plus系列） */
        .work-list-item {
            @apply p-3.5;
        }
        
        .work-title {
            @apply text-base;
        }
        
        .work-content {
            @apply text-sm;
        }
        
        .work-stats {
            @apply flex-col gap-2;
        }
        
        .work-stats > div {
            @apply text-sm;
        }
    }
    
    @media (min-width: 415px) and (max-width: 768px) {
        /* 大屏幕移动设备（如iPad Mini） */
        .work-list-item {
            @apply p-4;
        }
        
        .work-title {
            @apply text-lg;
        }
        
        .work-content {
            @apply text-base;
        }
        
        .work-stats {
            @apply flex-row gap-3;
        }
        
        .work-stats > div {
            @apply text-sm;
        }
    }
    
    @media (min-width: 768px) and (max-width: 1024px) {
        /* 平板设备 */
        .poet-container {
            @apply px-4;
        }
        
        .poet-content-wrapper {
            @apply max-w-4xl;
        }
        
        .work-list-item {
            @apply p-5;
        }
        
        .work-title {
            @apply text-xl;
        }
        
        .work-content {
            @apply text-base;
        }
        
        .work-stats {
            @apply flex-row gap-4;
        }
        
        .work-stats > div {
            @apply text-base;
        }
    }
    
    @media (min-width: 1024px) {
        /* 大屏幕设备 */
        .poet-container {
            @apply px-6;
        }
        
        .poet-content-wrapper {
            @apply max-w-5xl;
        }
        
        .work-list-item {
            @apply p-6;
        }
        
        .work-title {
            @apply text-xl;
        }
        
        .work-content {
            @apply text-lg;
        }
        
        .work-stats {
            @apply flex-row gap-5;
        }
        
        .work-stats > div {
            @apply text-base;
        }
    }
    
    /* 简化装饰样式 */
    .work-list-item::before {
        @apply content-[''] absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-current to-transparent opacity-0 transition-opacity duration-300;
    }
    
    .work-list-item:hover::before {
        @apply opacity-100;
    }
    
    /* 渐变文字效果 */
    .gradient-text {
        @apply bg-clip-text text-transparent bg-gradient-to-r;
    }
    
    /* 简化的装饰元素 */
    @media (max-width: 768px) {
        .work-list-item::before {
            @apply h-0.5;
        }
    }
    
    @media (max-width: 480px) {
        .work-list-item::before {
            @apply hidden;
        }
    }
    
    /* 响应式网格布局优化 */
    .poet-responsive-grid {
        @apply grid gap-4;
        grid-template-columns: 1fr;
    }
    
    @media (min-width: 768px) {
        .poet-responsive-grid {
            grid-template-columns: 1fr 1fr;
        }
    }
    
    @media (min-width: 1024px) {
        .poet-responsive-grid {
            grid-template-columns: 1fr 1fr 1fr;
        }
    }
    
    /* 移动端触摸优化 */
    .poet-touch-target {
        @apply min-h-[44px] min-w-[44px];
    }
    
    /* 文字排版优化 */
    .poet-text-readable {
        @apply leading-relaxed;
        text-align: justify;
    }
    
    @media (max-width: 768px) {
        .poet-text-readable {
            @apply text-base;
        }
    }
    
    @media (max-width: 480px) {
        .poet-text-readable {
            @apply text-sm leading-[1.6];
        }
    }
}