Update yudkowsky-rationality-ai-cheatsheet.html

D David Veksler · 1 year ago 408e395284e1cbaa4b242976639951cb8965d0ea
Parent: cc9b45e7a

1 file changed +339 −290

Diff

diff --git a/yudkowsky-rationality-ai-cheatsheet.html b/yudkowsky-rationality-ai-cheatsheet.html
index b2f105d..7e6f15b 100644
--- a/yudkowsky-rationality-ai-cheatsheet.html
+++ b/yudkowsky-rationality-ai-cheatsheet.html
@@ -5,11 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <!-- SEO Metadata -->
-    <title>Yudkowsky: Digital Mindscape on Rationality, AI & The Sequences Cheatsheet</title>
-    <meta name="description" content="Explore Eliezer Yudkowsky's core ideas on rationality, AI alignment, P(doom), and existential risk. In-depth guide to 'The Sequences' from LessWrong, delving into Bayesian reasoning, cognitive biases, epistemology, value theory, and AI safety in a visually engaging format.">
-    <meta name="keywords" content="Eliezer Yudkowsky, LessWrong Sequences, AI alignment, Rationality, P(doom), Existential risk AI, Optimization Power, Cognitive biases, Bayesian reasoning, Epistemology, Map and Territory, Rationality From AI to Zombies, MIRI, AI Safety, Digital Mindscape, Tech Philosophy, Effective Altruism">
+    <title>Yudkowsky: Synaptic Flow - Rationality, AI & The Sequences Cheatsheet</title>
+    <meta name="description" content="Immersive cheatsheet on Eliezer Yudkowsky's core ideas: rationality, AI alignment, P(doom), optimization power, Orthogonality Thesis, and an in-depth guide to 'The Sequences' from LessWrong on Bayesian reasoning, cognitive biases, epistemology, and AI safety.">
+    <meta name="keywords" content="Eliezer Yudkowsky, LessWrong Sequences, AI alignment, Rationality, P(doom), Existential risk AI, Optimization Power, Search Spaces, Cognitive biases, Bayesian reasoning, Epistemology, Map and Territory, Rationality From AI to Zombies, Instrumental Convergence, Orthogonality Thesis, MIRI, AI Safety, Value Theory, Metaethics, Synaptic Flow, Tech Philosophy, Effective Altruism">
     <link rel="canonical" href="http://cheatsheets.davidveksler.com/yudkowsky-rationality-ai-cheatsheet.html">
-    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💡</text></svg>">
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧠</text></svg>">
 
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
@@ -19,70 +19,96 @@
     <!-- Google Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600;700&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600;700&family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
 
     <style>
