mp 0.1.0

data/lib/mp/slide_renderer.rb

@@ -0,0 +1,184 @@
+# frozen_string_literal: true
+
+require "cgi"
+require "kramdown"
+require "kramdown-parser-gfm"
+require "rouge"
+
+module Mp
+  # Rouge の HTML フォーマッタは <span> しか出さないので、<pre> で包む
+  class CodeFormatter < Rouge::Formatters::HTML
+    def stream(tokens, &block)
+      yield %(<pre class="highlight"><code>)
+      super
+      yield "</code></pre>"
+    end
+  end
+
+  # 1 スライド分の Markdown を <section> にする。
+  class SlideRenderer
+    FILTERS = %w[blur brightness contrast drop-shadow grayscale hue-rotate invert opacity saturate sepia].freeze
+    FILTER_DEFAULTS = {
+      "blur" => "10px", "brightness" => "1.5", "contrast" => "2", "drop-shadow" => "0 5px 10px rgba(0,0,0,.4)",
+      "grayscale" => "1", "hue-rotate" => "180deg", "invert" => "1", "opacity" => ".5",
+      "saturate" => "2", "sepia" => "1"
+    }.freeze
+    KRAMDOWN = {
+      input: "GFM", auto_ids: false, smart_quotes: "apos,apos,quot,quot",
+      syntax_highlighter: "rouge", syntax_highlighter_opts: { formatter: CodeFormatter }
+    }.freeze
+
+    def initialize(chunk, index:, total:, directives:, tokens:)
+      @chunk = chunk
+      @index = index
+      @total = total
+      @directives = directives
+      @tokens = tokens
+      @backgrounds = []
+      @split = nil
+    end
+
+    def render
+      source = @chunk.lines.join("\n")
+      document = Kramdown::Document.new(source, KRAMDOWN)
+      @source_lines = source.split("\n", -1)
+      transform(document.root)
+      html = scope_styles(restore_tokens(document.to_html))
+      html = html.sub(/<h([12])>/, '<h\1 class="fit">') if @chunk.fit
+
+      { html: %(<section class="#{classes}" data-index="#{@index}" style="#{CGI.escapeHTML(style)}">) \
+              "#{background_html}#{furniture(:header)}#{html}#{furniture(:footer)}#{page_number}</section>" }
+    end
+
+    private
+
+    def transform(element)
+      element.children.each { transform(_1) }
+      element.children.reject! { |child| background_only?(child) }
+      mark_fragments(element) if element.type == :ul
+      element.children.each { convert_image(_1) if _1.type == :img }
+    end
+
+    def background_only?(element)
+      return false unless element.type == :p
+
+      images, rest = element.children.partition { _1.type == :img && keywords(_1).include?("bg") }
+      images.each { add_background(_1) }
+      element.children.replace(rest)
+      !images.empty? && rest.all? { _1.type == :text && _1.value.strip.empty? }
+    end
+
+    def keywords(image)
+      image.attr["alt"].to_s.split
+    end
+
+    def add_background(image)
+      size = "cover"
+      filters = []
+      keywords(image).each do |word|
+        name, value = word.split(":", 2)
+        case name
+        when "left", "right" then @split = [name, value || "50%"]
+        when "cover", "contain", "auto" then size = name
+        when "fit" then size = "contain"
+        when "vertical" then @vertical = true
+        when /\A\d+(\.\d+)?%\z/ then size = name
+        when *FILTERS then filters << "#{name}(#{value || FILTER_DEFAULTS[name]})"
+        end
+      end
+      @backgrounds << { src: image.attr["src"], size: size, filter: filters.join(" ") }
+    end
+
+    # Marp と同じく `*` のリストは 1 項目ずつ表示する
+    def mark_fragments(list)
+      list.children.each do |item|
+        line = @source_lines[item.options[:location].to_i - 1].to_s
+        item.attr["class"] = "fragment" if line.lstrip.start_with?("*")
+      end
+    end
+
+    def convert_image(image)
+      return if keywords(image).include?("bg") # 親の段落を処理するときに背景へ移す
+
+      styles = []
+      alt = keywords(image).reject do |word|
+        name, value = word.split(":", 2)
+        case name
+        when "w", "width" then styles << "width:#{css_length(value)}"
+        when "h", "height" then styles << "height:#{css_length(value)}"
+        when *FILTERS then (@image_filters ||= []) << "#{name}(#{value || FILTER_DEFAULTS[name]})"
+        else next false
+        end
+        true
+      end
+      styles << "filter:#{@image_filters.join(" ")}" if @image_filters
+      @image_filters = nil
+      image.attr["alt"] = alt.join(" ")
+      image.attr["style"] = styles.join(";") unless styles.empty?
+    end
+
+    def css_length(value)
+      value.to_s.match?(/\A\d+(\.\d+)?\z/) ? "#{value}px" : value.to_s
+    end
+
+    def restore_tokens(html)
+      html.gsub(%r{<p>(MPTOKEN\d+X)</p>}) { @tokens.fetch(Regexp.last_match(1)) }
+          .gsub(/MPTOKEN\d+X/) { |key| @tokens.fetch(key) }
+    end
+
+    # <style scoped> はそのスライドだけに効かせる
+    def scope_styles(html)
+      html.gsub(%r{<style\s+scoped[^>]*>(.*?)</style>}m) do
+        %(<style>@scope (section[data-index="#{@index}"]) { #{Regexp.last_match(1)} }</style>)
+      end
+    end
+
+    def classes
+      kind = { cover: "cover", continuation: "continuation" }[@chunk.kind]
+      ["slide", kind, *Array(@directives["class"]).flat_map { _1.to_s.split }].compact.join(" ")
+    end
+
+    def style
+      map = {
+        "backgroundColor" => "background-color", "backgroundImage" => "background-image",
+        "backgroundPosition" => "background-position", "backgroundRepeat" => "background-repeat",
+        "backgroundSize" => "background-size", "color" => "color"
+      }
+      styles = map.filter_map { |key, css| "#{css}:#{@directives[key]}" if @directives[key] }
+      styles << "--split-#{@split[0]}:#{@split[1]}" if @split
+      styles.join(";")
+    end
+
+    def background_html
+      return "" if @backgrounds.empty?
+
+      position = case @split&.first
+                 when "left" then "left:0;width:#{@split[1]}"
+                 when "right" then "right:0;width:#{@split[1]}"
+                 else "left:0;width:100%"
+                 end
+      images = @backgrounds.map do |bg|
+        css = %(background-image:url("#{bg[:src].gsub('"', "%22")}");background-size:#{bg[:size]})
+        css += ";filter:#{bg[:filter]}" unless bg[:filter].empty?
+        %(<div class="bg-image" style="#{CGI.escapeHTML(css)}"></div>)
+      end
+      direction = @vertical ? ";flex-direction:column" : ""
+      %(<div class="bg-layer" style="#{position}#{direction}">#{images.join}</div>)
+    end
+
+    def furniture(name)
+      text = @directives[name.to_s]
+      return "" if text.to_s.empty?
+
+      inline = Kramdown::Document.new(text.to_s, input: "GFM").to_html.strip.sub(%r{\A<p>(.*)</p>\z}m, '\1')
+      "<#{name}>#{inline}</#{name}>"
+    end
+
+    def page_number
+      show = @directives["paginate"]
+      return "" unless show == true && @chunk.kind != :cover
+
+      %(<div class="page-number">#{@index + 1} / #{@total}</div>)
+    end
+  end
+end

data/lib/mp/terminal.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+require "io/console"
+require "pty"
+
+module Mp
+  # 1 つの埋め込みに対応するシェル。
+  class Terminal
+    def initialize(cwd:, cols:, rows:)
+      env = { "TERM" => "xterm-256color", "COLORTERM" => "truecolor" }
+      @output, @input, @pid = PTY.spawn(env, ENV.fetch("SHELL", "/bin/sh"), "-l", chdir: cwd)
+      resize(cols, rows)
+    end
+
+    def read_loop
+      loop { yield @output.readpartial(16_384) }
+    rescue EOFError, Errno::EIO, IOError
+      nil # シェル終了時、Linux では EIO になる
+    end
+
+    def write(data)
+      @input.write(data)
+    rescue IOError, Errno::EIO
+      nil
+    end
+
+    def resize(cols, rows)
+      @output.winsize = [rows.clamp(2, 500), cols.clamp(2, 500)]
+    rescue IOError, Errno::EIO
+      nil
+    end
+
+    def close
+      Process.kill("HUP", @pid)
+      Process.detach(@pid)
+      [@input, @output].each(&:close)
+    rescue Errno::ESRCH, IOError
+      nil
+    end
+  end
+end

data/lib/mp/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module Mp
+  VERSION = "0.1.0"
+end

data/lib/mp/web_socket.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+require "monitor"
+require "websocket/driver"
+
+module Mp
+  # Rack hijack したソケットを WebSocket として扱う。
+  class WebSocketConnection
+    attr_reader :env
+
+    def initialize(env)
+      @env = env
+      @lock = Monitor.new
+      @socket = env["rack.hijack"].call
+      @driver = WebSocket::Driver.rack(self, max_length: 16 * 1024 * 1024)
+    end
+
+    def on_message(&block) = @driver.on(:message) { |event| block.call(event.data) }
+    def on_close(&block) = (@on_close = block)
+
+    def run
+      @driver.start
+      Thread.new do
+        loop { @driver.parse(@socket.readpartial(16_384)) }
+      rescue IOError, SystemCallError
+        nil
+      ensure
+        @socket.close unless @socket.closed?
+        @on_close&.call
+      end
+    end
+
+    # websocket-driver が呼ぶ
+    def write(data)
+      @lock.synchronize { @socket.write(data) }
+    rescue IOError, SystemCallError
+      nil
+    end
+
+    def send_text(text) = @lock.synchronize { @driver.text(text) }
+    def send_binary(data) = @lock.synchronize { @driver.binary(data.bytes) }
+
+    def close
+      @socket.close unless @socket.closed?
+    rescue IOError
+      nil
+    end
+  end
+end

data/lib/mp.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+require_relative "mp/version"
+require_relative "mp/deck"
+require_relative "mp/browser"
+require_relative "mp/frame_unblocker"
+require_relative "mp/server"
+require_relative "mp/app"
+
+module Mp
+  ROOT = File.expand_path("..", __dir__)
+end

data/public/app.js

@@ -0,0 +1,306 @@
+"use strict";
+
+const stage = document.getElementById("stage");
+const notesPanel = document.getElementById("notes");
+const helpPanel = document.getElementById("help");
+const wsBase = `ws://${location.host}${location.pathname}_mp/`;
+
+let deck = null;
+let slides = [];
+let current = 0;
+let terminals = new Map(); // embed id -> { term, socket, fit, host, slot, font }
+let scale = 1;
+let activeTerminal = null;
+let digits = "";
+
+async function loadDeck() {
+  for (const { socket, term, host } of terminals.values()) {
+    socket.onclose = null;
+    socket.close();
+    term.dispose();
+    host.remove();
+  }
+  terminals = new Map();
+  activeTerminal = null;
+
+  deck = await MpSlides.load(stage);
+  slides = [...stage.querySelectorAll(":scope > section.slide")];
+  layout();
+  show(Math.min(Number(location.hash.slice(1) || 1) - 1, slides.length - 1), { fragments: "none" });
+}
+
+function layout() {
+  if (!deck) return;
+  scale = Math.min(innerWidth / deck.size[0], innerHeight / deck.size[1]);
+  stage.style.transform = `translate(-50%, -50%) scale(${scale})`;
+  placeTerminals();
+}
+
+// xterm.js は文字幅を getBoundingClientRect で測るので、transform の中に置くと
+// 拡大率が二重に効いて桁数や行数が狂う。ステージの外に置き、埋め込み位置へ重ねる
+function placeTerminals() {
+  const padding = 12 * scale;
+  for (const { term, fit, host, slot, font } of terminals.values()) {
+    host.hidden = !slot.closest("section").classList.contains("active");
+    if (host.hidden) continue;
+    const rect = slot.getBoundingClientRect();
+    Object.assign(host.style, {
+      left: `${rect.left + padding}px`,
+      top: `${rect.top + padding}px`,
+      width: `${rect.width - padding * 2}px`,
+      height: `${rect.height - padding * 2}px`,
+    });
+    term.options.fontSize = Math.round(font * scale);
+    fit.fit();
+  }
+}
+
+function fragmentsOf(slide) {
+  return [...slide.querySelectorAll(".fragment")];
+}
+
+function show(index, { fragments }) {
+  if (!slides[index]) index = 0;
+  releaseFocus();
+  slides[current]?.classList.remove("active");
+  slides[current]?.querySelectorAll("iframe").forEach((frame) => frame.blur());
+  current = index;
+  const slide = slides[current];
+  slide.classList.add("active");
+  fragmentsOf(slide).forEach((el) => el.classList.toggle("shown", fragments === "all"));
+  history.replaceState(null, "", `#${current + 1}`);
+  mountEmbeds(slide);
+  renderNotes();
+  sendState();
+}
+
+// 発表者ビューへ今の表示を伝える
+function sendState() {
+  if (events.readyState !== WebSocket.OPEN || !slides[current]) return;
+  const step = fragmentsOf(slides[current]).filter((el) => el.classList.contains("shown")).length;
+  const terminal = currentTerminal();
+  events.send(JSON.stringify({
+    type: "state", slide: current, step, script: terminal?.script() ?? null, ready: terminal?.ready() ?? false,
+  }));
+}
+
+function currentTerminal() {
+  const entries = [...slides[current].querySelectorAll(".embed-terminal")].map((el) => terminals.get(el.dataset.embed));
+  return entries.find((entry) => entry?.script().length) ?? entries[0];
+}
+
+// 発表者ビューの Enter。ターミナルにフォーカスがなくても実行できるようにする
+function runTerminal() {
+  const terminal = currentTerminal();
+  // コマンドを打ち込む前の Enter は空行になるだけなので送らない
+  if (terminal && (terminal.ready() || !terminal.script().length)) terminal.term.input("\r");
+}
+
+function next() {
+  const hidden = fragmentsOf(slides[current]).find((el) => !el.classList.contains("shown"));
+  if (hidden) {
+    hidden.classList.add("shown");
+    sendState();
+  } else if (current < slides.length - 1) {
+    show(current + 1, { fragments: "none" });
+  }
+}
+
+function prev() {
+  const shown = fragmentsOf(slides[current]).filter((el) => el.classList.contains("shown")).pop();
+  if (shown) {
+    shown.classList.remove("shown");
+    sendState();
+  } else if (current > 0) {
+    show(current - 1, { fragments: "all" });
+  }
+}
+
+function mountEmbeds(slide) {
+  slide.querySelectorAll(".embed:not(.mounted)").forEach((el) => {
+    el.classList.add("mounted");
+    const embed = deck.embeds[el.dataset.embed];
+    if (embed.type === "terminal") mountTerminal(el, el.dataset.embed, embed);
+    else mountWeb(el, embed);
+  });
+  placeTerminals();
+}
+
+function mountTerminal(slot, id, embed) {
+  const host = document.createElement("div");
+  host.className = "terminal-host";
+  document.body.append(host);
+  const term = new Terminal({
+    fontFamily: 'Menlo, "Hiragino Sans", monospace',
+    fontSize: Math.round(embed.font * scale),
+    cursorBlink: true,
+    theme: { background: "#14161b", foreground: "#e6e6e6" },
+  });
+  const fit = new FitAddon.FitAddon();
+  term.loadAddon(fit);
+  term.open(host);
+  const script = () => (typed ? [typed, ...queue] : [...queue]);
+  const ready = () => typed !== null;
+  terminals.set(id, { term, fit, host, slot, font: embed.font, script, ready });
+  placeTerminals();
+
+  const socket = new WebSocket(`${wsBase}pty?id=${id}&cols=${term.cols}&rows=${term.rows}`);
+  socket.binaryType = "arraybuffer";
+  const queue = [...embed.commands];
+  let idleTimer = null;
+  let waitingToType = queue.length > 0;
+  let typed = null; // 入力欄にあって実行待ちのコマンド
+
+  // 台本のコマンドは入力欄に打つだけで実行しない。実行は発表者の Enter に任せる
+  const typeNextWhenIdle = () => {
+    clearTimeout(idleTimer);
+    if (!waitingToType) return;
+    idleTimer = setTimeout(() => {
+      waitingToType = false;
+      if (queue.length) {
+        typed = queue.shift();
+        send({ input: typed });
+        sendState();
+      }
+    }, 400);
+  };
+  const send = (message) => {
+    if (socket.readyState === WebSocket.OPEN) socket.send(JSON.stringify(message));
+  };
+
+  socket.onmessage = (event) => {
+    term.write(new Uint8Array(event.data));
+    typeNextWhenIdle();
+  };
+  socket.onclose = () => term.write("\r\n\x1b[2m[セッション終了]\x1b[0m\r\n");
+  term.onData((data) => {
+    send({ input: data });
+    if (data.includes("\r")) {
+      typed = null;
+      if (queue.length) waitingToType = true;
+      sendState();
+    }
+  });
+  term.onResize(({ cols, rows }) => send({ resize: [cols, rows] }));
+  term.attachCustomKeyEventHandler(() => true);
+  term.textarea.addEventListener("focus", () => (activeTerminal = term));
+  term.textarea.addEventListener("blur", () => {
+    if (activeTerminal === term) activeTerminal = null;
+  });
+
+  terminals.get(id).socket = socket;
+}
+
+function mountWeb(el, embed) {
+  if (!embed.src) {
+    el.textContent = "URL が指定されていません";
+    return;
+  }
+  const frame = document.createElement("iframe");
+  frame.src = embed.src;
+  // サイトが親ページを遷移させる処理(フレーム破壊)を防ぐため top navigation は許可しない
+  frame.sandbox = "allow-scripts allow-same-origin allow-forms allow-popups allow-modals allow-downloads";
+  frame.allow = "fullscreen";
+  if (embed.zoom !== 1) {
+    frame.style.width = `${100 / embed.zoom}%`;
+    frame.style.height = `${100 / embed.zoom}%`;
+    frame.style.transform = `scale(${embed.zoom})`;
+    frame.style.transformOrigin = "0 0";
+  }
+  // iframe にフォーカスが移るとキー操作が届かなくなるので、クリックするまで覆っておく
+  const shield = document.createElement("button");
+  shield.className = "shield";
+  shield.title = "クリックでページを操作";
+  shield.addEventListener("click", () => {
+    shield.hidden = true;
+    frame.focus();
+  });
+  el.addEventListener("mouseleave", () => {
+    shield.hidden = false;
+    frame.blur();
+    window.focus();
+  });
+  el.append(frame, shield);
+}
+
+function releaseFocus() {
+  activeTerminal?.blur();
+  activeTerminal = null;
+}
+
+function focusTerminal() {
+  const el = slides[current].querySelector(".embed-terminal");
+  if (el) terminals.get(el.dataset.embed)?.term.focus();
+}
+
+function renderNotes() {
+  notesPanel.textContent = deck.slides[current].notes || "(ノートなし)";
+}
+
+function toggleFullscreen() {
+  if (document.fullscreenElement) document.exitFullscreen();
+  else document.documentElement.requestFullscreen();
+}
+
+window.addEventListener("keydown", (event) => {
+  const command = event.metaKey || event.ctrlKey;
+  // ターミナル操作中でも効くキー。xterm より先に受けるためキャプチャ段階で処理する
+  if (command && (event.key === "ArrowRight" || event.key === "ArrowLeft")) {
+    event.preventDefault();
+    event.stopPropagation();
+    event.key === "ArrowRight" ? next() : prev();
+    return;
+  }
+  if (command && event.key === ".") {
+    event.preventDefault();
+    event.stopPropagation();
+    releaseFocus();
+    return;
+  }
+  if (activeTerminal || command || event.altKey) return;
+
+  const actions = {
+    ArrowRight: next, ArrowDown: next, PageDown: next, " ": next,
+    ArrowLeft: prev, ArrowUp: prev, PageUp: prev,
+    Home: () => show(0, { fragments: "none" }),
+    End: () => show(slides.length - 1, { fragments: "all" }),
+    f: toggleFullscreen,
+    n: () => (notesPanel.hidden = !notesPanel.hidden),
+    t: focusTerminal,
+    "?": () => (helpPanel.hidden = !helpPanel.hidden),
+    p: () => events.send(JSON.stringify({ type: "open-presenter" })),
+    q: () => events.send(JSON.stringify({ type: "quit" })),
+  };
+  if (/^\d$/.test(event.key)) {
+    digits += event.key;
+  } else if (event.key === "Enter" && digits) {
+    show(Math.min(Number(digits), slides.length) - 1, { fragments: "all" });
+    digits = "";
+  } else if (actions[event.key]) {
+    event.preventDefault();
+    digits = "";
+    actions[event.key]();
+  }
+}, true);
+
+window.addEventListener("resize", layout);
+
+const commands = {
+  next,
+  prev,
+  run: runTerminal,
+  first: () => show(0, { fragments: "none" }),
+  last: () => show(slides.length - 1, { fragments: "all" }),
+  goto: ({ slide }) => show(Math.min(Math.max(slide, 0), slides.length - 1), { fragments: "all" }),
+};
+
+const events = new WebSocket(`${wsBase}events?role=audience`);
+events.onopen = sendState;
+events.onmessage = (event) => {
+  const message = JSON.parse(event.data);
+  if (message.type === "reload") loadDeck();
+  else if (message.type === "hello") sendState();
+  else if (message.type === "command") commands[message.cmd]?.(message);
+};
+
+loadDeck();

data/public/index.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="ja">
+<head>
+  <meta charset="utf-8">
+  <title>mp</title>
+  <link rel="stylesheet" href="_mp/vendor/xterm/xterm.css">
+  <link rel="stylesheet" href="_mp/vendor/katex/katex.min.css">
+  <link rel="stylesheet" href="_mp/style.css">
+  <style id="theme"></style>
+  <style id="deck-style"></style>
+</head>
+<body>
+  <div id="stage"></div>
+  <aside id="notes" hidden></aside>
+  <aside id="help" hidden>
+    <h3>キー操作</h3>
+    <dl>
+      <dt>→ ↓ Space PageDown</dt><dd>次へ</dd>
+      <dt>← ↑ PageUp</dt><dd>前へ</dd>
+      <dt>Home / End</dt><dd>最初 / 最後</dd>
+      <dt>数字 + Enter</dt><dd>そのページへ</dd>
+      <dt>t またはクリック</dt><dd>ターミナルを操作</dd>
+      <dt>⌘. </dt><dd>ターミナルから抜ける</dd>
+      <dt>⌘← / ⌘→</dt><dd>ターミナル操作中でもページ移動</dd>
+      <dt>f</dt><dd>全画面の切り替え</dd>
+      <dt>n</dt><dd>発表者ノート</dd>
+      <dt>p</dt><dd>発表者ビュー</dd>
+      <dt>q</dt><dd>終了</dd>
+    </dl>
+  </aside>
+  <script src="_mp/vendor/xterm/xterm.js"></script>
+  <script src="_mp/vendor/xterm/addon-fit.js"></script>
+  <script src="_mp/vendor/katex/katex.min.js"></script>
+  <script src="_mp/slides.js"></script>
+  <script src="_mp/app.js"></script>
+</body>
+</html>

data/public/presenter.css

@@ -0,0 +1,33 @@
+body.presenter {
+  display: grid;
+  grid-template-columns: 3fr 2fr;
+  grid-template-rows: 2fr 3fr auto;
+  gap: 12px;
+  box-sizing: border-box;
+  height: 100vh;
+  padding: 14px 16px 8px;
+  background: #101218;
+  color: #e9ecf2;
+  font-family: "Hiragino Sans", system-ui, sans-serif;
+}
+.pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+.current-pane { grid-row: 1 / 3; }
+.status { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 24px; }
+
+.label { font-size: 14px; color: #98a1b3; margin-bottom: 6px; }
+.label span { color: #e9ecf2; font-weight: 600; margin-left: 8px; }
+
+.frame { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #000; }
+.stage { position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: 0 0; }
+#mirror { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
+#end { position: absolute; inset: 0; display: grid; place-items: center; color: #98a1b3; font-size: 18px; }
+
+.embed-summary { margin: 0; padding: 20px; background: none; color: #e6e6e6; font: 22px/1.5 Menlo, monospace; white-space: pre-wrap; word-break: break-all; }
+.embed-web .embed-summary { color: #333; }
+
+#script { margin-top: 10px; padding: 10px 14px; border-radius: 8px; background: #1d2736; color: #9fc4ff; font: 20px/1.4 Menlo, "Hiragino Sans", monospace; }
+#speaker-notes { flex: 1; min-height: 0; overflow: auto; line-height: 1.6; white-space: pre-wrap; }
+
+#elapsed { font: 600 34px Menlo, monospace; }
+#clock { font: 20px Menlo, monospace; color: #98a1b3; }
+.hints { margin-left: auto; font-size: 13px; color: #6f7889; }