/* Illustrated product mockups (assets/uc/*.svg, inlined).
   Colours come only from these classes so the mockups follow the site theme. */
.mk {
  display: block; width: 100%; height: auto;
  direction: ltr; unicode-bidi: isolate; /* the drawings are laid out left to right, also on Arabic pages */
  --mk-frame: #FFFFFF;
  --mk-panel: #F7F5FB;
  --mk-panel2: #EFEAF8;
  --mk-line: rgba(74, 35, 119, .14);
  --mk-ink: #120A1F;
  --mk-muted: #8C82A3;
  --mk-p: #4A2377;
  --mk-v: #61529F;
  --mk-o: #BA69DE;
  --mk-s: #F3E96D;
  --mk-soft: #E7DDFB;
  --mk-ok: #1F9E55;
  --mk-warn: #E0A100;
  --mk-on: #FFFFFF;
}
html[data-theme="dark"] .mk {
  --mk-frame: #1C142C;
  --mk-panel: #251A3A;
  --mk-panel2: #2E2247;
  --mk-line: rgba(243, 239, 249, .14);
  --mk-ink: #F3EFF9;
  --mk-muted: #9286A8;
  --mk-p: #B79BF2;
  --mk-v: #8F7FD6;
  --mk-o: #C97FEA;
  --mk-s: #F3E96D;
  --mk-soft: #3A2A5A;
  --mk-ok: #34C274;
  --mk-warn: #F2B630;
  --mk-on: #1C142C;
}
.mk text { font-family: "DM Sans", system-ui, sans-serif; }

/* fills */
.mk .mk-frame  { fill: var(--mk-frame); }
.mk .mk-panel  { fill: var(--mk-panel); }
.mk .mk-panel2 { fill: var(--mk-panel2); }
.mk .mk-ink    { fill: var(--mk-ink); }
.mk .mk-muted  { fill: var(--mk-muted); }
.mk .mk-p      { fill: var(--mk-p); }
.mk .mk-v      { fill: var(--mk-v); }
.mk .mk-o      { fill: var(--mk-o); }
.mk .mk-s      { fill: var(--mk-s); }
.mk .mk-soft   { fill: var(--mk-soft); }
.mk .mk-ok     { fill: var(--mk-ok); }
.mk .mk-warn   { fill: var(--mk-warn); }
.mk .mk-on     { fill: var(--mk-on); }

/* strokes: mk-line only sets the stroke, so it can sit on a filled panel */
.mk .mk-line { stroke: var(--mk-line); }
.mk .mk-stroke-p     { stroke: var(--mk-p);     fill: none; }
.mk .mk-stroke-v     { stroke: var(--mk-v);     fill: none; }
.mk .mk-stroke-o     { stroke: var(--mk-o);     fill: none; }
.mk .mk-stroke-s     { stroke: var(--mk-s);     fill: none; }
.mk .mk-stroke-soft  { stroke: var(--mk-soft);  fill: none; }
.mk .mk-stroke-ok    { stroke: var(--mk-ok);    fill: none; }
.mk .mk-stroke-warn  { stroke: var(--mk-warn);  fill: none; }
.mk .mk-stroke-muted { stroke: var(--mk-muted); fill: none; }
.mk .mk-stroke-ink   { stroke: var(--mk-ink);   fill: none; }
.mk .mk-stroke-on    { stroke: var(--mk-on);    fill: none; }
.mk .mk-stroke-frame { stroke: var(--mk-frame); fill: none; }