diff --git a/packages/core/templates/partials/slide-styles.eta b/packages/core/templates/partials/slide-styles.eta
index 688ccd6..498836a 100644
--- a/packages/core/templates/partials/slide-styles.eta
+++ b/packages/core/templates/partials/slide-styles.eta
@@ -899,7 +899,9 @@
     padding: 0.6cqi;
     border-radius: var(--morkdeck-dimension-radius-sm);
     cursor: pointer;
-    transition: color 200ms ease-out, background-color 200ms ease-out;
+    transition:
+      color var(--morkdeck-duration-quick) var(--morkdeck-cubicBezier-out-quart),
+      background-color var(--morkdeck-duration-quick) var(--morkdeck-cubicBezier-out-quart);
   }
 
   morkdeck-slide .colophon-socials a:hover,
diff --git a/packages/runtime/actor/machine.ts b/packages/runtime/actor/machine.ts
index 0c3373a..d03952a 100644
--- a/packages/runtime/actor/machine.ts
+++ b/packages/runtime/actor/machine.ts
@@ -1,4 +1,5 @@
 import { machineBase } from "./setup.ts";
+import { DEFAULT_PEN_COLOR } from "./types.ts";
 
 export const presentation = machineBase.createMachine({
   id: "presentation",
@@ -19,8 +20,7 @@ export const presentation = machineBase.createMachine({
     cursor: null,
     laser: [],
     activeTool: "pen",
-    // Rose Pine "love" — high contrast against the dark slide canvas.
-    penColor: "#eb6f92",
+    penColor: DEFAULT_PEN_COLOR,
     overview: false,
     jumpReturnSlideId: null,
   },
diff --git a/packages/runtime/actor/types.ts b/packages/runtime/actor/types.ts
index a90a6a2..05f1e47 100644
--- a/packages/runtime/actor/types.ts
+++ b/packages/runtime/actor/types.ts
@@ -6,6 +6,15 @@ export type Role = "audience" | "presenter";
 
 export type Tool = "pen" | "laser" | "eraser";
 
+/**
+ * Default pen ink, mirroring the danger token in
+ * @morkdeck/theme/tokens/colors.json ("love" / #eb6f92). Canvas
+ * strokeStyle needs a literal color string, so we can't reference
+ * the CSS variable directly. Single source so the runtime context
+ * default and the Lit component's mirrored default can't drift.
+ */
+export const DEFAULT_PEN_COLOR = "#eb6f92";
+
 /**
  * A single freehand stroke produced by the pen tool. Coordinates are
  * normalized 0..1 across the canvas the presenter drew on, so the audience
diff --git a/packages/wc/components/presentation/wc.ts b/packages/wc/components/presentation/wc.ts
index a7424fe..949c696 100644
--- a/packages/wc/components/presentation/wc.ts
+++ b/packages/wc/components/presentation/wc.ts
@@ -8,9 +8,16 @@ import { createRef, ref } from "lit/directives/ref.js";
 import { provide } from "@lit/context";
 import { createActor } from "xstate";
 import { LazyBrush } from "lazy-brush";
-import { color, dimension, fontFamily } from "@morkdeck/theme/css";
+import {
+  color,
+  cubicBezier,
+  dimension,
+  duration,
+  fontFamily,
+} from "@morkdeck/theme/css";
 import { context, observerContext } from "../../context.ts";
 import {
+  DEFAULT_PEN_COLOR,
   type LaserPoint,
   type Presentation,
   presentation,
@@ -80,7 +87,7 @@ export class PresentationWC extends LitElement {
   accessor activeTool: Tool = "pen";
 
   @state()
-  accessor penColor: string = "#eb6f92";
+  accessor penColor: string = DEFAULT_PEN_COLOR;
 
   /**
    * Audience-mode overview grid: shows every slide as a clickable
@@ -248,7 +255,9 @@ export class PresentationWC extends LitElement {
     :host([data-overview]) ::slotted(morkdeck-slide) {
       cursor: pointer;
       outline: 1px solid ${color("highlight.med")};
-      transition: outline 200ms ease-out, transform 200ms ease-out;
+      transition:
+        outline ${duration("quick")} ${cubicBezier("out-quart")},
+        transform ${duration("quick")} ${cubicBezier("out-quart")};
       /* Override the presenter-mode rule that nukes pointer-events
          on slotted slides — in overview the slides need to be
          clickable in both roles. Same specificity as the presenter
@@ -589,13 +598,23 @@ export class PresentationWC extends LitElement {
     .draw-tools button.active {
       background: ${color("highlight.high")};
       color: ${color("text")};
-      box-shadow: inset 0 0 0 1px ${color("link")};
+      /* DESIGN.md is flat-by-doctrine: no box-shadow on chrome. Use an
+         inset outline as the active-tool indicator so the affordance is
+         a real border, not faux elevation. outline-offset: -1px lands
+         the line inside the button's border-box, replicating the prior
+         visual without leaving the shadow doctrine. */
+      outline: 1px solid ${color("link")};
+      outline-offset: -1px;
     }
 
     .draw-tools button svg {
       display: block;
-      width: 18px;
-      height: 18px;
+      /* Em-based so the icon scales with the button's font-size and
+         stays in proportion if the tool palette is ever resized. At the
+         current 0.85rem font-size, 1.3em ≈ 18px, matching the prior
+         fixed pixel sizing without locking us to it. */
+      width: 1.3em;
+      height: 1.3em;
     }
 
     .draw-tools hr {