diff --git a/README.md b/README.md
index d571dbd..dc4280e 100644
--- a/README.md
+++ b/README.md
@@ -175,6 +175,7 @@ sync'd July 30, 2025
 | JSON dummy data | Simple JSON files.  Used for [View a JSON file or server response with formatting](https://learn.microsoft.com/microsoft-edge/web-platform/json-viewer). | [/json-dummy-data/](https://github.com/MicrosoftEdge/Demos/tree/main/json-dummy-data) | [JSON dummy data](https://microsoftedge.github.io/Demos/json-dummy-data/) (Readme) |
 | OpaqueRange | Demonstrates the `OpaqueRange` API for creating ranges over `<textarea>` and `<input>` values, enabling caret popup positioning and CSS Custom Highlight API usage on form controls. | [/opaque-range/](https://github.com/MicrosoftEdge/Demos/tree/main/opaque-range) | [OpaqueRange demo](https://microsoftedge.github.io/Demos/opaque-range/) |
 | Page Colors Custom Scrollbars demo | Shows a custom, green scrollbar in a page that has custom colors. | [/page-colors-custom-scrollbars/](https://github.com/MicrosoftEdge/Demos/tree/main/page-colors-custom-scrollbars) | [Page Colors Custom Scrollbars demo](https://microsoftedge.github.io/Demos/page-colors-custom-scrollbars/) |
+| Platform-provided behaviors for custom elements | Demonstrates `HTMLSubmitButtonBehavior` for custom elements: form submission, override properties, implicit submission, and accessibility. | [/platform-provided-behaviors-for-custom-elements/](https://github.com/MicrosoftEdge/Demos/tree/main/platform-provided-behaviors-for-custom-elements) | [Platform-provided behaviors for custom elements demo](https://microsoftedge.github.io/Demos/platform-provided-behaviors-for-custom-elements/) |
 | Reference Target demos | Interactive demos of the Reference Target proposal, which allows ID references to cross shadow DOM boundaries. | [/reference-target/](https://github.com/MicrosoftEdge/Demos/tree/main/reference-target) | [Reference Target demos](https://microsoftedge.github.io/Demos/reference-target/) |
 | Reader app | An article reader app used to demonstrate how to use various web APIs such as CSS Custom Highlight, `<selectmenu>`, EyeDropper, CSS and JSON modules, Scroll animation timeline, and Async Clipboard. | [/reader/](https://github.com/MicrosoftEdge/Demos/tree/main/reader) | [Reader](https://microsoftedge.github.io/Demos/reader/) demo |
 | Scoped Custom Element Registries | Define custom elements scoped to a specific shadow roots, elements, or documents. | [/scoped-custom-element-registries/](https://github.com/MicrosoftEdge/Demos/tree/main/scoped-custom-element-registries) | [Scoped Custom Element Registries](https://microsoftedge.github.io/Demos/scoped-custom-element-registries/) demo |
diff --git a/platform-provided-behaviors-for-custom-elements/README.md b/platform-provided-behaviors-for-custom-elements/README.md
new file mode 100644
index 0000000..8af1b3a
--- /dev/null
+++ b/platform-provided-behaviors-for-custom-elements/README.md
@@ -0,0 +1,38 @@
+# Platform-provided behaviors for custom elements
+
+➡️ **[Open the demo](https://microsoftedge.github.io/Demos/platform-provided-behaviors-for-custom-elements/)** ⬅️
+
+🔗 **Links:**
+* Explainer: [Platform-provided behaviors for custom elements explainer](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/PlatformProvidedBehaviors/explainer.md)
+* WHATWG issue: [#12150](https://github.com/whatwg/html/issues/12150)
+* Spec PR: [whatwg/html#12409](https://github.com/whatwg/html/pull/12409)
+* Chromium bug: [crbug.com/486928684](https://crbug.com/486928684)
+
+## Overview
+
+Platform-provided behaviors allow custom elements to adopt native HTML behaviors through `attachInternals({ behaviors: [...] })`. The first behavior, `HTMLSubmitButtonBehavior`, turns a custom element into a submit button that participates in form submission, contributes name/value pairs, supports form override attributes, triggers implicit submission, exposes the correct accessibility semantics, and responds to keyboard activation.
+
+## Demos
+
+- **Basic form submission**: A `<my-submit-button>` custom element with `HTMLSubmitButtonBehavior` submits a form the same way a native `<button type="submit">` does.
+- **Form override properties**: Shows how `name`, `value`, `formAction`, `formMethod`, and `formEnctype` on the behavior instance let an `<override-submit-button>` custom element override the form's defaults.
+- **Implicit submission**: Pressing Enter in a text field triggers implicit submission through an `<implicit-submit-button>` custom element.
+- **Accessibility and keyboard activation**: An `<a11y-submit-button>` custom element gets `role="button"`, focusability, and Enter/Space activation with no extra code.
+
+## Learn more
+
+To learn more, read our [platform-provided behaviors for custom elements explainer](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/PlatformProvidedBehaviors/explainer.md).
+
+## Test the feature
+
+The feature is not enabled by default yet. To test the feature:
+
+* Use Microsoft Edge 149 or later, or another Chromium-based browser with a matching version.
+* In a new tab, go to the `about://flags` page.
+* Search for the flag named **Experimental Web Platform features**.
+* Enable the **Experimental Web Platform features** flag.
+* Restart the browser.
+
+## Provide feedback
+
+Comment on the [WHATWG issue](https://github.com/whatwg/html/issues/12150).
diff --git a/platform-provided-behaviors-for-custom-elements/index.html b/platform-provided-behaviors-for-custom-elements/index.html
new file mode 100644
index 0000000..2512fc5
--- /dev/null
+++ b/platform-provided-behaviors-for-custom-elements/index.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Platform-provided behaviors for custom elements</title>
+  <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <h1>Platform-provided behaviors for custom elements</h1>
+  <p>
+    Platform-provided behaviors allow custom elements to adopt native HTML
+    behaviors through <code>attachInternals({ behaviors: [...] })</code>. The first
+    behavior, <code>HTMLSubmitButtonBehavior</code>, turns a custom element into a
+    submit button that participates in form submission, contributes name/value
+    pairs, supports form override attributes, triggers implicit submission,
+    exposes the correct accessibility semantics, and responds to keyboard
+    activation.
+    <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/PlatformProvidedBehaviors/explainer.md">Read
+      the explainer</a>.
+    <a href="https://github.com/whatwg/html/issues/12150">Give feedback</a>.
+  </p>
+
+  <div id="feature-warning" class="warning" hidden>
+    <strong>⚠️ HTMLSubmitButtonBehavior is not supported in this browser.</strong>
+    Enable the <strong>Experimental Web Platform features</strong> flag at
+    <code>about://flags</code> in Microsoft Edge or another Chromium-based browser (version 149+).
+  </div>
+
+  <!-- Use Case 1: Basic Form Submission -->
+  <section class="demo-section">
+    <h2>Use case 1: Basic form submission</h2>
+    <p>
+      The <strong>Submit form</strong> button below is a <code>&lt;my-submit-button&gt;</code>
+      custom element with <code>HTMLSubmitButtonBehavior</code>, which makes it submit
+      forms just like a native <code>&lt;button type="submit"&gt;</code> element. Click
+      the custom submit button below, or press Enter while focused on a field, to
+      submit the form.
+    </p>
+
+    <form id="form-basic">
+      <div class="form-row">
+        <label for="basic-name">Name:</label>
+        <input type="text" id="basic-name" name="username" placeholder="Enter your name" value="Alice">
+      </div>
+      <div class="form-row">
+        <label for="basic-email">Email:</label>
+        <input type="email" id="basic-email" name="email" placeholder="Enter your email" value="alice@example.com">
+      </div>
+      <my-submit-button>Submit form</my-submit-button>
+    </form>
+    <div id="basic-output" class="output" hidden>
+      <h3>Form data submitted:</h3>
+      <pre id="basic-data"></pre>
+    </div>
+    <p class="info-text">
+      <a href="https://github.com/MicrosoftEdge/Demos/blob/main/platform-provided-behaviors-for-custom-elements/script.js#L11-L20">View source on GitHub</a>
+    </p>
+  </section>
+
+  <!-- Use Case 2: Form Override Properties -->
+  <section class="demo-section">
+    <h2>Use case 2: Form override properties</h2>
+    <p>
+      The two buttons below are <code>&lt;override-submit-button&gt;</code> custom elements.
+      Each one sets <code>name</code>, <code>value</code>, and <code>formMethod</code>
+      on its <code>HTMLSubmitButtonBehavior</code> instance to override the form's
+      default method and include its own name/value pair in the submission data.
+    </p>
+
+    <form id="form-overrides">
+      <div class="form-row">
+        <label for="override-message">Message:</label>
+        <input type="text" id="override-message" name="message" value="Hello, world!">
+      </div>
+      <div class="button-group">
+        <override-submit-button id="save-btn">
+          Save (POST)
+        </override-submit-button>
+        <override-submit-button id="draft-btn">
+          Save as draft (GET)
+        </override-submit-button>
+      </div>
+    </form>
+    <div id="overrides-output" class="output" hidden>
+      <h3>Submission details:</h3>
+      <pre id="overrides-data"></pre>
+    </div>
+    <p class="info-text">
+      <a href="https://github.com/MicrosoftEdge/Demos/blob/main/platform-provided-behaviors-for-custom-elements/script.js#L22-L45">View source on GitHub</a>
+    </p>
+  </section>
+
+  <!-- Use Case 3: Implicit Submission -->
+  <section class="demo-section">
+    <h2>Use case 3: Implicit submission</h2>
+    <p>
+      The <strong>Search</strong> button below is an <code>&lt;implicit-submit-button&gt;</code>
+      custom element. When a form contains a custom element with
+      <code>HTMLSubmitButtonBehavior</code>, pressing <kbd>Enter</kbd> in a text field
+      triggers implicit submission through that element, just like it would with a
+      native submit button. Try pressing <kbd>Enter</kbd> in the input below.
+    </p>
+
+    <form id="form-implicit">
+      <div class="form-row">
+        <label for="implicit-search">Search:</label>
+        <input type="text" id="implicit-search" name="query" placeholder="Type something and press Enter...">
+      </div>
+      <implicit-submit-button>Search</implicit-submit-button>
+    </form>
+    <div id="implicit-output" class="output" hidden>
+      <h3>Implicitly submitted:</h3>
+      <pre id="implicit-data"></pre>
+    </div>
+    <p class="info-text">
+      <a href="https://github.com/MicrosoftEdge/Demos/blob/main/platform-provided-behaviors-for-custom-elements/script.js#L47-L56">View source on GitHub</a>
+    </p>
+  </section>
+
+  <!-- Use Case 4: Accessibility -->
+  <section class="demo-section">
+    <h2>Use case 4: Accessibility and keyboard activation</h2>
+    <p>
+      The <strong>Accessible submit</strong> button below is an
+      <code>&lt;a11y-submit-button&gt;</code> custom element. Custom elements with
+      <code>HTMLSubmitButtonBehavior</code> automatically get:
+    </p>
+    <ul>
+      <li>Implicit ARIA <code>role="button"</code></li>
+      <li>Focusability (default <code>tabindex=0</code>)</li>
+      <li>Keyboard activation via <kbd>Enter</kbd> and <kbd>Space</kbd></li>
+    </ul>
+    <p>
+      Try using <kbd>Tab</kbd> to focus the button below, then press
+      <kbd>Enter</kbd> or <kbd>Space</kbd> to activate it.
+    </p>
+
+    <form id="form-a11y">
+      <div class="form-row">
+        <label for="a11y-data">Data:</label>
+        <input type="text" id="a11y-data" name="payload" value="keyboard-submitted">
+      </div>
+      <a11y-submit-button>Accessible submit</a11y-submit-button>
+    </form>
+    <div id="a11y-output" class="output" hidden>
+      <h3>Activated via keyboard:</h3>
+      <pre id="a11y-data-output"></pre>
+    </div>
+    <p id="a11y-info" class="info-text">
+      Inspect the custom element in DevTools. Its computed accessibility role is
+      <code>button</code>, with no explicit ARIA attributes needed.
+      <a href="https://github.com/MicrosoftEdge/Demos/blob/main/platform-provided-behaviors-for-custom-elements/script.js#L58-L67">View source on GitHub</a>
+    </p>
+  </section>
+
+  <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/platform-provided-behaviors-for-custom-elements/script.js b/platform-provided-behaviors-for-custom-elements/script.js
new file mode 100644
index 0000000..2cb9613
--- /dev/null
+++ b/platform-provided-behaviors-for-custom-elements/script.js
@@ -0,0 +1,173 @@
+// ---- Feature detection ----
+const supportsBehaviors = typeof HTMLSubmitButtonBehavior !== "undefined";
+
+if (!supportsBehaviors) {
+  document.getElementById("feature-warning").hidden = false;
+}
+
+// ---- Custom element definitions ----
+
+if (supportsBehaviors) {
+  class MySubmitButton extends HTMLElement {
+    static formAssociated = true;
+
+    constructor() {
+      super();
+      const behavior = new HTMLSubmitButtonBehavior();
+      this.attachInternals({ behaviors: [behavior] });
+    }
+  }
+  customElements.define("my-submit-button", MySubmitButton);
+
+  class OverrideSubmitButton extends HTMLElement {
+    static formAssociated = true;
+    #behavior;
+
+    constructor() {
+      super();
+      this.#behavior = new HTMLSubmitButtonBehavior();
+      this.attachInternals({ behaviors: [this.#behavior] });
+    }
+
+    get behavior() { return this.#behavior; }
+  }
+  customElements.define("override-submit-button", OverrideSubmitButton);
+
+  // Set form override properties on the behavior instances.
+  const saveBtn = document.querySelector("#save-btn");
+  saveBtn.behavior.name = "action";
+  saveBtn.behavior.value = "save";
+  saveBtn.behavior.formMethod = "post";
+
+  const draftBtn = document.querySelector("#draft-btn");
+  draftBtn.behavior.name = "action";
+  draftBtn.behavior.value = "draft";
+  draftBtn.behavior.formMethod = "get";
+
+  class ImplicitSubmitButton extends HTMLElement {
+    static formAssociated = true;
+
+    constructor() {
+      super();
+      const behavior = new HTMLSubmitButtonBehavior();
+      this.attachInternals({ behaviors: [behavior] });
+    }
+  }
+  customElements.define("implicit-submit-button", ImplicitSubmitButton);
+
+  class A11ySubmitButton extends HTMLElement {
+    static formAssociated = true;
+
+    constructor() {
+      super();
+      const behavior = new HTMLSubmitButtonBehavior();
+      this.attachInternals({ behaviors: [behavior] });
+    }
+  }
+  customElements.define("a11y-submit-button", A11ySubmitButton);
+}
+
+// ===========================================================================
+// Use Case 1: Basic Form Submission
+// ===========================================================================
+
+const formBasic = document.getElementById("form-basic");
+const basicOutput = document.getElementById("basic-output");
+const basicData = document.getElementById("basic-data");
+
+formBasic.addEventListener("submit", (event) => {
+  event.preventDefault();
+  const data = new FormData(formBasic);
+  const entries = [...data.entries()];
+
+  const submitter = event.submitter;
+  let result = "Form entries:\n";
+  entries.forEach(([key, val]) => {
+    result += `  ${key} = ${val}\n`;
+  });
+  result += `\nSubmitter: <${submitter?.localName || "unknown"}>`;
+  if (submitter?.tagName && !submitter.tagName.includes("-")) {
+    result += " (native)";
+  } else if (submitter?.tagName) {
+    result += " (custom element)";
+  }
+
+  basicData.textContent = result;
+  basicOutput.hidden = false;
+});
+
+// ===========================================================================
+// Use Case 2: Form Override Properties
+// ===========================================================================
+
+const formOverrides = document.getElementById("form-overrides");
+const overridesOutput = document.getElementById("overrides-output");
+const overridesData = document.getElementById("overrides-data");
+
+formOverrides.addEventListener("submit", (event) => {
+  event.preventDefault();
+  const data = new FormData(formOverrides);
+  const entries = [...data.entries()];
+
+  const submitter = event.submitter;
+  let result = "Form entries:\n";
+  entries.forEach(([key, val]) => {
+    result += `  ${key} = ${val}\n`;
+  });
+
+  result += `\nSubmitter: <${submitter?.localName || "unknown"}>`;
+  result += `\nBehavior name: ${submitter?.behavior?.name || "(none)"}`;
+  result += `\nBehavior value: ${submitter?.behavior?.value || "(none)"}`;
+  result += `\nBehavior formMethod: ${submitter?.behavior?.formMethod || "(none)"}`;
+
+  overridesData.textContent = result;
+  overridesOutput.hidden = false;
+});
+
+// ===========================================================================
+// Use Case 3: Implicit Submission
+// ===========================================================================
+
+const formImplicit = document.getElementById("form-implicit");
+const implicitOutput = document.getElementById("implicit-output");
+const implicitData = document.getElementById("implicit-data");
+
+formImplicit.addEventListener("submit", (event) => {
+  event.preventDefault();
+  const data = new FormData(formImplicit);
+  const entries = [...data.entries()];
+
+  let result = "Form entries:\n";
+  entries.forEach(([key, val]) => {
+    result += `  ${key} = ${val}\n`;
+  });
+  result += `\nSubmitter: <${event.submitter?.localName || "unknown"}> (custom element)`;
+
+  implicitData.textContent = result;
+  implicitOutput.hidden = false;
+});
+
+// ===========================================================================
+// Use Case 4: Accessibility and Keyboard Activation
+// ===========================================================================
+
+const formA11y = document.getElementById("form-a11y");
+const a11yOutput = document.getElementById("a11y-output");
+const a11yDataOutput = document.getElementById("a11y-data-output");
+
+formA11y.addEventListener("submit", (event) => {
+  event.preventDefault();
+  const data = new FormData(formA11y);
+  const entries = [...data.entries()];
+
+  let result = "Form entries:\n";
+  entries.forEach(([key, val]) => {
+    result += `  ${key} = ${val}\n`;
+  });
+  result += `\nSubmitter: <${event.submitter?.localName || "unknown"}>`;
+  result += `\nSubmitter tabIndex: ${event.submitter?.tabIndex ?? "N/A"}`;
+
+  a11yDataOutput.textContent = result;
+  a11yOutput.hidden = false;
+});
+
diff --git a/platform-provided-behaviors-for-custom-elements/style.css b/platform-provided-behaviors-for-custom-elements/style.css
new file mode 100644
index 0000000..98db059
--- /dev/null
+++ b/platform-provided-behaviors-for-custom-elements/style.css
@@ -0,0 +1,266 @@
+:root {
+  --color-text: #1b1b1b;
+  --color-bg: white;
+  --color-surface: #eee;
+  --color-surface-alt: white;
+  --color-border: #bbb;
+  --color-border-light: #ddd;
+  --color-muted: #555;
+  --color-accent: #0067b8;
+  --color-accent-hover: #005a9e;
+  --color-accent-active: #004578;
+  --color-accent-focus-ring: rgba(0, 103, 184, 0.2);
+  --color-code-bg: #f0f0f0;
+  --color-kbd-border: #ccc;
+  --color-kbd-shadow: #bbb;
+  --color-warning-bg: #fff3cd;
+  --color-warning-border: #ffecb5;
+  --color-warning-text: #664d03;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-text: #e0e0e0;
+    --color-bg: #1e1e1e;
+    --color-surface: #2a2a2a;
+    --color-surface-alt: #333;
+    --color-border: #555;
+    --color-border-light: #444;
+    --color-muted: #aaa;
+    --color-accent: #4fc3f7;
+    --color-accent-hover: #81d4fa;
+    --color-accent-active: #29b6f6;
+    --color-accent-focus-ring: rgba(79, 195, 247, 0.25);
+    --color-code-bg: #2d2d2d;
+    --color-kbd-border: #555;
+    --color-kbd-shadow: #444;
+    --color-warning-bg: #3e3219;
+    --color-warning-border: #5c4a1c;
+    --color-warning-text: #ffd54f;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+input,
+textarea,
+button {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -webkit-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  font-size: 16px;
+  font-family: system-ui, sans-serif;
+  font-weight: 400;
+}
+
+html {
+  min-block-size: 100vh;
+}
+
+body {
+  max-inline-size: 800px;
+  margin-inline: auto;
+  margin-block: 0;
+  padding-block: 2rem;
+  padding-inline: 2rem;
+  background: var(--color-bg);
+  color: var(--color-text);
+  line-height: 1.6;
+}
+
+h1 {
+  margin-block: 2rem;
+  font-size: 1.75rem;
+}
+
+body > p {
+  margin-block: 2rem;
+}
+
+h2 {
+  font-size: 1.3rem;
+  margin-block: 0 1rem;
+  margin-inline: 0;
+  border-block-end: 1px solid var(--color-border-light);
+  padding-block-end: 1rem;
+}
+
+h3 {
+  font-size: 1rem;
+  margin-block-end: 0.25rem;
+}
+
+code,
+kbd {
+  font-family: Consolas, "Courier New", monospace;
+  font-size: 0.9em;
+  background: var(--color-code-bg);
+  padding-block: 0.15em;
+  padding-inline: 0.35em;
+  border-radius: 3px;
+}
+
+.demo-section code {
+  background: var(--color-surface-alt);
+}
+
+kbd {
+  border: 1px solid var(--color-kbd-border);
+  box-shadow: 0 1px 0 var(--color-kbd-shadow);
+}
+
+a {
+  color: var(--color-accent);
+}
+
+.warning {
+  background: var(--color-warning-bg);
+  border: 1px solid var(--color-warning-border);
+  border-radius: 6px;
+  padding-block: 0.75rem;
+  padding-inline: 1rem;
+  margin-block: 1rem;
+  color: var(--color-warning-text);
+}
+
+.demo-section {
+  margin-block-end: 2rem;
+  background: var(--color-surface);
+  padding-block: 1rem;
+  padding-inline: 1rem;
+  border-radius: 6px;
+}
+
+.form-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-block-end: 0.75rem;
+}
+
+.form-row label {
+  font-weight: 600;
+  white-space: nowrap;
+  min-inline-size: 5rem;
+}
+
+.form-row input {
+  flex: 1;
+}
+
+input[type="text"],
+input[type="email"] {
+  inline-size: 100%;
+  padding-block: 0.6rem;
+  padding-inline: 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  font-size: 1rem;
+  background: var(--color-bg);
+  color: var(--color-text);
+  transition: border-color 0.15s;
+}
+
+input[type="text"]:focus,
+input[type="email"]:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px var(--color-accent-focus-ring);
+}
+
+/* Custom element submit buttons */
+my-submit-button,
+override-submit-button,
+implicit-submit-button,
+a11y-submit-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-block: 0.5rem;
+  padding-inline: 1.25rem;
+  border: 2px solid var(--color-accent);
+  border-radius: 6px;
+  background: var(--color-accent);
+  color: var(--color-bg);
+  font-size: 0.95rem;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
+  user-select: none;
+}
+
+my-submit-button:hover,
+override-submit-button:hover,
+implicit-submit-button:hover,
+a11y-submit-button:hover {
+  background: var(--color-accent-hover);
+  border-color: var(--color-accent-hover);
+}
+
+my-submit-button:active,
+override-submit-button:active,
+implicit-submit-button:active,
+a11y-submit-button:active {
+  background: var(--color-accent-active);
+  border-color: var(--color-accent-active);
+}
+
+my-submit-button:focus-visible,
+override-submit-button:focus-visible,
+implicit-submit-button:focus-visible,
+a11y-submit-button:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+.button-group {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.output {
+  margin-block-start: 1rem;
+  background: var(--color-surface-alt);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  padding-block: 0.75rem;
+  padding-inline: 1rem;
+}
+
+.output h3 {
+  margin-block: 0 0.5rem;
+  margin-inline: 0;
+  font-size: 0.9rem;
+  color: var(--color-muted);
+}
+
+.output pre {
+  margin-block: 0;
+  margin-inline: 0;
+  font-family: Consolas, "Courier New", monospace;
+  font-size: 0.85rem;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.info-text {
+  font-size: 0.9rem;
+  color: var(--color-muted);
+  min-block-size: 1.4rem;
+}
+
+ul {
+  padding-inline-start: 1.5rem;
+  margin-block: 0.5rem;
+}
+
+li {
+  margin-block-end: 0.25rem;
+}