\n:root {\n  --primary-color: #a0522d;\n  --secondary-color: #ffe4b5;\n  --accent-color: #ffd700;\n  --dark-accent: #8b0000;\n  --light-text: #fffacd;\n  --card-bg: #fff8dc;\n  --card-border: #deb887;\n  --nav-bg: #cd853f;\n  --font-serif: 'Baskerville', 'Times New Roman', serif;\n  --font-mono: 'Courier New', monospace;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: var(--font-serif);\n  font-size: 17px;\n  line-height: 1.6;\n  color: var(--primary-color);\n  background: linear-gradient(135deg, var(--secondary-color), #f5f5dc);\n  min-height: 100%;\n  padding: 0;\n  margin: 0;\n}\n\n.container {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 20px;\n}\n\n.header {\n  text-align: center;\n  padding: 40px 0;\n  background: radial-gradient(circle, rgba(160,82,45,0.1) 0%, rgba(255,255,255,0) 70%);\n  margin-bottom: 40px;\n}\n\n.header h1 {\n  font-size: 2.8rem;\n  color: var(--dark-accent);\n  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);\n  margin-bottom: 20px;\n}\n\n.header p {\n  font-size: 1.2rem;\n  max-width: 800px;\n  margin: 0 auto;\n}\n\n.note {\n  background: rgba(255,255,255,0.8);\n  padding: 15px;\n  border-left: 4px solid var(--accent-color);\n  margin: 30px 0;\n  font-style: italic;\n  box-shadow: 0 2px 10px rgba(0,0,0,0.05);\n}\n\narticle {\n  background: rgba(255,255,255,0.85);\n  padding: 40px;\n  border-radius: 8px;\n  box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n  margin-bottom: 40px;\n}\n\narticle h2 {\n  color: var(--dark-accent);\n  font-size: 2rem;\n  margin-bottom: 25px;\n  padding-bottom: 10px;\n  border-bottom: 2px dashed var(--card-border);\n}\n\narticle h3 {\n  color: var(--primary-color);\n  font-size: 1.5rem;\n  margin: 30px 0 15px;\n}\n\narticle p {\n  margin-bottom: 20px;\n}\n\narticle code {\n  font-family: var(--font-mono);\n  background: rgba(205,133,63,0.1);\n  padding: 2px 5px;\n  border-radius: 3px;\n  color: #8b4513;\n}\n\npre {\n  background: rgba(0,0,0,0.03);\n  padding: 20px;\n  border-radius: 6px;\n  border-left: 4px solid var(--primary-color);\n  margin: 25px 0;\n  overflow-x: auto;\n}\n\npre code {\n  background: transparent;\n  padding: 0;\n  color: #333;\n}\n\ntable {\n  width: 100%;\n  border-collapse: collapse;\n  margin: 30px 0;\n  background: var(--card-bg);\n  box-shadow: 0 2px 10px rgba(0,0,0,0.05);\n}\n\ntable th, table td {\n  padding: 12px 15px;\n  text-align: left;\n  border-bottom: 1px solid var(--card-border);\n}\n\ntable th {\n  background-color: var(--nav-bg);\n  color: var(--light-text);\n}\n\ntable tr:hover {\n  background-color: rgba(222,184,135,0.1);\n}\n\n.gallery {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 25px;\n  margin: 40px 0;\n}\n\n.gallery-item {\n  background: white;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.gallery-item:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 10px 25px rgba(0,0,0,0.15);\n}\n\n.gallery-img {\n  width: 100%;\n  height: 200px;\n  object-fit: cover;\n  border-bottom: 1px solid rgba(0,0,0,0.1);\n}\n\n.gallery-caption {\n  padding: 15px;\n}\n\n.gallery-caption h3 {\n  font-size: 1.2rem;\n  margin-bottom: 10px;\n  color: var(--dark-accent);\n}\n\n.gallery-caption p {\n  color: #666;\n  font-size: 0.95rem;\n}\n\n.nav-tabs {\n  display: flex;\n  list-style: none;\n  margin: 30px 0;\n  border-bottom: 1px solid var(--card-border);\n}\n\n.nav-tabs li {\n  margin-right: 15px;\n}\n\n.nav-tabs a {\n  display: block;\n  padding: 10px 20px;\n  color: var(--primary-color);\n  text-decoration: none;\n  border-radius: 5px 5px 0 0;\n  transition: all 0.3s ease;\n  position: relative;\n}\n\n.nav-tabs a:hover,\n.nav-tabs a.active {\n  background: rgba(205,133,63,0.1);\n}\n\n.nav-tabs a.active {\n  font-weight: bold;\n}\n\n.nav-tabs a.active::after {\n  content: '';\n  position: absolute;\n  bottom: -1px;\n  left: 0;\n  width: 100%;\n  height: 2px;\n  background: var(--accent-color);\n}\n\n.footer {\n  text-align: center;\n  padding: 30px;\n  margin-top: 50px;\n  background: rgba(205,133,63,0.1);\n  color: var(--primary-color);\n  font-size: 0.9rem;\n}\n\n@media (max-width: 768px) {\n  .container {\n    padding: 15px;\n  }\n  \n  article {\n    padding: 25px;\n  }\n  \n  .header h1 {\n    font-size: 2rem;\n  }\n  \n  .gallery {\n    grid-template-columns: 1fr;\n  }\n}\n\n@keyframes float {\n  0%, 100% { transform: translateY(0); }\n  50% { transform: translateY(-10px); }\n}\n\n.floating {\n  animation: float 3s ease-in-out infinite;\n}\n\n.button {\n  display: inline-block;\n  padding: 12px 25px;\n  background: var(--primary-color);\n  color: var(--light-text);\n  border-radius: 4px;\n  text-decoration: none;\n  transition: all 0.3s ease;\n  border: none;\n  cursor: pointer;\n  font-family: var(--font-serif);\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\n.button:hover {\n  background: var(--dark-accent);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 12px rgba(0,0,0,0.15);\n}\n\n.highlight-box {\n  background: linear-gradient(135deg, rgba(255,228,181,0.8), rgba(255,255,255,0.9));\n  border: 1px solid var(--card-border);\n  border-radius: 8px;\n  padding: 25px;\n  margin: 30px 0;\n  box-shadow: 0 5px 15px rgba(0,0,0,0.05);\n}\n\n.highlight-box h3 {\n  color: var(--dark-accent);\n  margin-top: 0;\n}\n\n.decorative-line {\n  height: 2px;\n  background: linear-gradient(90deg, transparent, var(--primary-color), transparent);\n  margin: 40px 0;\n  border: none;\n}\n\n.theme-switcher {\n  display: flex;\n  gap: 15px;\n  margin: 20px 0;\n}\n\n.theme-option {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  cursor: pointer;\n  border: 2px solid transparent;\n  transition: all 0.3s ease;\n}\n\n.theme-option:hover {\n  transform: scale(1.1);\n}\n\n.theme-option.active {\n  border-color: var(--accent-color);\n  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--accent-color);\n}\n\n.theme-70s { background: linear-gradient(135deg, #a0522d, #ffe4b5); }\n.theme-60s { background: linear-gradient(135deg, #d2b48c, #f5deb3); }\n.theme-80s { background: linear-gradient(135deg, #8b0000, #ffd700); }\n
