forgebook 0.1.3 → 0.1.5

package/dist/src/shell/shell.css

@@ -1,9 +1,107 @@
 @layer catalogue {
+  :root {
+    --forgebook-window: #f6f6f8;
+    --forgebook-sidebar: #ebebef;
+    --forgebook-surface: #fff;
+    --forgebook-fill: rgba(29, 29, 31, 0.0784313725);
+    --forgebook-fill-quiet: rgba(29, 29, 31, 0.0509803922);
+    --forgebook-hover: rgba(29, 29, 31, 0.0392156863);
+    --forgebook-separator: rgba(29, 29, 31, 0.0901960784);
+    --forgebook-text: #1d1d1f;
+    --forgebook-text-secondary: #56565d;
+    --forgebook-text-tertiary: #6a6a71;
+    --forgebook-accent: #0a6cf0;
+    --forgebook-accent-text: #0059d2;
+    --forgebook-on-accent: #fff;
+    --forgebook-danger-text: #bc1f16;
+    --forgebook-code-keyword: #7036c4;
+    --forgebook-code-type: #0059d2;
+    --forgebook-code-string: #077229;
+    --forgebook-code-number: #935200;
+    --forgebook-code-punctuation: #6a6a71;
+    --forgebook-code-name: #1d1d1f;
+    --forgebook-edge: rgba(29, 29, 31, 0.1450980392);
+    --forgebook-edge-hover: rgba(29, 29, 31, 0.2392156863);
+    --forgebook-edge-field: rgba(29, 29, 31, 0.1803921569);
+    --forgebook-card-edge: rgba(0, 0, 0, 0.0588235294);
+    --forgebook-card-edge-hover: rgba(0, 0, 0, 0.1019607843);
+    --forgebook-shadow-soft: rgba(0, 0, 0, 0.0509803922);
+    --forgebook-shadow-lift: rgba(0, 0, 0, 0.0705882353);
+    --forgebook-shadow-deep: rgba(0, 0, 0, 0.2);
+    --forgebook-shade: rgba(29, 29, 31, 0.2);
+    color-scheme: light;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-forgebook-appearance]) {
+      --forgebook-window: #161618;
+      --forgebook-sidebar: #1e1e21;
+      --forgebook-surface: #252529;
+      --forgebook-fill: rgba(255, 255, 255, 0.1215686275);
+      --forgebook-fill-quiet: rgba(255, 255, 255, 0.0705882353);
+      --forgebook-hover: rgba(255, 255, 255, 0.0588235294);
+      --forgebook-separator: rgba(255, 255, 255, 0.1019607843);
+      --forgebook-text: #f2f2f4;
+      --forgebook-text-secondary: #b6b6bd;
+      --forgebook-text-tertiary: #9d9da5;
+      --forgebook-accent: #1f6fe5;
+      --forgebook-accent-text: #7ab3ff;
+      --forgebook-on-accent: #fff;
+      --forgebook-danger-text: #ff8a80;
+      --forgebook-code-keyword: #c9a8ff;
+      --forgebook-code-type: #7ab3ff;
+      --forgebook-code-string: #7fdc8f;
+      --forgebook-code-number: #f2b46b;
+      --forgebook-code-punctuation: #9d9da5;
+      --forgebook-code-name: #f2f2f4;
+      --forgebook-edge: rgba(255, 255, 255, 0.1490196078);
+      --forgebook-edge-hover: rgba(255, 255, 255, 0.2509803922);
+      --forgebook-edge-field: rgba(255, 255, 255, 0.1803921569);
+      --forgebook-card-edge: rgba(255, 255, 255, 0.0901960784);
+      --forgebook-card-edge-hover: rgba(255, 255, 255, 0.1490196078);
+      --forgebook-shadow-soft: rgba(0, 0, 0, 0.3019607843);
+      --forgebook-shadow-lift: rgba(0, 0, 0, 0.4);
+      --forgebook-shadow-deep: rgba(0, 0, 0, 0.5019607843);
+      --forgebook-shade: rgba(0, 0, 0, 0.4509803922);
+      color-scheme: dark;
+    }
+  }
+  :root[data-forgebook-appearance=dark] {
+    --forgebook-window: #161618;
+    --forgebook-sidebar: #1e1e21;
+    --forgebook-surface: #252529;
+    --forgebook-fill: rgba(255, 255, 255, 0.1215686275);
+    --forgebook-fill-quiet: rgba(255, 255, 255, 0.0705882353);
+    --forgebook-hover: rgba(255, 255, 255, 0.0588235294);
+    --forgebook-separator: rgba(255, 255, 255, 0.1019607843);
+    --forgebook-text: #f2f2f4;
+    --forgebook-text-secondary: #b6b6bd;
+    --forgebook-text-tertiary: #9d9da5;
+    --forgebook-accent: #1f6fe5;
+    --forgebook-accent-text: #7ab3ff;
+    --forgebook-on-accent: #fff;
+    --forgebook-danger-text: #ff8a80;
+    --forgebook-code-keyword: #c9a8ff;
+    --forgebook-code-type: #7ab3ff;
+    --forgebook-code-string: #7fdc8f;
+    --forgebook-code-number: #f2b46b;
+    --forgebook-code-punctuation: #9d9da5;
+    --forgebook-code-name: #f2f2f4;
+    --forgebook-edge: rgba(255, 255, 255, 0.1490196078);
+    --forgebook-edge-hover: rgba(255, 255, 255, 0.2509803922);
+    --forgebook-edge-field: rgba(255, 255, 255, 0.1803921569);
+    --forgebook-card-edge: rgba(255, 255, 255, 0.0901960784);
+    --forgebook-card-edge-hover: rgba(255, 255, 255, 0.1490196078);
+    --forgebook-shadow-soft: rgba(0, 0, 0, 0.3019607843);
+    --forgebook-shadow-lift: rgba(0, 0, 0, 0.4);
+    --forgebook-shadow-deep: rgba(0, 0, 0, 0.5019607843);
+    --forgebook-shade: rgba(0, 0, 0, 0.4509803922);
+    color-scheme: dark;
+  }
   body {
     margin: 0;
     font: 400 0.8125rem/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #1d1d1f;
-    background: #f6f6f8;
+    color: var(--forgebook-text);
+    background: var(--forgebook-window);
   }
   .catalogue {
     display: flex;
@@ -29,10 +127,17 @@
     height: 100vh;
     padding: 1rem 0.75rem 0;
     overflow: clip;
-    background: #ebebef;
-    border-inline-end: 1px solid rgba(29, 29, 31, 0.0901960784);
+    background: var(--forgebook-sidebar);
+    border-inline-end: 1px solid var(--forgebook-separator);
     transition: margin-inline-start 320ms cubic-bezier(0.32, 0.72, 0, 1);
   }
