create-yss-spec 1.1.2 → 1.1.4

package/template/.codex/skills/data-analytics/src/recharts-config.js

@@ -0,0 +1,315 @@
+export const CANONICAL_CHART_TYPES = [
+  "line",
+  "area",
+  "stackedArea",
+  "bar",
+  "histogram",
+  "scatter",
+  "heatmap",
+  "pie",
+  "leaderboard",
+  "sparkline",
+  "funnel",
+  "waterfall",
+  "boxPlot",
+];
+
+export const chartPickerSections = [
+  {
+    title: "Trends",
+    options: [
+      { type: "line", label: "Line", preview: "line" },
+      { type: "area", label: "Area", preview: "area" },
+      { type: "stackedArea", label: "Stacked area", preview: "stacked-area" },
+      { type: "sparkline", label: "Sparkline", preview: "sparkline" },
+    ],
+  },
+  {
+    title: "Comparison",
+    options: [
+      { type: "bar", label: "Bar", preview: "bar" },
+      { type: "leaderboard", label: "Leaderboard", preview: "leaderboard" },
+    ],
+  },
+  {
+    title: "Distribution",
+    options: [
+      { type: "histogram", label: "Histogram", preview: "histogram" },
+      { type: "boxPlot", label: "Box plot", preview: "box-plot" },
+    ],
+  },
+  {
+    title: "Relationships",
+    options: [
+      { type: "scatter", label: "Scatter", preview: "scatter" },
+      { type: "heatmap", label: "Heatmap", preview: "heatmap" },
+    ],
+  },
+  {
+    title: "Composition",
+    options: [
+      { type: "pie", label: "Pie", preview: "pie" },
+    ],
+  },
+  {
+    title: "Progression",
+    options: [
+      { type: "funnel", label: "Funnel", preview: "funnel" },
+      { type: "waterfall", label: "Waterfall", preview: "waterfall" },
+    ],
+  },
+];
+
+const DEFAULT_COLORS = [
+  "var(--ds-chart-stack-1, #003f7a)",
+  "var(--ds-chart-stack-2, #0169cc)",
+  "var(--ds-chart-stack-3, #8046d9)",
+  "var(--ds-chart-stack-4, #339cff)",
+  "var(--ds-chart-stack-5, #ad7bf9)",
+  "var(--ds-chart-series-green, #00692a)",
+  "var(--ds-chart-series-orange, #923b0f)",
+  "var(--ds-chart-series-neutral, #8f8f8f)",
+];
+const COMPACT_VALUE_THRESHOLD = 100_000;
+
+export function asArray(value) {
+  return Array.isArray(value) ? value : [];
+}
+
+export function text(value) {
+  return value == null ? "" : String(value);
+}
+
+export function number(value) {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+export function unique(values) {
+  const seen = new Set();
+  const output = [];
+  for (const value of values) {
+    const key = text(value);
+    if (seen.has(key)) continue;
+    seen.add(key);
+    output.push(key);
+  }
+  return output;
+}
+
+export function isCanonicalChartType(value) {
+  return CANONICAL_CHART_TYPES.includes(value);
+}
+
+export function canonicalVisualizationType(value) {
+  return isCanonicalChartType(value) ? value : "bar";
+}
+
+export function groupData(data) {
+  const groups = new Map();
+  for (const point of asArray(data)) {
+    const y = number(point && point.y);
+    if (y == null) continue;
+    const series = text((point && point.series) || "Value");
+    if (!groups.has(series)) groups.set(series, []);
+    groups.get(series).push({ x: point && point.x, y, label: point && point.label, raw: point });
+  }
+  return groups;
+}
+
+export function rechartsLegendNames(data, chartType) {
+  if (chartType === "histogram" || chartType === "heatmap" || chartType === "boxPlot") return [];
+  return [...groupData(data).keys()];
+}
+
+export function hasNumericX(data) {
+  return asArray(data).some((point) => number(point && point.x) != null);
+}
+
+export function emptyChartMessage(data, chartType, visibleSeries = new Set()) {
+  const rows = asArray(data);
+  if (!rows.length) return "No chart data to render.";
+  const legendNames = rechartsLegendNames(rows, chartType);
+  const seriesNames = [...groupData(rows).keys()];
+  if (legendNames.length && visibleSeries instanceof Set && visibleSeries.size && !legendNames.some((name) => visibleSeries.has(name))) {
+    return "No visible series selected.";
+  }
+  if (chartType === "scatter" && !hasNumericX(rows)) return "Scatter plots need numeric x and y values.";
+  if (chartType === "histogram" && !rows.some((point) => number(point && (point.y != null ? point.y : point.x)) != null)) {
+    return "Histogram needs numeric values.";
+  }
+  if (chartType === "heatmap" && seriesNames.length <= 1) return "Heatmaps need a grouping field with at least two series.";
+  if (chartType === "pie") {
+    const total = rows.reduce((sum, point) => sum + Math.max(0, number(point && point.y) ?? 0), 0);
+    if (!total) return "Pie charts need positive values.";
+    if (seriesNames.length <= 1) return "Pie charts need a grouping field with at least two slices.";
+  }
+  if ((chartType === "line" || chartType === "area" || chartType === "stackedArea" || chartType === "sparkline") && unique(rows.map((point) => point && point.x)).length < 2) {
+    return `${chartType === "stackedArea" ? "Stacked area" : "Trend"} charts need at least two x values.`;
+  }
+  if (chartType === "stackedArea" && seriesNames.length <= 1) return "Stacked area charts need a grouping field with at least two series.";
+  if (chartType === "funnel") {
+    const xCount = unique(rows.map((point) => point && point.x)).length;
+    if (seriesNames.length > 1) return "Funnel charts need a single series.";
+    if (xCount < 2 || xCount > 8) return "Funnel charts need between two and eight stages.";
+    if (rows.some((point) => (number(point && point.y) ?? 0) < 0)) return "Funnel charts need non-negative values.";
+  }
+  if (chartType === "waterfall") {
+    const xCount = unique(rows.map((point) => point && point.x)).length;
+    if (seriesNames.length > 1) return "Waterfall charts need a single series.";
+    if (xCount < 2 || xCount > 12) return "Waterfall charts need between two and twelve steps.";
+  }
+  if (chartType === "leaderboard") {
+    const xCount = unique(rows.map((point) => point && point.x)).length;
+    if (seriesNames.length > 1) return "Leaderboards need a single series.";
+    if (xCount < 2) return "Leaderboards need at least two ranked categories.";
+  }
+  if (chartType === "boxPlot") {
+    const numericRows = rows.filter((point) => number(point && point.y) != null);
+    const valuesByCategory = new Map();
+    for (const point of numericRows) {
+      const key = text(point && point.x);
+      valuesByCategory.set(key, (valuesByCategory.get(key) || 0) + 1);
+    }
+    if (numericRows.length < 10 || Math.max(0, ...valuesByCategory.values()) < 5) {
+      return "Box plots need at least ten numeric values and five values in one category.";
+    }
+  }
+  return "";
+}
+
+export function isDateLikeValue(value) {
+  if (value instanceof Date && Number.isFinite(value.getTime())) return true;
+  if (typeof value !== "string") return false;
+  const raw = value.trim();
+  if (!raw) return false;
+  if (!/^\d{4}[-/]\d{1,2}(?:[-/]\d{1,2})?(?:[T\s]\d{1,2}:\d{2}(?::\d{2})?(?:\.\d+)?(?:Z|[+-]\d{2}:?\d{2})?)?$/.test(raw)) {
+    return false;
+  }
+  return Number.isFinite(new Date(raw).getTime());
+}
+
+export function resolveCssColor(value, root = document.documentElement) {
+  const raw = text(value).trim();
+  if (!raw.startsWith("var(")) return raw;
+  const match = raw.match(/^var\((--[^,\s)]+)(?:,\s*([^)]+))?\)$/);
+  if (!match) return raw;
+  const resolved = getComputedStyle(root).getPropertyValue(match[1]).trim();
+  return resolved || text(match[2]).trim();
+}
+
+export function resolveCssColors(values, root) {
+  return asArray(values).map((value) => resolveCssColor(value, root)).filter(Boolean);
+}
+
+export function colorAt(colors, index) {
+  return colors[index % colors.length] || DEFAULT_COLORS[index % DEFAULT_COLORS.length];
+}
+
+function compactDigits(value) {
+  const absolute = Math.abs(value);
+  if (absolute >= COMPACT_VALUE_THRESHOLD) return 1;
+  return 2;
+}
+
+function formatNumber(value, compact = false) {
+  const absolute = Math.abs(value);
+  return new Intl.NumberFormat(undefined, {
+    maximumFractionDigits: compactDigits(value),
+    notation: compact && absolute >= COMPACT_VALUE_THRESHOLD ? "compact" : "standard",
+  }).format(value);
+}
+
+function isUsdUnit(unit) {
+  return unit === "$" || text(unit).toUpperCase() === "USD";
+}
+
+function unitScaleSuffix(unit) {
+  const normalized = text(unit).toLowerCase();
+  if (normalized === "usd millions" || normalized === "usd million") return "M";
+  if (normalized === "usd billions" || normalized === "usd billion") return "B";
+  if (normalized === "usd thousands" || normalized === "usd thousand") return "K";
+  if (/^\$[kmbt]$/i.test(text(unit))) return text(unit).slice(1).toUpperCase();
+  return null;
+}
+
+function formatCurrency(value) {
+  const absolute = Math.abs(value);
+  return new Intl.NumberFormat(undefined, {
+    currency: "USD",
+    maximumFractionDigits: compactDigits(value),
+    notation: absolute >= COMPACT_VALUE_THRESHOLD ? "compact" : "standard",
+    style: "currency",
+  }).format(value).replace(/\.0([KMBT])$/i, "$1");
+}
+
+function isPercentWordUnit(unit) {
+  const normalized = text(unit).toLowerCase();
+  return normalized === "percent" || normalized === "percentage";
+}
+
+function formatPercent(value) {
+  return new Intl.NumberFormat(undefined, {
+    maximumFractionDigits: 1,
+    style: "percent",
+  }).format(value);
+}
+
+export function formatValue(value, unit = "") {
+  const numeric = number(value);
+  if (numeric == null) return text(value);
+  const cleanUnit = text(unit);
+  if (!cleanUnit) return formatNumber(numeric, true);
+  if (isPercentWordUnit(cleanUnit)) return formatPercent(numeric);
+  if (cleanUnit === "%" || cleanUnit.startsWith("%")) return `${formatNumber(numeric)}%`;
+  if (isUsdUnit(cleanUnit)) return formatCurrency(numeric);
+  const scaleSuffix = unitScaleSuffix(cleanUnit);
+  if (scaleSuffix) return `$${formatNumber(numeric)}${scaleSuffix}`;
+  if (cleanUnit.startsWith("$")) return `$${formatNumber(numeric)}${cleanUnit.slice(1)}`;
+  return `${formatNumber(numeric, true)} ${cleanUnit}`;
+}
+
+export function buildCategoryRows(data) {
+  const groups = groupData(data);
+  const xValues = unique(asArray(data).map((point) => point && point.x));
+  return xValues.map((x) => {
+    const row = { x: text(x) };
+    for (const [series, points] of groups.entries()) {
+      const point = points.find((item) => text(item.x) === text(x));
+      row[series] = point ? point.y : null;
+    }
+    return row;
+  });
+}
+
+export function histogramBins(data, requestedBinCount) {
+  const values = asArray(data)
+    .map((point) => number(point && (point.y != null ? point.y : point.x)))
+    .filter((value) => value != null);
+  if (!values.length) return [];
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const binCount = Math.max(1, requestedBinCount || Math.min(12, Math.max(5, Math.ceil(Math.sqrt(values.length)))));
+  const binWidth = (max - min || 1) / binCount;
+  const bins = Array.from({ length: binCount }, (_, index) => ({
+    x: `${formatValue(min + index * binWidth)}-${formatValue(min + (index + 1) * binWidth)}`,
+    count: 0,
+    start: min + index * binWidth,
+    end: min + (index + 1) * binWidth,
+  }));
+  for (const value of values) {
+    const index = Math.min(binCount - 1, Math.max(0, Math.floor((value - min) / binWidth)));
+    bins[index].count += 1;
+  }
+  return bins;
+}
+
+export function pieRows(data) {
+  const groups = groupData(data);
+  return [...groups.entries()]
+    .map(([name, points]) => ({
+      name,
+      value: points.reduce((sum, point) => sum + Math.max(0, point.y), 0),
+    }))
+    .filter((row) => row.value > 0);
+}

