@charset "utf-8";

.api-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); padding: 25px; border-radius: 15px; box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 32px; margin: 25px 0px; border: 1px solid rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); transition: 0.3s; }

.api-card:hover { transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.4) 0px 12px 40px; border-color: rgba(102, 126, 234, 0.3); }

.step-box { background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05)); padding: 25px; border-radius: 12px; margin: 20px 0px; border: 1px solid rgba(59, 130, 246, 0.2); position: relative; overflow: hidden; }

.step-box::before { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; height: 2px; background: linear-gradient(90deg, rgb(59, 130, 246), transparent); }

.warning-banner { background: linear-gradient(135deg, rgba(254, 243, 199, 0.9), rgba(253, 230, 138, 0.9)); padding: 25px; border-radius: 12px; border-left: 5px solid rgb(245, 158, 11); margin: 25px 0px; box-shadow: rgba(245, 158, 11, 0.2) 0px 4px 20px; backdrop-filter: blur(10px); }

.platform-tabs { display: flex; gap: 15px; margin: 25px 0px; flex-wrap: wrap; justify-content: center; }

.platform-tab { padding: 15px 30px; border-radius: 12px; cursor: pointer; font-weight: bold; transition: 0.3s; border: 2px solid rgba(229, 231, 235, 0.3); background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.9); position: relative; overflow: hidden; }

.platform-tab::before { content: ""; position: absolute; top: 0px; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: left 0.5s; }

.platform-tab:hover::before { left: 100%; }

.platform-tab:hover { transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 25px; }

.platform-tab.active { background: linear-gradient(135deg, rgb(102, 126, 234), rgb(118, 75, 162)); color: white; border-color: rgb(102, 126, 234); box-shadow: rgba(102, 126, 234, 0.4) 0px 8px 30px; }

.platform-content { display: none; animation: 0.5s ease 0s 1 normal none running fadeIn; }

.platform-content.active { display: block; }

@keyframes fadeIn { 
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.feature-highlight { background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05)); padding: 20px; border-radius: 10px; margin: 20px 0px; border: 1px solid rgba(34, 197, 94, 0.2); }

.comparison-table { background: rgba(255, 255, 255, 0.03); border-radius: 15px; padding: 25px; margin: 25px 0px; border: 1px solid rgba(255, 255, 255, 0.1); overflow-x: auto; }

.tip-box { background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.05)); padding: 20px; border-radius: 10px; margin: 20px 0px; border: 1px solid rgba(251, 191, 36, 0.2); }

.env-content { display: none; }

.env-content.active { display: block; animation: 0.3s ease 0s 1 normal none running slideDown; }

@keyframes slideDown { 
  0% { opacity: 0; max-height: 0px; }
  100% { opacity: 1; max-height: 1000px; }
}

.ollama-os-content { display: none; }

.ollama-os-content.active { display: block; animation: 0.3s ease 0s 1 normal none running slideDown; }

.chapter-navigation { display: flex; justify-content: space-between; margin: 40px 0px; }

.nav-button { display: inline-block; padding: 8px 16px; background: rgb(102, 126, 234); color: white; text-decoration: none; border-radius: 4px; transition: 0.3s; font-size: 14px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; }

.nav-button:hover { background: rgb(85, 104, 211); transform: translateY(-1px); box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px; }

.nav-button:active { transform: translateY(0px); box-shadow: none; }

.enhanced-title { background: linear-gradient(135deg, rgb(102, 126, 234), rgb(118, 75, 162)) text; -webkit-text-fill-color: transparent; font-weight: bold; margin-bottom: 15px; }

.content-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin: 25px 0px; }

.interactive-demo { background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1)); border: 2px solid rgba(102, 126, 234, 0.3); border-radius: 15px; padding: 25px; margin: 25px 0px; backdrop-filter: blur(10px); }