+  .forgebook-appearance {
+    position: relative;
+    flex: none;
+    margin: 0 -0.75rem;
+    padding: 0.5rem 0.75rem 0.75rem;
+    box-shadow: inset 0 1px 0 var(--forgebook-separator);
+  }
   .forgebook-sidebar-handle {
     flex: none;
     width: 5px;
@@ -42,7 +147,7 @@
     z-index: 1;
   }
   .forgebook-sidebar-handle:hover, .forgebook-sidebar-handle:active, .forgebook-sidebar-handle:focus-visible {
-    background: color-mix(in srgb, #0a6cf0 35%, transparent);
+    background: color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
     outline: none;
   }
   .forgebook-brand__hide {
@@ -61,8 +166,8 @@
     width: 1.75rem;
     height: 1.75rem;
     border-radius: 7px;
-    background: #0a6cf0;
-    color: #fff;
+    background: var(--forgebook-accent);
+    color: var(--forgebook-on-accent);
   }
   .forgebook-brand__logo {
     flex: none;
@@ -84,12 +189,12 @@
     transition: background-color 150ms ease-out;
   }
   .forgebook-brand__home:hover {
-    background: rgba(29, 29, 31, 0.0392156863);
+    background: var(--forgebook-hover);
   }
   .forgebook-brand__home:focus-visible:focus-visible {
-    outline: 2px solid color-mix(in srgb, #0a6cf0 35%, transparent);
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
     outline-offset: 0;
-    box-shadow: inset 0 0 0 1px #0a6cf0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
   }
   .forgebook-search {
     display: flex;
@@ -99,12 +204,12 @@
     height: 1.75rem;
     padding: 0 0.5rem;
     border-radius: 7px;
-    background: rgba(29, 29, 31, 0.0784313725);
-    color: #56565d;
+    background: var(--forgebook-fill);
+    color: var(--forgebook-text-secondary);
   }
   .forgebook-search:focus-within {
-    box-shadow: inset 0 0 0 1px #0a6cf0;
-    outline: 2px solid color-mix(in srgb, #0a6cf0 35%, transparent);
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
   }
   .forgebook-search input {
     flex: 1;
@@ -112,7 +217,7 @@
     border: 0;
     background: none;
     font: 400 0.78125rem/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #1d1d1f;
+    color: var(--forgebook-text);
     outline: none;
   }
   .forgebook-search input::-webkit-search-cancel-button {
@@ -128,18 +233,18 @@
     padding: 0;
     border: 0;
     border-radius: 50%;
-    background: #6a6a71;
-    color: #fff;
+    background: var(--forgebook-text-tertiary);
+    color: var(--forgebook-surface);
     cursor: pointer;
     transition: background-color 150ms ease-out;
   }
   .forgebook-search__clear:hover {
-    background: #56565d;
+    background: var(--forgebook-text-secondary);
   }
   .forgebook-search__clear:focus-visible:focus-visible {
-    outline: 2px solid color-mix(in srgb, #0a6cf0 35%, transparent);
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
     outline-offset: 0;
-    box-shadow: inset 0 0 0 1px #0a6cf0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
   }
   .forgebook-search:focus-within .forgebook-search__key {
     display: none;
@@ -148,9 +253,9 @@
     flex: none;
     padding: 0 0.375rem;
     border-radius: 6px;
-    box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 0.1450980392);
+    box-shadow: inset 0 0 0 1px var(--forgebook-edge);
     font: 400 0.6875rem/1.6 "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
-    color: #6a6a71;
+    color: var(--forgebook-text-tertiary);
   }
   .forgebook-tree {
     flex: 1;
@@ -164,7 +269,7 @@
   }
   .forgebook-tree__empty {
     margin: 0.5rem;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
   }
   .forgebook-tree__source + .forgebook-tree__source {
     margin-top: 0.75rem;
@@ -178,7 +283,7 @@
     font: 600 0.6875rem/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
     letter-spacing: 0.04em;
     text-transform: uppercase;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
   }
   .forgebook-source-logo {
     flex: none;
@@ -197,48 +302,82 @@
     border-radius: 6px;
     background: none;
     font: 500 0.8125rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #1d1d1f;
+    color: var(--forgebook-text);
     text-align: start;
     text-decoration: none;
   }
   .forgebook-tree__family-button:focus-visible,
   .forgebook-tree__item:focus-visible {
-    outline: 2px solid color-mix(in srgb, #0a6cf0 35%, transparent);
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
     outline-offset: -2px;
-    box-shadow: inset 0 0 0 1px #0a6cf0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
   }
   .forgebook-tree__family-button:hover,
   .forgebook-tree__item:hover {
-    background: rgba(29, 29, 31, 0.0509803922);
+    background: var(--forgebook-fill-quiet);
   }
   .forgebook-tree__family-button {
     font-weight: 600;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
   }
   .forgebook-tree__family-name {
     flex: 1;
   }
+  .forgebook-tree__chevron {
+    display: inline-flex;
+    transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  .forgebook-tree__chevron[data-open] {
+    transform: rotate(90deg);
+  }
   .forgebook-tree__group {
     display: flex;
     flex-direction: column;
     padding-inline-start: 1rem;
   }
   .forgebook-tree__group-name {
-    margin: 0.375rem 0 0.125rem;
-    padding: 0 0.5rem;
-    font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #6a6a71;
+    margin: 0.125rem 0 0;
+    font: inherit;
+  }
+  .forgebook-tree__group > .forgebook-tree__fold {
+    padding-inline-start: calc(0.75rem + 0.375rem);
+  }
+  .forgebook-tree__group-button {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0.25rem 0.5rem;
+    border: 0;
+    border-radius: 6px;
+    background: none;
+    min-height: 1.625rem;
+    font: 500 0.8125rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
+    font-weight: 500;
+    color: var(--forgebook-text-secondary);
+    text-align: start;
+    cursor: pointer;
+  }
+  .forgebook-tree__group-button:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
+  }
+  .forgebook-tree__group-button:hover {
+    background: var(--forgebook-hover);
+    color: var(--forgebook-text);
   }
   .forgebook-tree__item {
     font: 400 0.78125rem/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
   }
   .forgebook-tree__item[aria-current=page], .forgebook-tree__item[aria-current=location] {
-    background: #fff;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.0588235294), 0 1px 3px rgba(0, 0, 0, 0.0509803922);
+    background: var(--forgebook-surface);
+    box-shadow: 0 0 0 1px var(--forgebook-card-edge), 0 1px 3px var(--forgebook-shadow-soft);
     font-weight: 500;
   }
   .forgebook-tree__item[aria-current=page] {
-    color: #0059d2;
+    color: var(--forgebook-accent-text);
   }
   .forgebook-tree__item-name {
     flex: 1;
@@ -248,12 +387,12 @@
     align-items: center;
     gap: 0.125rem;
     font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #6a6a71;
+    color: var(--forgebook-text-tertiary);
   }
   .forgebook-tree__count {
     font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
     font-variant-numeric: tabular-nums;
-    color: #6a6a71;
+    color: var(--forgebook-text-tertiary);
   }
   .forgebook-main {
     position: relative;
@@ -290,7 +429,7 @@
   }
   .forgebook-story .forgebook-compare {
     border-radius: 12px;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.0588235294), 0 1px 3px rgba(0, 0, 0, 0.0509803922);
+    box-shadow: 0 0 0 1px var(--forgebook-card-edge), 0 1px 3px var(--forgebook-shadow-soft);
     overflow: hidden;
   }
   .forgebook-story__bar {
@@ -305,9 +444,9 @@
     gap: 0.125rem;
     padding: 0.125rem 0.125rem 0.125rem 0.5rem;
     border-radius: 7px;
-    background: rgba(29, 29, 31, 0.0784313725);
+    background: var(--forgebook-fill);
     font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
   }
   .forgebook-matrix-picker .forgebook-popover__label {
     margin-inline-end: 0.25rem;
@@ -320,8 +459,8 @@
     box-shadow: none;
   }
   .forgebook-matrix-picker .forgebook-select[data-set], .forgebook-matrix-picker .forgebook-select:hover:not(:disabled), .forgebook-matrix-picker .forgebook-select:focus-visible {
-    background-color: #fff;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.0588235294), 0 1px 3px rgba(0, 0, 0, 0.0509803922);
+    background-color: var(--forgebook-surface);
+    box-shadow: 0 0 0 1px var(--forgebook-card-edge), 0 1px 3px var(--forgebook-shadow-soft);
   }
   .forgebook-dock {
     position: relative;
@@ -329,8 +468,8 @@
     display: flex;
     flex-direction: column;
     min-height: 0;
-    background: #fff;
-    box-shadow: inset 0 1px 0 rgba(29, 29, 31, 0.0901960784);
+    background: var(--forgebook-surface);
+    box-shadow: inset 0 1px 0 var(--forgebook-separator);
   }
   .forgebook-dock__handle {
     position: absolute;
@@ -341,7 +480,7 @@
     touch-action: none;
   }
   .forgebook-dock__handle:hover, .forgebook-dock__handle:active, .forgebook-dock__handle:focus-visible {
-    background: color-mix(in srgb, #0a6cf0 35%, transparent);
+    background: color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
     outline: none;
   }
   .forgebook-dock__bar {
@@ -351,7 +490,7 @@
     justify-content: space-between;
     gap: 0.75rem;
     padding: 0 0.75rem 0 1.25rem;
-    box-shadow: inset 0 -1px 0 rgba(29, 29, 31, 0.0901960784);
+    box-shadow: inset 0 -1px 0 var(--forgebook-separator);
   }
   .forgebook-dock__tabs {
     display: flex;
@@ -369,21 +508,21 @@
     border-block-end: 2px solid transparent;
     background: none;
     font: 500 0.75rem/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
     white-space: nowrap;
     cursor: pointer;
   }
   .forgebook-dock__tab:focus-visible {
-    outline: 2px solid color-mix(in srgb, #0a6cf0 35%, transparent);
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
     outline-offset: -2px;
-    box-shadow: inset 0 0 0 1px #0a6cf0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
   }
   .forgebook-dock__tab:hover {
-    color: #1d1d1f;
+    color: var(--forgebook-text);
   }
   .forgebook-dock__tab[aria-selected=true] {
-    border-block-end-color: #0a6cf0;
-    color: #1d1d1f;
+    border-block-end-color: var(--forgebook-accent);
+    color: var(--forgebook-text);
     font-weight: 500;
   }
   .forgebook-dock__body {
@@ -401,17 +540,17 @@
     border: 0;
     border-radius: 7px;
     background: none;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
     cursor: pointer;
   }
   .forgebook-icon-button:focus-visible {
-    outline: 2px solid color-mix(in srgb, #0a6cf0 35%, transparent);
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
     outline-offset: 0;
-    box-shadow: inset 0 0 0 1px #0a6cf0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
   }
   .forgebook-icon-button:hover {
-    background: rgba(29, 29, 31, 0.0392156863);
-    color: #1d1d1f;
+    background: var(--forgebook-hover);
+    color: var(--forgebook-text);
   }
   .forgebook-tab-columns {
     display: grid;
@@ -426,24 +565,67 @@
     margin: 0;
     padding: 0.75rem 0.875rem 0;
     font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
   }
   .forgebook-tab-foot {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
     padding: 0.625rem 0.875rem;
-    box-shadow: inset 0 1px 0 rgba(29, 29, 31, 0.0901960784);
+    box-shadow: inset 0 1px 0 var(--forgebook-separator);
+  }
+  .forgebook-tab-foot__note {
+    margin-inline-start: auto;
+    font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
+    color: var(--forgebook-text-secondary);
+  }
+  .forgebook-tab-foot__note[data-has-spills=true] {
+    color: var(--forgebook-danger-text);
   }
   .forgebook-toolbar {
     container: toolbar/inline-size;
     position: relative;
-    z-index: 1;
+    z-index: 3;
     flex: none;
     display: flex;
     align-items: center;
     gap: 0.75rem;
     height: 2.75rem;
     padding: 0 1.5rem;
-    background: #f6f6f8;
-    box-shadow: inset 0 -1px 0 rgba(29, 29, 31, 0.0901960784);
+    background: var(--forgebook-window);
+    box-shadow: inset 0 -1px 0 var(--forgebook-separator);
+  }
+  .forgebook-toolbar__pinned {
+    position: relative;
+    flex: none;
+  }
+  .forgebook-toolbar__changed {
+    position: absolute;
+    top: -0.125rem;
+    right: -0.125rem;
+    pointer-events: none;
+  }
+  .forgebook-toolbar__pinned-list {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+  .forgebook-toolbar.forgebook-toolbar--wrap {
+    box-sizing: border-box;
+    align-items: flex-start;
+    height: auto;
+    min-height: 2.75rem;
+    padding-block: 0.5625rem;
+  }
+  .forgebook-toolbar.forgebook-toolbar--wrap .forgebook-toolbar__pinned-list {
+    flex-wrap: wrap;
+    row-gap: 0.5rem;
+  }
+  .forgebook-toolbar.forgebook-toolbar--wrap .forgebook-toolbar__divider {
+    align-self: stretch;
+    margin: 0;
   }
   .forgebook-toolbar__group {
     display: flex;
@@ -453,10 +635,7 @@
   .forgebook-toolbar__divider {
     align-self: stretch;
     margin: 0.75rem 0;
-    border-inline-start: 1px solid rgba(29, 29, 31, 0.0901960784);
-  }
-  .forgebook-toolbar__spacer {
-    flex: 1;
+    border-inline-start: 1px solid var(--forgebook-separator);
   }
   @container toolbar (max-width: 46rem) {
     .forgebook-toolbar__width .forgebook-segmented__option {
@@ -486,13 +665,13 @@
     padding: 0 0.5rem 0 0.25rem;
     border-radius: 6px;
     font: 500 0.75rem/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
     transition: background-color 150ms ease-out, box-shadow 150ms ease-out;
   }
   .forgebook-width-field[data-custom], .forgebook-width-field:focus-within {
-    background: #fff;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.0588235294), 0 1px 3px rgba(0, 0, 0, 0.0509803922);
-    color: #1d1d1f;
+    background: var(--forgebook-surface);
+    box-shadow: 0 0 0 1px var(--forgebook-card-edge), 0 1px 3px var(--forgebook-shadow-soft);
+    color: var(--forgebook-text);
   }
   .forgebook-width-field__input {
     box-sizing: border-box;
@@ -507,14 +686,14 @@
     text-align: end;
   }
   .forgebook-width-field__input::placeholder {
-    color: #6a6a71;
+    color: var(--forgebook-text-tertiary);
   }
   .forgebook-width-field__input:focus-visible {
     outline: none;
   }
   .forgebook-width-field__unit {
     font: 400 0.6875rem/1.6 "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
-    color: #6a6a71;
+    color: var(--forgebook-text-tertiary);
   }
   .forgebook-stage-tools {
     position: absolute;
@@ -526,8 +705,8 @@
     gap: 0.25rem;
     padding: 0.25rem;
     border-radius: 999px;
-    background: #fff;
-    box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.1450980392), 0 18px 48px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.0588235294);
+    background: var(--forgebook-surface);
+    box-shadow: 0 0 0 1px var(--forgebook-edge), 0 18px 48px var(--forgebook-shadow-deep), 0 4px 12px var(--forgebook-shadow-lift);
     animation: forgebook-rise 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
   }
   .forgebook-stage-tools__group {
@@ -539,7 +718,7 @@
     align-self: stretch;
     width: 1px;
     margin: 0.25rem 0.125rem;
-    background: rgba(29, 29, 31, 0.0901960784);
+    background: var(--forgebook-separator);
   }
   .forgebook-stage-tools__button,
   .forgebook-stage-tools__zoom {
@@ -550,14 +729,14 @@
     border: 0;
     border-radius: 999px;
     background: none;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
     cursor: pointer;
     transition: color 150ms ease-out, background-color 150ms ease-out, transform 150ms ease-out;
   }
   .forgebook-stage-tools__button:hover:not(:disabled),
   .forgebook-stage-tools__zoom:hover:not(:disabled) {
-    background: rgba(29, 29, 31, 0.0392156863);
-    color: #1d1d1f;
+    background: var(--forgebook-hover);
+    color: var(--forgebook-text);
   }
   .forgebook-stage-tools__button:active:not(:disabled),
   .forgebook-stage-tools__zoom:active:not(:disabled) {
@@ -565,9 +744,9 @@
   }
   .forgebook-stage-tools__button:focus-visible:focus-visible,
   .forgebook-stage-tools__zoom:focus-visible:focus-visible {
-    outline: 2px solid color-mix(in srgb, #0a6cf0 35%, transparent);
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
     outline-offset: 0;
-    box-shadow: inset 0 0 0 1px #0a6cf0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
   }
   .forgebook-stage-tools__button:disabled,
   .forgebook-stage-tools__zoom:disabled {
@@ -578,15 +757,15 @@
     width: 1.75rem;
   }
   .forgebook-stage-tools__button[aria-pressed=true] {
-    background: color-mix(in srgb, #0a6cf0 12%, transparent);
-    color: #0059d2;
+    background: color-mix(in srgb, var(--forgebook-accent) 12%, transparent);
+    color: var(--forgebook-accent-text);
   }
   .forgebook-stage-tools__zoom {
     min-width: 3.25rem;
     padding: 0 0.375rem;
     font: 400 0.6875rem/1.6 "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
     font-variant-numeric: tabular-nums;
-    color: #1d1d1f;
+    color: var(--forgebook-text);
   }
   .forgebook-stage-tools__zoom:disabled {
     opacity: 1;
@@ -594,7 +773,7 @@
   .forgebook-toolbar__icon {
     display: inline-flex;
     margin-inline-end: -0.375rem;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
   }
   .forgebook-button {
     display: inline-flex;
@@ -605,27 +784,36 @@
     padding: 0 0.625rem;
     border: 0;
     border-radius: 7px;
-    background: #fff;
-    box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 0.1450980392);
+    background: var(--forgebook-surface);
+    box-shadow: inset 0 0 0 1px var(--forgebook-edge);
     font: 500 0.75rem/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #1d1d1f;
+    color: var(--forgebook-text);
     white-space: nowrap;
   }
   .forgebook-button:focus-visible {
-    outline: 2px solid color-mix(in srgb, #0a6cf0 35%, transparent);
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
     outline-offset: 0;
-    box-shadow: inset 0 0 0 1px #0a6cf0, inset 0 0 0 1px rgba(29, 29, 31, 0.1450980392);
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent), inset 0 0 0 1px var(--forgebook-edge);
   }
   .forgebook-button:hover {
-    box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 0.2392156863);
+    box-shadow: inset 0 0 0 1px var(--forgebook-edge-hover);
   }
   .forgebook-button[aria-pressed=true] {
-    background: color-mix(in srgb, #0a6cf0 12%, transparent);
-    color: #0059d2;
+    background: color-mix(in srgb, var(--forgebook-accent) 12%, transparent);
+    color: var(--forgebook-accent-text);
   }
   .forgebook-button:disabled {
     opacity: 0.45;
   }
+  .forgebook-button.forgebook-button--quiet {
+    background: transparent;
+    box-shadow: none;
+    color: var(--forgebook-text-secondary);
+  }
+  .forgebook-button.forgebook-button--quiet:hover {
+    background: var(--forgebook-hover);
+    color: var(--forgebook-text);
+  }
   .forgebook-clock {
     display: inline-flex;
     flex: none;
@@ -640,28 +828,31 @@
     justify-content: center;
     width: 1.625rem;
     padding: 0;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
   }
   .forgebook-button--icon:hover {
-    color: #1d1d1f;
+    color: var(--forgebook-text);
   }
   .forgebook-text-button {
     padding: 0;
     border: 0;
     background: none;
     font: 500 0.75rem/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #0059d2;
+    color: var(--forgebook-accent-text);
   }
   .forgebook-text-button:focus-visible {
-    outline: 2px solid color-mix(in srgb, #0a6cf0 35%, transparent);
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
     outline-offset: 0;
-    box-shadow: inset 0 0 0 1px #0a6cf0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
+  }
+  .forgebook-text-button:disabled {
+    color: var(--forgebook-text-tertiary);
   }
   .forgebook-dot {
     width: 0.375rem;
     height: 0.375rem;
     border-radius: 50%;
-    background: #0a6cf0;
+    background: var(--forgebook-accent);
   }
   .forgebook-segmented {
     display: inline-flex;
@@ -670,7 +861,7 @@
     padding: 0.125rem;
     border: 0;
     border-radius: 7px;
-    background: rgba(29, 29, 31, 0.0784313725);
+    background: var(--forgebook-fill);
   }
   .forgebook-segmented:disabled {
     opacity: 0.45;
@@ -684,22 +875,23 @@
     padding: 0 0.5rem;
     border-radius: 6px;
     font: 500 0.75rem/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
   }
   input:checked + .forgebook-segmented__face {
-    background: #fff;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.0588235294), 0 1px 3px rgba(0, 0, 0, 0.0509803922);
-    color: #1d1d1f;
+    background: var(--forgebook-surface);
+    box-shadow: 0 0 0 1px var(--forgebook-card-edge), 0 1px 3px var(--forgebook-shadow-soft);
+    color: var(--forgebook-text);
   }
   input:focus-visible + .forgebook-segmented__face {
-    box-shadow: inset 0 0 0 1px #0a6cf0;
-    outline: 2px solid color-mix(in srgb, #0a6cf0 35%, transparent);
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
   }
   .forgebook-view-menu {
     position: relative;
   }
   .forgebook-popover {
     position: absolute;
+    z-index: 2;
     top: calc(100% + 0.375rem);
     left: 0;
     display: flex;
@@ -707,12 +899,20 @@
     gap: 0.75rem;
     padding: 0.875rem;
     border-radius: 12px;
-    background: #fff;
-    box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.1450980392), 0 18px 48px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.0588235294);
+    background: var(--forgebook-surface);
+    box-shadow: 0 0 0 1px var(--forgebook-edge), 0 18px 48px var(--forgebook-shadow-deep), 0 4px 12px var(--forgebook-shadow-lift);
     white-space: nowrap;
+    transform-origin: top left;
+  }
+  .forgebook-popover.forgebook-popover--up {
+    top: auto;
+    bottom: calc(100% - 0.25rem);
+    left: 0.75rem;
+    transform-origin: bottom left;
   }
   .forgebook-popover.forgebook-popover--end {
     inset-inline: auto 0;
+    transform-origin: top right;
   }
   .forgebook-choices {
     display: grid;
@@ -733,20 +933,298 @@
     cursor: pointer;
   }
   .forgebook-choice:hover {
-    background: rgba(29, 29, 31, 0.0392156863);
+    background: var(--forgebook-hover);
   }
   .forgebook-choice[data-disabled] {
     cursor: default;
     opacity: 0.45;
   }
-  .forgebook-popover__row {
+  .forgebook-popover--arrange {
+    box-sizing: border-box;
+    width: max-content;
+  }
+  .forgebook-popover__body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    min-height: 0;
+    margin: -0.25rem -0.25rem;
+    padding: 0.25rem;
+    overflow-y: auto;
+  }
+  .forgebook-info-tip {
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    width: 1.375rem;
+    height: 1.375rem;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--forgebook-text-tertiary);
+  }
+  .forgebook-info-tip:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
+  }
+  .forgebook-info-tip:hover {
+    color: var(--forgebook-text);
+  }
+  .forgebook-info-tip__note {
+    position: fixed;
+    inset: auto;
+    max-width: 18rem;
+    margin: 0;
+    padding: 0.5rem 0.625rem;
+    border: 0;
+    border-radius: 7px;
+    background: var(--forgebook-surface);
+    box-shadow: 0 0 0 1px var(--forgebook-edge), 0 18px 48px var(--forgebook-shadow-deep), 0 4px 12px var(--forgebook-shadow-lift);
+    font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
+    color: var(--forgebook-text);
+    white-space: normal;
+  }
+  .forgebook-named-views {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.375rem;
+    width: 0;
+    min-width: 100%;
+    padding-block-end: 0.75rem;
+    box-shadow: inset 0 -1px 0 var(--forgebook-separator);
+    white-space: normal;
+  }
+  .forgebook-named-view {
+    display: inline-flex;
+    align-items: center;
+    border-radius: 7px;
+    box-shadow: inset 0 0 0 1px var(--forgebook-edge);
+  }
+  .forgebook-named-view:hover {
+    box-shadow: inset 0 0 0 1px var(--forgebook-edge-hover);
+  }
+  .forgebook-named-view__pick {
+    height: 1.5rem;
+    padding: 0 0.5rem;
+    border: 0;
+    border-radius: 7px;
+    background: transparent;
+    font: 500 0.75rem/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
+    color: var(--forgebook-text);
+  }
+  .forgebook-named-view__pick:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
+  }
+  .forgebook-named-view__pick[aria-pressed=true] {
+    background: color-mix(in srgb, var(--forgebook-accent) 12%, transparent);
+    color: var(--forgebook-accent-text);
+  }
+  .forgebook-named-view__remove {
     display: grid;
-    grid-template-columns: 4rem auto;
+    place-items: center;
+    width: 1.25rem;
+    height: 1.5rem;
+    padding: 0;
+    border: 0;
+    border-radius: 7px;
+    background: transparent;
+    color: var(--forgebook-text-tertiary);
+  }
+  .forgebook-named-view__remove:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
+  }
+  .forgebook-named-view__remove:hover {
+    color: var(--forgebook-text);
+  }
+  .forgebook-named-views__form input {
+    height: 1.5rem;
+    padding: 0 0.5rem;
+    border: 0;
+    border-radius: 7px;
+    background: var(--forgebook-surface);
+    box-shadow: inset 0 0 0 1px var(--forgebook-edge-field);
+    font: 500 0.75rem/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
+    color: var(--forgebook-text);
+  }
+  .forgebook-named-views__form input:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent), inset 0 0 0 1px var(--forgebook-edge-field);
+  }
+  .forgebook-key-field {
+    position: relative;
+    display: inline-flex;
     align-items: center;
-    gap: 0.75rem;
   }
-  .forgebook-popover__row .forgebook-segmented {
+  .forgebook-key-field__button {
+    min-width: 1.5rem;
+    height: 1.375rem;
+    padding: 0 0.25rem;
+    border: 0;
+    border-radius: 6px;
+    background: transparent;
+    font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
+    color: var(--forgebook-text-secondary);
+  }
+  .forgebook-key-field__button:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
+  }
+  .forgebook-key-field__button:hover {
+    background: var(--forgebook-hover);
+  }
+  .forgebook-key-field__button[aria-pressed=true] {
+    background: color-mix(in srgb, var(--forgebook-accent) 12%, transparent);
+    color: var(--forgebook-accent-text);
+  }
+  .forgebook-key-field__button kbd {
+    font: 400 0.6875rem/1.6 "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
+  }
+  .forgebook-key-field__problem {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    z-index: 1;
+    font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
+    color: var(--forgebook-danger-text);
+    white-space: nowrap;
+  }
+  .forgebook-key-field__problem:empty {
+    display: none;
+  }
+  .forgebook-arrange-list {
+    display: grid;
+    gap: 0.25rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .forgebook-arrange {
+    position: relative;
+    display: grid;
+    grid-template-columns: auto 4.5rem 1fr auto auto auto;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.125rem 0;
+    border-radius: 7px;
+    background: var(--forgebook-surface);
+  }
+  .forgebook-arrange[data-dragged] {
+    z-index: 1;
+    box-shadow: 0 0 0 1px var(--forgebook-card-edge), 0 1px 3px var(--forgebook-shadow-soft);
+  }
+  .forgebook-arrange__control {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    justify-self: start;
+    max-width: 100%;
+    min-width: 0;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  .forgebook-arrange__handle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.625rem;
+    padding: 0;
+    border: 0;
+    border-radius: 6px;
+    background: none;
+    color: var(--forgebook-text-tertiary);
+    cursor: grab;
+    touch-action: none;
+  }
+  .forgebook-arrange__handle:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
+  }
+  .forgebook-arrange__handle:hover {
+    background: var(--forgebook-hover);
+    color: var(--forgebook-text);
+  }
+  .forgebook-arrange-list[data-dragging] {
+    user-select: none;
+  }
+  .forgebook-arrange-list[data-dragging] .forgebook-arrange__handle {
+    cursor: grabbing;
+  }
+  .forgebook-arrange .forgebook-icon-button[aria-pressed=true] {
+    background: color-mix(in srgb, var(--forgebook-accent) 12%, transparent);
+    color: var(--forgebook-accent-text);
+  }
+  .forgebook-hidden-controls {
+    display: grid;
+    gap: 0.375rem;
+    justify-items: stretch;
+  }
+  .forgebook-hidden-controls > .forgebook-text-button {
+    display: inline-flex;
     justify-self: start;
+    align-items: center;
+    gap: 0.25rem;
+  }
+  .forgebook-arrange__no-handle {
+    width: 1.25rem;
+  }
+  .forgebook-arrange[data-hidden] .forgebook-popover__label {
+    color: var(--forgebook-text-tertiary);
+  }
+  .forgebook-toolbar__pinned {
+    flex: none;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    white-space: nowrap;
+  }
+  .forgebook-toolbar__control {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .forgebook-toolbar__label {
+    font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
+    color: var(--forgebook-text-secondary);
+    white-space: nowrap;
+  }
+  .forgebook-context-menu {
+    position: fixed;
+    z-index: 3;
+    display: grid;
+    min-width: 10rem;
+    padding: 0.25rem;
+    border-radius: 12px;
+    background: var(--forgebook-surface);
+    box-shadow: 0 0 0 1px var(--forgebook-edge), 0 18px 48px var(--forgebook-shadow-deep), 0 4px 12px var(--forgebook-shadow-lift);
+  }
+  .forgebook-context-menu__item {
+    padding: 0.25rem 0.5rem;
+    border: 0;
+    border-radius: 6px;
+    background: none;
+    font: 500 0.75rem/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
+    color: var(--forgebook-text);
+    text-align: start;
+    cursor: pointer;
+  }
+  .forgebook-context-menu__item:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
+  }
+  .forgebook-context-menu__item:hover, .forgebook-context-menu__item:focus-visible {
+    background: var(--forgebook-hover);
   }
   .forgebook-select {
     justify-self: start;
@@ -754,53 +1232,101 @@
     padding: 0 1.5rem 0 0.625rem;
     border: 0;
     border-radius: 7px;
-    background-color: #fff;
+    background-color: var(--forgebook-surface);
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2356565d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 6.5 3-3 3 3M5 9.5l3 3 3-3'/%3E%3C/svg%3E");
     background-position: right 0.375rem center;
     background-repeat: no-repeat;
     background-size: 0.875rem;
-    box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 0.1450980392);
+    box-shadow: inset 0 0 0 1px var(--forgebook-edge);
     font: 500 0.75rem/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #1d1d1f;
+    color: var(--forgebook-text);
     text-overflow: ellipsis;
     appearance: none;
     cursor: pointer;
     transition: box-shadow 150ms ease-out;
   }
   .forgebook-select:focus-visible {
-    outline: 2px solid color-mix(in srgb, #0a6cf0 35%, transparent);
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
     outline-offset: 0;
-    box-shadow: inset 0 0 0 1px #0a6cf0, inset 0 0 0 1px rgba(29, 29, 31, 0.1450980392);
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent), inset 0 0 0 1px var(--forgebook-edge);
   }
   .forgebook-select:hover:not(:disabled) {
-    box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 0.2392156863);
+    box-shadow: inset 0 0 0 1px var(--forgebook-edge-hover);
   }
   .forgebook-select:disabled {
     cursor: default;
     opacity: 0.45;
   }
   .forgebook-popover__label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
     font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
+  }
+  .forgebook-switch {
+    position: relative;
+    flex: none;
+    width: 1.75rem;
+    height: 1rem;
+    margin: 0;
+    border-radius: 999px;
+    background: var(--forgebook-fill);
+    box-shadow: inset 0 0 0 1px var(--forgebook-edge);
+    appearance: none;
+    cursor: pointer;
+    transition: background-color 150ms ease-out, box-shadow 150ms ease-out;
+  }
+  .forgebook-switch:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent), inset 0 0 0 1px var(--forgebook-edge);
+  }
+  .forgebook-switch::before {
+    content: "";
+    position: absolute;
+    top: 0.125rem;
+    left: 0.125rem;
+    width: 0.75rem;
+    height: 0.75rem;
+    border-radius: 50%;
+    background: var(--forgebook-surface);
+    box-shadow: 0 1px 2px var(--forgebook-shadow-deep);
+    transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  .forgebook-switch:checked {
+    background: var(--forgebook-accent);
+    box-shadow: none;
+  }
+  .forgebook-switch:checked::before {
+    transform: translateX(0.75rem);
+  }
+  .forgebook-wrap-choice {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font: 500 0.75rem/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
+    color: var(--forgebook-text);
+    cursor: pointer;
   }
   .forgebook-popover__foot {
     display: flex;
     justify-content: space-between;
     gap: 1rem;
     padding-top: 0.625rem;
-    box-shadow: inset 0 1px 0 rgba(29, 29, 31, 0.0901960784);
+    box-shadow: inset 0 1px 0 var(--forgebook-separator);
   }
   .forgebook-popover__note {
     font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #6a6a71;
+    color: var(--forgebook-text-tertiary);
   }
   .forgebook-problems {
     margin: 1rem 2rem 0;
     padding: 0.75rem 1rem;
     border-radius: 12px;
-    background: #fff;
-    box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 0.0901960784);
-    color: #bc1f16;
+    background: var(--forgebook-surface);
+    box-shadow: inset 0 0 0 1px var(--forgebook-separator);
+    color: var(--forgebook-danger-text);
   }
   .forgebook-problems ul {
     margin: 0.25rem 0 0;
@@ -808,22 +1334,22 @@
   }
   .forgebook-empty {
     margin: 2rem;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
   }
   .forgebook-header {
     flex: none;
     padding: 1rem 2rem 0.75rem;
-    box-shadow: inset 0 -1px 0 rgba(29, 29, 31, 0.0901960784);
+    box-shadow: inset 0 -1px 0 var(--forgebook-separator);
   }
   .forgebook-header__path {
     margin: 0 0 0.375rem;
     font: 600 0.6875rem/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
     letter-spacing: 0.04em;
     text-transform: uppercase;
-    color: #0059d2;
+    color: var(--forgebook-accent-text);
   }
   .forgebook-header__also-in {
-    color: #6a6a71;
+    color: var(--forgebook-text-tertiary);
   }
   .forgebook-header__related {
     display: flex;
@@ -835,17 +1361,17 @@
   }
   .forgebook-header__related-label {
     font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #6a6a71;
+    color: var(--forgebook-text-tertiary);
   }
   .forgebook-header__related-link {
-    color: #0059d2;
+    color: var(--forgebook-accent-text);
     text-decoration: none;
     border-radius: 6px;
   }
   .forgebook-header__related-link:focus-visible {
-    outline: 2px solid color-mix(in srgb, #0a6cf0 35%, transparent);
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
     outline-offset: 0;
-    box-shadow: inset 0 0 0 1px #0a6cf0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
   }
   .forgebook-header__related-link:hover {
     text-decoration: underline;
@@ -875,10 +1401,10 @@
     font-weight: 400;
     text-transform: none;
     letter-spacing: 0;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
   }
   .forgebook-play__status[data-status=failed] {
-    color: #bc1f16;
+    color: var(--forgebook-danger-text);
   }
   .forgebook-play__steps {
     display: grid;
@@ -895,7 +1421,7 @@
   .forgebook-play__error {
     margin: 0.125rem 0 0;
     font: 400 0.6875rem/1.6 "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
-    color: #bc1f16;
+    color: var(--forgebook-danger-text);
   }
   .forgebook-calls__details > summary {
     cursor: pointer;
@@ -915,7 +1441,7 @@
     display: grid;
     gap: 0.25rem;
     padding-block-end: 0.5rem;
-    box-shadow: inset 0 -1px 0 rgba(29, 29, 31, 0.0901960784);
+    box-shadow: inset 0 -1px 0 var(--forgebook-separator);
   }
   .forgebook-violation__head {
     display: flex;
@@ -925,19 +1451,19 @@
   .forgebook-violation__rule {
     font: 400 0.71875rem/1.4 "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
     font-weight: 500;
-    color: #0059d2;
+    color: var(--forgebook-accent-text);
   }
   .forgebook-violation__impact {
     font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
   }
   .forgebook-violation:is([data-impact=serious], [data-impact=critical]) .forgebook-violation__impact {
-    color: #bc1f16;
+    color: var(--forgebook-danger-text);
   }
   .forgebook-violation__targets {
     gap: 0.125rem;
     font: 400 0.6875rem/1.6 "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
     overflow-wrap: anywhere;
   }
   .forgebook-code-block {
@@ -945,7 +1471,7 @@
     padding: 0.75rem;
     overflow-x: auto;
     border-radius: 7px;
-    background: rgba(29, 29, 31, 0.0509803922);
+    background: var(--forgebook-fill-quiet);
     white-space: pre;
   }
   .forgebook-code-block .forgebook-code {
@@ -961,7 +1487,7 @@
     margin: 0;
     font: 500 0.8125rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
     font-weight: 600;
-    color: #1d1d1f;
+    color: var(--forgebook-text);
   }
   .forgebook-stage__description {
     display: -webkit-box;
@@ -969,7 +1495,7 @@
     min-height: 2lh;
     margin: 0;
     font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
   }
@@ -990,16 +1516,16 @@
     gap: 0.5rem;
     padding: 0.375rem 0.75rem;
     border-radius: 999px;
-    background: #fff;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.0588235294), 0 1px 3px rgba(0, 0, 0, 0.0509803922);
+    background: var(--forgebook-surface);
+    box-shadow: 0 0 0 1px var(--forgebook-card-edge), 0 1px 3px var(--forgebook-shadow-soft);
     font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
   }
   .forgebook-spinner {
     width: 1rem;
     height: 1rem;
-    border: 2px solid rgba(29, 29, 31, 0.0901960784);
-    border-top-color: #0a6cf0;
+    border: 2px solid var(--forgebook-separator);
+    border-top-color: var(--forgebook-accent);
     border-radius: 50%;
     animation: forgebook-spin 800ms linear infinite;
   }
@@ -1032,9 +1558,9 @@
     overflow-x: auto;
     padding: 1.25rem 0;
     border-radius: 12px;
-    background-color: #f6f6f8;
-    background-image: repeating-linear-gradient(-45deg, transparent 0 5px, rgba(29, 29, 31, 0.0784313725) 5px 6px);
-    box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 0.0901960784);
+    background-color: var(--forgebook-window);
+    background-image: repeating-linear-gradient(-45deg, transparent 0 5px, var(--forgebook-fill) 5px 6px);
+    box-shadow: inset 0 0 0 1px var(--forgebook-separator);
   }
   .forgebook-viewport__canvas > :first-child {
     margin-inline-start: auto;
@@ -1067,29 +1593,29 @@
     width: 2.5rem;
     height: 4px;
     border-radius: 2px;
-    background: #6a6a71;
+    background: var(--forgebook-text-tertiary);
     transform: translate(-50%, -50%);
   }
   .forgebook-viewport__foot:hover::before, .forgebook-viewport__foot:active::before {
-    background: #0a6cf0;
+    background: var(--forgebook-accent);
   }
   .forgebook-viewport__foot:focus-visible {
-    outline: 2px solid color-mix(in srgb, #0a6cf0 35%, transparent);
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
     outline-offset: -2px;
-    box-shadow: inset 0 0 0 1px #0a6cf0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
   }
   .forgebook-viewport__foot-label {
     position: absolute;
     inset: 50% auto auto calc(50% + 1.75rem);
     transform: translateY(-50%);
     font: 400 0.6875rem/1.6 "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
-    color: #6a6a71;
+    color: var(--forgebook-text-tertiary);
     white-space: nowrap;
   }
   .forgebook-viewport__room {
     min-width: 0;
-    background: #fff;
-    box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.0901960784);
+    background: var(--forgebook-surface);
+    box-shadow: 0 0 0 1px var(--forgebook-separator);
     overflow: hidden;
     transform-origin: 0 0;
   }
