From 0085e7effaf832edec962f181f424509d1cbe388 Mon Sep 17 00:00:00 2001
From: Samuel Williams <samuel.williams@shopify.com>
Date: Fri, 4 Sep 2026 15:13:06 +1200
Subject: [PATCH] Add colocated slide stylesheets

Assisted-By: devx/eb377015-8099-4dd4-ae2e-835d6d6a6387
---
 guides/getting-started/readme.md |  37 ++++++++++
 lib/presently.rb                 |   1 +
 lib/presently/application.rb     |  27 +++++---
 lib/presently/export.rb          |   5 ++
 lib/presently/export.xrb         |   3 +
 lib/presently/page.rb            |   5 +-
 lib/presently/playback.rb        |   5 ++
 lib/presently/playback.xrb       |   3 +
 lib/presently/presentation.rb    |   5 ++
 lib/presently/slide.rb           |  38 ++++++++++-
 lib/presently/slide_assets.rb    | 101 ++++++++++++++++++++++++++++
 lib/presently/slide_renderer.rb  |   3 +-
 lib/presently/stylesheet.rb      | 112 +++++++++++++++++++++++++++++++
 presently.gemspec                |   3 +-
 readme.md                        |   1 +
 test/presently/application.rb    |  62 +++++++++++++++++
 test/presently/export.rb         |   6 ++
 test/presently/playback.rb       |   6 ++
 test/presently/slide.rb          |  54 +++++++++++++++
 test/presently/slide_renderer.rb |  20 ++++++
 test/presently/stylesheet.rb     |  71 ++++++++++++++++++++
 21 files changed, 550 insertions(+), 18 deletions(-)
 create mode 100644 lib/presently/slide_assets.rb
 create mode 100644 lib/presently/stylesheet.rb
 create mode 100644 test/presently/stylesheet.rb

diff --git a/guides/getting-started/readme.md b/guides/getting-started/readme.md
index b74435e..6678684 100644
--- a/guides/getting-started/readme.md
+++ b/guides/getting-started/readme.md
@@ -79,6 +79,43 @@ Each slide has three parts:
 2. **Content** with Markdown headings that become named sections for the template.
 3. **Presenter notes** after a `---` separator in the body (optional).
 
