create-yss-spec 3.5.0 → 3.5.3

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

@@ -1,315 +0,0 @@
-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

@@ -1,294 +0,0 @@
-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

@@ -1,33 +0,0 @@
-.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;
-}