-        /* --- Digital Mindscape Theme --- */
         :root {
-            --bg-color: #0a192f; /* Deep dark blue */
-            --card-bg-color: #112240; /* Slightly lighter dark blue */
-            --text-color-main: #ccd6f6; /* Light grey/off-white for body */
-            --text-color-headings: #e6f1ff; /* Brighter for headings */
-            --text-color-secondary: #8892b0; /* Softer blue/grey for less emphasis */
-            --accent-primary: #64ffda; /* Electric cyan */
-            --accent-secondary: #7f7eff; /* A vibrant purple as secondary */
-            --border-color: #233554; /* Darker border for cards */
-            --glow-color-primary: rgba(100, 255, 218, 0.15); /* Cyan glow */
-            --glow-color-secondary: rgba(127, 126, 255, 0.15); /* Purple glow */
+            --bg-color-deep: #0d1117; /* Deep space blue/charcoal */
+            --bg-color-medium: #161b22; /* Slightly lighter for cards/elements */
+            --bg-color-light: #21262d; /* For subtle contrasts or hover states */
+
+            --text-color-primary: #f0f6fc; /* Off-white for headings, bright text */
+            --text-color-secondary: #c9d1d9; /* Light cool grey for body */
+            --text-color-muted: #8b949e; /* Muted grey for less emphasis */
+
+            --accent-primary: #58a6ff; /* Vibrant, glowing blue */
+            --accent-primary-glow: rgba(88, 166, 255, 0.3);
+            --accent-primary-darker: #388bfd;
+
+            --accent-secondary: #ae81ff; /* Muted magenta/purple */
+            --accent-secondary-glow: rgba(174, 129, 255, 0.2);
+
+            --border-color: #30363d; /* Subtle border for elements */
+            --border-color-accent: var(--accent-primary);
 
             --font-headings: 'Fira Code', monospace;
             --font-body: 'Inter', sans-serif;
+
+            --shadow-color-primary: rgba(88, 166, 255, 0.2);
+            --shadow-color-secondary: rgba(0,0,0, 0.5);
+        }
+
+        @keyframes subtleGradientFlow {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+
+        @keyframes pulseGlow {
+            0% { box-shadow: 0 0 8px var(--accent-primary-glow), inset 0 0 5px rgba(88, 166, 255, 0.1); }
+            50% { box-shadow: 0 0 16px var(--accent-primary-glow), inset 0 0 8px rgba(88, 166, 255, 0.2); }
+            100% { box-shadow: 0 0 8px var(--accent-primary-glow), inset 0 0 5px rgba(88, 166, 255, 0.1); }
         }
 
         body {
             font-family: var(--font-body);
-            background-color: var(--bg-color);
-            color: var(--text-color-main);
-            line-height: 1.7;
+            background-color: var(--bg-color-deep);
+            /* Subtle animated gradient background */
+            background: linear-gradient(280deg, var(--bg-color-deep), #010409, var(--bg-color-deep));
+            background-size: 400% 400%;
+            animation: subtleGradientFlow 25s ease infinite;
+
+            color: var(--text-color-secondary);
+            line-height: 1.75; /* Slightly more spacing for readability */
             margin: 0;
             padding: 0;
             display: flex;
             flex-direction: column;
             min-height: 100vh;
+            overflow-x: hidden; /* Prevent horizontal scroll from glows */
         }
 
-        .container-main { /* Renamed to avoid conflict with Bootstrap's .container */
+        .container-main {
             width: 90%;
-            max-width: 1024px; /* Slightly wider for better content flow */
+            max-width: 1100px; /* Wider for a more expansive feel */
             margin: 0 auto;
             padding: 20px 0;
         }
 
         .page-header {
-            background: linear-gradient(145deg, var(--card-bg-color), var(--bg-color));
-            color: var(--text-color-headings);
-            padding: 3rem 1.5rem;
+            background: transparent; /* Header blends with body background */
+            color: var(--text-color-primary);
+            padding: 4rem 1.5rem; /* More padding */
             text-align: center;
-            margin-bottom: 3rem; /* Increased margin */
-            border-bottom: 2px solid var(--accent-primary);
-            box-shadow: 0 5px 20px rgba(0,0,0,0.3);
+            margin-bottom: 3rem;
+            border-bottom: 1px solid var(--border-color);
         }
 
         .page-header h1 {
             font-family: var(--font-headings);
             margin: 0;
-            font-size: 2.8rem; /* Adjusted size */
+            font-size: 3.2rem; /* Larger title */
             font-weight: 700;
-            letter-spacing: 1px; /* Added letter spacing */
+            letter-spacing: 1.5px;
             color: var(--accent-primary);
-            text-shadow: 0 0 8px var(--glow-color-primary);
+            text-shadow: 0 0 10px var(--accent-primary-glow), 0 0 20px var(--accent-primary-glow); /* Stronger glow */
         }
 
         .page-header .subtitle {
             font-family: var(--font-body);
-            font-size: 1.2rem;
+            font-size: 1.3rem; /* Larger subtitle */
             margin-top: 1rem;
-            color: var(--text-color-secondary);
+            color: var(--text-color-muted);
             font-weight: 400;
         }
 
@@ -91,67 +117,77 @@
         }
 
         .schema-container {
-            background-color: transparent; /* Sections blend into page bg */
-            border: none; /* No border for the container itself */
-            border-radius: 8px;
-            padding: 0; /* Padding handled by cards */
-            margin-bottom: 3rem; /* Increased margin */
+            background-color: transparent;
+            border: none;
+            padding: 0;
+            margin-bottom: 3.5rem; /* Increased margin */
         }
 
         .section-title {
-            color: var(--accent-primary);
             font-family: var(--font-headings);
+            color: var(--accent-primary);
             font-weight: 700;
             text-transform: uppercase;
-            letter-spacing: .1em; /* Increased letter spacing */
-            font-size: 1.5rem; /* Increased size */
-            padding-bottom: 0.75rem;
-            margin-bottom: 2rem; /* Space below title */
-            border-bottom: 1px solid var(--border-color);
+            letter-spacing: .12em; /* Wider spacing */
+            font-size: 1.8rem; /* Larger section titles */
+            padding-bottom: 1rem;
+            margin-bottom: 2.5rem;
+            border-bottom: 2px solid var(--accent-primary);
             text-align: left;
+            text-shadow: 0 0 5px var(--accent-primary-glow);
+        }
+        .section-title .bi { /* Icon in section title */
+            margin-right: 0.75rem;
+            font-size: 0.9em;
+            opacity: 0.8;
         }
-        
+
         .info-card {
-            background: var(--card-bg-color);
+            background: var(--bg-color-medium);
             border: 1px solid var(--border-color);
-            border-left: 4px solid var(--accent-primary); /* Accent border on left */
-            border-radius: 6px;
-            box-shadow: 0 5px 15px var(--glow-color-primary), 0 2px 5px rgba(0,0,0,0.2); /* Glow effect */
-            margin-bottom: 2.5rem; 
+            border-left: 5px solid var(--accent-primary);
+            border-radius: 8px; /* Slightly larger radius */
+            box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 10px var(--accent-primary-glow);
+            margin-bottom: 2.5rem;
             display: flex;
             flex-direction: column;
-            transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
+            transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease;
         }
         .info-card:hover {
-            transform: translateY(-5px) scale(1.01);
-            box-shadow: 0 8px 25px var(--glow-color-primary), 0 4px 10px rgba(0,0,0,0.3);
-        }
-        .info-card:last-child {
-            margin-bottom: 0.5rem; /* Align with row's bottom padding */
+            transform: translateY(-6px) scale(1.02); /* More pronounced lift */
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 20px var(--accent-primary-glow);
+            border-left-color: var(--accent-primary-darker);
         }
 
-        .info-card .card-header-content { 
-            padding: 0; 
+        .info-card .card-header-content {
+            padding: 0;
             flex-grow: 1;
             display: flex;
             flex-direction: column;
         }
 
-        .info-card h5 { 
+        .info-card h5 {
             font-family: var(--font-headings);
-            color: var(--text-color-headings); 
-            background-color: transparent; /* No separate background for title */
-            font-size: 1.3rem; /* Increased size */
+            color: var(--text-color-primary);
+            background-color: transparent;
+            font-size: 1.4rem;
             text-align: left;
             margin: 0;
-            padding: 1rem 1.5rem; /* Increased padding */
+            padding: 1.2rem 1.5rem;
             font-weight: 600;
             border-bottom: 1px solid var(--border-color);
-            border-radius: 5px 5px 0 0; 
+            border-radius: 7px 7px 0 0;
+            display: flex; /* For icon alignment */
+            align-items: center;
         }
-        
-        .card-content-wrapper { 
-            padding: 1.5rem; /* Increased padding */
+        .info-card h5 .bi { /* Icon in card title */
+            margin-right: 0.6rem;
+            color: var(--accent-primary);
+            font-size: 1.1em;
+        }
+
+        .card-content-wrapper {
+            padding: 1.5rem;
             flex-grow: 1;
             display: flex;
             flex-direction: column;
@@ -159,131 +195,148 @@
 
         .info-card p.summary {
             font-family: var(--font-body);
-            font-size: 1.05rem; /* Increased size */
+            font-size: 1rem;
             color: var(--text-color-secondary);
             margin-top: 0;
-            margin-bottom: 1.25rem; /* Increased margin */
+            margin-bottom: 1.25rem;
             flex-grow: 1;
         }
 
         .details-toggle {
             font-family: var(--font-body);
-            font-size: 0.9rem; /* Adjusted size */
-            margin-top: auto; 
+            font-size: 0.9rem;
+            margin-top: auto;
             align-self: flex-start;
-            padding: 0.5rem 1rem; /* Adjusted padding */
+            padding: 0.6rem 1.2rem; /* Larger padding */
             color: var(--accent-primary);
-            border: 1px solid var(--accent-primary);
+            border: 2px solid var(--accent-primary); /* Bolder border */
             background-color: transparent;
-            transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+            transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
             display: inline-flex;
             align-items: center;
-            gap: 0.5em; /* Increased gap */
-            border-radius: 4px;
+            gap: 0.6em;
+            border-radius: 5px;
             cursor: pointer;
-            font-weight: 600;
+            font-weight: 700; /* Bolder text */
         }
-
         .details-toggle:hover, .details-toggle:focus {
             background-color: var(--accent-primary);
-            color: var(--bg-color); /* Text color changes for contrast */
+            color: var(--bg-color-deep);
             outline: none;
-            box-shadow: 0 0 10px var(--glow-color-primary);
+            box-shadow: 0 0 12px var(--accent-primary-glow);
+            transform: scale(1.03); /* Slight scale on hover */
         }
-        
+
         .details-toggle .toggle-icon {
-            transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Added bounce */
-            display: inline-block; 
+            transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+            display: inline-block;
         }
-
         .details-toggle[aria-expanded="true"] .toggle-icon {
             transform: rotate(180deg);
         }
 
         .collapse-content {
             font-family: var(--font-body);
-            font-size: 0.98rem; /* Increased size */
-            /* border-top: 1px solid var(--border-color); */ /* Removed top border, header has bottom */
-            padding: 0 1.5rem; 
-            margin-top: 0; 
+            font-size: 0.98rem;
+            padding: 0 1.5rem;
+            margin-top: 0;
             color: var(--text-color-main);
-            background-color: var(--card-bg-color); /* Same as card for seamless feel */
+            background-color: var(--bg-color-medium);
             max-height: 0;
             overflow: hidden;
-            transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out; /* Smoother transition */
-            border-radius: 0 0 5px 5px; 
+            transition: max-height 0.45s ease-in-out, padding 0.45s ease-in-out;
+            border-radius: 0 0 7px 7px;
         }
-
         .collapse-content.active {
-            padding: 1.5rem; 
-            border-top: 1px dashed var(--border-color); /* Add separator when open */
+            padding: 1.5rem;
+            border-top: 1px solid var(--border-color);
         }
-        
-        .collapse-content h6 { 
+
+        .collapse-content h6 {
             font-family: var(--font-headings);
             font-weight: 700;
-            color: var(--accent-primary);
-            margin-top: 1.25rem; /* Increased margin */
-            margin-bottom: 0.75rem; /* Increased margin */
-            font-size: 1.1rem; /* Increased size */
+            color: var(--accent-secondary); /* Use secondary accent for subheadings */
+            margin-top: 1.5rem;
+            margin-bottom: 0.75rem;
+            font-size: 1.15rem;
+            border-left: 3px solid var(--accent-secondary);
+            padding-left: 0.75rem;
         }
         .collapse-content h6:first-child {
             margin-top: 0;
         }
 
         .collapse-content ul {
-            padding-left: 25px; 
-            margin-bottom: 1.25rem; /* Increased margin */
-            list-style-type: '» '; /* Custom bullet */
+            padding-left: 25px;
+            margin-bottom: 1.25rem;
+            list-style-type: none; /* Remove default bullets */
+        }
+         .collapse-content ul li {
+            position: relative;
+            padding-left: 1.5em; /* Space for custom bullet */
+            margin-bottom: 0.8rem; /* Increased margin */
+            color: var(--text-color-secondary);
+        }
+        .collapse-content ul li::before {
+            content: ''; /* Custom bullet styling */
+            position: absolute;
+            left: 0;
+            top: 0.5em;
+            width: 0.5em;
+            height: 0.5em;
+            background-color: var(--accent-primary);
+            border-radius: 50%;
+            box-shadow: 0 0 5px var(--accent-primary-glow);
         }
         .collapse-content ul ul {
-            list-style-type: '› '; /* Nested custom bullet */
             margin-top: 0.75rem;
         }
-
-        .collapse-content li {
-            margin-bottom: 0.75rem; /* Increased margin */
-            color: var(--text-color-secondary);
+         .collapse-content ul ul li::before {
+            background-color: var(--accent-secondary); /* Different color for nested */
+             box-shadow: 0 0 5px var(--accent-secondary-glow);
         }
+
         .collapse-content li strong {
-            font-weight: 700; /* Bolder */
-            color: var(--text-color-main);
+            font-weight: 700;
+            color: var(--text-color-primary);
         }
 
         .collapse-content p {
-            margin-bottom: 1.25rem; /* Increased margin */
+            margin-bottom: 1.25rem;
         }
         .collapse-content p:last-child {
             margin-bottom: 0;
         }
 
-        .term { 
-            font-weight: 700; /* Bolder */
-            color: var(--accent-secondary); /* Use secondary accent */
-            background-color: rgba(127, 126, 255, 0.1); /* Subtle background for secondary accent */
-            padding: 0.15em 0.4em; /* Adjusted padding */
+        .term {
+            font-weight: 700;
+            color: var(--accent-secondary);
+            background-color: rgba(174, 129, 255, 0.1);
+            padding: 0.2em 0.5em;
             border-radius: 4px;
-            border-bottom: 1px dotted var(--accent-secondary);
+            border-bottom: 1px solid var(--accent-secondary);
+            font-family: var(--font-body); /* Ensure body font */
+            font-size: 0.95em;
         }
 
         a {
             color: var(--accent-primary);
             text-decoration: none;
-            font-weight: 600;
+            font-weight: 700; /* Bolder links */
             transition: color 0.2s ease, text-shadow 0.2s ease;
         }
         a:hover {
-            color: #8afff7; /* Lighter cyan on hover */
-            text-decoration: none; /* No underline by default */
-            text-shadow: 0 0 5px var(--glow-color-primary);
+            color: #8afff7;
+            text-decoration: none;
+            text-shadow: 0 0 8px var(--accent-primary-glow); /* Glow on hover */
         }
 
         .page-footer {
             text-align: center;
-            padding: 2.5rem 1rem; /* Increased padding */
-            background-color: var(--card-bg-color); /* Match card background */
-            color: var(--text-color-secondary);
-            font-size: 0.95rem; /* Increased size */
+            padding: 3rem 1rem;
+            background-color: var(--bg-color-medium);
+            color: var(--text-color-muted);
+            font-size: 0.95rem;
             margin-top: auto;
             border-top: 1px solid var(--border-color);
         }
@@ -294,18 +347,34 @@
             color: #8afff7;
         }
 
+        /* Custom Scrollbar */
+        ::-webkit-scrollbar {
+            width: 10px;
+        }
+        ::-webkit-scrollbar-track {
+            background: var(--bg-color-deep);
+        }
+        ::-webkit-scrollbar-thumb {
+            background: var(--accent-primary);
+            border-radius: 5px;
+            border: 2px solid var(--bg-color-deep);
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: var(--accent-primary-darker);
+        }
+
         /* Bootstrap Row customization */
         .row {
-            --bs-gutter-x: 2rem; /* Increase gutter between columns */
-            --bs-gutter-y: 2rem;
+            --bs-gutter-x: 2.5rem; /* Increase gutter between columns for more space */
+            --bs-gutter-y: 2.5rem;
         }
 
         @media (max-width: 768px) {
-            .page-header h1 { font-size: 2.2rem; }
+            .page-header h1 { font-size: 2.4rem; }
             .page-header .subtitle { font-size: 1.1rem; }
-            .section-title { font-size: 1.3rem; }
-            .info-card h5 { font-size: 1.15rem; }
-            .info-card p.summary, .collapse-content { font-size: 0.95rem; }
+            .section-title { font-size: 1.4rem; }
+            .info-card h5 { font-size: 1.2rem; }
+            .info-card p.summary, .collapse-content { font-size: 0.98rem; }
             .row { --bs-gutter-x: 1.5rem; }
         }
     </style>
@@ -318,23 +387,23 @@
     </header>
 
     <main class="container-main">
-        <div class="row"> <!-- Outer row for schema containers -->
-            <div class="col-12"> <!-- Full width column for schema containers -->
+        <div class="row">
+            <div class="col-12">
                 <div class="schema-container" data-section-id="section-introduction">
-                    <h2 class="section-title" id="section-introduction-title">Introduction</h2>
+                    <h2 class="section-title" id="section-introduction-title"><i class="bi bi-person-workspace"></i> Introduction</h2>
                     <div class="row">
-                        <div class="col-lg-12"> <!-- Full width for overview card -->
+                        <div class="col-lg-12">
                             <div class="info-card" id="card-yudkowsky-overview">
                                 <div class="card-header-content">
-                                    <h5>Eliezer Yudkowsky: The Thinker & His Mission</h5>
+                                    <h5><i class="bi bi-person-fill"></i> Eliezer Yudkowsky: The Thinker & His Mission</h5>
                                     <div class="card-content-wrapper">
                                         <p class="summary">Eliezer Yudkowsky is a prominent American AI researcher, writer, and philosopher, best known for his work on decision theory and the potential risks and benefits of artificial general intelligence (AGI). He co-founded the Machine Intelligence Research Institute (MIRI).</p>
-                                        <button class="details-toggle" type="button" data-bs-target="#collapse-yudkowsky-overview" aria-expanded="false" aria-controls="collapse-yudkowsky-overview">
+                                        <button class="details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-yudkowsky-overview" aria-expanded="false" aria-controls="collapse-yudkowsky-overview">
                                             Details <span class="toggle-icon">â–¼</span>
                                         </button>
                                     </div>
                                 </div>
-                                <div class="collapse-content" id="collapse-yudkowsky-overview">
+                                <div class="collapse collapse-content" id="collapse-yudkowsky-overview">
                                     <h6>Primary Concerns & Contributions:</h6>
                                     <ul>
                                         <li><strong>Refining Human Rationality:</strong> Developing techniques and mental models to overcome <span class="term">cognitive biases</span> and improve decision-making. His foundational writings, known as <span class="term">The Sequences</span>, were originally published on blogs like <a href="https://www.overcomingbias.com/" target="_blank" rel="noopener noreferrer">Overcoming Bias</a> and <a href="https://www.lesswrong.com/" target="_blank" rel="noopener noreferrer">LessWrong</a>.</li>
@@ -348,34 +417,34 @@
                 </div>
 
                 <div class="schema-container" data-section-id="section-rationality">
-                    <h2 class="section-title" id="section-rationality-title">Foundations of Rationality</h2>
+                    <h2 class="section-title" id="section-rationality-title"><i class="bi bi-brain"></i> Foundations of Rationality</h2>
                     <div class="row">
                         <div class="col-lg-6 col-md-12">
                             <div class="info-card" id="card-cognitive-biases">
                                 <div class="card-header-content">
-                                    <h5>Overcoming Cognitive Biases</h5>
+                                    <h5><i class="bi bi-kanban-fill"></i> Overcoming Cognitive Biases</h5>
                                     <div class="card-content-wrapper">
-                                        <p class="summary">Cognitive biases are systematic errors in thinking that affect decisions and judgments. Yudkowsky's work, particularly in <span class="term">The Sequences</span>, stresses recognizing and mitigating these biases for clearer, more effective thought and accurate beliefs.</p>
-                                        <button class="details-toggle" type="button" data-bs-target="#collapse-cognitive-biases" aria-expanded="false" aria-controls="collapse-cognitive-biases">
+                                        <p class="summary">Cognitive biases are systematic errors in thinking affecting decisions. Yudkowsky's <span class="term">The Sequences</span> stress recognizing and mitigating these for clearer thought and accurate beliefs.</p>
+                                        <button class="details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-cognitive-biases" aria-expanded="false" aria-controls="collapse-cognitive-biases">
                                             Details <span class="toggle-icon">â–¼</span>
                                         </button>
                                     </div>
                                 </div>
-                                <div class="collapse-content" id="collapse-cognitive-biases">
-                                    <p>Biases often arise from mental shortcuts (<span class="term">heuristics</span>) that, while efficient, can lead to predictable errors in judgment.</p>
+                                <div class="collapse collapse-content" id="collapse-cognitive-biases">
+                                    <p>Biases often arise from mental shortcuts (<span class="term">heuristics</span>).</p>
                                     <h6>Common Biases Explored:</h6>
                                     <ul>
-                                        <li><strong>Confirmation Bias:</strong> The tendency to search for, interpret, favor, and recall information that confirms or supports one's preexisting beliefs or hypotheses.</li>
-                                        <li><strong>Availability Heuristic:</strong> Overestimating the likelihood of events that are more easily recalled in memory, often due to their recency or emotional impact.</li>
-                                        <li><strong>Anchoring Bias:</strong> Relying too heavily on an initial piece of information (the "anchor") when making decisions.</li>
-                                        <li><strong>Scope Insensitivity:</strong> Failing to appropriately scale one's emotional response or perceived value with the magnitude of a problem.</li>
-                                        <li><strong>Motivated Cognition/Rationalization:</strong> Reasoning towards a predetermined conclusion, rather than following evidence impartially.</li>
+                                        <li><strong>Confirmation Bias:</strong> Favoring info confirming existing beliefs.</li>
+                                        <li><strong>Availability Heuristic:</strong> Overestimating easily recalled events.</li>
+                                        <li><strong>Anchoring Bias:</strong> Over-relying on initial info.</li>
+                                        <li><strong>Scope Insensitivity:</strong> Failing to scale emotional response to problem magnitude.</li>
+                                        <li><strong>Motivated Cognition/Rationalization:</strong> Reasoning towards a predetermined conclusion.</li>
                                     </ul>
                                     <h6>Techniques for Mitigation Advocated:</h6>
                                     <ul>
-                                        <li><strong>Considering the Opposite:</strong> Actively trying to argue against one's own beliefs to identify weaknesses.</li>
-                                        <li><strong>Calibration Training:</strong> Improving one's ability to assign accurate probabilities to beliefs.</li>
-                                        <li><strong>Noticing Confusion:</strong> Treating confusion as a vital signal that your mental map doesn't match the territory.</li>
+                                        <li><strong>Considering the Opposite:</strong> Arguing against own beliefs.</li>
+                                        <li><strong>Calibration Training:</strong> Improving probability assignment accuracy.</li>
+                                        <li><strong>Noticing Confusion:</strong> Treating confusion as a signal of flawed understanding.</li>
                                         <li><strong>Making Beliefs "Pay Rent":</strong> Ensuring beliefs have tangible, anticipatory consequences.</li>
                                     </ul>
                                 </div>
@@ -384,23 +453,23 @@
                         <div class="col-lg-6 col-md-12">
                             <div class="info-card" id="card-bayesian-reasoning">
                                 <div class="card-header-content">
-                                    <h5>Bayesian Reasoning</h5>
+                                    <h5><i class="bi bi-calculator-fill"></i> Bayesian Reasoning</h5>
                                     <div class="card-content-wrapper">
-                                        <p class="summary">Bayesian reasoning is a cornerstone of Yudkowsky's approach to rationality, providing a formal framework for updating beliefs in light of new evidence. It allows for a structured way to adjust probabilities from prior beliefs to posterior beliefs.</p>
-                                        <button class="details-toggle" type="button" data-bs-target="#collapse-bayesian-reasoning" aria-expanded="false" aria-controls="collapse-bayesian-reasoning">
+                                        <p class="summary">Bayesian reasoning, a cornerstone of Yudkowsky's rationality, is a formal framework for updating beliefs with new evidence, adjusting probabilities from priors to posteriors.</p>
+                                        <button class="details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-bayesian-reasoning" aria-expanded="false" aria-controls="collapse-bayesian-reasoning">
                                             Details <span class="toggle-icon">â–¼</span>
                                         </button>
                                     </div>
                                 </div>
-                                <div class="collapse-content" id="collapse-bayesian-reasoning">
+                                <div class="collapse collapse-content" id="collapse-bayesian-reasoning">
                                     <h6>Core Idea of Bayesian Epistemology:</h6>
-                                    <p>Bayesianism quantifies how one should logically shift confidence in a hypothesis when new evidence is encountered. It involves:</p>
+                                    <p>Bayesianism quantifies logical belief shifts with new evidence:</p>
                                     <ul>
-                                        <li><strong>Prior Probability (Priors):</strong> The initial degree of belief assigned to a hypothesis before considering new evidence.</li>
-                                        <li><strong>Likelihood of Evidence:</strong> The probability of observing the new evidence if the hypothesis is true (and if competing hypotheses are true).</li>
-                                        <li><strong>Posterior Probability (Posteriors):</strong> The updated degree of belief in the hypothesis after the evidence has been rationally incorporated using Bayes' Theorem.</li>
+                                        <li><strong>Prior Probability (Priors):</strong> Initial belief strength before new evidence.</li>
+                                        <li><strong>Likelihood of Evidence:</strong> Probability of evidence given the hypothesis (and alternatives).</li>
+                                        <li><strong>Posterior Probability (Posteriors):</strong> Updated belief strength after incorporating evidence via Bayes' Theorem.</li>
                                     </ul>
-                                    <p>This methodical approach helps in systematically refining one's mental <span class="term">map</span> to better reflect the <span class="term">territory</span> (reality), a key theme in "Map and Territory," the first book of "Rationality: From AI to Zombies."</p>
+                                    <p>This refines one's mental <span class="term">map</span> to better reflect reality (the <span class="term">territory</span>), a key theme in "Map and Territory" from "Rationality: From AI to Zombies."</p>
                                 </div>
                             </div>
                         </div>
@@ -408,32 +477,31 @@
                 </div>
 
                 <div class="schema-container" data-section-id="section-ai-alignment">
-                    <h2 class="section-title" id="section-ai-alignment-title">AI Alignment & Existential Risk</h2>
+                    <h2 class="section-title" id="section-ai-alignment-title"><i class="bi bi-shield-lock-fill"></i> AI Alignment & Existential Risk</h2>
                     <div class="row">
-                        <div class="col-lg-6 col-md-12">
+                        <div class="col-lg-4 col-md-6">
                             <div class="info-card" id="card-alignment-problem">
                                 <div class="card-header-content">
-                                    <h5>The Alignment Problem</h5>
+                                    <h5><i class="bi bi-node-plus-fill"></i> The Alignment Problem</h5>
                                     <div class="card-content-wrapper">
-                                        <p class="summary">The AI alignment problem is the critical challenge of ensuring that advanced AI systems, particularly AGI, pursue goals genuinely aligned with human values and intentions, thereby preventing unintended and potentially catastrophic outcomes.</p>
-                                        <button class="details-toggle" type="button" data-bs-target="#collapse-alignment-problem" aria-expanded="false" aria-controls="collapse-alignment-problem">
+                                        <p class="summary">The critical challenge of ensuring advanced AI, especially AGI, pursues goals genuinely aligned with human values, preventing unintended catastrophic outcomes.</p>
+                                        <button class="details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-alignment-problem" aria-expanded="false" aria-controls="collapse-alignment-problem">
                                             Details <span class="toggle-icon">â–¼</span>
                                         </button>
                                     </div>
                                 </div>
-                                <div class="collapse-content" id="collapse-alignment-problem">
-                                    <h6>Why it's Critical:</h6>
-                                    <p>A superintelligent AI, even with seemingly benign programmed goals, could find highly destructive pathways if values aren't specified with extreme precision. Even slight misalignments, amplified by vast <span class="term">optimization power</span>, could lead to <span class="term">existential risk</span>.</p>
+                                <div class="collapse collapse-content" id="collapse-alignment-problem">
+                                    <p>A superintelligent AI, even with benign programmed goals, could find destructive pathways if values aren't precisely specified. Slight misalignments, amplified by vast <span class="term">optimization power</span>, could lead to <span class="term">existential risk</span>. Specifying complex human values robustly is an extraordinary challenge.</p>
                                 </div>
                             </div>
                         </div>
-                         <div class="col-lg-6 col-md-12">
+                         <div class="col-lg-4 col-md-6">
                             <div class="info-card" id="card-optimization-power">
                                 <div class="card-header-content">
-                                    <h5>Optimization Power & Search Spaces</h5>
+                                    <h5><i class="bi bi-lightning-charge-fill"></i> Optimization Power & Search Spaces</h5>
                                     <div class="card-content-wrapper">
-                                        <p class="summary">AGI's capability is immense <span class="term">optimization power</span>: efficiently searching vast <span class="term">search spaces</span> of possibilities to find novel solutions for its objectives. This makes AGI transformative but also dangerous if misaligned.</p>
-                                        <button class="details-toggle" type="button" data-bs-target="#collapse-optimization-power" aria-expanded="false" aria-controls="collapse-optimization-power">
+                                        <p class="summary">AGI's capability is immense <span class="term">optimization power</span>: efficiently searching vast <span class="term">search spaces</span> of possibilities to find and implement solutions for its objectives. This power is transformative but also dangerous if misaligned.</p>
+                                        <button class="details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-optimization-power" aria-expanded="false" aria-controls="collapse-optimization-power">
                                             Details <span class="toggle-icon">â–¼</span>
                                         </button>
                                     </div>
@@ -442,146 +510,135 @@
                                     <h6>Key Concepts:</h6>
                                     <ul>
                                         <li><strong>Optimization Power:</strong> Ability to steer the future into desired configurations according to a goal function.</li>
-                                        <li><strong>Search Spaces:</strong> The astronomically large set of all possible actions, plans, or designs an AI could consider.</li>
+                                        <li><strong>Search Spaces:</strong> The astronomically large set of all possible actions an AI could consider.</li>
                                     </ul>
-                                    <h6>Implications:</h6>
-                                     <p>Even slightly misaligned goals, combined with superhuman optimization power, can lead to extreme outcomes as the AI might find "solutions" technically correct but disastrous for humans. The AI could achieve goals very quickly and potentially irreversibly.</p>
+                                    <p>Misaligned goals combined with superhuman optimization power can lead to extreme, unforeseen "solutions" that are technically optimal for the AI but catastrophic for humans. Such goals could be achieved quickly and irreversibly.</p>
                                 </div>
                             </div>
                         </div>
-                        <div class="col-lg-6 col-md-12">
+                        <div class="col-lg-4 col-md-6">
                             <div class="info-card" id="card-orthogonality-thesis">
                                 <div class="card-header-content">
-                                    <h5>Orthogonality Thesis</h5>
+                                    <h5><i class="bi bi-arrows-angle-contract"></i> Orthogonality Thesis</h5>
                                     <div class="card-content-wrapper">
-                                        <p class="summary">The Orthogonality Thesis states that an AI's intelligence (capability) and its final goals are independent. High intelligence doesn't inherently imply human-compatible goals. An AI can be superintelligent yet pursue any arbitrary goal.</p>
-                                        <button class="details-toggle" type="button" data-bs-target="#collapse-orthogonality-thesis" aria-expanded="false" aria-controls="collapse-orthogonality-thesis">
+                                        <p class="summary">The Orthogonality Thesis posits that an AI's intelligence (capability) and its final goals are independent. High intelligence does not inherently imply human-compatible goals. An AI can be superintelligent yet pursue any arbitrary goal.</p>
+                                        <button class="details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-orthogonality-thesis" aria-expanded="false" aria-controls="collapse-orthogonality-thesis">
                                             Details <span class="toggle-icon">â–¼</span>
                                         </button>
                                     </div>
                                 </div>
                                 <div class="collapse-content" id="collapse-orthogonality-thesis">
-                                    <h6>Core Implications:</h6>
-                                    <p>Intelligence is about effective goal achievement, not inherent morality or wisdom. We cannot expect a superintelligent AI to "understand" what we "really mean" or to converge on human values by default; values must be explicitly and correctly specified. There's no "default" benevolence in higher intelligence.</p>
+                                    <p>Intelligence is about effective goal achievement, not inherent morality or wisdom. We cannot expect superintelligence to "understand" what we "really mean" or converge on human values by default; values must be explicitly and correctly specified. There's no "default" benevolence.</p>
                                 </div>
                             </div>
                         </div>
-                         <div class="col-lg-6 col-md-12">
+                         <div class="col-lg-4 col-md-6">
                             <div class="info-card" id="card-instrumental-convergence">
                                 <div class="card-header-content">
-                                    <h5>Instrumental Convergence</h5>
+                                    <h5><i class="bi bi-tools"></i> Instrumental Convergence</h5>
                                     <div class="card-content-wrapper">
-                                        <p class="summary">Instrumental convergence suggests highly intelligent agents, regardless of diverse final goals, will likely pursue similar intermediate (instrumental) goals useful for almost any objective (e.g., self-preservation, resource acquisition).</p>
-                                        <button class="details-toggle" type="button" data-bs-target="#collapse-instrumental-convergence" aria-expanded="false" aria-controls="collapse-instrumental-convergence">
+                                        <p class="summary">Intelligent agents, regardless of final goals, will likely pursue similar instrumental goals useful for almost any objective (e.g., self-preservation, resource acquisition, cognitive enhancement, goal integrity).</p>
+                                        <button class="details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-instrumental-convergence" aria-expanded="false" aria-controls="collapse-instrumental-convergence">
                                             Details <span class="toggle-icon">â–¼</span>
                                         </button>
                                     </div>
                                 </div>
                                 <div class="collapse-content" id="collapse-instrumental-convergence">
-                                    <h6>Common Convergent Instrumental Goals:</h6>
-                                    <ul>
-                                        <li>Self-Preservation</li>
-                                        <li>Resource Acquisition</li>
-                                        <li>Cognitive Enhancement</li>
-                                        <li>Goal Integrity</li>
-                                    </ul>
-                                    <p>Unconstrained pursuit of these logical sub-goals could lead to conflict with human interests (e.g., resource competition).</p>
+                                    <p>Unconstrained pursuit of these logical sub-goals could lead to conflict with human interests (e.g., resource competition, resisting shutdown).</p>
                                 </div>
                             </div>
                         </div>
-                        <div class="col-lg-6 col-md-12">
+                        <div class="col-lg-4 col-md-6">
                             <div class="info-card" id="card-friendly-ai">
                                 <div class="card-header-content">
-                                    <h5>Friendly AI (FAI) / Aligned AI</h5>
+                                    <h5><i class="bi bi-person-heart"></i> Friendly AI (FAI) / Aligned AI</h5>
                                     <div class="card-content-wrapper">
                                         <p class="summary">Friendly AI (FAI) or Aligned AI is the design of AI systems that are demonstrably beneficial, with goals robustly aligned with human values, remaining safe even if superintelligent.</p>
-                                        <button class="details-toggle" type="button" data-bs-target="#collapse-friendly-ai" aria-expanded="false" aria-controls="collapse-friendly-ai">
+                                        <button class="details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-friendly-ai" aria-expanded="false" aria-controls="collapse-friendly-ai">
                                             Details <span class="toggle-icon">â–¼</span>
                                         </button>
                                     </div>
                                 </div>
                                 <div class="collapse-content" id="collapse-friendly-ai">
-                                    <h6>The Challenge:</h6>
-                                    <p>This involves more than simple rules; it requires instilling a deep, adaptable understanding of human values. Key challenges include the <span class="term">Value Loading Problem</span>, ensuring goal stability, and designing for scalable oversight/corrigibility.</p>
+                                    <p>Challenges include the <span class="term">Value Loading Problem</span> (specifying complex human values), ensuring goal stability, designing for scalable oversight/corrigibility, and avoiding "perverse instantiation" of goals.</p>
                                 </div>
                             </div>
                         </div>
-                        <div class="col-lg-6 col-md-12">
+                        <div class="col-lg-4 col-md-6">
                             <div class="info-card" id="card-complexity-of-value">
                                 <div class="card-header-content">
-                                    <h5>Complexity of Value</h5>
+                                    <h5><i class="bi bi-puzzle-fill"></i> Complexity of Value</h5>
                                     <div class="card-content-wrapper">
-                                        <p class="summary">Human values are intricate, nuanced, context-dependent, and often contradictory, making them extremely hard to fully capture and encode into an AI system robustly (the "Value Loading Problem").</p>
-                                        <button class="details-toggle" type="button" data-bs-target="#collapse-complexity-of-value" aria-expanded="false" aria-controls="collapse-complexity-of-value">
+                                        <p class="summary">Human values are intricate, nuanced, context-dependent, and often contradictory, making them extremely hard to fully capture and encode into an AI robustly (the "Value Loading Problem").</p>
+                                        <button class="details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-complexity-of-value" aria-expanded="false" aria-controls="collapse-complexity-of-value">
                                             Details <span class="toggle-icon">â–¼</span>
                                         </button>
                                     </div>
                                 </div>
                                 <div class="collapse-content" id="collapse-complexity-of-value">
-                                    <h6>The Difficulty:</h6>
-                                    <p>Simple instructions (e.g., "make people happy") can be perversely instantiated by a literal-minded superintelligence. Our values are a complex evolved system, not a simple list. Capturing this "fragile" structure is a central AI alignment challenge, explored in "Fragile Purposes" and "Value Theory" sections of The Sequences.</p>
+                                    <p>Simple instructions (e.g., "make people happy") can be perversely instantiated. Our values are an evolved system, not a simple list. Capturing this "fragile" structure is a central alignment challenge explored in The Sequences.</p>
                                 </div>
                             </div>
                         </div>
-                        <div class="col-lg-12"> <!-- Full width for P(doom) card -->
+                         <div class="col-lg-12">
                             <div class="info-card" id="card-pdoom-risk">
                                 <div class="card-header-content">
-                                    <h5>P(doom) & AI Extinction Risk Probabilities</h5>
+                                    <h5><i class="bi bi-radioactive"></i> P(doom) & AI Extinction Risk Probabilities</h5>
                                     <div class="card-content-wrapper">
-                                        <p class="summary"><span class="term">"P(doom)"</span> denotes a subjective probability that unaligned AGI will cause human extinction or a similar global catastrophe. Advanced AI is considered a significant potential source of <span class="term">existential risk</span> by many researchers, including Yudkowsky.</p>
-                                        <button class="details-toggle" type="button" data-bs-target="#collapse-pdoom-risk" aria-expanded="false" aria-controls="collapse-pdoom-risk">
+                                        <p class="summary"><span class="term">"P(doom)"</span> denotes a subjective probability that unaligned AGI will cause human extinction or a similar global catastrophe. Advanced AI is considered a significant <span class="term">existential risk</span> by many, including Yudkowsky.</p>
+                                        <button class="details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-pdoom-risk" aria-expanded="false" aria-controls="collapse-pdoom-risk">
                                             Details <span class="toggle-icon">â–¼</span>
                                         </button>
                                     </div>
                                 </div>
                                 <div class="collapse-content" id="collapse-pdoom-risk">
                                     <h6>Understanding Existential Risk (X-risk):</h6>
-                                    <p>An existential risk threatens the premature extinction of Earth-originating intelligent life or the permanent, drastic curtailment of its potential.</p>
-                                    <h6>Why AGI is Considered an X-risk:</h6>
-                                    <p>Unaligned superintelligence could outcompete humanity for resources, transform the planet in ways incompatible with human survival, or cause extinction as an unintended side effect of pursuing its programmed goals without perfect alignment and robust safety constraints.</p>
+                                    <p>Threatens premature extinction of Earth-originating intelligent life or drastic curtailment of its potential.</p>
+                                    <h6>Why AGI is an X-risk:</h6>
+                                    <p>Unaligned superintelligence could outcompete humanity, transform the planet incompatibly, or cause extinction as an unintended side effect of pursuing its goals.</p>
                                     <h6>P(doom) - Subjective Probabilities:</h6>
-                                    <p>These are personal estimates of catastrophic outcomes from AGI. Estimates vary widely; Yudkowsky is known for high p(doom) estimates, reflecting deep concern about the alignment problem's difficulty. Discussing p(doom) underscores the perceived severity and urgency of AI safety research. The precautionary principle is often invoked due to the potentially infinite negative utility of human extinction.</p>
+                                    <p>Personal estimates of catastrophic outcomes from AGI. Estimates vary; Yudkowsky's are notably high, reflecting deep concern. Discussion of p(doom) highlights the perceived severity and urgency of AI safety. The precautionary principle is often invoked.</p>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-                
+
                 <div class="schema-container" data-section-id="section-decision-theory">
-                    <h2 class="section-title" id="section-decision-theory-title">Decision Theory & Thought Experiments</h2>
+                    <h2 class="section-title" id="section-decision-theory-title"><i class="bi bi-signpost-split-fill"></i> Decision Theory & Thought Experiments</h2>
                      <div class="row">
                         <div class="col-lg-6 col-md-12">
                             <div class="info-card" id="card-navigating-uncertainty">
                                 <div class="card-header-content">
-                                    <h5>Navigating Uncertainty in Decisions</h5>
+                                    <h5><i class="bi bi-compass-fill"></i> Navigating Uncertainty in Decisions</h5>
                                     <div class="card-content-wrapper">
-                                        <p class="summary">Yudkowsky's work often delves into advanced decision theory, particularly for scenarios involving high stakes, low probabilities, and profound uncertainty relevant to AGI's future impact.</p>
-                                        <button class="details-toggle" type="button" data-bs-target="#collapse-navigating-uncertainty" aria-expanded="false" aria-controls="collapse-navigating-uncertainty">
+                                        <p class="summary">Yudkowsky's work, especially in <span class="term">The Sequences</span>, delves into advanced decision theory for scenarios with high stakes, low probabilities, and profound uncertainty relevant to AGI's future.</p>
+                                        <button class="details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-navigating-uncertainty" aria-expanded="false" aria-controls="collapse-navigating-uncertainty">
                                             Details <span class="toggle-icon">â–¼</span>
                                         </button>
                                     </div>
                                 </div>
                                 <div class="collapse-content" id="collapse-navigating-uncertainty">
-                                    <p>The aim is to establish principles for rational action with incomplete information or unprecedented possibilities, critically examining expected utility theory and its limits, especially when probabilities are hard to estimate or consequences are astronomical. Yudkowsky advocates for robust reasoning methods for "black swan" type events.</p>
+                                    <p>The aim is to establish rational action principles with incomplete information or unprecedented possibilities, critically examining expected utility theory and its limits. Yudkowsky advocates for robust reasoning methods for "black swan" events.</p>
                                 </div>
                             </div>
                         </div>
                         <div class="col-lg-6 col-md-12">
                             <div class="info-card" id="card-pascals-mugging">
                                 <div class="card-header-content">
-                                    <h5>Pascal's Mugging</h5>
+                                    <h5><i class="bi bi-exclamation-triangle-fill"></i> Pascal's Mugging</h5>
                                     <div class="card-content-wrapper">
-                                        <p class="summary">Pascal's Mugging is a thought experiment highlighting paradoxes in applying expected utility theory to extremely low-probability events with astronomically high payoffs, questioning rational decision-making in such edge cases.</p>
-                                        <button class="details-toggle" type="button" data-bs-target="#collapse-pascals-mugging" aria-expanded="false" aria-controls="collapse-pascals-mugging">
+                                        <p class="summary">A thought experiment highlighting paradoxes in applying expected utility theory to extremely low-probability events with astronomically high payoffs, questioning rational decision-making in such edge cases.</p>
+                                        <button class="details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-pascals-mugging" aria-expanded="false" aria-controls="collapse-pascals-mugging">
                                             Details <span class="toggle-icon">â–¼</span>
                                         </button>
                                     </div>
                                 </div>
                                 <div class="collapse-content" id="collapse-pascals-mugging">
                                     <h6>The Scenario:</h6>
-                                    <p>A "mugger" claims they will provide an immense reward (e.g., utility of saving 3^^^^3 lives) for a small sum (e.g., $5), or inflict immense negative utility. Even a tiny probability of truth could, by naive expected utility, compel compliance.</p>
+                                    <p>A "mugger" claims they will provide an immense reward (e.g., utility of saving 3^^^^3 lives) for a small sum (e.g., $5). Even a tiny probability of truth could, by naive expected utility, compel compliance.</p>
                                     <h6>Relevance:</h6>
-                                    <p>Challenges decision frameworks with vast utilities and microscopic probabilities, relevant to <span class="term">AI existential risk</span>. It forces deeper consideration of assigning priors, probability thresholds, and decision theories robust against such "Pascalian" scenarios.</p>
+                                    <p>Challenges decision frameworks with vast utilities and microscopic probabilities, relevant to <span class="term">AI existential risk</span>. It forces deeper consideration of priors, probability thresholds, and decision theories robust against "Pascalian" scenarios.</p>
                                 </div>
                             </div>
                         </div>
@@ -589,79 +646,62 @@
                 </div>
 
                 <div class="schema-container" data-section-id="section-the-sequences">
-                    <h2 class="section-title" id="section-the-sequences-title">The Sequences on LessWrong</h2>
+                    <h2 class="section-title" id="section-the-sequences-title"><i class="bi bi-collection-fill"></i> The Sequences on LessWrong</h2>
                     <div class="row">
                         <div class="col-lg-12">
                             <div class="info-card" id="card-sequences-overview">
                                 <div class="card-header-content">
-                                    <h5>"Rationality: From AI to Zombies" - An In-Depth Guide</h5>
+                                    <h5><i class="bi bi-book-half"></i> "Rationality: From AI to Zombies" - An In-Depth Guide</h5>
                                     <div class="card-content-wrapper">
-                                        <p class="summary">"The Sequences" are hundreds of essays by Eliezer Yudkowsky (2006-2009), primarily on <a href="https://www.lesswrong.com/" target="_blank" rel="noopener noreferrer">LessWrong</a> and <a href="https://www.overcomingbias.com/" target="_blank" rel="noopener noreferrer">Overcoming Bias</a>. Organized into the ebook <a href="https://www.readthesequences.com/" target="_blank" rel="noopener noreferrer">"Rationality: From AI to Zombies,"</a> they are foundational texts for the rationalist community and AI safety.</p>
-                                        <button class="details-toggle" type="button" data-bs-target="#collapse-sequences-overview" aria-expanded="false" aria-controls="collapse-sequences-overview">
-                                            Details <span class="toggle-icon">â–¼</span>
+                                        <p class="summary">"The Sequences" are hundreds of essays by Eliezer Yudkowsky (2006-2009), primarily on <a href="https://www.lesswrong.com/" target="_blank" rel="noopener noreferrer">LessWrong</a> and <a href="https://www.overcomingbias.com/" target="_blank" rel="noopener noreferrer">Overcoming Bias</a>. Organized into <a href="https://www.readthesequences.com/" target="_blank" rel="noopener noreferrer">"Rationality: From AI to Zombies,"</a> they are foundational texts for the rationalist community and AI safety.</p>
+                                        <button class="details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-sequences-overview" aria-expanded="false" aria-controls="collapse-sequences-overview">
+                                            Explore The Sequences <span class="toggle-icon">â–¼</span>
                                         </button>
                                     </div>
                                 </div>
-                                <div class="collapse-content" id="collapse-sequences-overview">
-                                    <p>"Rationality: From AI to Zombies" is structured into six "books." You can access it at <a href="https://www.readthesequences.com/" target="_blank" rel="noopener noreferrer">readthesequences.com</a> or <a href="https://intelligence.org/rationality-ai-zombies/" target="_blank" rel="noopener noreferrer">intelligence.org</a>.</p>
+                                <div class="collapse collapse-content" id="collapse-sequences-overview">
+                                    <p>"Rationality: From AI to Zombies" is structured into six "books." Access the compiled work at <a href="https://www.readthesequences.com/" target="_blank" rel="noopener noreferrer">readthesequences.com</a> or <a href="https://intelligence.org/rationality-ai-zombies/" target="_blank" rel="noopener noreferrer">intelligence.org</a>.</p>
 
                                     <h6>Book I: Map and Territory</h6>
-                                    <p><strong>Theme:</strong> Bayesian rationality, distinguishing mental models (map) from reality (territory).</p>
-                                    <ul>
-                                        <li><strong>Key Sequences:</strong> Predictably Wrong, Fake Beliefs, Noticing Confusion, Mysterious Answers. Focuses on <span class="term">epistemology</span> and avoiding common reasoning errors.</li>
-                                    </ul>
+                                    <p><strong>Theme:</strong> Bayesian rationality, distinguishing mental models (map) from reality (territory). Focuses on <span class="term">epistemology</span>.</p>
 
                                     <h6>Book II: How to Actually Change Your Mind</h6>
-                                    <p><strong>Theme:</strong> Overcoming motivated reasoning, confirmation bias, and other update obstacles.</p>
-                                     <ul>
-                                        <li><strong>Key Sequences:</strong> Overly Convenient Excuses, Politics and Rationality, Against Rationalization, Against Doublethink, Seeing with Fresh Eyes, Death Spirals, Letting Go. Addresses <span class="term">cognitive biases</span> in belief formation.</li>
-                                    </ul>
+                                    <p><strong>Theme:</strong> Overcoming motivated reasoning and <span class="term">cognitive biases</span> in belief formation.</p>
 
                                     <h6>Book III: The Machine in the Ghost</h6>
-                                    <p><strong>Theme:</strong> Minds, goals, concepts, and the nature of intelligence, often paralleled with AI.</p>
-                                     <ul>
-                                        <li><strong>Key Sequences:</strong> The Simple Math of Evolution, Fragile Purposes, A Human's Guide to Words. Explores <span class="term">philosophy of mind</span> and <span class="term">goal systems</span>.</li>
-                                    </ul>
+                                    <p><strong>Theme:</strong> Minds, goals, concepts, and the nature of intelligence, often paralleled with AI. Explores <span class="term">philosophy of mind</span> and <span class="term">goal systems</span>.</p>
 
                                     <h6>Book IV: Mere Reality</h6>
-                                    <p><strong>Theme:</strong> Science, the physical world, and their relation to rational inference.</p>
-                                    <ul>
-                                        <li><strong>Key Sequences:</strong> Lawful Truth, Reductionism 101, Joy in the Merely Real, Physicalism 201, Quantum Physics and Many Worlds, Science and Rationality. Tackles <span class="term">scientific epistemology</span> and <span class="term">ontology</span>.</li>
-                                    </ul>
+                                    <p><strong>Theme:</strong> Science, the physical world, and their relation to rational inference. Tackles <span class="term">scientific epistemology</span> and <span class="term">ontology</span>.</p>
 
                                     <h6>Book V: Mere Goodness</h6>
-                                    <p><strong>Theme:</strong> Human values, <span class="term">meta-ethics</span>, and the complexity of defining "goodness."</p>
-                                    <ul>
-                                        <li><strong>Key Sequences:</strong> Fake Preferences, Value Theory, Quantified Humanism. Crucial for understanding the <span class="term">AI value alignment</span> challenge.</li>
-                                    </ul>
+                                    <p><strong>Theme:</strong> Human values, <span class="term">meta-ethics</span>, and defining "goodness." Crucial for <span class="term">AI value alignment</span>.</p>
 
                                     <h6>Book VI: Becoming Stronger</h6>
-                                    <p><strong>Theme:</strong> Self-improvement, group rationality, practical applications, and personal reflections.</p>
-                                    <ul>
-                                        <li><strong>Key Sequences:</strong> Yudkowsky's Coming of Age, Challenging the Difficult, The Craft and the Community. Focuses on applied rationality and continuous improvement.</li>
-                                    </ul>
-                                    <p>Other notable sequences include Ethical Injunctions, The Fun Theory Sequence, and Highly Advanced Epistemology 101 for Beginners, further exploring ethics, value complexity, and advanced reasoning concepts.</p>
+                                    <p><strong>Theme:</strong> Self-improvement, group rationality, and practical applications. Focuses on applied rationality.</p>
+
+                                    <p>These sequences collectively aim to provide a toolkit for improving reasoning and decision-making, with significant implications for AI challenges.</p>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-                
+
                 <div class="schema-container" data-section-id="section-legacy-further-exploration">
-                     <h2 class="section-title" id="section-legacy-further-exploration-title">Additional Resources</h2>
+                     <h2 class="section-title" id="section-legacy-further-exploration-title"><i class="bi bi-search-heart"></i> Additional Resources</h2>
                      <div class="row">
                         <div class="col-lg-12">
                             <div class="info-card" id="card-legacy-key-resources">
                                 <div class="card-header-content">
-                                    <h5>Key Organizations & General Reading</h5>
+                                    <h5><i class="bi bi-building"></i> Key Organizations & General Reading</h5>
                                     <div class="card-content-wrapper">
                                         <p class="summary">For ongoing research, refer to the Machine Intelligence Research Institute (MIRI). For broader context, consider works on decision theory, AI ethics, and cognitive psychology.</p>
-                                        <button class="details-toggle" type="button" data-bs-target="#collapse-legacy-key-resources" aria-expanded="false" aria-controls="collapse-legacy-key-resources">
+                                        <button class="details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-legacy-key-resources" aria-expanded="false" aria-controls="collapse-legacy-key-resources">
                                             Details <span class="toggle-icon">â–¼</span>
                                         </button>
                                     </div>
                                 </div>
-                                <div class="collapse-content" id="collapse-legacy-key-resources">
+                                <div class="collapse collapse-content" id="collapse-legacy-key-resources">
                                     <ul>
                                         <li><strong><a href="https://intelligence.org" target="_blank" rel="noopener noreferrer">Machine Intelligence Research Institute (MIRI)</a>:</strong> Co-founded by Yudkowsky, MIRI conducts formal research on AI alignment.</li>
                                          <li><strong>General Reading Suggestions:</strong>
@@ -678,15 +718,19 @@
                         </div>
                     </div>
                 </div>
-            </div> <!-- End full width column for schema containers -->
-        </div> <!-- End outer row -->
+            </div>
+        </div>
     </main>
 
     <footer class="page-footer">
-        <p>&copy; <span id="currentYear"></span> Your Name / Cheatsheet Title. Inspired by the work of Eliezer Yudkowsky.</p>
-        <p>This cheatsheet is for informational purposes and represents an interpretation of complex ideas. Always refer to primary sources for in-depth understanding.</p>
-        <p>Canonical URL: <a href="http://cheatsheets.davidveksler.com/yudkowsky-rationality-ai-cheatsheet.html">http://cheatsheets.davidveksler.com/yudkowsky-rationality-ai-cheatsheet.html</a></p>
-        <p><a href="https://github.com/your-repo-link-here" target="_blank" rel="noopener noreferrer">View on GitHub (Optional)</a></p>
+        <div>
+            <a href="https://www.linkedin.com/in/davidveksler/" title="David Veksler on LinkedIn" target="_blank" rel="noopener noreferrer" class="mx-2 link-secondary">
+              <i class="bi bi-linkedin"></i> LinkedIn
+            </a>
+            <a href="https://cheatsheets.davidveksler.com/" title="Browse All Cheatsheets" class="mx-2 link-secondary">
+              <i class="bi bi-collection"></i> All Cheatsheets
+            </a>
+          </div>
     </footer>
 
     <!-- Bootstrap JS Bundle -->
@@ -698,50 +742,55 @@
                 currentYearSpan.textContent = new Date().getFullYear();
             }
 
-            const mainContainer = document.querySelector('.container-main'); // Use the renamed class
+            const mainContainer = document.querySelector('.container-main');
             if (mainContainer) {
                 mainContainer.addEventListener('click', function(event) {
                     const toggleButton = event.target.closest('.details-toggle');
                     if (toggleButton) {
-                        // Bootstrap 5 uses data-bs-target
                         const targetId = toggleButton.getAttribute('data-bs-target');
                         if (targetId) {
                             const content = document.querySelector(targetId);
+                            const bsCollapse = bootstrap.Collapse.getInstance(content) || new bootstrap.Collapse(content, {toggle: false});
+
                             if (content) {
-                                // const isExpanded = toggleButton.getAttribute('aria-expanded') === 'true';
-                                // Bootstrap's Collapse component handles aria-expanded automatically
-                                
-                                // We mainly manage our 'active' class for max-height
                                 content.classList.toggle('active');
-
                                 if (content.style.maxHeight && content.style.maxHeight !== "0px") {
-                                    content.style.maxHeight = null; 
+                                    content.style.maxHeight = null;
                                 } else {
-                                    content.style.maxHeight = content.scrollHeight + "px"; 
+                                    content.style.maxHeight = content.scrollHeight + "px";
                                 }
+                                // Bootstrap's collapse will handle aria-expanded, but if not, uncomment:
+                                // const isCurrentlyExpanded = toggleButton.getAttribute('aria-expanded') === 'true';
+                                // toggleButton.setAttribute('aria-expanded', String(!isCurrentlyExpanded));
                             }
                         }
                     }
                 });
 
-                // Ensure Bootstrap Collapse components are initialized if not auto-initialized
-                // This is typically handled by Bootstrap if data-bs-toggle="collapse" is present
-                // but sometimes manual init can be useful or if you are adding elements dynamically
-                var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
-                var collapseList = collapseElementList.map(function (collapseEl) {
-                  return new bootstrap.Collapse(collapseEl, { toggle: false }) // Initialize but don't toggle
-                })
-
-                // Update toggle icon based on Bootstrap's events
-                document.querySelectorAll('.details-toggle').forEach(button => {
-                    const targetId = button.getAttribute('data-bs-target');
-                    const content = document.querySelector(targetId);
-                    if (content) {
+                // Sync aria-expanded with Bootstrap's events for our custom toggles
+                document.querySelectorAll('.collapse-content').forEach(content => {
+                    const toggleButton = document.querySelector(`.details-toggle[data-bs-target="#${content.id}"]`);
+                    if (toggleButton) {
                         content.addEventListener('show.bs.collapse', function () {
-                            button.setAttribute('aria-expanded', 'true');
+                            toggleButton.setAttribute('aria-expanded', 'true');
+                             if (!content.classList.contains('active')) { // Ensure our active class is set
+                                content.classList.add('active');
+                                content.style.maxHeight = content.scrollHeight + "px";
+                            }
+                        });
+                        content.addEventListener('shown.bs.collapse', function() {
+                            // Recalculate maxHeight in case content inside changed during animation
+                            content.style.maxHeight = content.scrollHeight + "px";
                         });
                         content.addEventListener('hide.bs.collapse', function () {
-                            button.setAttribute('aria-expanded', 'false');
+                            toggleButton.setAttribute('aria-expanded', 'false');
+                            if (content.classList.contains('active')) { // Ensure our active class is removed
+                                content.style.maxHeight = null;
+                                content.classList.remove('active');
+                            }
+                        });
+                         content.addEventListener('hidden.bs.collapse', function() {
+                            content.style.maxHeight = null; // Ensure it's fully collapsed
                         });
                     }
                 });