+### Styling Slides
+
+CSS can be colocated with the slides it styles:
+
+``` text
+slides/
+├── style.css
+├── 010-introduction.md
+└── 020-scheduling/
+    ├── style.css
+    ├── 010-overview.md
+    ├── 020-queue.md
+    └── 020-queue.css
+```
+
+`slides/style.css` applies globally. A nested `style.css` applies to every slide below that directory, while a CSS file matching a Markdown filename applies only to that slide. In the example above, `020-scheduling/style.css` applies to both scheduling slides and `020-queue.css` applies only to `020-queue.md`.
+
+Presently automatically wraps nested and slide-specific stylesheets in an [`@scope`](https://developer.mozilla.org/en-US/docs/Web/CSS/@scope) rule rooted at the rendered slide. Write these files as scoped CSS fragments containing ordinary style rules and nestable grouping rules such as `@media`, `@supports`, `@container`, and `@layer`. Keep stylesheet-level rules such as `@charset`, `@import`, and `@namespace`, and globally named definitions such as `@font-face`, `@keyframes`, and `@property`, in the root `slides/style.css` or the existing `public/_static/custom.css`.
+
+Relative images and fonts remain adjacent to the stylesheet that uses them:
+
+``` css
+.architecture {
+	background-image: url("architecture.svg");
+}
+```
+
+Presently uses `protocol-media-registry` to determine asset content types. Files with unrecognized media types are not served.
+
+Relative images embedded in Markdown resolve from the Markdown file's directory, including images in included Markdown files:
+
+``` markdown
+![Architecture](architecture.svg)
+```
+
+Presently loads each discovered stylesheet once in deterministic presentation order. Directory styles are loaded from parent to child before the matching slide sidecar, so more specific styles naturally appear later in the cascade. The same stylesheets are used by the display, presenter, recorder, playback, and export interfaces.
+
 ### Running the Presentation
 
 Start the server from your presentation directory:
diff --git a/lib/presently.rb b/lib/presently.rb
index 36ad529..f955c2e 100644
--- a/lib/presently.rb
+++ b/lib/presently.rb
@@ -6,6 +6,7 @@
 require_relative "presently/version"
 
 require_relative "presently/recordings"
+require_relative "presently/stylesheet"
 require_relative "presently/recordings/normalizer"
 require_relative "presently/recording_view"
 require_relative "presently/playback"
diff --git a/lib/presently/application.rb b/lib/presently/application.rb
index b983b23..e7dab53 100644
--- a/lib/presently/application.rb
+++ b/lib/presently/application.rb
@@ -11,6 +11,7 @@
 require_relative "presenter_view"
 require_relative "recording_view"
 require_relative "recordings"
+require_relative "slide_assets"
 require_relative "playback"
 require_relative "export"
 require_relative "page"
@@ -34,7 +35,8 @@ def initialize(delegate, slides_root: "slides", templates_roots: [], recordings_
 			@recordings = Recordings.new(recordings_root || File.expand_path("../audio", slides_root))
 			@playback_recordings = Recordings.new(playback_recordings_root || File.expand_path("../audio-normalized", slides_root))
 			
-			super(delegate)
+			slide_assets = SlideAssets.new(delegate, root: @slides_root, stylesheets: ->{controller.presentation.stylesheets})
+			super(slide_assets)
 		end
 		
 		# The view classes that this application allows.
@@ -66,12 +68,17 @@ def title
 			"Presently"
 		end
 		
+		# Create the presentation display page for the root route.
+		# @returns [Page] The presentation page.
+		def index
+			page(body)
+		end
+		
 		# Add Presently's routes to Lively's standard application routes.
 		# @parameter router [Lively::Router] The router to configure.
 		def configure_routes(router)
 			super
 			
-			router.get("/"){render_page(DisplayView.new(controller: controller))}
 			router.get("/presenter"){render_page(PresenterView.new(controller: controller))}
 			router.get("/record"){render_page(RecordingView.new(controller: controller))}
 			
@@ -92,19 +99,17 @@ def configure_routes(router)
 			end
 		end
 		
-		# Delegate requests which do not match a configured route.
-		# @parameter request [Protocol::HTTP::Request] The incoming request.
-		# @returns [Protocol::HTTP::Response] The delegate response.
-		def handle(request)
-			delegate.call(request)
-		end
-		
 		private
 		
+		# Create a Presently page with the presentation-specific stylesheets.
+		def page(body)
+			stylesheets = controller.presentation.stylesheets.map(&:url)
+			Page.new(title: title, body: body, stylesheets: stylesheets)
+		end
+		
 		# Render one of Presently's live interfaces.
 		def render_page(body)
-			page = Page.new(title: title, body: body)
-			Protocol::HTTP::Response[200, [], [page.call]]
+			Protocol::HTTP::Response[200, [], [page(body).call]]
 		end
 		
 		# Render the narrated playback interface.
diff --git a/lib/presently/export.rb b/lib/presently/export.rb
index a765ba4..14dcbe1 100644
--- a/lib/presently/export.rb
+++ b/lib/presently/export.rb
@@ -82,6 +82,11 @@ def initialize(presentation:, page_size: PageSize::DEFAULT, notes: true, speaker
 		# @attribute [Boolean] Whether slide timing is included.
 		attr :timing
 		
+		# @returns [Array(Stylesheet)] The ordered presentation stylesheets.
+		def stylesheets
+			@presentation.stylesheets
+		end
+		
 		# Render a single slide to an HTML string.
 		# @parameter slide [Slide] The slide to render.
 		# @returns [XRB::MarkupString]
diff --git a/lib/presently/export.xrb b/lib/presently/export.xrb
index ab45688..887c807 100644
--- a/lib/presently/export.xrb
+++ b/lib/presently/export.xrb
@@ -6,6 +6,9 @@
 		<link rel="stylesheet" href="/_static/index.css" type="text/css" />
 		<link rel="stylesheet" href="/_static/custom.css" type="text/css" />
 		<link rel="stylesheet" href="/_components/@socketry/syntax/themes/base/syntax.css" type="text/css" />
+		<?r self.stylesheets.each do |stylesheet| ?>
+		<link rel="stylesheet" href="#{stylesheet.url}" type="text/css" />
+		<?r end ?>
 		
 		<script type="importmap">
 		{
diff --git a/lib/presently/page.rb b/lib/presently/page.rb
index 90e8208..c8abc28 100644
--- a/lib/presently/page.rb
+++ b/lib/presently/page.rb
@@ -29,12 +29,13 @@ class Page < Lively::Page
 		# Initialize a new page.
 		# @parameter title [String] The page title.
 		# @parameter body [Live::View | Nil] The Live view to embed in the page.
-		def initialize(title: "Presently", body: nil)
+		# @parameter stylesheets [Array(String | Hash)] Presentation-specific stylesheets.
+		def initialize(title: "Presently", body: nil, stylesheets: [])
 			super(
 				title: title,
 				body: body,
 				icon: ICON,
-				stylesheets: STYLESHEETS,
+				stylesheets: STYLESHEETS + stylesheets,
 				imports: IMPORTS,
 				modules: MODULES,
 			)
diff --git a/lib/presently/playback.rb b/lib/presently/playback.rb
index 856809e..aecd300 100644
--- a/lib/presently/playback.rb
+++ b/lib/presently/playback.rb
@@ -40,6 +40,11 @@ def initialize(presentation:, recording_urls:, autoplay: false, controls: true)
 		attr :autoplay
 		attr :controls
 		
+		# @returns [Array(Stylesheet)] The ordered presentation stylesheets.
+		def stylesheets
+			@presentation.stylesheets
+		end
+		
 		# @returns [Array(Slide)] The slides in playback order.
 		def slides
 			@presentation.slides
diff --git a/lib/presently/playback.xrb b/lib/presently/playback.xrb
index a4928ab..20f9450 100644
--- a/lib/presently/playback.xrb
+++ b/lib/presently/playback.xrb
@@ -11,6 +11,9 @@
 		<link rel="stylesheet" href="/_static/index.css" type="text/css" media="screen" />
 		<link rel="stylesheet" href="/_static/custom.css" type="text/css" media="screen" />
 		<link rel="stylesheet" href="/_components/@socketry/syntax/themes/base/syntax.css" type="text/css" media="screen" />
+		<?r self.stylesheets.each do |stylesheet| ?>
+		<link rel="stylesheet" href="#{stylesheet.url}" type="text/css" media="screen" />
+		<?r end ?>
 		
 		<script type="importmap">
 		{
diff --git a/lib/presently/presentation.rb b/lib/presently/presentation.rb
index b2928c7..dbb815e 100644
--- a/lib/presently/presentation.rb
+++ b/lib/presently/presentation.rb
@@ -4,6 +4,7 @@
 # Copyright, 2026, by Samuel Williams.
 
 require_relative "slide"
+require_relative "stylesheet"
 require_relative "templates"
 
 module Presently
@@ -28,6 +29,7 @@ def initialize(root = "slides", templates = Templates.for)
 			@root = File.expand_path(root)
 			@templates = templates
 			@slides = load_slides
+			@stylesheets = Stylesheet.discover(@root, @slides)
 		end
 		
 		# @attribute [String] The absolute root directory containing slide files.
@@ -36,6 +38,9 @@ def initialize(root = "slides", templates = Templates.for)
 		# @attribute [Array(Slide)] The ordered list of slides.
 		attr :slides
 		
+		# @attribute [Array(Stylesheet)] The ordered presentation stylesheets.
+		attr :stylesheets
+		
 		# @attribute [Templates] The template resolver.
 		attr :templates
 		
diff --git a/lib/presently/slide.rb b/lib/presently/slide.rb
index a964901..900d46d 100644
--- a/lib/presently/slide.rb
+++ b/lib/presently/slide.rb
@@ -5,9 +5,12 @@
 
 require "yaml"
 require "markly"
+require "protocol/url"
 
 require "markly/renderer/html"
 
+require_relative "stylesheet"
+
 module Presently
 	# A single slide parsed from a Markdown file.
 	#
@@ -71,7 +74,8 @@ def load(presentation, path)
 				# Parse once, with native front matter support.
 				document = Markly.parse(raw, flags: Markly::UNSAFE | Markly::FRONT_MATTER, extensions: Fragment::EXTENSIONS)
 				
-				expand_includes!(document, File.dirname(source_path))
+				expand_includes!(document, File.dirname(source_path), presentation.root)
+				rewrite_image_urls!(document, source_path, presentation.root)
 				
 				# Extract front matter from the first AST node if present.
 				front_matter = nil
@@ -125,8 +129,9 @@ def load(presentation, path)
 			#
 			# @parameter document [Markly::Node] The document to expand in-place.
 			# @parameter base_dir [String] Directory used to resolve relative paths.
+			# @parameter root [String] The presentation asset root.
 			# @parameter depth [Integer] Current recursion depth (guards against cycles).
-			def expand_includes!(document, base_dir, depth: 0)
+			def expand_includes!(document, base_dir, root, depth: 0)
 				raise "Include depth limit exceeded" if depth > 10
 				
 				# Collect matching paragraphs first — mutating the tree while iterating is unsafe.
@@ -150,13 +155,40 @@ def expand_includes!(document, base_dir, depth: 0)
 						front_matter_node.delete
 					end
 					
-					expand_includes!(included_document, File.dirname(included_path), depth: depth + 1)
+					expand_includes!(included_document, File.dirname(included_path), root, depth: depth + 1)
+					rewrite_image_urls!(included_document, included_path, root)
 					
 					included_document.each{|node| paragraph.insert_before(node.dup)}
 					paragraph.delete
 				end
 			end
 			
+			# Rewrite relative Markdown image destinations so they remain relative to
+			# the source file after its content is rendered into a shared HTML page.
+			# @parameter document [Markly::Node] The document containing image nodes.
+			# @parameter source_path [String] The Markdown source path.
+			# @parameter root [String] The presentation asset root.
+			def rewrite_image_urls!(document, source_path, root)
+				directory = File.dirname(File.expand_path(source_path))
+				root = File.expand_path(root)
+				return unless directory == root || directory.start_with?(root + File::SEPARATOR)
+				
+				relative_directory = directory.delete_prefix(root).delete_prefix(File::SEPARATOR)
+				base_path = Stylesheet::PREFIX
+				base_path += Stylesheet.encode_path(relative_directory) + "/" unless relative_directory.empty?
+				base_url = Protocol::URL::Relative.new(base_path)
+				
+				document.walk do |node|
+					next unless node.type == :image
+					
+					url = Protocol::URL[node.url]
+					next unless url.is_a?(Protocol::URL::Relative)
+					next if url.path.empty? || url.path.absolute?
+					
+					node.url = (base_url + url).to_s
+				end
+			end
+			
 			# Parse a Markly document into content sections based on top-level headings.
 			#
 			# Each heading becomes a named key; content before the first heading is
diff --git a/lib/presently/slide_assets.rb b/lib/presently/slide_assets.rb
new file mode 100644
index 0000000..c468e0c
--- /dev/null
+++ b/lib/presently/slide_assets.rb
@@ -0,0 +1,101 @@
+# frozen_string_literal: true
+
+# Released under the MIT License.
+# Copyright, 2026, by Samuel Williams.
+
+require "protocol/http/body/file"
+require "protocol/http/middleware"
+require "protocol/media/registry"
+require "protocol/url"
+
+require_relative "stylesheet"
+
+module Presently
+	# Serves scoped presentation stylesheets and their adjacent assets.
+	class SlideAssets < Protocol::HTTP::Middleware
+		# @parameter delegate [Protocol::HTTP::Middleware] The next middleware.
+		# @parameter root [String] The presentation slides root.
+		# @parameter stylesheets [Proc] Returns the currently discovered stylesheets.
+		def initialize(delegate, root:, stylesheets:)
+			super(delegate)
+			
+			@root = File.realpath(root)
+			@stylesheets = stylesheets
+		end
+		
+		# Serve a presentation stylesheet or adjacent asset.
+		def call(request)
+			path = request_path(request)
+			return super unless path&.start_with?(Stylesheet::PREFIX)
+			
+			unless request.method == "GET" || request.method == "HEAD"
+				return Protocol::HTTP::Response[405, [["allow", "GET, HEAD"]]]
+			end
+			
+			relative_path = decode_path(path.delete_prefix(Stylesheet::PREFIX))
+			return Protocol::HTTP::Response[404] unless relative_path
+			
+			if File.extname(relative_path) == ".css"
+				serve_stylesheet(request, relative_path)
+			else
+				serve_asset(request, relative_path)
+			end
+		end
+		
+		private
+		
+		def request_path(request)
+			Protocol::URL::Reference[request.path]&.path&.to_s
+		rescue ArgumentError
+			nil
+		end
+		
+		def decode_path(path)
+			components = Protocol::URL::Path[path].components(Protocol::URL::Encoding::System)
+			return if components.empty? || components.any?{|component| component.empty? || component == "." || component == ".."}
+			
+			components.join(File::SEPARATOR)
+		rescue ArgumentError
+			nil
+		end
+		
+		def serve_stylesheet(request, relative_path)
+			stylesheet = @stylesheets.call.find{|stylesheet| stylesheet.path == relative_path}
+			return Protocol::HTTP::Response[404] unless stylesheet
+			
+			headers = asset_headers(media_type_for(relative_path))
+			body = [stylesheet.read] unless request.method == "HEAD"
+			Protocol::HTTP::Response[200, headers, body]
+		end
+		
+		def serve_asset(request, relative_path)
+			media_type = media_type_for(relative_path)
+			return Protocol::HTTP::Response[404] unless media_type
+			
+			path = resolve_path(relative_path)
+			return Protocol::HTTP::Response[404] unless path
+			
+			body = Protocol::HTTP::Body::File.open(path) unless request.method == "HEAD"
+			Protocol::HTTP::Response[200, asset_headers(media_type), body]
+		end
+		
+		def media_type_for(path)
+			Protocol::Media::Registry.for_path(path)&.type&.to_s
+		end
+		
+		def resolve_path(relative_path)
+			path = File.realpath(File.join(@root, relative_path))
+			prefix = @root.end_with?(File::SEPARATOR) ? @root : @root + File::SEPARATOR
+			path if path.start_with?(prefix) && File.file?(path)
+		rescue Errno::ENOENT
+			nil
+		end
+		
+		def asset_headers(content_type)
+			[
+				["content-type", content_type],
+				["cache-control", "no-store, no-cache, must-revalidate, max-age=0"],
+			]
+		end
+	end
+end
diff --git a/lib/presently/slide_renderer.rb b/lib/presently/slide_renderer.rb
index 68986a1..d94d7ae 100644
--- a/lib/presently/slide_renderer.rb
+++ b/lib/presently/slide_renderer.rb
@@ -8,6 +8,7 @@
 require "xrb/markup"
 
 require_relative "templates"
+require_relative "stylesheet"
 
 module Presently
 	# Renders a single slide using its XRB template.
@@ -45,7 +46,7 @@ def render(builder, slide, extra_class: nil)
 			html = template.to_string(scope)
 			
 			classes = [@css_class, extra_class].compact.join(" ")
-			builder.tag(:div, class: classes, data: {template: slide.template}) do
+			builder.tag(:div, class: classes, data: {template: slide.template}, "data-slide-path": Stylesheet.encode_path(slide.path)) do
 				builder.raw(html)
 				if slide.script
 					builder.tag(:script, type: "text/slide-script") do
diff --git a/lib/presently/stylesheet.rb b/lib/presently/stylesheet.rb
new file mode 100644
index 0000000..51dd7dc
--- /dev/null
+++ b/lib/presently/stylesheet.rb
@@ -0,0 +1,112 @@
+# frozen_string_literal: true
+
+# Released under the MIT License.
+# Copyright, 2026, by Samuel Williams.
+
+require "protocol/url"
+
+module Presently
+	# A presentation stylesheet loaded beside slides.
+	#
+	# Root `style.css` is global. Nested `style.css` files apply to slides below
+	# their directory, while a CSS file matching a slide name applies only to
+	# that slide.
+	class Stylesheet
+		PREFIX = "/_slides/"
+		STYLE_NAME = "style.css"
+		
+		class << self
+			# Encode a presentation-relative path while preserving its directory structure.
+			# @parameter path [String] A path relative to the slides root.
+			# @returns [String] The URL-encoded path.
+			def encode_path(path)
+				components = path.split(File::SEPARATOR)
+				Protocol::URL::Path.for(components, encoding: Protocol::URL::Encoding::System).to_s
+			end
+			
+			# Discover stylesheets in the order they should enter the cascade.
+			# @parameter root [String] The presentation slides root.
+			# @parameter slides [Array(Slide)] The ordered presentation slides.
+			# @returns [Array(Stylesheet)] The discovered stylesheets.
+			def discover(root, slides)
+				root = File.expand_path(root)
+				stylesheets = {}
+				
+				add(stylesheets, root, STYLE_NAME, nil)
+				
+				slides.each do |slide|
+					directory = File.dirname(slide.path)
+					
+					unless directory == "."
+						components = directory.split(File::SEPARATOR)
+						components.each_index do |index|
+							path = File.join(*components[0..index], STYLE_NAME)
+							scope = directory_scope(File.dirname(path))
+							add(stylesheets, root, path, scope)
+						end
+					end
+					
+					path = slide.path.sub(/\.md\z/, ".css")
+					add(stylesheets, root, path, slide_scope(slide.path))
+				end
+				
+				stylesheets.values
+			end
+			
+			private
+			
+			def add(stylesheets, root, path, scope)
+				return if stylesheets.key?(path)
+				return unless File.file?(File.join(root, path))
+				
+				stylesheets[path] = new(root, path, scope)
+			end
+			
+			def directory_scope(directory)
+				path = encode_path(directory) + "/"
+				%(.slide[data-slide-path^="#{path}"])
+			end
+			
+			def slide_scope(path)
+				%(.slide[data-slide-path="#{encode_path(path)}"])
+			end
+		end
+		
+		# Initialize a stylesheet.
+		# @parameter root [String] The presentation slides root.
+		# @parameter path [String] The path relative to the slides root.
+		# @parameter scope [String | Nil] The CSS scope selector, or nil for global CSS.
+		def initialize(root, path, scope = nil)
+			@root = File.expand_path(root)
+			@path = path
+			@scope = scope
+		end
+		
+		# @attribute [String] The path relative to the presentation root.
+		attr :path
+		
+		# @attribute [String | Nil] The generated CSS scope selector.
+		attr :scope
+		
+		# The URL from which this stylesheet is served.
+		# @returns [String]
+		def url
+			PREFIX + self.class.encode_path(@path)
+		end
+		
+		# The absolute source path.
+		# @returns [String]
+		def source_path
+			File.join(@root, @path)
+		end
+		
+		# Read this stylesheet and apply its generated scope when required.
+		# @returns [String]
+		def read
+			content = File.read(source_path)
+			return content unless @scope
+			
+			"@scope (#{@scope}) {\n#{content}\n}\n"
+		end
+	end
+end
diff --git a/presently.gemspec b/presently.gemspec
index 7f19e15..653d5ab 100644
--- a/presently.gemspec
+++ b/presently.gemspec
@@ -26,7 +26,8 @@ Gem::Specification.new do |spec|
 	
 	spec.required_ruby_version = ">= 3.3"
 	
-	spec.add_dependency "lively", "~> 0.19"
+	spec.add_dependency "lively", "~> 0.20"
 	spec.add_dependency "markly", "~> 0.16"
 	spec.add_dependency "async-webdriver", "~> 0.12"
+	spec.add_dependency "protocol-media-registry", "~> 0.0"
 end
diff --git a/readme.md b/readme.md
index 60875c6..809c2d0 100644
--- a/readme.md
+++ b/readme.md
@@ -13,6 +13,7 @@ A web-based presentation tool built with [Lively](https://github.com/socketry/li
   - **Real-time sync** between display and presenter via WebSockets.
   - **Code highlighting** with [@socketry/syntax](https://github.com/socketry/syntax-js), including animated focus regions for code walkthroughs.
   - **Multiple templates** — title, section, two-column, code, translation, image, and default.
+  - **Colocated styles** — presentation, directory, and slide-specific CSS can live beside the slides it styles.
   - **Timing and pacing** — per-slide duration metadata with elapsed/remaining time and pacing indicators.
   - **Slide narration** — record, review, and retake one audio track per slide from a dedicated recording interface.
   - **Narrated playback** — automatically play each slide with its recorded narration, including slide scripts and transitions.
diff --git a/test/presently/application.rb b/test/presently/application.rb
index c2aad01..cc17990 100644
--- a/test/presently/application.rb
+++ b/test/presently/application.rb
@@ -56,6 +56,68 @@ def request(method, path, headers = {}, body = nil)
 		expect(response.status).to be == 404
 	end
 	
+	it "includes presentation stylesheets in live pages" do
+		File.write(File.join(slides_root, "style.css"), ".slide { color: blue; }\n")
+		
+		response = application.call(request("GET", "/"))
+		
+		expect(response.read).to be(:include?, 'href="/_slides/style.css"')
+	end
+	
+	it "serves scoped directory stylesheets" do
+		directory = File.join(slides_root, "020-section")
+		FileUtils.mkdir_p(directory)
+		File.write(File.join(directory, "010-example.md"), "Example\n")
+		File.write(File.join(directory, "style.css"), ".diagram { color: orange; }\n")
+		
+		response = application.call(request("GET", "/_slides/020-section/style.css"))
+		css = response.read
+		
+		expect(response.status).to be == 200
+		expect(response.headers["content-type"]).to be == "text/css"
+		expect(css).to be(:include?, '@scope (.slide[data-slide-path^="020-section/"])')
+		expect(css).to be(:include?, ".diagram { color: orange; }")
+	end
+	
+	it "serves assets adjacent to presentation stylesheets" do
+		directory = File.join(slides_root, "020-section")
+		FileUtils.mkdir_p(directory)
+		File.write(File.join(directory, "diagram.svg"), "<svg></svg>")
+		
+		response = application.call(request("GET", "/_slides/020-section/diagram.svg"))
+		
+		expect(response.status).to be == 200
+		expect(response.headers["content-type"]).to be == "image/svg+xml"
+		expect(response.read).to be == "<svg></svg>"
+	end
+	
+	it "uses the media registry for adjacent asset content types" do
+		directory = File.join(slides_root, "020-section")
+		FileUtils.mkdir_p(directory)
+		File.binwrite(File.join(directory, "diagram.avif"), "image data")
+		
+		response = application.call(request("GET", "/_slides/020-section/diagram.avif"))
+		
+		expect(response.status).to be == 200
+		expect(response.headers["content-type"]).to be == "image/avif"
+		expect(response.read).to be == "image data"
+	end
+	
+	it "serves Markdown using its registered content type" do
+		response = application.call(request("GET", "/_slides/010-example.md"))
+		
+		expect(response.status).to be == 200
+		expect(response.headers["content-type"]).to be == "text/markdown"
+		expect(response.read).to be == "Example slide\n"
+	end
+	
+	it "only reads presentation assets" do
+		response = application.call(request("POST", "/_slides/010-example.css"))
+		
+		expect(response.status).to be == 405
+		expect(response.headers["allow"]).to be == ["GET", "HEAD"]
+	end
+	
 	it "stores and serves a slide recording" do
 		put = application.call(request("PUT", "/recordings?index=0", {"content-type" => "audio/webm;codecs=opus"}, "audio data"))
 		expect(put.status).to be == 201
diff --git a/test/presently/export.rb b/test/presently/export.rb
index 163a22c..5a20244 100644
--- a/test/presently/export.rb
+++ b/test/presently/export.rb
@@ -139,6 +139,12 @@ def write_slide(name, content)
 			html = export.call
 			expect(html).to be(:include?, "export.js")
 		end
+		
+		it "loads presentation stylesheets" do
+			File.write(File.join(dir, "style.css"), ".slide { color: blue; }\n")
+			
+			expect(export.call).to be(:include?, 'href="/_slides/style.css"')
+		end
 	end
 	
 	with "notes disabled" do
diff --git a/test/presently/playback.rb b/test/presently/playback.rb
index cbe0a30..9574b16 100644
--- a/test/presently/playback.rb
+++ b/test/presently/playback.rb
@@ -47,6 +47,12 @@
 			expect(playback.call).to be(:include?, "playback.js")
 		end
 		
+		it "loads presentation stylesheets" do
+			File.write(File.join(dir, "style.css"), ".slide { color: blue; }\n")
+			
+			expect(playback.call).to be(:include?, 'href="/_slides/style.css"')
+		end
+		
 		it "omits an unavailable narration track" do
 			playback = subject.new(presentation: presentation, recording_urls: [recording_urls.first, nil])
 			
diff --git a/test/presently/slide.rb b/test/presently/slide.rb
index d9a2331..d41f792 100644
--- a/test/presently/slide.rb
+++ b/test/presently/slide.rb
@@ -257,6 +257,60 @@ def load_slide(path)
 		end
 	end
 	
+	with "relative Markdown images" do
+		let(:dir) {Dir.mktmpdir}
+		let(:path) {File.join(dir, "010-section", "010-images.md")}
+		
+		before do
+			FileUtils.mkdir_p(File.dirname(path))
+			File.write(path, <<~MARKDOWN)
+				![Local](diagram.svg)
+				![Parent](../shared/diagram.svg?size=large#preview)
+				![Root](/images/diagram.svg)
+				![Remote](https://example.com/diagram.svg)
+			MARKDOWN
+		end
+		
+		after do
+			FileUtils.remove_entry(dir)
+		end
+		
+		let(:slide) {Presently::Presentation.new(dir).slides.first}
+		let(:html) {slide.content["body"].to_html}
+		
+		it "resolves local images relative to the slide source" do
+			expect(html).to be(:include?, 'src="/_slides/010-section/diagram.svg"')
+			expect(html).to be(:include?, 'src="/_slides/shared/diagram.svg?size=large#preview"')
+		end
+		
+		it "preserves root-relative and external images" do
+			expect(html).to be(:include?, 'src="/images/diagram.svg"')
+			expect(html).to be(:include?, 'src="https://example.com/diagram.svg"')
+		end
+	end
+	
+	with "a relative image in an included Markdown file" do
+		let(:dir) {Dir.mktmpdir}
+		let(:path) {File.join(dir, "010-main.md")}
+		let(:included_path) {File.join(dir, "shared", "snippet.md")}
+		
+		before do
+			FileUtils.mkdir_p(File.dirname(included_path))
+			File.write(included_path, "![Included](images/diagram.svg)\n")
+			File.write(path, "![[shared/snippet.md]]\n")
+		end
+		
+		after do
+			FileUtils.remove_entry(dir)
+		end
+		
+		let(:slide) {load_slide(path)}
+		
+		it "resolves the image relative to the included source" do
+			expect(slide.content["body"].to_html).to be(:include?, 'src="/_slides/shared/images/diagram.svg"')
+		end
+	end
+	
 	with "a slide with transition and focus front_matter" do
 		let(:dir) {Dir.mktmpdir}
 		let(:path) {File.join(dir, "test.md")}
diff --git a/test/presently/slide_renderer.rb b/test/presently/slide_renderer.rb
index c5c3a4d..cfc2cbf 100644
--- a/test/presently/slide_renderer.rb
+++ b/test/presently/slide_renderer.rb
@@ -59,3 +59,23 @@ def load_slide(path)
 		end
 	end
 end
+
+describe Presently::SlideRenderer do
+	let(:dir) {Dir.mktmpdir}
+	let(:path) {File.join(dir, "010-example.md")}
+	
+	before do
+		File.write(path, "Example slide\n")
+	end
+	
+	after do
+		FileUtils.remove_entry(dir)
+	end
+	
+	it "identifies the rendered slide by its presentation path" do
+		presentation = Presently::Presentation.load(dir)
+		html = subject.new(templates: presentation.templates).render_to_html(presentation.slides.first)
+		
+		expect(html).to be(:include?, 'data-slide-path="010-example.md"')
+	end
+end
diff --git a/test/presently/stylesheet.rb b/test/presently/stylesheet.rb
new file mode 100644
index 0000000..0423674
--- /dev/null
+++ b/test/presently/stylesheet.rb
@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+# Released under the MIT License.
+# Copyright, 2026, by Samuel Williams.
+
+require "presently/presentation"
+require "tmpdir"
+require "fileutils"
+
+describe Presently::Stylesheet do
+	around do |&block|
+		Dir.mktmpdir do |root|
+			@root = root
+			FileUtils.mkdir_p(File.join(root, "020-scheduling", "030-details"))
+			
+			File.write(File.join(root, "010-introduction.md"), "Introduction\n")
+			File.write(File.join(root, "020-scheduling", "010-overview.md"), "Overview\n")
+			File.write(File.join(root, "020-scheduling", "030-details", "010-queue.md"), "Queue\n")
+			
+			File.write(File.join(root, "style.css"), ":root { --accent: blue; }\n")
+			File.write(File.join(root, "010-introduction.css"), ".title { color: blue; }\n")
+			File.write(File.join(root, "020-scheduling", "style.css"), ".diagram { color: orange; }\n")
+			File.write(File.join(root, "020-scheduling", "010-overview.css"), ".overview { display: grid; }\n")
+			File.write(File.join(root, "020-scheduling", "030-details", "style.css"), ".detail { color: green; }\n")
+			
+			block.call
+		end
+	end
+	
+	let(:presentation) {Presently::Presentation.load(@root)}
+	let(:stylesheets) {presentation.stylesheets}
+	
+	it "discovers global, directory, and slide styles in cascade order" do
+		expect(stylesheets.map(&:path)).to be == [
+			"style.css",
+			"010-introduction.css",
+			File.join("020-scheduling", "style.css"),
+			File.join("020-scheduling", "010-overview.css"),
+			File.join("020-scheduling", "030-details", "style.css"),
+		]
+	end
+	
+	it "leaves the root stylesheet global" do
+		expect(stylesheets.first.scope).to be_nil
+		expect(stylesheets.first.read).to be == ":root { --accent: blue; }\n"
+	end
+	
+	it "scopes a directory stylesheet to every slide below it" do
+		stylesheet = stylesheets.find{|stylesheet| stylesheet.path == File.join("020-scheduling", "style.css")}
+		
+		expect(stylesheet.scope).to be == '.slide[data-slide-path^="020-scheduling/"]'
+		expect(stylesheet.read).to be(:start_with?, '@scope (.slide[data-slide-path^="020-scheduling/"]) {')
+	end
+	
+	it "scopes a sidecar stylesheet to its matching slide" do
+		stylesheet = stylesheets.find{|stylesheet| stylesheet.path == File.join("020-scheduling", "010-overview.css")}
+		
+		expect(stylesheet.scope).to be == '.slide[data-slide-path="020-scheduling/010-overview.md"]'
+		expect(stylesheet.read).to be(:include?, ".overview { display: grid; }")
+	end
+	
+	it "serves stylesheets from paths matching their source directories" do
+		stylesheet = stylesheets.find{|stylesheet| stylesheet.path == File.join("020-scheduling", "010-overview.css")}
+		
+		expect(stylesheet.url).to be == "/_slides/020-scheduling/010-overview.css"
+	end
+	
+	it "URL-encodes path components" do
+		expect(subject.encode_path(File.join("020-a section", '010-"quote".md'))).to be == "020-a%20section/010-%22quote%22.md"
+	end
+end