From cd737620f8247e19092275e8051d65bc564fed51 Mon Sep 17 00:00:00 2001
From: Matthew Huntington <matt.huntington@gmail.com>
Date: Sun, 22 Feb 2026 23:33:56 -0500
Subject: [PATCH] extract shared css into global.css

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 dying.html      | 230 +---------------------
 global.css      | 196 +++++++++++++++++++
 index.html      |  38 +---
 perception.html | 510 ++++--------------------------------------------
 4 files changed, 248 insertions(+), 726 deletions(-)
 create mode 100644 global.css

diff --git a/dying.html b/dying.html
index 816ed53..accc10c 100644
--- a/dying.html
+++ b/dying.html
@@ -4,17 +4,10 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>PF2e Hit Points, Healing &amp; Dying</title>
+  <link rel="stylesheet" href="global.css">
   <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
   <style>
     :root {
-      --bg:           #161210;
-      --surface:      #211a13;
-      --surface2:     #2e2318;
-      --border:       #7a5c18;
-      --text:         #e8d5b0;
-      --text-muted:   #9a7e56;
-      --accent:       #c89030;
-
       --c-alive:              #193a14;
       --c-alive-hi:           #5ec454;
       --c-alive-border:       #3a7c32;
@@ -40,80 +33,10 @@
       --c-unconscious-border: #2060a0;
     }
 
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-    body {
-      background: var(--bg);
-      color: var(--text);
-      font-family: Georgia, 'Times New Roman', serif;
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-    }
-
-    /* ── Header ── */
-    header {
-      background: var(--surface);
-      border-bottom: 2px solid var(--border);
-      padding: 14px 24px;
-      display: flex;
-      align-items: baseline;
-      gap: 16px;
-      flex-shrink: 0;
-    }
-    header h1 { font-size: 1.5rem; color: var(--accent); letter-spacing: 0.06em; }
-    header p  { color: var(--text-muted); font-size: 0.85rem; font-style: italic; }
-
-    /* ── Body layout ── */
-    .layout { display: flex; flex: 1; overflow: hidden; }
-
-    /* ── Sidebar ── */
-    aside {
-      width: 0; min-width: 0;
-      background: var(--surface);
-      border-right: 0px solid var(--border);
-      overflow: hidden; flex-shrink: 0;
-      transition: width 0.25s ease, min-width 0.25s ease, border-width 0.25s ease;
-    }
-    aside.open { width: 280px; min-width: 280px; border-right-width: 1px; }
+    aside.open  { width: 280px; min-width: 280px; border-right-width: 1px; }
     .aside-inner { width: 280px; padding: 16px 14px; }
-    .aside-header {
-      display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
-    }
-    aside h2 { color: var(--accent); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; }
-    .aside-close {
-      background: none; border: none; color: var(--text-muted); cursor: pointer;
-      font-size: 1.2rem; line-height: 1; padding: 0 2px; transition: color 0.15s;
-    }
-    .aside-close:hover { color: var(--text); }
-
-    .sidebar-toggle-btn {
-      margin-left: auto;
-      background: var(--surface2); border: 1px solid var(--border);
-      color: var(--text-muted); cursor: pointer; font-family: inherit;
-      font-size: 0.8rem; padding: 5px 12px; border-radius: 4px;
-      display: flex; align-items: center; gap: 5px; white-space: nowrap;
-      transition: color 0.15s, border-color 0.15s;
-    }
-    .sidebar-toggle-btn:hover { color: var(--text); border-color: var(--text-muted); }
-
-    .sidebar-overlay {
-      display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 99;
-    }
-    @media (max-width: 640px) {
-      .sidebar-overlay.active { display: block; }
-      #sidebar { position: fixed; top: 0; left: 0; height: 100%; z-index: 100; }
-      .aside-inner { height: 100%; overflow-y: auto; }
-    }
 
-    /* ── Condition cards ── */
-    .ccard { border-radius: 5px; padding: 10px 12px; margin-bottom: 9px; border: 1px solid; }
-    .ccard h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 5px; }
-    .ccard p  { font-size: 0.76rem; line-height: 1.55; color: var(--text); }
-    .ccard .tag {
-      display: inline-block; margin-top: 6px;
-      font-size: 0.72rem; font-weight: bold; padding: 2px 7px; border-radius: 3px;
-    }
+    .diagram-wrap .mermaid { min-width: 700px; }
 
     .ccard.alive       { background: var(--c-alive);       border-color: var(--c-alive-border); }
     .ccard.alive h3    { color: var(--c-alive-hi); }