@@ -1111,19 +1637,19 @@
     width: 4px;
     height: 2.5rem;
     border-radius: 2px;
-    background: #6a6a71;
+    background: var(--forgebook-text-tertiary);
     transform: translate(-50%, -50%);
   }
   .forgebook-viewport__handle:hover::before, .forgebook-viewport__handle:active::before {
-    background: #0a6cf0;
+    background: var(--forgebook-accent);
   }
   .forgebook-viewport__handle:focus-visible {
-    outline: 2px solid color-mix(in srgb, #0a6cf0 35%, transparent);
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
     outline-offset: -2px;
-    box-shadow: inset 0 0 0 1px #0a6cf0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
   }
   .forgebook-frame-placeholder {
-    background: rgba(29, 29, 31, 0.0509803922);
+    background: var(--forgebook-fill-quiet);
   }
   .forgebook-doc,
   .forgebook-home {
@@ -1134,7 +1660,7 @@
     max-width: 56rem;
     margin: 0 auto;
     padding: 1.5rem 2rem 2rem;
-    animation: forgebook-rise 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
+    animation: forgebook-rise 260ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
   }
   .forgebook-home__head {
     display: grid;
@@ -1172,19 +1698,19 @@
     gap: 0.125rem;
     padding: 0.5rem 0.75rem;
     border-radius: 7px;
-    background: #fff;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.0588235294), 0 1px 3px rgba(0, 0, 0, 0.0509803922);
+    background: var(--forgebook-surface);
+    box-shadow: 0 0 0 1px var(--forgebook-card-edge), 0 1px 3px var(--forgebook-shadow-soft);
     color: inherit;
     text-decoration: none;
     transition: box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1);
   }
   .forgebook-home__recent-link:hover {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1019607843), 0 4px 14px rgba(0, 0, 0, 0.0705882353);
