mdeck 3.6.1 → 3.7.0

package/src/cli/themes.js

@@ -27,7 +27,7 @@ function looksOf(registry, catalogue) {
   const palettes = manifestsOf(registry, 'palette')
   // Each theme's icon for the gallery's list (see renderPreviews).
   const icons = new Map(catalogue.themes.map(entry => [entry.id, entry.icon]))
-  const colours = tokens => Object.fromEntries(['--bg', '--surface', '--ink', '--accent', '--accent-2'].map(key => [key, tokens?.[key] ?? null]))
+  const colours = tokens => Object.fromEntries(['--bg', '--surface', '--ink', '--accent', '--accent-2', '--accent-3'].map(key => [key, tokens?.[key] ?? null]))
   return {
     mdeck: VERSION,
     themes: Object.values(manifestsOf(registry, 'theme')).map(theme => ({ id: theme.id, title: theme.title, description: theme.description ?? '', builtIn: builtIn.has(theme.id + ':t'),

package/src/components/callout.css

@@ -1,11 +1,6 @@
-:root {
-  --callout-note:      #0969da;
-  --callout-tip:       #1a7f37;
-  --callout-important: #8250df;
-  --callout-warning:   #eab308;
-  --callout-caution:   #cf222e;
-}
-
+/* Callouts take the palette's accents by what they mean: a note, a tip and
+   something important are emphasis, in the accent; a warning and a caution
+   call for attention, in the third accent. */
 .callout {
   border-left: 4px solid var(--rule);
   padding: 20px 28px;
@@ -21,20 +16,15 @@
 }
 .callout p { margin: 0; color: var(--ink-soft); padding-left: 28px; }
 
-.callout-note      { border-left-color: var(--callout-note); }
-.callout-tip       { border-left-color: var(--callout-tip); }
-.callout-important { border-left-color: var(--callout-important); }
-.callout-warning   { border-left-color: var(--callout-warning); }
-.callout-caution   { border-left-color: var(--callout-caution); }
+.callout:is(.callout-note, .callout-tip, .callout-important) { border-left-color: var(--accent); }
+.callout:is(.callout-warning, .callout-caution)              { border-left-color: var(--accent-3); }
 
-/* Titles are text: the signal colour mixed with the text colour, darker on
-   light slides and lighter on dark ones, so they can be read on both. The
-   yellow of a warning needs more of the text colour. */
-.callout-note      .callout-title { color: color-mix(in oklab, var(--callout-note) 65%, var(--ink)); }
-.callout-tip       .callout-title { color: color-mix(in oklab, var(--callout-tip) 65%, var(--ink)); }
-.callout-important .callout-title { color: color-mix(in oklab, var(--callout-important) 65%, var(--ink)); }
-.callout-warning   .callout-title { color: color-mix(in oklab, var(--callout-warning) 45%, var(--ink)); }
-.callout-caution   .callout-title { color: color-mix(in oklab, var(--callout-caution) 65%, var(--ink)); }
+/* Titles are text: the accent mixed with the text colour, darker on light
+   slides and lighter on dark ones, so they can be read on both. The third
+   accent is a marker colour that need not be readable as text (a yellow, say),
+   so it gets more of the text colour. */
+.callout:is(.callout-note, .callout-tip, .callout-important) .callout-title { color: color-mix(in oklab, var(--accent) 65%, var(--ink)); }
+.callout:is(.callout-warning, .callout-caution) .callout-title              { color: color-mix(in oklab, var(--accent-3) 45%, var(--ink)); }
 
 /* Blocks for lectures, in every theme. Theorems, lemmas and corollaries in
    the accent with the statement in italics, definitions in the second

package/src/core/labels.js

@@ -13,6 +13,9 @@ export const LABELS = {
     'reader.appearance': 'Light or dark',
     'reader.light': 'Light',
     'reader.dark': 'Dark',
+    'reader.drawings': 'Drawings',
+    'reader.hideDrawings': 'Hide the drawings',
+    'reader.showDrawings': 'Show the drawings',
     'reader.downloadPdf': 'Download PDF',
     'reader.savePdf': 'Save as PDF…',
     'reader.savePdfHint': "Opens the browser's print dialog; choose Save as PDF",
@@ -82,6 +85,9 @@ export const LABELS = {
     'reader.appearance': 'Hell oder dunkel',
     'reader.light': 'Hell',
     'reader.dark': 'Dunkel',
+    'reader.drawings': 'Zeichnungen',
+    'reader.hideDrawings': 'Zeichnungen ausblenden',
+    'reader.showDrawings': 'Zeichnungen einblenden',
     'reader.downloadPdf': 'PDF herunterladen',
     'reader.savePdf': 'Als PDF sichern…',
     'reader.savePdfHint': 'Öffnet den Druckdialog des Browsers; dort „Als PDF sichern“ wählen',

package/src/editor/components/PalettePicker.jsx

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from 'preact/hooks'
 import { Icon } from '../../components/Icon.jsx'
 
 export function Swatches({ tokens = {} }) {
-  return <span class="swatches">{['--bg', '--surface', '--rule', '--accent', '--accent-2', '--ink'].map(key => tokens[key] ? <i key={key} style={{ background: tokens[key] }} /> : null)}</span>
+  return <span class="swatches">{['--bg', '--surface', '--rule', '--accent', '--accent-2', '--accent-3', '--ink'].map(key => tokens[key] ? <i key={key} style={{ background: tokens[key] }} /> : null)}</span>
 }
 
 // The palettes a theme offers, each with its colours in the light or dark

package/src/editor/extensions.js

@@ -7,8 +7,8 @@ export const ID_RE = /^[a-z][a-z0-9-]*$/
 export { COLOR_ROLES as CORE_TOKENS } from '../extensions/tokens.js'
 // Readable colours a new palette starts from.
 const STARTER_COLORS = {
-  light: { '--bg': '#ffffff', '--surface': '#f2f2f2', '--ink': '#111111', '--ink-soft': '#333333', '--muted': '#666666', '--rule': '#dadada', '--accent': '#0b6bcb', '--accent-2': '#c2410c', '--on-accent': '#ffffff' },
-  dark: { '--bg': '#111111', '--surface': '#1e1e1e', '--ink': '#f2f2f2', '--ink-soft': '#cfcfcf', '--muted': '#8f8f8f', '--rule': '#2e2e2e', '--accent': '#6aaeff', '--accent-2': '#fb923c', '--on-accent': '#111111' },
+  light: { '--bg': '#ffffff', '--surface': '#f2f2f2', '--ink': '#111111', '--ink-soft': '#333333', '--muted': '#666666', '--rule': '#dadada', '--accent': '#0b6bcb', '--accent-2': '#c2410c', '--accent-3': '#e0a100', '--on-accent': '#ffffff' },
+  dark: { '--bg': '#111111', '--surface': '#1e1e1e', '--ink': '#f2f2f2', '--ink-soft': '#cfcfcf', '--muted': '#8f8f8f', '--rule': '#2e2e2e', '--accent': '#6aaeff', '--accent-2': '#fb923c', '--accent-3': '#f5c542', '--on-accent': '#111111' },
 }
 
 const entries = table => Object.entries(table ?? {}).map(([name, value]) => ({ name, ...(value && typeof value === 'object' && !Array.isArray(value) ? value : { value }) }))

package/src/extensions/contrast.js

@@ -35,6 +35,8 @@ const RULES = [
   ['--muted', '--bg', 4.5, 'muted text'],
   ['--accent', '--bg', 3, 'the accent'],
   ['--accent-2', '--bg', 3, 'the second accent'],
+  // A marker (bars, shapes), not text: it has to be seen, not read.
+  ['--accent-3', '--bg', 1.5, 'the third accent'],
   ['--on-accent', '--accent', 3, 'text on the accent'],
 ]
 
@@ -48,7 +50,7 @@ export function paletteProblems(palette) {
   for (const appearance of ['light', 'dark']) {
     const tokens = palette[appearance] ?? {}
     for (const [fore, back, minimum, what] of RULES) {
-      if (palette.theme && (fore === '--accent' || fore === '--accent-2')) continue
+      if (palette.theme && (fore === '--accent' || fore === '--accent-2' || fore === '--accent-3')) continue
       const ratio = contrast(tokens[fore], tokens[back])
       if (ratio != null && ratio < minimum) problems.push(`${appearance}: ${what} (${fore} on ${back}) has a contrast of ${ratio.toFixed(1)}:1; at least ${minimum}:1 is needed`)
     }

package/src/extensions/manifest.js

@@ -4,7 +4,7 @@
 import { existsSync } from 'node:fs'
 import { resolve, relative, isAbsolute, sep } from 'node:path'
 import { parse as parseToml, TomlError } from 'smol-toml'
-import { TOKEN_NAME_RE, COLOR_ROLES, APPEARANCES } from './tokens.js'
+import { TOKEN_NAME_RE, COLOR_ROLES, COLOR_FALLBACKS, APPEARANCES } from './tokens.js'
 import { propertyErrors } from '../layouts/layoutProps.js'
 
 export const SCHEMA_VERSION = 1
@@ -247,12 +247,16 @@ function validateGuide(table, fail) {
 function validatePalette(raw, shared, fail) {
   if (raw.theme != null && (typeof raw.theme !== 'string' || !ID_RE.test(raw.theme))) fail('theme must be the id of the only theme that may use this palette', 'theme')
   const variants = {}
+  const fallbacks = new Set()
   for (const appearance of APPEARANCES) {
     if (!isPlainObject(raw[appearance])) fail(`a [${appearance}] table with the ${appearance} colours is required`, appearance)
     const tokens = validateTokens(raw[appearance], appearance, fail, { required: true })
-    const missing = COLOR_ROLES.filter(role => !Object.hasOwn(tokens, role))
+    const missing = COLOR_ROLES.filter(role => !Object.hasOwn(tokens, role) && !COLOR_FALLBACKS[role])
     if (missing.length) fail(`missing colours: ${missing.join(', ')}`, appearance)
+    for (const [role, values] of Object.entries(COLOR_FALLBACKS)) {
+      if (!Object.hasOwn(tokens, role)) { tokens[role] = values[appearance]; fallbacks.add(role) }
+    }
     variants[appearance] = tokens
   }
-  return { ...shared, ...(raw.theme ? { theme: raw.theme } : {}), light: variants.light, dark: variants.dark }
+  return { ...shared, ...(raw.theme ? { theme: raw.theme } : {}), light: variants.light, dark: variants.dark, ...(fallbacks.size ? { fallbacks: [...fallbacks] } : {}) }
 }

package/src/extensions/packages.js

@@ -74,6 +74,9 @@ export function checkPackage({ kind, id, files }, { published = false } = {}) {
   }
   if (record.kind !== kind) fail(`${id}/extension.toml says kind = "${record.kind}", but it is in the ${kind}s`)
   if (published) for (const key of ['version', 'author', 'license']) if (!record.package?.[key]) fail(`The ${kind} ${id}: ${key} is required in the theme repository`)
+  // Palettes made before a colour existed get mdeck's fallback; a new one in
+  // the repository sets every colour itself.
+  if (published && record.manifest.fallbacks?.length) fail(`The palette ${id}: ${record.manifest.fallbacks.join(', ')} is required in the theme repository`)
   if (kind === 'theme') {
     for (const url of record.manifest.fonts) if (!FONT_HOSTS.some(host => url.startsWith(host))) fail(`The theme ${id} loads fonts from ${url}; allowed are ${FONT_HOSTS.join(', ')}`)
     checkCss(files['styles.css'] ?? '', `The theme ${id}: styles.css`)

package/src/extensions/tokens.js

@@ -9,8 +9,16 @@ export function tokensToCss(tokens = {}, selector = ':root') {
 }
 
 // The colours every palette variant defines. Themes use only these (and
-// mixes of them), so any palette fits any theme.
-export const COLOR_ROLES = ['--bg', '--surface', '--ink', '--ink-soft', '--muted', '--rule', '--accent', '--accent-2', '--on-accent']
+// mixes of them), so any palette fits any theme. The three accents mean
+// something: --accent is emphasis (and notes, tips, important callouts),
+// --accent-2 its companion (gradients, a contrast to the accent), --accent-3
+// attention (warnings and cautions), used sparingly; it marks things and
+// need not be readable as text.
+export const COLOR_ROLES = ['--bg', '--surface', '--ink', '--ink-soft', '--muted', '--rule', '--accent', '--accent-2', '--accent-3', '--on-accent']
+// Colours a palette may leave out, and what it gets instead: palettes made
+// before the third accent get an amber that calls for attention in light and
+// dark alike (`mdeck check` suggests setting one's own).
+export const COLOR_FALLBACKS = { '--accent-3': { light: '#d99a00', dark: '#f5c542' } }
 export const APPEARANCES = ['light', 'dark']
 
 /**

package/src/live/client.js

@@ -237,7 +237,7 @@ export function latestByDevice(messages) {
 // The deck's look as the answer page needs it: theme variables, font
 // stylesheets and the style of a slide heading, read from the page that shows
 // the slides (the presenter's current-slide frame, or the deck itself).
-const LOOK_TOKENS = ['--bg', '--ink', '--ink-soft', '--muted', '--rule', '--surface', '--accent', '--accent-2', '--on-accent', '--font-body', '--font-display']
+const LOOK_TOKENS = ['--bg', '--ink', '--ink-soft', '--muted', '--rule', '--surface', '--accent', '--accent-2', '--accent-3', '--on-accent', '--font-body', '--font-display']
 let lookSource = () => document
 export function setLookSource(source) { lookSource = source }
 export function captureLook(doc = lookSource()) {

package/src/runtime/ReaderView.jsx

@@ -10,23 +10,25 @@ import './reader.css'
 import { t, stageLabels } from '../core/labels.js'
 import { followActiveRooms } from '../live/follow.js'
 import { Icon } from '../components/Icon.jsx'
+import { currentInk, onInkChange } from './ink/store.js'
 
 // The reader view for decks sent around by email: outline, the slides at a
-// comfortable size or stacked for reading, light or dark, PDF and a way back
-// into the full-screen deck. The theme and palette stay the sender's: a sent
+// comfortable size or stacked for reading, light or dark, the drawings shown
+// or hidden, PDF and a way back into the full-screen deck. The theme and palette stay the sender's: a sent
 // file carries only those, with their fonts.
 
 const lookKey = deckConfig => `mdeck-reader-look:${deckConfig.meta?.title ?? location.pathname}`
 
-// The reader's choice of light or dark, '' for the deck's own.
-function restoreAppearance(deckConfig) {
-  try {
-    const stored = JSON.parse(localStorage.getItem(lookKey(deckConfig)) ?? 'null')
-    if (['light', 'dark'].includes(stored?.appearance)) return stored.appearance
-  } catch {}
-  return ''
+// The reader's choices: light or dark ('' for the deck's own), and whether
+// the drawings show.
+function restoreLook(deckConfig) {
+  let stored = null
+  try { stored = JSON.parse(localStorage.getItem(lookKey(deckConfig)) ?? 'null') } catch {}
+  return { appearance: ['light', 'dark'].includes(stored?.appearance) ? stored.appearance : '', drawings: stored?.drawings !== false }
 }
 
+const hasInk = () => Object.values(currentInk()?.slides ?? {}).some(strokes => strokes?.length)
+
 // Every button carries an icon so the bar reads at a glance.
 const ReaderIcon = ({ name }) => <Icon name={name} class="reader-icon" />
 
@@ -57,7 +59,10 @@ function ReadPage({ slide, index, total, deckConfig, width, height, scale, showN
 export function ReaderView({ deck, deckConfig }) {
   const { slides } = deck
   const width = deckConfig.width ?? 1920, height = deckConfig.height ?? 1080
-  const [appearance, setAppearance] = useState(() => restoreAppearance(deckConfig))
+  const [appearance, setAppearance] = useState(() => restoreLook(deckConfig).appearance)
+  // Drawings come with the file; a reader may hide them, also for printing.
+  const [drawings, setDrawings] = useState(() => restoreLook(deckConfig).drawings)
+  const [inked, setInked] = useState(hasInk)
   const [mode, setMode] = useState('slides')
   const [index, setIndex] = useState(() => initialIndex(slides))
   const [navOpen, setNavOpen] = useState(false)
@@ -75,8 +80,11 @@ export function ReaderView({ deck, deckConfig }) {
 
   useEffect(() => {
     loadTheme({ ...deckConfig, appearance: shown }).catch(error => console.warn(error.message))
-    try { localStorage.setItem(lookKey(deckConfig), JSON.stringify({ appearance })) } catch {}
   }, [appearance])
+  useEffect(() => {
+    try { localStorage.setItem(lookKey(deckConfig), JSON.stringify({ appearance, drawings })) } catch {}
+  }, [appearance, drawings])
+  useEffect(() => onInkChange(() => setInked(hasInk())), [])
 
   useEffect(() => {
     const stage = stageRef.current
@@ -145,7 +153,7 @@ export function ReaderView({ deck, deckConfig }) {
   const metaLine = [meta.author, meta.organization, meta.date].filter(Boolean).join(' · ')
   const other = shown === 'dark' ? 'light' : 'dark'
 
-  return <div class="reader-view">
+  return <div class={`reader-view${drawings ? '' : ' is-ink-hidden'}`}>
     <header class="reader-top">
       <button class="reader-btn reader-nav-toggle" onClick={() => setNavOpen(open => !open)} aria-label={t('reader.outline')}><ReaderIcon name="menu" /></button>
       <h1>{meta.title ?? t('reader.untitled')}</h1>
@@ -155,6 +163,7 @@ export function ReaderView({ deck, deckConfig }) {
       <button class={`reader-btn${mode === 'slides' ? ' is-active' : ''}`} onClick={() => switchMode('slides')}><ReaderIcon name="slides" />{t('reader.slides')}</button>
       <button class={`reader-btn${mode === 'read' ? ' is-active' : ''}`} onClick={() => switchMode('read')}><ReaderIcon name="read" />{t('reader.read')}</button>
       {toggleAllowed && <button class="reader-btn" onClick={() => setAppearance(other === ownAppearance ? '' : other)} title={t('reader.appearance')}><ReaderIcon name={other === 'dark' ? 'moon' : 'sun'} />{t(other === 'dark' ? 'reader.dark' : 'reader.light')}</button>}
+      {inked && <button class="reader-btn" onClick={() => setDrawings(on => !on)} aria-pressed={drawings} title={t(drawings ? 'reader.hideDrawings' : 'reader.showDrawings')}><ReaderIcon name={drawings ? 'eye' : 'eye-off'} />{t('reader.drawings')}</button>}
       {pdf
         ? <a class="reader-btn" href={pdf} download={`${(meta.title ?? 'slides').replace(/[^\w.-]+/g, '-')}.pdf`}><ReaderIcon name="download" />{t('reader.downloadPdf')}</a>
         : <button class="reader-btn" onClick={savePdf} title={t('reader.savePdfHint')}><ReaderIcon name="download" />{t('reader.savePdf')}</button>}

package/src/runtime/chrome.jsx

@@ -43,7 +43,7 @@ export const S = {
 }
 
 export function PaletteSwatches({ tokens }) {
-  const keys = ['--bg', '--surface', '--rule', '--accent', '--accent-2', '--ink']
+  const keys = ['--bg', '--surface', '--rule', '--accent', '--accent-2', '--accent-3', '--ink']
   return (
     <div style={{ display: 'flex', gap: '2px', alignItems: 'center', flexShrink: 0 }}>
       {keys.map(k => tokens[k]

package/src/runtime/deck-stage.js

@@ -89,7 +89,11 @@ import { inkPaint, snapAngle } from '../core/ink.js'
   // Zoom: up to this many times the fitted size.
   const ZOOM_MAX = 6;
   const VALIDATE_ATTR = 'no_overflowing_text,no_overlapping_text,slide_sized_text';
+  // An embedded deck (the presenter view's frames, a preview) hides its
+  // controls, unless the page embedding it asks for them with ?controls=1, as
+  // the docs' example deck does.
   const isEmbedded = new URLSearchParams(location.search).has('embedded');
+  const hideControls = isEmbedded && !new URLSearchParams(location.search).has('controls');
 
   const pad2 = (n) => String(n).padStart(2, '0');
 
@@ -742,7 +746,7 @@ import { inkPaint, snapAngle } from '../core/ink.js'
     }
 
     _flashOverlay() {
-      if (!this._overlay || isEmbedded) return;
+      if (!this._overlay || hideControls) return;
       this._overlay.setAttribute('data-visible', '');
       if (this._hideTimer) clearTimeout(this._hideTimer);
       this._hideTimer = setTimeout(() => {

package/src/runtime/reader.css

@@ -57,3 +57,5 @@
 .reader-entry { position: fixed; left: 14px; bottom: 14px; z-index: 50; padding: 6px 10px; border-radius: 6px; background: rgba(20,20,20,0.7); color: #fff; font: 13px system-ui, sans-serif; text-decoration: none; opacity: 0.25; transition: opacity 200ms; }
 .reader-entry:hover { opacity: 1; }
 @media print { .reader-entry { display: none !important; } }
+/* The reader hid the drawings: on the slides, in Read and in print. */
+.reader-view.is-ink-hidden .slide-ink { display: none; }

package/docs/site/examples/notebook.svg

@@ -1,58 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1000" viewBox="0 0 1600 1000">
-  <!-- An open lab notebook on a dark desk: ruled pages with entries, a results table, a plot and a pen.
-       The lower part of the picture stays dark so a heading can sit on it. -->
-  <defs>
-    <linearGradient id="desk" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#4a3b30"/>
-      <stop offset="1" stop-color="#211a15"/>
-    </linearGradient>
-    <linearGradient id="spine" x1="0" x2="1">
-      <stop offset="0" stop-color="#fbf8f1" stop-opacity="0"/>
-      <stop offset=".5" stop-color="#b9ad98"/>
-      <stop offset="1" stop-color="#fbf8f1" stop-opacity="0"/>
-    </linearGradient>
-    <pattern id="rule" width="10" height="40" patternUnits="userSpaceOnUse">
-      <line x1="0" y1="39.5" x2="10" y2="39.5" stroke="#bfd3e6" stroke-width="2"/>
-    </pattern>
-  </defs>
-  <rect width="1600" height="1000" fill="url(#desk)"/>
-  <g transform="translate(260 40) scale(.68) rotate(-3 800 500)">
-    <rect x="150" y="90" width="1300" height="830" rx="14" fill="#1b2533"/>
-    <rect x="170" y="105" width="625" height="800" fill="#fbf8f1"/>
-    <rect x="805" y="105" width="625" height="800" fill="#fbf8f1"/>
-    <rect x="770" y="105" width="60" height="800" fill="url(#spine)"/>
-    <rect x="170" y="180" width="625" height="700" fill="url(#rule)"/>
-    <rect x="805" y="180" width="625" height="700" fill="url(#rule)"/>
-    <line x1="240" y1="105" x2="240" y2="905" stroke="#e39a9a" stroke-width="3"/>
-    <line x1="875" y1="105" x2="875" y2="905" stroke="#e39a9a" stroke-width="3"/>
-    <g fill="none" stroke="#24304a" stroke-width="5" stroke-linecap="round">
-      <path d="M262 165 h120 M402 165 h70"/>
-      <path d="M262 245 h300" stroke-width="7"/>
-      <path d="M262 325 h420 M262 365 h380 M262 405 h300"/>
-      <path d="M262 485 h30 M310 485 h300 M262 525 h30 M310 525 h340 M262 565 h30 M310 565 h260 M262 605 h30 M310 605 h320"/>
-      <path d="M262 685 h400 M262 725 h360"/>
-      <path d="M262 805 h250" stroke="#b5452f"/>
-    </g>
-    <path d="M520 798 q20 -18 40 0 t40 0" fill="none" stroke="#b5452f" stroke-width="4" stroke-linecap="round"/>
-    <g fill="none" stroke="#24304a" stroke-width="4" stroke-linecap="round">
-      <path d="M897 165 h160"/>
-      <rect x="897" y="220" width="460" height="200"/>
-      <path d="M897 270 h460 M897 320 h460 M897 370 h460 M1050 220 v200 M1200 220 v200"/>
-      <path d="M915 247 h90 M1068 247 h90 M1218 247 h90" stroke-width="5"/>
-      <path d="M915 297 h60 M1068 297 h70 M1218 297 h50 M915 347 h60 M1068 347 h40 M1218 347 h80 M915 397 h60 M1068 397 h60 M1218 397 h60" stroke-width="3"/>
-      <path d="M917 820 V480 M917 820 H1360"/>
-      <path d="M930 800 C1010 790 1060 700 1110 610 S1240 500 1340 495" stroke="#2455c7" stroke-width="5"/>
-    </g>
-    <g fill="#2455c7">
-      <circle cx="960" cy="792" r="9"/><circle cx="1040" cy="742" r="9"/><circle cx="1105" cy="628" r="9"/>
-      <circle cx="1175" cy="545" r="9"/><circle cx="1260" cy="510" r="9"/><circle cx="1335" cy="500" r="9"/>
-    </g>
-    <g transform="rotate(32 1260 690)">
-      <rect x="1000" y="676" width="430" height="30" rx="14" fill="#1d2735"/>
-      <rect x="1330" y="676" width="34" height="30" fill="#c9a24b"/>
-      <path d="M1000 676 l-46 15 l46 15 z" fill="#e8dcc4"/>
-      <path d="M954 691 l14 -4 v8 z" fill="#1d2735"/>
-      <rect x="1080" y="668" width="150" height="10" rx="5" fill="#c9a24b"/>
-    </g>
-  </g>
-</svg>