/* claude-basics/05-getting-started */
.entry-content .feature-highlights{display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px;}
.entry-content .highlight-item{display: flex; align-items: center; gap: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px 16px; transition: border-color 0.2s, transform 0.2s;}
.entry-content .highlight-item:hover{border-color: #93c5fd; transform: translateY(-2px);}
.entry-content .highlight-icon{font-size: 1.5rem; flex-shrink: 0; line-height: 1;}
.entry-content .highlight-item strong{display: block; font-size: 0.92rem; color: #1e293b; margin-bottom: 2px;}
.entry-content .highlight-item p{font-size: 0.82rem; color: #64748b; margin: 0;}
.entry-content .step-cards{display: flex; flex-direction: column; gap: 12px; margin-top: 16px; margin-bottom: 20px;}
.entry-content .step-card{display: flex; align-items: center; gap: 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px 20px; transition: border-color 0.2s;}
.entry-content .step-card:hover{border-color: #93c5fd;}
.entry-content .step-number{width: 32px; height: 32px; background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.9rem; flex-shrink: 0;}
.entry-content .step-body{font-size: 0.95rem; color: #374151; line-height: 1.6;}
.entry-content .step-body a{color: #2563eb; text-decoration: none; font-weight: 600;}
.entry-content .step-body a:hover{text-decoration: underline;}
.entry-content .tip-box{display: flex; align-items: center; gap: 12px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px; padding: 16px 20px;}
.entry-content .tip-icon{font-size: 1.3rem; flex-shrink: 0; line-height: 1.6;}
.entry-content .tip-box p{margin: 0; font-size: 0.95rem; color: #1e40af; line-height: 1.6;}
.entry-content .feature-header{display: flex; align-items: center; gap: 14px; margin-bottom: 16px;}
.entry-content .feature-badge{font-size: 1.6rem; flex-shrink: 0; width: 48px; height: 48px; background: #f0f7ff; border-radius: 12px; display: flex; align-items: center; justify-content: center;}
.entry-content .feature-header h3{font-size: 1.15rem; font-weight: 700; color: #1e293b; margin-bottom: 4px;}
.entry-content .feature-header p{color: #64748b; font-size: 0.92rem; margin: 0;}
.entry-content .mock-feature{background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px; margin-bottom: 24px; transition: border-color 0.2s;}
.entry-content .mock-feature:hover{border-color: #93c5fd;}
.entry-content .mock-chat-window{border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); background: #fff;}
.entry-content .mock-chat-header{background: #f8fafc; padding: 10px 16px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #e2e8f0;}
.entry-content .mock-dot{width: 10px; height: 10px; border-radius: 50%;}
.entry-content .mock-dot.red{background: #ef4444;}
.entry-content .mock-dot.yellow{background: #f59e0b;}
.entry-content .mock-dot.green{background: #22c55e;}
.entry-content .mock-chat-title{margin-left: 8px; font-weight: 600; font-size: 0.85rem; color: #64748b;}
.entry-content .mock-chat-body{padding: 20px 16px; background: #fafbfc; max-height: 320px; overflow: hidden;}
.entry-content .mock-chat-input{padding: 12px 16px; background: #fff; border-top: 1px solid #e2e8f0; display: flex; align-items: center; gap: 10px;}
.entry-content .mock-input-placeholder{flex: 1; color: #9ca3af; font-size: 0.9rem;}
.entry-content .mock-send-btn{color: #2563eb; font-size: 1.2rem; cursor: default;}
.entry-content .mock-attach-btn{font-size: 1.2rem; color: #6b7280; cursor: default;}
.entry-content .mock-msg{display: flex; gap: 10px; margin-bottom: 16px; align-items: center;}
.entry-content .mock-msg:last-child{margin-bottom: 0;}
.entry-content .mock-msg.compact{margin-bottom: 0;}
.entry-content .mock-avatar{width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0;}
.entry-content .user-avatar{background: #dbeafe; color: #2563eb;}
.entry-content .ai-avatar{background: #d4a574; color: #fff;}
.entry-content .mock-bubble{padding: 10px 14px; border-radius: 12px; font-size: 0.88rem; line-height: 1.6; max-width: 85%;}
.entry-content .user-bubble{background: #eff6ff; color: #1e3a5f;}
.entry-content .ai-bubble{background: #fff; border: 1px solid #e5e7eb; color: #374151;}
.entry-content .ai-bubble code{background: #f1f5f9; padding: 1px 4px; border-radius: 3px; font-size: 0.82rem; color: #1e40af; font-family: 'JetBrains Mono', 'Fira Code', monospace;}
.entry-content .ai-bubble strong{color: #1e293b;}
.entry-content .mock-file-chips{display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap;}
.entry-content .mock-file-chip{display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 0.78rem; font-weight: 500; background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0;}
.entry-content .mock-file-chip .file-icon{font-size: 0.65rem; font-weight: 800; padding: 2px 5px; border-radius: 4px; line-height: 1;}
.entry-content .mock-file-chip.pdf .file-icon{background: #fee2e2; color: #dc2626;}
.entry-content .mock-file-chip.img .file-icon{background: #dbeafe; color: #2563eb;}
.entry-content .mock-projects{border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06);}
.entry-content .mock-project-list{background: #fff;}
.entry-content .mock-project-item{display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid #f1f5f9; cursor: default; transition: background 0.15s;}
.entry-content .mock-project-item:hover{background: #f8fafc;}
.entry-content .mock-project-item.active{background: #eff6ff; border-left: 3px solid #2563eb;}
.entry-content .mock-project-icon{font-size: 1.4rem;}
.entry-content .mock-project-name{font-weight: 600; font-size: 0.95rem; color: #1e293b;}
.entry-content .mock-project-desc{font-size: 0.78rem; color: #94a3b8; margin-top: 2px;}
.entry-content .mock-project-add{padding: 14px 20px; color: #2563eb; font-size: 0.9rem; font-weight: 500; cursor: default; border-top: 1px solid #f1f5f9;}
.entry-content .mock-artifact-layout{display: flex; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); min-height: 260px;}
.entry-content .mock-artifact-chat{flex: 0 0 40%; background: #fafbfc; padding: 16px; border-right: 1px solid #e2e8f0; display: flex; align-items: center;}
.entry-content .mock-artifact-panel{flex: 1; background: #fff; display: flex; flex-direction: column;}
.entry-content .mock-artifact-header{display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid #e2e8f0; background: #f8fafc;}
.entry-content .mock-artifact-title{font-weight: 600; font-size: 0.9rem; color: #1e293b;}
.entry-content .mock-artifact-tabs{display: flex; gap: 4px;}
.entry-content .mock-tab{padding: 4px 12px; font-size: 0.75rem; border-radius: 6px; color: #64748b; cursor: default;}
.entry-content .mock-tab.active{background: #2563eb; color: #fff;}
.entry-content .mock-artifact-body{padding: 16px; flex: 1;}
.entry-content .mock-todo-app{font-size: 0.85rem;}
.entry-content .mock-todo-input-row{display: flex; gap: 8px; margin-bottom: 14px;}
.entry-content .mock-todo-input{flex: 1; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 8px; color: #9ca3af; font-size: 0.82rem;}
.entry-content .mock-todo-add-btn{padding: 8px 16px; background: #2563eb; color: #fff; border-radius: 8px; font-size: 0.82rem; font-weight: 600; cursor: default;}
.entry-content .mock-todo-item{display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #f3f4f6;}
.entry-content .mock-check{font-size: 1rem; color: #d1d5db; width: 20px; text-align: center;}
.entry-content .mock-check.checked{color: #22c55e;}
.entry-content .mock-todo-text{color: #374151; font-size: 0.85rem;}
.entry-content .mock-todo-text.striked{text-decoration: line-through; color: #9ca3af;}
.entry-content .platform-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px;}
.entry-content .platform-card{background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px 16px; text-align: center; transition: border-color 0.2s, transform 0.2s; text-decoration: none; color: inherit; display: block;}
.entry-content .platform-card:hover{border-color: #93c5fd; transform: translateY(-2px);}
.entry-content .platform-icon{font-size: 1.8rem; margin-bottom: 8px;}
.entry-content .platform-card strong{display: block; font-size: 0.95rem; color: #1e293b; margin-bottom: 4px;}
.entry-content .platform-card p{font-size: 0.82rem; color: #64748b; margin: 0;}
.entry-content .platform-card p a{color: #2563eb; text-decoration: none;}
.entry-content .platform-card p a:hover{text-decoration: underline;}
.entry-content .practice-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 16px;}
.entry-content .practice-card{background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; transition: border-color 0.2s, transform 0.2s;}
.entry-content .practice-card:hover{border-color: #93c5fd; transform: translateY(-2px);}
.entry-content .practice-header{display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: linear-gradient(135deg, #1e293b 0%, #334155 100%);}
.entry-content .practice-num{background: rgba(255,255,255,0.15); color: #93c5fd; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 700;}
.entry-content .practice-title{color: #f1f5f9; font-weight: 600; font-size: 0.95rem;}
.entry-content .practice-card .code-block{margin: 0; border: none; border-radius: 0;}
@media (max-width: 768px){
.entry-content .feature-highlights{grid-template-columns: 1fr; gap: 10px;}
.entry-content .mock-artifact-layout{flex-direction: column;}
.entry-content .mock-artifact-chat{flex: none; border-right: none; border-bottom: 1px solid #e2e8f0; padding: 12px;}
.entry-content .mock-file-chips{flex-direction: column;}
.entry-content .platform-grid{grid-template-columns: repeat(2, 1fr); gap: 10px;}
.entry-content .practice-grid{grid-template-columns: 1fr;}
.entry-content .mock-feature{padding: 16px;}
.entry-content .feature-header{flex-direction: column; gap: 10px;}
.entry-content .feature-badge{width: 40px; height: 40px; font-size: 1.3rem;}
}