+    box-shadow: 0 0 0 1px var(--forgebook-card-edge-hover), 0 4px 14px var(--forgebook-shadow-lift);
   }
   .forgebook-home__recent-link:focus-visible:focus-visible {
-    outline: 2px solid color-mix(in srgb, #0a6cf0 35%, transparent);
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
     outline-offset: 0;
-    box-shadow: inset 0 0 0 1px #0a6cf0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
   }
   .forgebook-home__recent-name {
     font: 500 0.8125rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
@@ -1195,7 +1721,7 @@
   }
   .forgebook-home__recent-place {
     font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #6a6a71;
+    color: var(--forgebook-text-tertiary);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -1213,8 +1739,8 @@
     gap: 0.5rem;
     padding: 0.75rem 1rem;
     border-radius: 12px;
-    background: #fff;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.0588235294), 0 1px 3px rgba(0, 0, 0, 0.0509803922);
+    background: var(--forgebook-surface);
+    box-shadow: 0 0 0 1px var(--forgebook-card-edge), 0 1px 3px var(--forgebook-shadow-soft);
   }
   .forgebook-home__card-title {
     display: flex;
@@ -1228,7 +1754,7 @@
   .forgebook-home__count {
     font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
     font-weight: 400;
-    color: #6a6a71;
+    color: var(--forgebook-text-tertiary);
   }
   .forgebook-home__components {
     display: grid;
@@ -1242,7 +1768,59 @@
     margin: 0;
     font-size: 1.0625rem;
     line-height: 1.55;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
+  }
+  .forgebook-used-in__toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0;
+    border: 0;
+    background: none;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+  }
+  .forgebook-used-in__toggle:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
+  }
+  .forgebook-used-in__list {
+    display: grid;
+    gap: 0.625rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .forgebook-used-in__user {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0.25rem 0.5rem;
+  }
+  .forgebook-used-in__component {
+    font-weight: 600;
+  }
+  .forgebook-used-in__note {
+    margin: 0;
+    font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
+    color: var(--forgebook-text-tertiary);
+  }
+  .forgebook-used-in__stories {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem 0.5rem;
+    flex-basis: 100%;
+  }
+  .forgebook-used-in__story {
+    font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
+    color: var(--forgebook-text-secondary);
+    text-decoration: none;
+  }
+  .forgebook-used-in__story:hover {
+    color: var(--forgebook-accent-text);
+    text-decoration: underline;
   }
   .forgebook-doc__section {
     display: grid;
@@ -1264,7 +1842,7 @@
   .forgebook-doc__group-name {
     margin: 0.5rem 0 0;
     font: 600 0.6875rem/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #6a6a71;
+    color: var(--forgebook-text-tertiary);
     text-transform: uppercase;
     letter-spacing: 0.06em;
   }
@@ -1276,7 +1854,7 @@
     transition: color 150ms ease-out, text-decoration-color 150ms ease-out;
   }
   .forgebook-link:hover {
-    color: #0059d2;
+    color: var(--forgebook-accent-text);
     text-decoration-color: currentcolor;
   }
   .forgebook-example {
@@ -1295,17 +1873,17 @@
   .forgebook-example__description {
     margin: 0;
     font: 400 0.8125rem/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
   }
   .forgebook-example__box {
     border-radius: 12px;
-    background: #fff;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.0588235294), 0 1px 3px rgba(0, 0, 0, 0.0509803922);
+    background: var(--forgebook-surface);
+    box-shadow: 0 0 0 1px var(--forgebook-card-edge), 0 1px 3px var(--forgebook-shadow-soft);
     overflow: clip;
     transition: box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1);
   }
   .forgebook-example__box:hover {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1019607843), 0 4px 14px rgba(0, 0, 0, 0.0705882353);
+    box-shadow: 0 0 0 1px var(--forgebook-card-edge-hover), 0 4px 14px var(--forgebook-shadow-lift);
   }
   .forgebook-example__stage .forgebook-viewport__canvas {
     padding: 0;
@@ -1313,7 +1891,7 @@
     box-shadow: none;
   }
   .forgebook-example__stage .forgebook-viewport__room {
-    box-shadow: 1px 0 0 rgba(29, 29, 31, 0.0901960784), -1px 0 0 rgba(29, 29, 31, 0.0901960784);
+    box-shadow: 1px 0 0 var(--forgebook-separator), -1px 0 0 var(--forgebook-separator);
   }
   .forgebook-example__bar {
     display: flex;
@@ -1321,7 +1899,7 @@
     gap: 0.75rem;
     min-height: 2.25rem;
     padding: 0 0.75rem;
-    box-shadow: inset 0 1px 0 rgba(29, 29, 31, 0.0901960784);
+    box-shadow: inset 0 1px 0 var(--forgebook-separator);
     font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
   }
   .forgebook-example__toggle {
@@ -1334,18 +1912,18 @@
     background: none;
     font: inherit;
     font-weight: 500;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
     cursor: pointer;
     transition: color 150ms ease-out, background-color 150ms ease-out;
   }
   .forgebook-example__toggle:hover {
-    color: #1d1d1f;
-    background: rgba(29, 29, 31, 0.0392156863);
+    color: var(--forgebook-text);
+    background: var(--forgebook-hover);
   }
   .forgebook-example__toggle:focus-visible:focus-visible {
-    outline: 2px solid color-mix(in srgb, #0a6cf0 35%, transparent);
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
     outline-offset: 0;
-    box-shadow: inset 0 0 0 1px #0a6cf0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
   }
   .forgebook-example__toggle svg {
     transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
@@ -1353,17 +1931,68 @@
   .forgebook-example__toggle[aria-expanded=true] svg {
     transform: rotate(90deg);
   }
+  .forgebook-example__box[data-full] {
+    position: fixed;
+    inset: 1.5rem;
+    z-index: 20;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 0 0 1px var(--forgebook-edge), 0 18px 48px var(--forgebook-shadow-deep), 0 4px 12px var(--forgebook-shadow-lift);
+  }
+  .forgebook-example__box[data-full]:hover {
+    box-shadow: 0 0 0 1px var(--forgebook-edge), 0 18px 48px var(--forgebook-shadow-deep), 0 4px 12px var(--forgebook-shadow-lift);
+  }
+  .forgebook-example__box[data-full] .forgebook-example__stage {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
+  .forgebook-example__width {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .forgebook-full-shade {
+    position: fixed;
+    inset: 0;
+    z-index: 19;
+    background: var(--forgebook-shade);
+  }
+  .forgebook-example__full {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    margin-inline-start: auto;
+    padding: 0;
+    border: 0;
+    background: none;
+    font: inherit;
+    color: var(--forgebook-text-secondary);
+    cursor: pointer;
+    transition: color 150ms ease-out;
+  }
+  .forgebook-example__full:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
+  }
+  .forgebook-example__full:hover {
+    color: var(--forgebook-text);
+  }
+  .forgebook-example__full + .forgebook-example__open {
+    margin-inline-start: 0;
+  }
   .forgebook-example__open {
     display: inline-flex;
     align-items: center;
     gap: 0.25rem;
     margin-inline-start: auto;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
     text-decoration: none;
     transition: color 150ms ease-out;
   }
   .forgebook-example__open:hover {
-    color: #0059d2;
+    color: var(--forgebook-accent-text);
   }
   .forgebook-example__open svg {
     transition: transform 150ms ease-out;
@@ -1396,8 +2025,8 @@
     overflow: auto;
     padding: 0.75rem 1rem;
     border-radius: 0;
-    background: rgba(29, 29, 31, 0.0509803922);
-    box-shadow: inset 0 1px 0 rgba(29, 29, 31, 0.0901960784);
+    background: var(--forgebook-fill-quiet);
+    box-shadow: inset 0 1px 0 var(--forgebook-separator);
   }
   .forgebook-example__code-inner .forgebook-code {
     padding: 0;
@@ -1410,28 +2039,28 @@
     padding: 0.125rem 0.5rem;
     border: 0;
     border-radius: 6px;
-    background: #fff;
-    box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 0.0901960784);
+    background: var(--forgebook-surface);
+    box-shadow: inset 0 0 0 1px var(--forgebook-separator);
     font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
     cursor: pointer;
     transition: color 150ms ease-out;
   }
   .forgebook-example__copy:hover {
-    color: #1d1d1f;
+    color: var(--forgebook-text);
   }
   .forgebook-example__copy:focus-visible:focus-visible {
-    outline: 2px solid color-mix(in srgb, #0a6cf0 35%, transparent);
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
     outline-offset: 0;
-    box-shadow: inset 0 0 0 1px #0a6cf0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
   }
   .forgebook-inline-code {
     padding: 0.1em 0.35em;
     border-radius: 6px;
-    background: rgba(29, 29, 31, 0.0509803922);
+    background: var(--forgebook-fill-quiet);
     font-family: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
     font-size: 0.875em;
-    color: #1d1d1f;
+    color: var(--forgebook-code-name);
   }
   .forgebook-prose {
     font: 400 0.8125rem/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
@@ -1465,13 +2094,13 @@
     margin-top: 0.25rem;
   }
   .forgebook-prose a {
-    color: #0059d2;
+    color: var(--forgebook-accent-text);
     text-underline-offset: 0.2em;
   }
   .forgebook-prose code {
     padding: 0.1em 0.35em;
     border-radius: 6px;
-    background: rgba(29, 29, 31, 0.0509803922);
+    background: var(--forgebook-fill-quiet);
     font-family: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
     font-size: 0.875em;
   }
@@ -1479,8 +2108,8 @@
     margin: 0 0 1rem;
     padding: 0.75rem 1rem;
     border-radius: 12px;
-    background: #fff;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.0588235294), 0 1px 3px rgba(0, 0, 0, 0.0509803922);
+    background: var(--forgebook-surface);
+    box-shadow: 0 0 0 1px var(--forgebook-card-edge), 0 1px 3px var(--forgebook-shadow-soft);
     overflow-x: auto;
     font: 400 0.71875rem/1.4 "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
     line-height: 1.6;
@@ -1501,11 +2130,11 @@
     padding: 0.5rem 0.75rem 0.5rem 0;
     text-align: start;
     vertical-align: top;
-    box-shadow: inset 0 -1px 0 rgba(29, 29, 31, 0.0901960784);
+    box-shadow: inset 0 -1px 0 var(--forgebook-separator);
   }
   .forgebook-prose th {
     font-weight: 600;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
   }
   .forgebook-api {
     overflow-x: auto;
@@ -1520,17 +2149,17 @@
     padding: 0.625rem 0.75rem;
     text-align: start;
     vertical-align: top;
-    box-shadow: inset 0 -1px 0 rgba(29, 29, 31, 0.0901960784);
+    box-shadow: inset 0 -1px 0 var(--forgebook-separator);
   }
   .forgebook-api__table thead th {
     font: 600 0.6875rem/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #6a6a71;
+    color: var(--forgebook-text-tertiary);
   }
   .forgebook-api__table tbody tr {
     transition: background-color 150ms ease-out;
   }
   .forgebook-api__table tbody tr:hover {
-    background: rgba(29, 29, 31, 0.0392156863);
+    background: var(--forgebook-hover);
   }
   .forgebook-api__table tbody th {
     font-weight: inherit;
@@ -1543,7 +2172,7 @@
   .forgebook-api__name {
     font: 400 0.71875rem/1.4 "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
     font-weight: 600;
-    color: #1d1d1f;
+    color: var(--forgebook-code-name);
   }
   .forgebook-api__type {
     min-width: 10rem;
@@ -1564,36 +2193,36 @@
   }
   .forgebook-api__subcomponent > p {
     margin: 0;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
   }
   .forgebook-hl-keyword,
   .forgebook-hl-literal,
   .forgebook-hl-built_in {
-    color: #7036c4;
+    color: var(--forgebook-code-keyword);
   }
   .forgebook-hl-title,
   .forgebook-hl-type,
   .forgebook-hl-name,
   .forgebook-hl-selector-tag,
   .forgebook-hl-selector-class {
-    color: #0059d2;
+    color: var(--forgebook-code-type);
   }
   .forgebook-hl-string,
   .forgebook-hl-regexp {
-    color: #077229;
+    color: var(--forgebook-code-string);
   }
   .forgebook-hl-number,
   .forgebook-hl-attr,
   .forgebook-hl-attribute,
   .forgebook-hl-property,
   .forgebook-hl-variable {
-    color: #935200;
+    color: var(--forgebook-code-number);
   }
   .forgebook-hl-comment,
   .forgebook-hl-punctuation,
   .forgebook-hl-operator,
   .forgebook-hl-meta {
-    color: #6a6a71;
+    color: var(--forgebook-code-punctuation);
   }
   .forgebook-hl-comment {
     font-style: italic;
@@ -1615,7 +2244,10 @@
     }
     .forgebook-example__toggle svg,
     .forgebook-example__open svg,
-    .forgebook-example__code {
+    .forgebook-example__code,
+    .forgebook-tree__chevron,
+    .forgebook-switch,
+    .forgebook-switch::before {
       transition: none;
     }
   }
@@ -1623,24 +2255,24 @@
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
     gap: 1px;
-    background: rgba(29, 29, 31, 0.0901960784);
+    background: var(--forgebook-separator);
   }
   .forgebook-compare__cell {
     margin: 0;
-    background: #fff;
+    background: var(--forgebook-surface);
   }
   .forgebook-compare__label {
     padding: 0.5rem 0.75rem;
     font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
   }
   .forgebook-dock__hint {
     padding: 0 0.375rem;
     border-radius: 999px;
-    background: rgba(29, 29, 31, 0.0784313725);
+    background: var(--forgebook-fill);
     font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
     font-variant-numeric: tabular-nums;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
   }
   .forgebook-prop-group {
     display: flex;
@@ -1649,14 +2281,14 @@
     padding: 0.75rem 0.875rem;
   }
   .forgebook-prop-group + .forgebook-prop-group {
-    box-shadow: inset 0 1px 0 rgba(29, 29, 31, 0.0901960784);
+    box-shadow: inset 0 1px 0 var(--forgebook-separator);
   }
   .forgebook-prop-group__title {
     margin: 0;
     font: 600 0.6875rem/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
     letter-spacing: 0.04em;
     text-transform: uppercase;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
   }
   .forgebook-prop {
     display: flex;
@@ -1670,16 +2302,16 @@
     padding: 0 0.5rem;
     border: 0;
     border-radius: 7px;
-    background: #fff;
-    box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 0.1803921569);
+    background: var(--forgebook-surface);
+    box-shadow: inset 0 0 0 1px var(--forgebook-edge-field);
     font: 400 0.78125rem/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #1d1d1f;
+    color: var(--forgebook-text);
   }
   .forgebook-prop select:focus-visible,
   .forgebook-prop input:focus-visible {
-    outline: 2px solid color-mix(in srgb, #0a6cf0 35%, transparent);
+    outline: 2px solid color-mix(in srgb, var(--forgebook-accent) 35%, transparent);
     outline-offset: 0;
-    box-shadow: inset 0 0 0 1px #0a6cf0;
+    box-shadow: inset 0 0 0 1px var(--forgebook-accent);
   }
   .forgebook-prop__head {
     display: flex;
@@ -1711,7 +2343,7 @@
   }
   .forgebook-prop__required {
     margin-inline-start: 0.125rem;
-    color: #bc1f16;
+    color: var(--forgebook-danger-text);
   }
   .forgebook-prop__type {
     overflow: hidden;
@@ -1719,12 +2351,12 @@
     text-overflow: ellipsis;
     min-width: 0;
     font: 400 0.6875rem/1.6 "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
   }
   .forgebook-prop__description {
     margin: 0;
     font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
   }
   .forgebook-prop__text-arg {
     display: flex;
@@ -1733,11 +2365,11 @@
     gap: 0.375rem;
     margin: 0;
     font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
-    color: #6a6a71;
+    color: var(--forgebook-text-tertiary);
   }
   .forgebook-prop__text-arg code {
     font: 400 0.6875rem/1.6 "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
-    color: #56565d;
+    color: var(--forgebook-text-secondary);
   }
   .forgebook-toggles {
     display: grid;
@@ -1764,42 +2396,42 @@
     padding: 0.75rem 0.875rem;
   }
   .forgebook-event + .forgebook-event {
-    box-shadow: inset 0 1px 0 rgba(29, 29, 31, 0.0901960784);
+    box-shadow: inset 0 1px 0 var(--forgebook-separator);
   }
   .forgebook-code {
     display: block;
     padding: 0.25rem 0.5rem;
     border-radius: 6px;
-    background: rgba(29, 29, 31, 0.0509803922);
+    background: var(--forgebook-fill-quiet);
     font: 400 0.6875rem/1.6 "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
     white-space: pre-wrap;
     overflow-wrap: anywhere;
   }
   .forgebook-code__name,
   .forgebook-code__space {
-    color: #1d1d1f;
+    color: var(--forgebook-code-name);
   }
   .forgebook-code__type {
-    color: #0059d2;
+    color: var(--forgebook-code-type);
   }
   .forgebook-code__keyword {
-    color: #7036c4;
+    color: var(--forgebook-code-keyword);
   }
   .forgebook-code__string {
-    color: #077229;
+    color: var(--forgebook-code-string);
   }
   .forgebook-code__number {
-    color: #935200;
+    color: var(--forgebook-code-number);
   }
   .forgebook-code__punctuation {
-    color: #6a6a71;
+    color: var(--forgebook-code-punctuation);
   }
   .forgebook-calls {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
     padding: 0.75rem 0.875rem;
-    box-shadow: inset 0 1px 0 rgba(29, 29, 31, 0.0901960784);
+    box-shadow: inset 0 1px 0 var(--forgebook-separator);
   }
   .forgebook-calls__head {
     display: flex;
@@ -1826,6 +2458,6 @@
   .forgebook-calls__time {
     font: 400 0.6875rem/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
     font-variant-numeric: tabular-nums;
-    color: #6a6a71;
+    color: var(--forgebook-text-tertiary);
   }
 }