body { font-family: Arial, sans-serif; color: #222; }
header { padding: 16px 20px; border-bottom: 1px solid #ddd; background: #ffff00; }
header h1 { margin: 0; font-size: 28px; }
nav { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
/* normalized nav link style */
nav a { text-decoration: none; padding: 6px 10px; border: 1px solid #ddd; background: #fff; color: inherit; }
nav a:hover { background: #f5f5f5; }
main { padding: 20px; }
.intro { margin-bottom: 20px; }
figure { margin: 20px 0; }
figcaption { font-weight: bold; margin-bottom: 5px; }
table { border-collapse: collapse; width: 100%; margin-bottom: 20px; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; position: relative; }
th { background: #f5f5f5; color: inherit; cursor: pointer; }
tr:hover{background-color: #f9f9c7;}
col:hover{background-color: #f9f9c7;}
.row-highlight { background-color: #fff4b8; }
.cell-spotlight { background-color: #fde68a; }
/* AI Helped me with this */
table tr, table td, table th { transition: background-color 150ms ease; }
.analysis { display: flex; gap: 20px; flex-wrap: wrap; }
.analysis > div { flex: 1 1 320px; }
.glossary { padding: 15px; border-top: 1px solid #eee; }
.glossary dt { cursor: pointer; font-weight: bold; padding: 5px 0; color: #0066cc; }
.glossary dt:hover { text-decoration: underline; }
.glossary dd { display: none; margin: 5px 0 15px 20px; padding: 5px; background: #f9f9f9; border-left: 3px solid #0066cc; }
footer { text-align: center; padding: 10px; margin-top: 20px; border-top: 1px solid #ddd; color: #666; }
#messageBox { margin: 10px 0 16px; padding: 12px; background: #fffef5; border: 1px solid #ddd; border-radius: 6px; }
#messageBox h3 { margin: 0 0 6px; font-size: 16px; }
.onclick { cursor: pointer; color: #0066cc; }
.onclick:hover { text-decoration: underline; }
.tooltip { position: absolute; background: #333; color: white; padding: 5px 8px; border-radius: 4px; font-size: 12px; top: -30px; left: 0; display: none; z-index: 100; white-space: nowrap; }
.walkthrough { margin: 20px 0; padding: 15px; background: #f0f8ff; border: 1px solid #cce7ff; }
.walkthrough h3 { margin-top: 0; }
.example { margin: 10px 0; padding: 10px; background: white; border: 1px solid #ddd; cursor: pointer; }
.example:hover { background: #f9f9f9; }
.highlight-demo { background-color: #ffeb3b !important; transition: background-color 0.5s ease; }
/* removed duplicate nav styles below */