stagecraft 0.1.0

package/themes/phosphor/components-data.css

@@ -0,0 +1,824 @@
+/* Stagecraft — Phosphor theme: data-visualization component styles.
+   Used by KPI, DonutChart, LineChart, Gauge, SparkLine, Heatmap,
+   Roadmap, SWOT, CodeBlock, CodeDiff. */
+
+/* ============================================================
+ * Shared color hooks (used by KPI, SparkLine, Gauge, etc.)
+ * ------------------------------------------------------------ */
+.kpi--accent,    .gauge--accent,    .sparkline--accent    { --data-color: var(--accent); }
+.kpi--amber,     .gauge--amber,     .sparkline--amber     { --data-color: var(--amber); }
+.kpi--blue,      .gauge--blue,      .sparkline--blue      { --data-color: var(--blue); }
+.kpi--red,       .gauge--red,       .sparkline--red       { --data-color: var(--red); }
+.kpi--dim,       .gauge--dim,       .sparkline--dim       { --data-color: var(--dim); }
+.kpi--fg,        .gauge--fg,        .sparkline--fg        { --data-color: var(--fg); }
+
+/* ============================================================
+ * KPI
+ * ============================================================ */
+.kpi {
+  --data-color: var(--accent);
+  width: min(620px, 92vw);
+  background: var(--bg-elevated);
+  border: 1px solid var(--dim-2);
+  padding: clamp(1.4rem, 2.6vw, 2.2rem);
+  display: flex;
+  flex-direction: column;
+  gap: clamp(0.6rem, 1.4vw, 1.1rem);
+  opacity: 0;
+  transform: translateY(10px);
+  transition: opacity 600ms ease-out, transform 600ms cubic-bezier(0.16, 1, 0.3, 1),
+              border-color 600ms ease-out, box-shadow 600ms ease-out;
+}
+.kpi.in {
+  opacity: 1;
+  transform: translateY(0);
+  border-color: color-mix(in srgb, var(--data-color) 35%, var(--dim-2));
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--data-color) 15%, transparent),
+              0 0 50px color-mix(in srgb, var(--data-color) 12%, transparent);
+}
+.kpi-head {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--dim);
+}
+.kpi-icon {
+  color: var(--data-color);
+  font-size: 1.2em;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}
+.kpi-label {
+  letter-spacing: 0.18em;
+}
+.kpi-figure {
+  display: flex;
+  align-items: baseline;
+  gap: 0.25rem;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+.kpi-num {
+  font-size: clamp(3.4rem, 7vw, 6rem);
+  font-weight: 500;
+  color: var(--data-color);
+  letter-spacing: -0.03em;
+  text-shadow: 0 0 24px color-mix(in srgb, var(--data-color) 35%, transparent);
+}
+.kpi-unit {
+  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
+  color: var(--data-color);
+  font-weight: 500;
+  letter-spacing: -0.01em;
+}
+.kpi-change {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: clamp(0.85rem, 1.15vw, 1rem);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.02em;
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.kpi-change.in { opacity: 1; transform: translateY(0); }
+.kpi-change .kpi-arrow {
+  font-size: 0.9em;
+  line-height: 1;
+}
+.kpi-change.up   .kpi-arrow,
+.kpi-change.up   .kpi-change-num { color: var(--accent); }
+.kpi-change.down .kpi-arrow,
+.kpi-change.down .kpi-change-num { color: var(--red); }
+.kpi-change .kpi-change-period { color: var(--dim); }
+
+/* ============================================================
+ * DonutChart
+ * ============================================================ */
+.donut {
+  display: flex;
+  align-items: center;
+  gap: clamp(1.5rem, 4vw, 3rem);
+  width: min(1100px, 92vw);
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.donut-svg-wrap {
+  position: relative;
+  width: min(48vh, 36vw, 460px);
+  aspect-ratio: 1;
+}
+.donut-svg {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.donut-arc {
+  transition: stroke-width 300ms ease-out;
+  filter: drop-shadow(0 0 8px color-mix(in srgb, currentColor 0%, transparent));
+}
+.donut-center {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: clamp(1rem, 1.6vw, 1.4rem);
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--dim);
+  pointer-events: none;
+}
+.donut-legend {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  min-width: 14rem;
+}
+.donut-legend-row {
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
+  gap: 0.8rem;
+  align-items: baseline;
+  font-size: clamp(0.85rem, 1.1vw, 1rem);
+  color: var(--fg);
+  opacity: 0;
+  transform: translateX(8px);
+  transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
+  font-variant-numeric: tabular-nums;
+}
+.donut-legend-row.in { opacity: 1; transform: translateX(0); }
+.donut-dot {
+  width: 0.7rem;
+  height: 0.7rem;
+  background: var(--dc-color, var(--accent));
+  display: inline-block;
+  box-shadow: 0 0 8px color-mix(in srgb, var(--dc-color, var(--accent)) 70%, transparent);
+}
+.donut-leg-label {
+  letter-spacing: 0.02em;
+}
+.donut-leg-value {
+  color: var(--dim);
+  font-variant-numeric: tabular-nums;
+}
+.donut-leg-pct {
+  color: var(--fg);
+  min-width: 3.2ch;
+  text-align: right;
+}
+
+/* ============================================================
+ * LineChart
+ * ============================================================ */
+.linechart {
+  width: min(1200px, 94vw);
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+.lc-svg-wrap {
+  width: 100%;
+  aspect-ratio: 2 / 1;
+  max-height: 60vh;
+}
+.lc-svg {
+  width: 100%;
+  height: 100%;
+}
+.lc-grid {
+  stroke: var(--dim-2);
+  stroke-width: 1;
+  stroke-dasharray: 2 4;
+  opacity: 0.7;
+}
+.lc-y-label,
+.lc-x-label {
+  fill: var(--dim);
+  font-size: 14px;
+  font-family: var(--mono);
+  letter-spacing: 0.04em;
+}
+.lc-line {
+  fill: none;
+  stroke-width: 2.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 40%, transparent));
+}
+.lc-area {
+  opacity: 0;
+  transition: opacity 700ms ease-out;
+}
+.lc-area.in { opacity: 1; }
+.lc-dot {
+  opacity: 0;
+  transform-origin: center;
+  transition: opacity 400ms ease-out;
+}
+.lc-dot.in { opacity: 1; }
+.lc-legend {
+  display: flex;
+  gap: clamp(1rem, 2vw, 1.6rem);
+  flex-wrap: wrap;
+  padding: 0.4rem 0.6rem 0;
+}
+.lc-leg-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: clamp(0.85rem, 1.1vw, 1rem);
+  color: var(--fg);
+  letter-spacing: 0.02em;
+}
+.lc-dot-leg {
+  width: 0.7rem;
+  height: 0.7rem;
+  background: var(--lc-color, var(--accent));
+  display: inline-block;
+  box-shadow: 0 0 8px color-mix(in srgb, var(--lc-color, var(--accent)) 70%, transparent);
+}
+
+/* ============================================================
+ * Gauge
+ * ============================================================ */
+.gauge {
+  --data-color: var(--accent);
+  width: min(620px, 80vw);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.g-svg-wrap {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 200 / 120;
+}
+.g-svg {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.g-fill {
+  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--data-color) 55%, transparent));
+  transition: none;
+}
+.g-tick {
+  stroke: var(--dim);
+  stroke-width: 1.5;
+  opacity: 0.6;
+}
+.g-readout {
+  position: absolute;
+  left: 50%;
+  bottom: -0.6rem;
+  transform: translateX(-50%);
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+.g-num {
+  font-variant-numeric: tabular-nums;
+  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
+  font-weight: 500;
+  letter-spacing: -0.03em;
+  color: var(--data-color);
+  line-height: 1;
+  text-shadow: 0 0 18px color-mix(in srgb, var(--data-color) 40%, transparent);
+  display: flex;
+  align-items: baseline;
+  gap: 0.3rem;
+  justify-content: center;
+}
+.g-num-max {
+  font-size: 0.55em;
+  color: var(--dim);
+  font-weight: 400;
+  letter-spacing: 0.02em;
+  text-shadow: none;
+}
+.g-label {
+  font-size: clamp(0.85rem, 1.2vw, 1rem);
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--dim);
+}
+
+/* ============================================================
+ * SparkLine
+ * ============================================================ */
+.sparkline {
+  --data-color: var(--accent);
+  width: min(540px, 90vw);
+  background: var(--bg-elevated);
+  border: 1px solid var(--dim-2);
+  padding: clamp(1.2rem, 2.2vw, 1.8rem);
+  display: flex;
+  flex-direction: column;
+  gap: 0.7rem;
+}
+.sl-figure {
+  display: flex;
+  align-items: baseline;
+  gap: 0.3rem;
+  line-height: 1;
+}
+.sl-num {
+  font-size: clamp(3rem, 6vw, 5rem);
+  font-weight: 500;
+  color: var(--data-color);
+  letter-spacing: -0.03em;
+  font-variant-numeric: tabular-nums;
+  text-shadow: 0 0 22px color-mix(in srgb, var(--data-color) 35%, transparent);
+}
+.sl-label {
+  font-size: clamp(0.85rem, 1.1vw, 1rem);
+  color: var(--dim);
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+.sl-svg-wrap {
+  width: 100%;
+  height: clamp(60px, 8vh, 90px);
+}
+.sl-svg {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.sl-line {
+  stroke-width: 2;
+  fill: none;
+  filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 40%, transparent));
+}
+.sl-area {
+  opacity: 0;
+  transition: opacity 700ms ease-out;
+}
+.sl-area.in { opacity: 1; }
+.sl-tip {
+  opacity: 0;
+  transition: opacity 400ms ease-out;
+}
+.sl-tip.in { opacity: 1; }
+.sl-period {
+  font-size: clamp(0.75rem, 1vw, 0.9rem);
+  color: var(--dim);
+  letter-spacing: 0.04em;
+}
+
+/* ============================================================
+ * Heatmap
+ * ============================================================ */
+.heatmap {
+  --hm-base: var(--accent);
+  --hm-cell: clamp(1.2rem, 2.2vw, 1.9rem);
+  width: min(1200px, 94vw);
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+.hm-x-labels {
+  display: grid;
+  grid-template-columns: minmax(3rem, auto) 1fr;
+  gap: clamp(0.4rem, 0.8vw, 0.7rem);
+}
+.hm-x-labels .hm-corner { /* placeholder above y-labels */ }
+.hm-x-row {
+  display: grid;
+  grid-template-columns: repeat(var(--hm-cols), 1fr);
+  gap: clamp(2px, 0.3vw, 4px);
+}
+.hm-x-label {
+  font-size: clamp(0.7rem, 0.95vw, 0.85rem);
+  color: var(--dim);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+/* When y-labels are absent, drop the corner and stretch x-row full width */
+.heatmap:not(:has(.hm-y-label)) .hm-x-labels {
+  grid-template-columns: 1fr;
+}
+.heatmap:not(:has(.hm-y-label)) .hm-x-labels .hm-corner { display: none; }
+.hm-body {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(2px, 0.3vw, 4px);
+}
+.hm-row {
+  display: grid;
+  grid-template-columns: minmax(3rem, auto) 1fr;
+  gap: clamp(0.4rem, 0.8vw, 0.7rem);
+  align-items: center;
+}
+.hm-row:only-child,
+.heatmap:not(:has(.hm-y-label)) .hm-row {
+  grid-template-columns: 1fr;
+}
+.hm-y-label {
+  font-size: clamp(0.7rem, 0.95vw, 0.85rem);
+  color: var(--dim);
+  letter-spacing: 0.06em;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.hm-cells {
+  display: grid;
+  grid-template-columns: repeat(var(--hm-cols), 1fr);
+  gap: clamp(2px, 0.3vw, 4px);
+}
+.hm-cell {
+  aspect-ratio: 1;
+  background: color-mix(in srgb, var(--hm-base) calc(var(--hm-intensity) * 95%), var(--dim-2));
+  border: 1px solid color-mix(in srgb, var(--hm-base) calc(var(--hm-intensity) * 40%), var(--dim-2));
+  opacity: 0;
+  transform: scale(0.7);
+  transition: opacity 400ms ease-out, transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.hm-cell.in {
+  opacity: 1;
+  transform: scale(1);
+}
+.hm-scale {
+  display: inline-flex;
+  align-items: center;
+  gap: clamp(2px, 0.3vw, 4px);
+  align-self: flex-end;
+  margin-top: 0.4rem;
+  font-size: clamp(0.7rem, 0.9vw, 0.8rem);
+  color: var(--dim);
+  letter-spacing: 0.06em;
+}
+.hm-scale-label {
+  padding: 0 0.4rem;
+}
+.hm-scale-step {
+  width: clamp(0.9rem, 1.2vw, 1.2rem);
+  height: clamp(0.9rem, 1.2vw, 1.2rem);
+  display: inline-block;
+  background: color-mix(in srgb, var(--hm-base) calc(var(--hm-intensity) * 95%), var(--dim-2));
+  border: 1px solid color-mix(in srgb, var(--hm-base) calc(var(--hm-intensity) * 40%), var(--dim-2));
+}
+
+/* ============================================================
+ * Roadmap
+ * ============================================================ */
+.roadmap {
+  width: min(1300px, 96vw);
+  display: flex;
+  flex-direction: column;
+  gap: clamp(0.5rem, 1vw, 0.8rem);
+}
+.rm-header {
+  display: grid;
+  grid-template-columns: 8rem 1fr;
+  gap: clamp(0.5rem, 1vw, 0.8rem);
+}
+.rm-lane-label-spacer {
+  /* placeholder above lane labels */
+}
+.rm-months {
+  display: grid;
+  grid-template-columns: repeat(var(--rm-cols), 1fr);
+  border-bottom: 1px solid var(--dim-2);
+  padding-bottom: 0.4rem;
+}
+.rm-month {
+  font-size: clamp(0.7rem, 0.95vw, 0.85rem);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--dim);
+  text-align: center;
+}
+.rm-body {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(0.6rem, 1vw, 1rem);
+}
+.rm-lane {
+  display: grid;
+  grid-template-columns: 8rem 1fr;
+  gap: clamp(0.5rem, 1vw, 0.8rem);
+  align-items: stretch;
+  opacity: 0;
+  transform: translateX(-10px);
+  transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.rm-lane.in { opacity: 1; transform: translateX(0); }
+.rm-lane-label {
+  --rm-color: var(--fg);
+  display: flex;
+  align-items: center;
+  font-size: clamp(0.85rem, 1.1vw, 1rem);
+  letter-spacing: 0.04em;
+  color: var(--fg);
+  border-left: 2px solid var(--rm-color);
+  padding-left: 0.8rem;
+}
+.rm-lane-label.rm-accent { --rm-color: var(--accent); }
+.rm-lane-label.rm-amber  { --rm-color: var(--amber); }
+.rm-lane-label.rm-blue   { --rm-color: var(--blue); }
+.rm-lane-label.rm-red    { --rm-color: var(--red); }
+.rm-lane-label.rm-dim    { --rm-color: var(--dim); }
+.rm-lane-track {
+  position: relative;
+  background:
+    repeating-linear-gradient(
+      to right,
+      transparent 0,
+      transparent calc((100% / var(--rm-cols, 12)) - 1px),
+      var(--dim-2) calc((100% / var(--rm-cols, 12)) - 1px),
+      var(--dim-2) calc(100% / var(--rm-cols, 12))
+    ),
+    color-mix(in srgb, var(--bg-elevated) 60%, transparent);
+  border: 1px solid var(--dim-2);
+  min-height: clamp(2.2rem, 4vw, 3rem);
+}
+.rm-bar {
+  --rm-bar-color: var(--accent);
+  position: absolute;
+  top: 6px;
+  bottom: 6px;
+  left: var(--rm-left);
+  width: var(--rm-width);
+  background: color-mix(in srgb, var(--rm-bar-color) 22%, var(--bg-elevated));
+  border: 1px solid color-mix(in srgb, var(--rm-bar-color) 60%, var(--dim-2));
+  display: flex;
+  align-items: center;
+  padding: 0 0.7rem;
+  overflow: hidden;
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity 600ms ease-out, transform 600ms cubic-bezier(0.16, 1, 0.3, 1),
+              width 800ms cubic-bezier(0.16, 1, 0.3, 1);
+  box-shadow: inset 3px 0 0 var(--rm-bar-color),
+              0 0 20px color-mix(in srgb, var(--rm-bar-color) 18%, transparent);
+}
+.rm-bar.in { opacity: 1; transform: translateY(0); }
+.rm-bar.rm-accent { --rm-bar-color: var(--accent); }
+.rm-bar.rm-amber  { --rm-bar-color: var(--amber); }
+.rm-bar.rm-blue   { --rm-bar-color: var(--blue); }
+.rm-bar.rm-red    { --rm-bar-color: var(--red); }
+.rm-bar.rm-dim    { --rm-bar-color: var(--dim); }
+.rm-bar-label {
+  font-size: clamp(0.75rem, 1vw, 0.9rem);
+  color: var(--fg);
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+/* ============================================================
+ * SWOT
+ * ============================================================ */
+.swot {
+  width: min(1100px, 94vw);
+  height: min(72vh, 700px);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 1px;
+  background: var(--dim-2);
+  border: 1px solid var(--dim-2);
+}
+.swot-cell {
+  --swot-color: var(--accent);
+  background: var(--bg);
+  padding: clamp(1rem, 2.2vw, 1.8rem);
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  position: relative;
+  opacity: 0;
+  transform: scale(0.97);
+  transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
+              background 500ms ease-out, box-shadow 500ms ease-out;
+  overflow: hidden;
+}
+.swot-cell.in {
+  opacity: 1;
+  transform: scale(1);
+  background: color-mix(in srgb, var(--swot-color) 6%, var(--bg));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--swot-color) 45%, var(--dim-2));
+}
+.swot-cell--accent { --swot-color: var(--accent); }
+.swot-cell--amber  { --swot-color: var(--amber); }
+.swot-cell--blue   { --swot-color: var(--blue); }
+.swot-cell--red    { --swot-color: var(--red); }
+.swot-head {
+  display: flex;
+  align-items: baseline;
+  gap: 0.8rem;
+}
+.swot-letter {
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 500;
+  color: var(--swot-color);
+  letter-spacing: -0.04em;
+  line-height: 1;
+  text-shadow: 0 0 20px color-mix(in srgb, var(--swot-color) 50%, transparent);
+}
+.swot-title {
+  font-size: clamp(1rem, 1.3vw, 1.2rem);
+  color: var(--fg);
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+.swot-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+.swot-item {
+  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
+  color: var(--fg);
+  line-height: 1.45;
+  padding-left: 1.2rem;
+  position: relative;
+  opacity: 0;
+  transform: translateX(-6px);
+  transition: opacity 400ms ease-out, transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.swot-item::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.55em;
+  width: 0.55rem;
+  height: 1px;
+  background: var(--swot-color);
+}
+.swot-item.in { opacity: 1; transform: translateX(0); }
+
+/* ============================================================
+ * CodeBlock
+ * ============================================================ */
+.codeblock {
+  width: min(1100px, 94vw);
+  background: var(--bg-elevated);
+  border: 1px solid var(--dim-2);
+  font-family: var(--mono);
+  overflow: hidden;
+}
+.cb-head {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  padding: 0.7rem 1rem;
+  background: color-mix(in srgb, var(--bg) 60%, var(--bg-elevated));
+  border-bottom: 1px solid var(--dim-2);
+  font-size: clamp(0.8rem, 1vw, 0.9rem);
+  color: var(--dim);
+  letter-spacing: 0.04em;
+}
+.cb-dots {
+  display: inline-flex;
+  gap: 0.35rem;
+}
+.cb-dots span {
+  width: 0.55rem;
+  height: 0.55rem;
+  border-radius: 50%;
+  background: var(--dim-2);
+}
+.cb-dots span:nth-child(1) { background: color-mix(in srgb, var(--red) 60%, var(--dim-2)); }
+.cb-dots span:nth-child(2) { background: color-mix(in srgb, var(--amber) 60%, var(--dim-2)); }
+.cb-dots span:nth-child(3) { background: color-mix(in srgb, var(--accent) 60%, var(--dim-2)); }
+.cb-file {
+  color: var(--fg);
+  font-weight: 500;
+}
+.cb-lang {
+  margin-left: auto;
+  font-size: 0.85em;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: var(--accent);
+}
+.cb-body {
+  margin: 0;
+  padding: clamp(0.8rem, 1.4vw, 1.2rem) 0;
+  font-size: clamp(0.85rem, 1.1vw, 1rem);
+  line-height: 1.55;
+  color: var(--fg);
+  background: transparent;
+  overflow-x: auto;
+  white-space: pre;
+}
+.cb-line {
+  display: grid;
+  grid-template-columns: 4ch 1fr;
+  gap: 1rem;
+  padding: 0 clamp(0.8rem, 1.4vw, 1.2rem);
+  opacity: 0;
+  transform: translateY(2px);
+  transition: opacity 400ms ease-out, transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
+              background 300ms ease-out;
+}
+.cb-line.in { opacity: 1; transform: translateY(0); }
+.cb-line-num {
+  color: var(--dim);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  user-select: none;
+}
+.cb-line-text {
+  color: var(--fg);
+  white-space: pre;
+}
+.cb-line--highlight {
+  background: color-mix(in srgb, var(--accent) 8%, transparent);
+  box-shadow: inset 2px 0 0 var(--accent);
+}
+.cb-line--highlight .cb-line-num { color: var(--accent); }
+
+/* ============================================================
+ * CodeDiff
+ * ============================================================ */
+.codediff {
+  width: min(1100px, 94vw);
+  background: var(--bg-elevated);
+  border: 1px solid var(--dim-2);
+  font-family: var(--mono);
+  overflow: hidden;
+}
+.cd-head {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  padding: 0.7rem 1rem;
+  background: color-mix(in srgb, var(--bg) 60%, var(--bg-elevated));
+  border-bottom: 1px solid var(--dim-2);
+  font-size: clamp(0.8rem, 1vw, 0.9rem);
+  color: var(--dim);
+  letter-spacing: 0.04em;
+}
+.cd-file {
+  color: var(--fg);
+  font-weight: 500;
+}
+.cd-lang {
+  font-size: 0.85em;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: var(--accent);
+}
+.cd-stats {
+  margin-left: auto;
+  display: inline-flex;
+  gap: 0.7rem;
+  font-variant-numeric: tabular-nums;
+}
+.cd-stats .cd-adds    { color: var(--accent); }
+.cd-stats .cd-removes { color: var(--red); }
+.cd-body {
+  margin: 0;
+  padding: clamp(0.8rem, 1.4vw, 1.2rem) 0;
+  font-size: clamp(0.85rem, 1.1vw, 1rem);
+  line-height: 1.55;
+  background: transparent;
+  overflow-x: auto;
+  white-space: pre;
+}
+.cd-line {
+  display: grid;
+  grid-template-columns: 2ch 1fr;
+  gap: 1rem;
+  padding: 0 clamp(0.8rem, 1.4vw, 1.2rem);
+  opacity: 0;
+  transform: translateX(-4px);
+  transition: opacity 400ms ease-out, transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.cd-line.in { opacity: 1; transform: translateX(0); }
+.cd-marker {
+  font-variant-numeric: tabular-nums;
+  user-select: none;
+  font-weight: 500;
+}
+.cd-text {
+  white-space: pre;
+}
+.cd-line--add {
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+  box-shadow: inset 2px 0 0 var(--accent);
+}
+.cd-line--add .cd-marker { color: var(--accent); }
+.cd-line--add .cd-text   { color: color-mix(in srgb, var(--accent) 30%, var(--fg)); }
+.cd-line--remove {
+  background: color-mix(in srgb, var(--red) 10%, transparent);
+  box-shadow: inset 2px 0 0 var(--red);
+}
+.cd-line--remove .cd-marker { color: var(--red); }
+.cd-line--remove .cd-text   { color: color-mix(in srgb, var(--red) 30%, var(--fg)); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--red) 40%, transparent); }
+.cd-line--context .cd-marker { color: var(--dim); }
+.cd-line--context .cd-text   { color: var(--dim); }