@@ -139,87 +62,18 @@
     .ccard.dead h3     { color: var(--c-dead-hi); }
     .ccard.dead .tag   { background: #100404; color: var(--c-dead-hi); }
 
-    /* ── Main ── */
-    main { flex: 1; overflow: auto; padding: 20px 24px; }
-
-    /* ── Tabs ── */
-    .tab-bar { display: flex; gap: 6px; margin-bottom: 0; }
-    .tab-btn {
-      padding: 8px 22px; background: var(--surface2);
-      border: 1px solid var(--border); border-bottom-color: var(--border);
-      color: var(--text-muted); cursor: pointer; font-family: inherit;
-      font-size: 0.9rem; border-radius: 6px 6px 0 0;
-      transition: color 0.15s, background 0.15s;
-    }
-    .tab-btn.active {
-      background: var(--surface); color: var(--accent);
-      border-color: var(--accent); border-bottom-color: var(--surface);
-      position: relative; z-index: 1;
-    }
-    .tab-btn:hover:not(.active) { color: var(--text); }
-
-    .tab-panel {
-      display: none; background: var(--surface);
-      border: 1px solid var(--accent); border-radius: 0 6px 6px 6px; padding: 24px;
-    }
-    .tab-panel.active { display: block; }
-    .tab-panel h2 { color: var(--accent); font-size: 1.1rem; margin-bottom: 6px; }
-    .tab-panel .subtitle {
-      color: var(--text-muted); font-size: 0.82rem; font-style: italic; margin-bottom: 22px;
-    }
-
-    /* ── Mermaid ── */
-    .diagram-wrap { overflow-x: auto; padding: 10px 0; }
-    .diagram-wrap .mermaid { display: flex; justify-content: center; min-width: 700px; }
-
-    /* ── Legend ── */
-    .legend { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; font-size: 0.77rem; }
-    .legend-item { display: flex; align-items: center; gap: 6px; }
-    .legend-dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid; flex-shrink: 0; }
-
-    /* ── Note box ── */
-    .note-box {
-      background: var(--surface2); border: 1px solid var(--border); border-radius: 5px;
-      padding: 12px 16px; margin-top: 20px; font-size: 0.8rem; line-height: 1.7;
-    }
-    .note-box h3 {
-      color: var(--accent); font-size: 0.78rem; text-transform: uppercase;
-      letter-spacing: 0.1em; margin-bottom: 8px;
-    }
-    .note-box ul { padding-left: 16px; }
-    .note-box li { margin-bottom: 4px; }
-    .note-box strong { color: var(--accent); }
+    .sim-start-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
 
-    /* ── Simulator ── */
-    .sim-start-row {
-      display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap;
-    }
-    .sim-start-label {
-      font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted);
-    }
-    .sim-chip {
-      padding: 5px 14px; border-radius: 20px; border: 1px solid;
-      background: transparent; cursor: pointer; font-family: inherit;
-      font-size: 0.78rem; font-weight: bold; letter-spacing: 0.05em; transition: opacity 0.15s;
-    }
-    .sim-chip:hover { opacity: 0.7; }
     .sim-chip.alive       { color: var(--c-alive-hi);       border-color: var(--c-alive-border); }
     .sim-chip.dying-1     { color: var(--c-dying-1-hi);     border-color: var(--c-dying-1-border); }
     .sim-chip.dying-2     { color: var(--c-dying-2-hi);     border-color: var(--c-dying-2-border); }
     .sim-chip.dying-3     { color: var(--c-dying-3-hi);     border-color: var(--c-dying-3-border); }
     .sim-chip.unconscious { color: var(--c-unconscious-hi); border-color: var(--c-unconscious-border); }
 
-    /* Condition modifiers row */
-    .sim-cond-row {
-      display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
-    }
+    .sim-cond-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
     .sim-cond-item { display: flex; align-items: center; gap: 6px; }