package/template/.codex/skills/data-analytics/src/recharts-renderer.jsx

@@ -0,0 +1,294 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+
+import { ChartRenderer } from "./analytics-app/charting/ChartRenderer";
+import "./analytics-app/charting/chart-tokens.css";
+import { asArray, number, text } from "./recharts-config.js";
+
+const DEFAULT_COMPACT_HEIGHT = 280;
+const DEFAULT_EXPLORER_HEIGHT = 520;
+const DEFAULT_CHART_WIDTH = 760;
+const MIN_CHART_WIDTH = 280;
+const MIN_COMPACT_CHART_HEIGHT = 280;
+const MIN_EXPLORER_CHART_HEIGHT = 320;
+
+function formatBinValue(value) {
+  return new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(value);
+}
+
+function buildHistogramRows(data) {
+  const values = asArray(data)
+    .map((point) => number(point && (point.y != null ? point.y : point.x)))
+    .filter((value) => value != null);
+  if (!values.length) return [];
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const binCount = Math.max(1, Math.min(12, Math.max(5, Math.ceil(Math.sqrt(values.length)))));
+  const binWidth = (max - min || 1) / binCount;
+  const rows = Array.from({ length: binCount }, (_, index) => {
+    const start = min + index * binWidth;
+    const end = min + (index + 1) * binWidth;
+    return {
+      count: 0,
+      x: `${formatBinValue(start)}-${formatBinValue(end)}`,
+    };
+  });
+  for (const value of values) {
+    const index = Math.min(binCount - 1, Math.max(0, Math.floor((value - min) / binWidth)));
+    rows[index].count += 1;
+  }
+  return rows;
+}
+
+function quantile(sortedValues, percentile) {
+  if (!sortedValues.length) return 0;
+  const index = (sortedValues.length - 1) * percentile;
+  const lower = Math.floor(index);
+  const upper = Math.ceil(index);
+  if (lower === upper) return sortedValues[lower] ?? 0;
+  const weight = index - lower;
+  return (sortedValues[lower] ?? 0) * (1 - weight) + (sortedValues[upper] ?? 0) * weight;
+}
+
+function buildBoxPlotRows(data) {
+  const grouped = new Map();
+  for (const point of asArray(data)) {
+    const value = number(point && point.y);
+    if (value == null) continue;
+    const key = text(point && point.x);
+    if (!grouped.has(key)) grouped.set(key, []);
+    grouped.get(key).push(value);
+  }
+  return [...grouped.entries()].map(([x, values]) => {
+    const sorted = [...values].sort((a, b) => a - b);
+    return {
+      x,
+      min: sorted[0] ?? 0,
+      q1: quantile(sorted, 0.25),
+      median: quantile(sorted, 0.5),
+      q3: quantile(sorted, 0.75),
+      max: sorted[sorted.length - 1] ?? 0,
+    };
+  });
+}
+
+function resultRows(dataset) {
+  const table = dataset?.table && typeof dataset.table === "object"
+    ? dataset.table
+    : dataset?.result_table && typeof dataset.result_table === "object"
+      ? dataset.result_table
+      : null;
+  if (Array.isArray(table?.rows)) return table.rows;
+  return asArray(dataset?.data);
+}
+
+function rowsForType(dataset, type) {
+  const rows = resultRows(dataset);
+  if (type === "histogram") return buildHistogramRows(rows);
+  if (type === "boxPlot") return buildBoxPlotRows(rows);
+  return rows;
+}
+
+function chartSettingsForDataset(dataset, existing, overrides = {}) {
+  const visualizationSettings = dataset?.visualization_spec?.settings;
+  const source =
+    existing?.settings && typeof existing.settings === "object"
+      ? existing.settings
+      : visualizationSettings && typeof visualizationSettings === "object"
+        ? visualizationSettings
+        : {};
+  const merged = {
+    ...source,
+    ...(overrides && typeof overrides === "object" ? overrides : {}),
+  };
+  return {
+    ...merged,
+    groupMode: merged.groupMode ?? merged.group_mode,
+    orientation: merged.orientation,
+    showPoints: merged.showPoints ?? merged.show_points,
+  };
+}
+
+function isPercentWordUnit(unit) {
+  const normalized = text(unit).toLowerCase();
+  return normalized === "percent" || normalized === "percentage";
+}
+
+function chartSpecForDataset(dataset, type, options) {
+  const existing = dataset.chart_spec && typeof dataset.chart_spec === "object" ? dataset.chart_spec : {};
+  const { series: _legacySeries, xField: _legacyXField, ...encodedExisting } = existing;
+  const rawUnit = options.unit || existing.unit || "";
+  const percentWordUnit = isPercentWordUnit(rawUnit);
+  const unit = percentWordUnit ? "" : rawUnit;
+  const settings = chartSettingsForDataset(dataset, existing, options.settings);
+  const existingEncodings = existing.encodings && typeof existing.encodings === "object" && !Array.isArray(existing.encodings) ? existing.encodings : {};
+  const hasScatterSize = type === "scatter" && asArray(dataset.data).some((point) => number(point && point.size) != null);
+  const encodings = {
+    ...existingEncodings,
+    ...(hasScatterSize && !existingEncodings.size ? { size: { field: "size", label: "Size", type: "quantitative" } } : {}),
+  };
+  const referenceLines = Array.isArray(existing.referenceLines) ? [...existing.referenceLines] : [];
+  const baseline = number(options.baseline);
+  if (baseline != null && !referenceLines.some((line) => number(line && line.value) === baseline)) {
+    referenceLines.push({
+      axis:
+        type === "horizontalBar" ||
+        type === "horizontalStackedBar" ||
+        type === "horizontalStackedBar100" ||
+        (type === "bar" && settings.orientation === "horizontal")
+          ? "x"
+          : "y",
+      value: baseline,
+    });
+  }
+  return {
+    ...encodedExisting,
+    dataset: existing.dataset || dataset.id || "inline",
+    id: existing.id || dataset.id || "inline-chart",
+    referenceLines,
+    settings,
+    surface: {
+      ...(existing.surface || {}),
+      interactiveLegend: Boolean(options.onVisibleSeriesChange),
+      surface: options.surface || "compact",
+    },
+    title: existing.title || dataset.title || options.title || "Data Analytics chart",
+    type,
+    unit,
+    valueFormat: existing.valueFormat || (percentWordUnit ? "percent" : unit === "$" ? "currency" : "compact"),
+    encodings:
+      type === "histogram"
+        ? {
+            x: { field: "x", label: existing.xAxisTitle || "Bucket", type: "ordinal" },
+            y: { field: "count", label: "Count", type: "quantitative" },
+          }
+        : type === "boxPlot"
+          ? {
+              x: { field: "x", label: existing.xAxisTitle || "Category", type: "ordinal" },
+              y: { fields: ["min", "q1", "median", "q3", "max"], label: existing.yAxisTitle || "Distribution", type: "quantitative" },
+            }
+          : encodings,
+  };
+}
+
+function positiveNumber(value) {
+  if (typeof value === "number" && Number.isFinite(value) && value > 0) return value;
+  if (typeof value === "string") {
+    const parsed = Number(value);
+    if (Number.isFinite(parsed) && parsed > 0) return parsed;
+  }
+  return null;
+}
+
+function measuredRect(element) {
+  if (!element || typeof element.getBoundingClientRect !== "function") {
+    return { height: 0, width: 0 };
+  }
+  const rect = element.getBoundingClientRect();
+  return {
+    height: Number.isFinite(rect.height) ? rect.height : 0,
+    width: Number.isFinite(rect.width) ? rect.width : 0,
+  };
+}
+
+function chartDimensionsForMount(mount, options = {}) {
+  const surface = options.surface === "explorer" ? "explorer" : "compact";
+  const mountRect = measuredRect(mount);
+  const containerRect = measuredRect(mount && mount.parentElement);
+  const shellRect = measuredRect(mount && mount.parentElement && mount.parentElement.parentElement);
+  const width = Math.max(
+    MIN_CHART_WIDTH,
+    Math.floor(positiveNumber(options.width) || mountRect.width || containerRect.width || shellRect.width || DEFAULT_CHART_WIDTH),
+  );
+  const fallbackHeight = surface === "explorer" ? DEFAULT_EXPLORER_HEIGHT : DEFAULT_COMPACT_HEIGHT;
+  const minHeight = surface === "explorer" ? MIN_EXPLORER_CHART_HEIGHT : MIN_COMPACT_CHART_HEIGHT;
+  const measuredHeight = surface === "explorer" ? mountRect.height || containerRect.height || shellRect.height : 0;
+  const height = Math.max(
+    minHeight,
+    Math.floor(positiveNumber(options.height) || measuredHeight || fallbackHeight),
+  );
+  return { height, width };
+}
+
+function MeasuredChartRenderer({
+  chart,
+  dataset,
+  mount,
+  options,
+  type,
+}) {
+  const [dimensions, setDimensions] = React.useState(() => chartDimensionsForMount(mount, options));
+
+  React.useLayoutEffect(() => {
+    let frame = 0;
+    const update = () => {
+      window.cancelAnimationFrame(frame);
+      frame = window.requestAnimationFrame(() => {
+        setDimensions((current) => {
+          const next = chartDimensionsForMount(mount, options);
+          return current.width === next.width && current.height === next.height ? current : next;
+        });
+      });
+    };
+
+    update();
+    const observer = typeof ResizeObserver === "function" ? new ResizeObserver(update) : null;
+    if (observer) {
+      observer.observe(mount);
+      if (mount.parentElement) observer.observe(mount.parentElement);
+      if (mount.parentElement && mount.parentElement.parentElement) {
+        observer.observe(mount.parentElement.parentElement);
+      }
+    }
+    window.addEventListener("resize", update);
+    if (document.fonts && typeof document.fonts.ready?.then === "function") {
+      document.fonts.ready.then(update).catch(() => {});
+    }
+    return () => {
+      window.cancelAnimationFrame(frame);
+      observer?.disconnect();
+      window.removeEventListener("resize", update);
+    };
+  }, [mount, options.height, options.surface, options.width]);
+
+  return (
+    <ChartRenderer
+      chart={chart}
+      height={dimensions.height}
+      onVisibleSeriesChange={options.onVisibleSeriesChange}
+      responsive={false}
+      rows={rowsForType(dataset, type)}
+      showLegend={true}
+      surface={options.surface === "explorer" ? "explorer" : "compact"}
+      visibleSeries={options.visibleSeries}
+      width={dimensions.width}
+    />
+  );
+}
+
+export function destroyRechartsChart(container) {
+  if (!container || !container.__datascienceRechartsRoot) return;
+  container.__datascienceRechartsRoot.unmount();
+  container.__datascienceRechartsRoot = null;
+}
+
+export function renderRechartsChart(container, dataset, type, options = {}) {
+  destroyRechartsChart(container);
+  const mount = document.createElement("div");
+  mount.className = "chart-canvas-wrap recharts-chart-wrap";
+  mount.setAttribute("role", "img");
+  mount.setAttribute("aria-label", text(dataset.title || options.title || "Data Analytics chart"));
+  container.appendChild(mount);
+  const root = createRoot(mount);
+  const chart = chartSpecForDataset(dataset, type, options);
+  container.__datascienceRechartsRoot = root;
+  root.render(
+    <MeasuredChartRenderer
+      chart={chart}
+      dataset={dataset}
+      mount={mount}
+      options={options}
+      type={type}
+    />,
+  );
+}

package/template/.codex/skills/data-analytics/src/sql-source-view.css

@@ -0,0 +1,33 @@
+.source-code {
+  overflow: auto;
+  margin: 0;
+  border: 1px solid var(--ds-border-subtle);
+  border-radius: var(--ds-radius-panel);
+  background: var(--ds-code-container-bg);
+  color: var(--ds-text);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.code-token {
+  color: inherit;
+}
+
+.code-keyword {
+  color: var(--ds-blue-bright);
+  font-weight: 600;
+}
+
+.code-string {
+  color: var(--positive);
+}
+
+.code-number {
+  color: var(--stack-secondary);
+}
+
+.code-comment {
+  color: var(--ds-text-muted);
+  font-style: italic;
+}