-    .sim-cond-label {
-      font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em;
-    }
-    .sim-cond-val {
-      font-size: 1rem; font-weight: bold; min-width: 24px; text-align: center; color: var(--text);
-    }
+    .sim-cond-label { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
+    .sim-cond-val { font-size: 1rem; font-weight: bold; min-width: 24px; text-align: center; color: var(--text); }
     .sim-cond-val.wounded-hi { color: #d0a030; }
     .sim-cond-val.doomed-hi  { color: #d04040; }
     .sim-cond-val.dying-hi-1 { color: var(--c-dying-1-hi); }
@@ -233,11 +87,6 @@
     }
     .sim-cond-btn:hover { color: var(--text); border-color: var(--text-muted); }
 
-    /* State box */
-    .sim-box {
-      border-radius: 7px; border: 2px solid; padding: 18px 22px; margin-bottom: 22px;
-      transition: background 0.25s, border-color 0.25s;
-    }
     .sim-box.alive       { background: var(--c-alive);       border-color: var(--c-alive-border); }
     .sim-box.dying-1     { background: var(--c-dying-1);     border-color: var(--c-dying-1-border); }
     .sim-box.dying-2     { background: var(--c-dying-2);     border-color: var(--c-dying-2-border); }
@@ -245,10 +94,6 @@
     .sim-box.dead        { background: var(--c-dead);        border-color: var(--c-dead-border); }
     .sim-box.unconscious { background: var(--c-unconscious); border-color: var(--c-unconscious-border); }
 
-    .sim-box-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 4px; }
-    .sim-state-name {
-      font-size: 1.7rem; font-weight: bold; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px;
-    }
     .sim-box.alive       .sim-state-name { color: var(--c-alive-hi); }
     .sim-box.dying-1     .sim-state-name { color: var(--c-dying-1-hi); }
     .sim-box.dying-2     .sim-state-name { color: var(--c-dying-2-hi); }
@@ -256,58 +101,29 @@
     .sim-box.dead        .sim-state-name { color: var(--c-dead-hi); }
     .sim-box.unconscious .sim-state-name { color: var(--c-unconscious-hi); }
 
-    .sim-state-effects { font-size: 0.8rem; color: var(--text); line-height: 1.6; }
-
     .sim-state-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
     .sim-badge {
       display: inline-block; padding: 3px 10px; border-radius: 4px;
       font-size: 0.76rem; font-weight: bold; border: 1px solid; background: rgba(0,0,0,0.3);
     }
-    .sim-box.dying-1 .sim-badge { color: var(--c-dying-1-hi); border-color: var(--c-dying-1-border); }
-    .sim-box.dying-2 .sim-badge { color: var(--c-dying-2-hi); border-color: var(--c-dying-2-border); }
-    .sim-box.dying-3 .sim-badge { color: var(--c-dying-3-hi); border-color: var(--c-dying-3-border); }
+    .sim-box.dying-1     .sim-badge { color: var(--c-dying-1-hi); border-color: var(--c-dying-1-border); }
+    .sim-box.dying-2     .sim-badge { color: var(--c-dying-2-hi); border-color: var(--c-dying-2-border); }
+    .sim-box.dying-3     .sim-badge { color: var(--c-dying-3-hi); border-color: var(--c-dying-3-border); }
     .sim-box.unconscious .sim-badge { color: var(--c-unconscious-hi); border-color: var(--c-unconscious-border); }
 
-    /* Actions */
-    .sim-section-head {
-      font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 10px;
-    }
-    .sim-actions-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
     .sim-action {
       padding: 9px 16px; background: var(--surface2); border: 1px solid var(--border);
       color: var(--text); border-radius: 5px; cursor: pointer; font-family: inherit;
       font-size: 0.83rem; text-align: left; max-width: 340px;
       transition: border-color 0.15s, color 0.15s, background 0.15s;
     }
-    .sim-action:hover { border-color: var(--accent); color: var(--accent); }
-    .sim-action.selected { border-color: var(--accent); background: #1e1608; color: var(--accent); }
-    .sim-action-name { font-weight: bold; margin-bottom: 3px; }
-    .sim-action-hint { font-size: 0.7rem; color: var(--text-muted); }
-    .sim-action.selected .sim-action-hint { color: #906c38; }
-
-    /* Outcomes */
-    .sim-outcomes-box {
-      background: var(--surface2); border: 1px solid var(--border); border-radius: 6px;
-      padding: 14px 18px; margin-bottom: 22px;
-    }
-    .sim-outcomes-head { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 10px; }
     .sim-outcomes-list { display: flex; flex-direction: column; gap: 6px; }
     .sim-outcome {
       padding: 8px 16px; background: var(--surface); border: 1px solid var(--border);
       color: var(--text); border-radius: 4px; cursor: pointer; font-family: inherit;
       font-size: 0.82rem; text-align: left; transition: border-color 0.15s, color 0.15s;
     }
-    .sim-outcome:hover { border-color: var(--accent); color: var(--accent); }
 
-    /* Result */
-    .sim-result-box {
-      border-radius: 6px; border: 1px solid; padding: 14px 18px; margin-bottom: 22px;
-      animation: simFadeIn 0.25s ease;
-    }
-    @keyframes simFadeIn {
-      from { opacity: 0; transform: translateY(5px); }
-      to   { opacity: 1; transform: translateY(0); }
-    }
     .sim-result-box.alive       { background: var(--c-alive);       border-color: var(--c-alive-border); }
     .sim-result-box.dying-1     { background: var(--c-dying-1);     border-color: var(--c-dying-1-border); }
     .sim-result-box.dying-2     { background: var(--c-dying-2);     border-color: var(--c-dying-2-border); }
@@ -315,45 +131,19 @@
     .sim-result-box.dead        { background: var(--c-dead);        border-color: var(--c-dead-border); }
     .sim-result-box.unconscious { background: var(--c-unconscious); border-color: var(--c-unconscious-border); }
 
-    .sim-result-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
-    .sim-result-new-state {
-      font-size: 1.05rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.06em;
-    }
     .sim-result-box.alive       .sim-result-new-state { color: var(--c-alive-hi); }
     .sim-result-box.dying-1     .sim-result-new-state { color: var(--c-dying-1-hi); }
     .sim-result-box.dying-2     .sim-result-new-state { color: var(--c-dying-2-hi); }
     .sim-result-box.dying-3     .sim-result-new-state { color: var(--c-dying-3-hi); }
     .sim-result-box.dead        .sim-result-new-state { color: var(--c-dead-hi); }
     .sim-result-box.unconscious .sim-result-new-state { color: var(--c-unconscious-hi); }
-    .sim-result-msg { font-size: 0.8rem; color: var(--text); line-height: 1.6; }
 
-    /* History */
-    .sim-bottom-row {
-      display: flex; align-items: flex-start; justify-content: space-between;
-      gap: 16px; flex-wrap: wrap; margin-top: 4px;
-    }
-    .sim-history-wrap { flex: 1; min-width: 0; }
-    .sim-history-label {
-      font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 6px;
-    }
-    .sim-history-trail {
-      display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 0.78rem; min-height: 1.4em;
-    }
-    .sim-hist-state { font-weight: bold; }
     .sim-hist-state.alive       { color: var(--c-alive-hi); }
     .sim-hist-state.dying-1     { color: var(--c-dying-1-hi); }
     .sim-hist-state.dying-2     { color: var(--c-dying-2-hi); }
     .sim-hist-state.dying-3     { color: var(--c-dying-3-hi); }
     .sim-hist-state.dead        { color: var(--c-dead-hi); }
     .sim-hist-state.unconscious { color: var(--c-unconscious-hi); }
-    .sim-hist-via { color: var(--text-muted); font-size: 0.7rem; font-style: italic; }
-
-    .sim-reset-btn {
-      padding: 7px 18px; background: var(--surface2); border: 1px solid var(--border);
-      color: var(--text-muted); border-radius: 4px; cursor: pointer; font-family: inherit;
-      font-size: 0.8rem; white-space: nowrap; transition: color 0.15s, border-color 0.15s;
-    }
-    .sim-reset-btn:hover { color: var(--text); border-color: var(--text-muted); }
   </style>
 </head>
 <body>
diff --git a/global.css b/global.css
new file mode 100644
index 0000000..d13866a
--- /dev/null
+++ b/global.css
@@ -0,0 +1,196 @@
+/* ── CSS Custom Properties ── */
+:root {
+  --bg:         #161210;
+  --surface:    #211a13;
+  --surface2:   #2e2318;
+  --border:     #7a5c18;
+  --text:       #e8d5b0;
+  --text-muted: #9a7e56;
+  --accent:     #c89030;
+}
+
+/* ── Reset ── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+/* ── Body ── */
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: Georgia, 'Times New Roman', serif;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── Header ── */
+header {
+  background: var(--surface);
+  border-bottom: 2px solid var(--border);
+  padding: 14px 24px;
+  display: flex;
+  align-items: baseline;
+  gap: 16px;
+  flex-shrink: 0;
+}
+header h1 { font-size: 1.5rem; color: var(--accent); letter-spacing: 0.06em; }
+header p  { color: var(--text-muted); font-size: 0.85rem; font-style: italic; }
+
+/* ── Body layout ── */
+.layout { display: flex; flex: 1; overflow: hidden; }
+
+/* ── Sidebar ── */
+aside {
+  width: 0; min-width: 0;
+  background: var(--surface);
+  border-right: 0px solid var(--border);
+  overflow: hidden; flex-shrink: 0;
+  transition: width 0.25s ease, min-width 0.25s ease, border-width 0.25s ease;
+}
+.aside-header {
+  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
+}
+aside h2 { color: var(--accent); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; }
+.aside-close {
+  background: none; border: none; color: var(--text-muted); cursor: pointer;
+  font-size: 1.2rem; line-height: 1; padding: 0 2px; transition: color 0.15s;
+}
+.aside-close:hover { color: var(--text); }
+
+.sidebar-toggle-btn {
+  margin-left: auto;
+  background: var(--surface2); border: 1px solid var(--border);
+  color: var(--text-muted); cursor: pointer; font-family: inherit;
+  font-size: 0.8rem; padding: 5px 12px; border-radius: 4px;
+  display: flex; align-items: center; gap: 5px; white-space: nowrap;
+  transition: color 0.15s, border-color 0.15s;
+}
+.sidebar-toggle-btn:hover { color: var(--text); border-color: var(--text-muted); }
+
+.sidebar-overlay {
+  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 99;
+}
+@media (max-width: 640px) {
+  .sidebar-overlay.active { display: block; }
+  #sidebar { position: fixed; top: 0; left: 0; height: 100%; z-index: 100; }
+  .aside-inner { height: 100%; overflow-y: auto; }
+}
+
+/* ── Condition cards ── */
+.ccard { border-radius: 5px; padding: 10px 12px; margin-bottom: 9px; border: 1px solid; }
+.ccard h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 5px; }
+.ccard p  { font-size: 0.76rem; line-height: 1.55; color: var(--text); }
+.ccard .tag {
+  display: inline-block; margin-top: 6px;
+  font-size: 0.72rem; font-weight: bold; padding: 2px 7px; border-radius: 3px;
+}
+
+/* ── Main ── */
+main { flex: 1; overflow: auto; padding: 20px 24px; }
+
+/* ── Tabs ── */
+.tab-bar { display: flex; gap: 6px; margin-bottom: 0; }
+.tab-btn {
+  padding: 8px 22px; background: var(--surface2);
+  border: 1px solid var(--border); border-bottom-color: var(--border);
+  color: var(--text-muted); cursor: pointer; font-family: inherit;
+  font-size: 0.9rem; border-radius: 6px 6px 0 0;
+  transition: color 0.15s, background 0.15s;
+}
+.tab-btn.active {
+  background: var(--surface); color: var(--accent);
+  border-color: var(--accent); border-bottom-color: var(--surface);
+  position: relative; z-index: 1;
+}
+.tab-btn:hover:not(.active) { color: var(--text); }
+
+.tab-panel {
+  display: none; background: var(--surface);
+  border: 1px solid var(--accent); border-radius: 0 6px 6px 6px; padding: 24px;
+}
+.tab-panel.active { display: block; }
+.tab-panel h2 { color: var(--accent); font-size: 1.1rem; margin-bottom: 6px; }
+.tab-panel .subtitle { color: var(--text-muted); font-size: 0.82rem; font-style: italic; margin-bottom: 22px; }
+
+/* ── Diagram ── */
+.diagram-wrap { overflow-x: auto; padding: 10px 0; }
+.diagram-wrap .mermaid { display: flex; justify-content: center; }
+
+/* ── Legend ── */
+.legend { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; font-size: 0.77rem; }
+.legend-item { display: flex; align-items: center; gap: 6px; }
+.legend-dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid; flex-shrink: 0; }
+
+/* ── Note box ── */
+.note-box {
+  background: var(--surface2); border: 1px solid var(--border); border-radius: 5px;
+  padding: 12px 16px; margin-top: 20px; font-size: 0.8rem; line-height: 1.7; color: var(--text);
+}
+.note-box h3 {
+  color: var(--accent); font-size: 0.78rem; text-transform: uppercase;
+  letter-spacing: 0.1em; margin-bottom: 8px;
+}
+.note-box ul { padding-left: 16px; }
+.note-box li { margin-bottom: 4px; }
+.note-box strong { color: var(--accent); }
+
+/* ── Simulator shared ── */
+.sim-start-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
+
+.sim-chip {
+  padding: 5px 14px; border-radius: 20px; border: 1px solid;
+  background: transparent; cursor: pointer; font-family: inherit;
+  font-size: 0.78rem; font-weight: bold; letter-spacing: 0.05em; transition: opacity 0.15s;
+}
+.sim-chip:hover { opacity: 0.7; }
+
+.sim-box {
+  border-radius: 7px; border: 2px solid; padding: 18px 22px; margin-bottom: 22px;
+  transition: background 0.25s, border-color 0.25s;
+}
+.sim-box-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 4px; }
+.sim-state-name { font-size: 1.7rem; font-weight: bold; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
+.sim-state-effects { font-size: 0.8rem; color: var(--text); line-height: 1.6; }
+
+.sim-section-head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 10px; }
+.sim-actions-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
+.sim-action:hover { border-color: var(--accent); color: var(--accent); }
+.sim-action.selected { border-color: var(--accent); background: #1e1608; color: var(--accent); }
+.sim-action-name { font-weight: bold; margin-bottom: 3px; }
+.sim-action-hint { font-size: 0.7rem; color: var(--text-muted); }
+.sim-action.selected .sim-action-hint { color: #906c38; }
+
+.sim-outcomes-box {
+  background: var(--surface2); border: 1px solid var(--border); border-radius: 6px;
+  padding: 14px 18px; margin-bottom: 22px;
+}
+.sim-outcomes-head { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 10px; }
+.sim-outcome:hover { border-color: var(--accent); color: var(--accent); }
+
+.sim-result-box {
+  border-radius: 6px; border: 1px solid; padding: 14px 18px; margin-bottom: 22px;
+  animation: simFadeIn 0.25s ease;
+}
+@keyframes simFadeIn {
+  from { opacity: 0; transform: translateY(5px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.sim-result-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
+.sim-result-new-state { font-size: 1.05rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.06em; }
+.sim-result-msg { font-size: 0.8rem; color: var(--text); line-height: 1.6; }
+
+.sim-bottom-row {
+  display: flex; align-items: flex-start; justify-content: space-between;
+  gap: 16px; flex-wrap: wrap; margin-top: 4px;
+}
+.sim-history-wrap { flex: 1; min-width: 0; }
+.sim-history-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 6px; }
+.sim-history-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 0.78rem; min-height: 1.4em; }
+.sim-hist-state { font-weight: bold; }
+.sim-hist-via { color: var(--text-muted); font-size: 0.7rem; font-style: italic; }
+
+.sim-reset-btn {
+  padding: 7px 18px; background: var(--surface2); border: 1px solid var(--border);
+  color: var(--text-muted); border-radius: 4px; cursor: pointer; font-family: inherit;
+  font-size: 0.8rem; white-space: nowrap; transition: color 0.15s, border-color 0.15s;
+}
+.sim-reset-btn:hover { color: var(--text); border-color: var(--text-muted); }
diff --git a/index.html b/index.html
index 1ffe3aa..7c5d3bf 100644
--- a/index.html
+++ b/index.html
@@ -4,48 +4,14 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>PF2e Tools</title>
+  <link rel="stylesheet" href="global.css">
   <style>
-    :root {
-      --bg:         #161210;
-      --surface:    #211a13;
-      --surface2:   #2e2318;
-      --border:     #7a5c18;
-      --text:       #e8d5b0;
-      --text-muted: #9a7e56;
-      --accent:     #c89030;
-    }
-
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-    body {
-      background: var(--bg);
-      color: var(--text);
-      font-family: Georgia, 'Times New Roman', serif;
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-    }
-
-    /* ── Header ── */
-    header {
-      background: var(--surface);
-      border-bottom: 2px solid var(--border);
-      padding: 14px 24px;
-      display: flex;
-      align-items: baseline;
-      gap: 16px;
-      flex-shrink: 0;
-    }
-    header h1 { font-size: 1.5rem; color: var(--accent); letter-spacing: 0.06em; }
-    header p  { color: var(--text-muted); font-size: 0.85rem; font-style: italic; }
-
-    /* ── Main ── */
     main {
-      flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 40px 24px;
+      overflow: visible;
     }
 
     .tool-grid {
diff --git a/perception.html b/perception.html
index 052f36a..3827551 100644
--- a/perception.html
+++ b/perception.html
@@ -4,190 +4,47 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>PF2e Perception &amp; Stealth</title>
+  <link rel="stylesheet" href="global.css">
   <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
   <style>
     :root {
-      --bg:           #161210;
-      --surface:      #211a13;
-      --surface2:     #2e2318;
-      --border:       #7a5c18;
-      --text:         #e8d5b0;
-      --text-muted:   #9a7e56;
-      --accent:       #c89030;
-
-      --c-observed:       #193a14;
-      --c-observed-hi:    #5ec454;
-      --c-observed-border:#3a7c32;
-
-      --c-hidden:         #3e2e06;
-      --c-hidden-hi:      #f0c040;
-      --c-hidden-border:  #a07a10;
-
-      --c-undetected:     #3e1a06;
-      --c-undetected-hi:  #f07830;
-      --c-undetected-border:#a04010;
-
-      --c-unnoticed:      #300c0c;
-      --c-unnoticed-hi:   #f04040;
-      --c-unnoticed-border:#8a1010;
-
-      --c-concealed:      #0e2234;
-      --c-concealed-hi:   #50a8e8;
-      --c-concealed-border:#2060a0;
-
-      --c-invisible:      #180e30;
-      --c-invisible-hi:   #9070e0;
-      --c-invisible-border:#5030b0;
-    }
+      --c-observed:        #193a14;
+      --c-observed-hi:     #5ec454;
+      --c-observed-border: #3a7c32;
 
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+      --c-hidden:          #3e2e06;
+      --c-hidden-hi:       #f0c040;
+      --c-hidden-border:   #a07a10;
 
-    body {
-      background: var(--bg);
-      color: var(--text);
-      font-family: Georgia, 'Times New Roman', serif;
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-    }
+      --c-undetected:        #3e1a06;
+      --c-undetected-hi:     #f07830;
+      --c-undetected-border: #a04010;
 
-    /* ── Header ── */
-    header {
-      background: var(--surface);
-      border-bottom: 2px solid var(--border);
-      padding: 14px 24px;
-      display: flex;
-      align-items: baseline;
-      gap: 16px;
-      flex-shrink: 0;
-    }
-    header h1 {
-      font-size: 1.5rem;
-      color: var(--accent);
-      letter-spacing: 0.06em;
-    }
-    header p {
-      color: var(--text-muted);
-      font-size: 0.85rem;
-      font-style: italic;
-    }
+      --c-unnoticed:        #300c0c;
+      --c-unnoticed-hi:     #f04040;
+      --c-unnoticed-border: #8a1010;
 
-    /* ── Body layout ── */
-    .layout {
-      display: flex;
-      flex: 1;
-      overflow: hidden;
-    }
+      --c-concealed:        #0e2234;
+      --c-concealed-hi:     #50a8e8;
+      --c-concealed-border: #2060a0;
 
-    /* ── Sidebar ── */
-    aside {
-      width: 0;
-      min-width: 0;
-      background: var(--surface);
-      border-right: 0px solid var(--border);
-      overflow: hidden;
-      flex-shrink: 0;
-      transition: width 0.25s ease, min-width 0.25s ease, border-width 0.25s ease;
-    }
-    aside.open {
-      width: 270px;
-      min-width: 270px;
-      border-right-width: 1px;
-    }
-    .aside-inner {
-      width: 270px;
-      padding: 16px 14px;
-    }
-    .aside-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 12px;
-    }
-    aside h2 {
-      color: var(--accent);
-      font-size: 0.75rem;
-      text-transform: uppercase;
-      letter-spacing: 0.12em;
-      margin-bottom: 0;
-    }
-    .aside-close {
-      background: none;
-      border: none;
-      color: var(--text-muted);
-      cursor: pointer;
-      font-size: 1.2rem;
-      line-height: 1;
-      padding: 0 2px;
-      transition: color 0.15s;
-    }
-    .aside-close:hover { color: var(--text); }
-
-    .sidebar-toggle-btn {
-      margin-left: auto;
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      color: var(--text-muted);
-      cursor: pointer;
-      font-family: inherit;
-      font-size: 0.8rem;
-      padding: 5px 12px;
-      border-radius: 4px;
-      display: flex;
-      align-items: center;
-      gap: 5px;
-      white-space: nowrap;
-      transition: color 0.15s, border-color 0.15s;
-    }
-    .sidebar-toggle-btn:hover { color: var(--text); border-color: var(--text-muted); }
-
-    .sidebar-overlay {
-      display: none;
-      position: fixed;
-      inset: 0;
-      background: rgba(0, 0, 0, 0.6);
-      z-index: 99;
-    }
-    @media (max-width: 640px) {
-      .sidebar-overlay.active { display: block; }
-      #sidebar {
-        position: fixed;
-        top: 0;
-        left: 0;
-        height: 100%;
-        z-index: 100;
-      }
-      .aside-inner {
-        height: 100%;
-        overflow-y: auto;
-      }
+      --c-invisible:        #180e30;
+      --c-invisible-hi:     #9070e0;
+      --c-invisible-border: #5030b0;
     }
 
-    .ccard {
-      border-radius: 5px;
-      padding: 10px 12px;
-      margin-bottom: 9px;
-      border: 1px solid;
-    }
-    .ccard h3 {
-      font-size: 0.8rem;
-      text-transform: uppercase;
-      letter-spacing: 0.07em;
-      margin-bottom: 5px;
-    }
-    .ccard p {
-      font-size: 0.76rem;
-      line-height: 1.55;
-      color: var(--text);
-    }
-    .ccard .tag {
-      display: inline-block;
-      margin-top: 6px;
-      font-size: 0.72rem;
-      font-weight: bold;
-      padding: 2px 7px;
-      border-radius: 3px;
+    aside.open  { width: 270px; min-width: 270px; border-right-width: 1px; }
+    .aside-inner { width: 270px; padding: 16px 14px; }
+
+    .diagram-wrap .mermaid { min-width: 600px; }
+
+    .cover-box {
+      margin-top: 14px; padding: 10px 12px;
+      background: var(--surface2); border: 1px solid var(--border); border-radius: 5px;
+      font-size: 0.76rem; line-height: 1.7;
     }
+    .cover-box h3 { color: var(--accent); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; }
+    .cover-box strong { color: var(--accent); }
 
     .ccard.observed   { background: var(--c-observed);   border-color: var(--c-observed-border); }
     .ccard.observed h3{ color: var(--c-observed-hi); }
@@ -213,337 +70,50 @@
     .ccard.invisible h3  { color: var(--c-invisible-hi); }
     .ccard.invisible .tag{ background: #100820; color: var(--c-invisible-hi); }
 
-    .cover-box {
-      margin-top: 14px;
-      padding: 10px 12px;
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      border-radius: 5px;
-      font-size: 0.76rem;
-      line-height: 1.7;
-    }
-    .cover-box h3 {
-      color: var(--accent);
-      font-size: 0.75rem;
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-      margin-bottom: 6px;
-    }
-    .cover-box strong { color: var(--accent); }
+    .sim-start-row { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
 
-    /* ── Main content ── */
-    main {
-      flex: 1;
-      overflow: auto;
-      padding: 20px 24px;
-    }
-
-    /* ── Tabs ── */
-    .tab-bar {
-      display: flex;
-      gap: 6px;
-      margin-bottom: 0;
-    }
-    .tab-btn {
-      padding: 8px 22px;
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      border-bottom-color: var(--border);
-      color: var(--text-muted);
-      cursor: pointer;
-      font-family: inherit;
-      font-size: 0.9rem;
-      border-radius: 6px 6px 0 0;
-      transition: color 0.15s, background 0.15s;
-    }
-    .tab-btn.active {
-      background: var(--surface);
-      color: var(--accent);
-      border-color: var(--accent);
-      border-bottom-color: var(--surface);
-      position: relative;
-      z-index: 1;
-    }
-    .tab-btn:hover:not(.active) { color: var(--text); }
-
-    .tab-panel {
-      display: none;
-      background: var(--surface);
-      border: 1px solid var(--accent);
-      border-radius: 0 6px 6px 6px;
-      padding: 24px;
-    }
-    .tab-panel.active { display: block; }
-
-    .tab-panel h2 {
-      color: var(--accent);
-      font-size: 1.1rem;
-      margin-bottom: 6px;
-    }
-    .tab-panel .subtitle {
-      color: var(--text-muted);
-      font-size: 0.82rem;
-      font-style: italic;
-      margin-bottom: 22px;
-    }
-
-    /* ── Mermaid container ── */
-    .diagram-wrap {
-      overflow-x: auto;
-      padding: 10px 0;
-    }
-    .diagram-wrap .mermaid {
-      display: flex;
-      justify-content: center;
-      min-width: 600px;
-    }
-
-    /* legend strip */
-    .legend {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 10px;
-      margin-bottom: 18px;
-      font-size: 0.77rem;
-    }
-    .legend-item {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
-    .legend-dot {
-      width: 13px;
-      height: 13px;
-      border-radius: 50%;
-      border: 1px solid;
-      flex-shrink: 0;
-    }
-
-    .note-box {
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      border-radius: 5px;
-      padding: 12px 16px;
-      margin-top: 20px;
-      font-size: 0.8rem;
-      line-height: 1.7;
-      color: var(--text);
-    }
-    .note-box h3 {
-      color: var(--accent);
-      font-size: 0.78rem;
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-      margin-bottom: 8px;
-    }
-    .note-box ul {
-      padding-left: 16px;
-    }
-    .note-box li { margin-bottom: 4px; }
-    .note-box strong { color: var(--accent); }
-
-    /* ── Simulator Tab ── */
-    .sim-start-row {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-bottom: 20px;
-      flex-wrap: wrap;
-    }
-    .sim-start-label {
-      font-size: 0.78rem;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-      color: var(--text-muted);
-    }
-    .sim-chip {
-      padding: 5px 14px;
-      border-radius: 20px;
-      border: 1px solid;
-      background: transparent;
-      cursor: pointer;
-      font-family: inherit;
-      font-size: 0.78rem;
-      font-weight: bold;
-      letter-spacing: 0.05em;
-      transition: opacity 0.15s;
-    }
-    .sim-chip:hover { opacity: 0.7; }
     .sim-chip.observed   { color: var(--c-observed-hi);   border-color: var(--c-observed-border); }
     .sim-chip.hidden     { color: var(--c-hidden-hi);     border-color: var(--c-hidden-border); }
     .sim-chip.undetected { color: var(--c-undetected-hi); border-color: var(--c-undetected-border); }
     .sim-chip.unnoticed  { color: var(--c-unnoticed-hi);  border-color: var(--c-unnoticed-border); }
 
-    .sim-box {
-      border-radius: 7px;
-      border: 2px solid;
-      padding: 18px 22px;
-      margin-bottom: 22px;
-      transition: background 0.25s, border-color 0.25s;
-    }
     .sim-box.observed   { background: var(--c-observed);   border-color: var(--c-observed-border); }
     .sim-box.hidden     { background: var(--c-hidden);     border-color: var(--c-hidden-border); }
     .sim-box.undetected { background: var(--c-undetected); border-color: var(--c-undetected-border); }
     .sim-box.unnoticed  { background: var(--c-unnoticed);  border-color: var(--c-unnoticed-border); }
 
-    .sim-box-label {
-      font-size: 0.7rem;
-      text-transform: uppercase;
-      letter-spacing: 0.12em;
-      color: var(--text-muted);
-      margin-bottom: 4px;
-    }
-    .sim-state-name {
-      font-size: 1.7rem;
-      font-weight: bold;
-      letter-spacing: 0.06em;
-      text-transform: uppercase;
-      margin-bottom: 6px;
-    }
     .sim-box.observed .sim-state-name   { color: var(--c-observed-hi); }
     .sim-box.hidden .sim-state-name     { color: var(--c-hidden-hi); }
     .sim-box.undetected .sim-state-name { color: var(--c-undetected-hi); }
     .sim-box.unnoticed .sim-state-name  { color: var(--c-unnoticed-hi); }
-    .sim-state-effects {
-      font-size: 0.8rem;
-      color: var(--text);
-      line-height: 1.6;
-    }
 
-    .sim-section-head {
-      font-size: 0.72rem;
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-      color: var(--text-muted);
-      margin-bottom: 10px;
-    }
-    .sim-actions-list {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-      margin-bottom: 22px;
-    }
     .sim-action {
-      padding: 9px 16px;
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      color: var(--text);
-      border-radius: 5px;
-      cursor: pointer;
-      font-family: inherit;
-      font-size: 0.83rem;
-      text-align: left;
-      max-width: 300px;
+      padding: 9px 16px; background: var(--surface2); border: 1px solid var(--border);
+      color: var(--text); border-radius: 5px; cursor: pointer; font-family: inherit;
+      font-size: 0.83rem; text-align: left; max-width: 300px;
       transition: border-color 0.15s, color 0.15s, background 0.15s;
     }
-    .sim-action:hover { border-color: var(--accent); color: var(--accent); }
-    .sim-action.selected { border-color: var(--accent); background: #1e1608; color: var(--accent); }
-    .sim-action-name { font-weight: bold; margin-bottom: 3px; }
-    .sim-action-hint { font-size: 0.7rem; color: var(--text-muted); }
-    .sim-action.selected .sim-action-hint { color: #906c38; }
-
-    .sim-outcomes-box {
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      padding: 14px 18px;
-      margin-bottom: 22px;
-    }
-    .sim-outcomes-head {
-      font-size: 0.78rem;
-      color: var(--text-muted);
-      margin-bottom: 10px;
-    }
-    .sim-outcomes-list {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-    }
+    .sim-outcomes-list { display: flex; flex-wrap: wrap; gap: 8px; }
     .sim-outcome {
-      padding: 7px 16px;
-      background: var(--surface);
-      border: 1px solid var(--border);
-      color: var(--text);
-      border-radius: 4px;
-      cursor: pointer;
-      font-family: inherit;
-      font-size: 0.82rem;
+      padding: 7px 16px; background: var(--surface); border: 1px solid var(--border);
+      color: var(--text); border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 0.82rem;
       transition: border-color 0.15s, color 0.15s;
     }
-    .sim-outcome:hover { border-color: var(--accent); color: var(--accent); }
-
-    .sim-result-box {
-      border-radius: 6px;
-      border: 1px solid;
-      padding: 14px 18px;
-      margin-bottom: 22px;
-      animation: simFadeIn 0.25s ease;
-    }
-    @keyframes simFadeIn {
-      from { opacity: 0; transform: translateY(5px); }
-      to   { opacity: 1; transform: translateY(0); }
-    }
+
     .sim-result-box.observed   { background: var(--c-observed);   border-color: var(--c-observed-border); }
     .sim-result-box.hidden     { background: var(--c-hidden);     border-color: var(--c-hidden-border); }
     .sim-result-box.undetected { background: var(--c-undetected); border-color: var(--c-undetected-border); }
     .sim-result-box.unnoticed  { background: var(--c-unnoticed);  border-color: var(--c-unnoticed-border); }
-    .sim-result-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
-    .sim-result-new-state {
-      font-size: 1.05rem;
-      font-weight: bold;
-      text-transform: uppercase;
-      letter-spacing: 0.06em;
-    }
+
     .sim-result-box.observed .sim-result-new-state   { color: var(--c-observed-hi); }
     .sim-result-box.hidden .sim-result-new-state     { color: var(--c-hidden-hi); }
     .sim-result-box.undetected .sim-result-new-state { color: var(--c-undetected-hi); }
     .sim-result-box.unnoticed .sim-result-new-state  { color: var(--c-unnoticed-hi); }
-    .sim-result-msg { font-size: 0.8rem; color: var(--text); line-height: 1.6; }
-
-    .sim-bottom-row {
-      display: flex;
-      align-items: flex-start;
-      justify-content: space-between;
-      gap: 16px;
-      flex-wrap: wrap;
-      margin-top: 4px;
-    }
-    .sim-history-wrap { flex: 1; min-width: 0; }
-    .sim-history-label {
-      font-size: 0.7rem;
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-      color: var(--text-muted);
-      margin-bottom: 6px;
-    }
-    .sim-history-trail {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 4px;
-      font-size: 0.78rem;
-      min-height: 1.4em;
-    }
-    .sim-hist-state { font-weight: bold; }
+
     .sim-hist-state.observed   { color: var(--c-observed-hi); }
     .sim-hist-state.hidden     { color: var(--c-hidden-hi); }
     .sim-hist-state.undetected { color: var(--c-undetected-hi); }
     .sim-hist-state.unnoticed  { color: var(--c-unnoticed-hi); }
-    .sim-hist-via { color: var(--text-muted); font-size: 0.7rem; font-style: italic; }
-
-    .sim-reset-btn {
-      padding: 7px 18px;
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      color: var(--text-muted);
-      border-radius: 4px;
-      cursor: pointer;
-      font-family: inherit;
-      font-size: 0.8rem;
-      white-space: nowrap;
-      transition: color 0.15s, border-color 0.15s;
-    }
-    .sim-reset-btn:hover { color: var(--text); border-color: var(--text-muted); }
   </style>
 </head>
 <body>