1
@import "tailwindcss";
2
@source inline("bg-sky-100 text-sky-900 dark:bg-sky-500/20 dark:text-sky-300 dark:border dark:border-sky-500/40");
3
@source inline("bg-amber-200 text-amber-900 dark:bg-amber-900/40 dark:text-amber-200 dark:border dark:border-amber-500/40");
4
@source inline("bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200");
5
@source inline("bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200");
6
 
7
@custom-variant dark (&:is(.dark *));
8
 
9
@theme {
10
  --default-transition-duration: 75ms;
11
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
12
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;
13
  --font-display: "IBM Plex Serif", Georgia, "Times New Roman", serif;
14
 
15
  /* Warm zinc overrides -- see Section 4 Neutral Palette */
16
  --color-zinc-50: #fafaf9;
17
  --color-zinc-100: #f5f4f4;
18
  --color-zinc-200: #e5e4e5;
19
  --color-zinc-300: #d6d4d7;
20
  --color-zinc-400: #a3a1a8;
21
  --color-zinc-500: #747178;
22
  --color-zinc-600: #555259;
23
  --color-zinc-700: #423f42;
24
  --color-zinc-800: #2a2729;
25
  --color-zinc-900: #1b181a;
26
  --color-zinc-950: #0c090b;
27
 
28
  --color-accent-50: #eef2ff;
29
  --color-accent-100: #e0e7ff;
30
  --color-accent-200: #c7d2fe;
31
  --color-accent-300: #a5b4fc;
32
  --color-accent-400: #818cf8;
33
  --color-accent-500: #6366f1;
34
  --color-accent-600: #4f46e5;
35
  --color-accent-700: #4338ca;
36
  --color-accent-800: #3730a3;
37
  --color-accent-900: #312e81;
38
 
39
  /* Lifted warm canvas background -- see Section 4 Surface Hierarchy */
40
  --color-canvas: #221f21;
41
 
42
  --animate-fade-in: fade-in 0.4s ease-out both;
43
  --animate-slide-up: slide-up 0.35s ease-out both;
44
  --animate-scale-fade: scale-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
45
  --animate-shimmer: shimmer 1.5s ease-in-out infinite;
46
  --animate-pulse-soft: pulse-soft 1.6s ease-in-out infinite;
47
}
48
 
49
@keyframes fade-in {
50
  from {
51
    opacity: 0;
52
  }
53
 
54
  to {
55
    opacity: 1;
56
  }
57
}
58
 
59
@keyframes slide-up {
60
  from {
61
    opacity: 0;
62
    transform: translateY(12px);
63
  }
64
 
65
  to {
66
    opacity: 1;
67
    transform: translateY(0);
68
  }
69
}
70
 
71
@keyframes scale-fade {
72
  from {
73
    opacity: 0;
74
    transform: scale(0.96);
75
  }
76
 
77
  to {
78
    opacity: 1;
79
    transform: scale(1);
80
  }
81
}
82
 
83
@keyframes shimmer {
84
  from {
85
    background-position: -200% 0;
86
  }
87
 
88
  to {
89
    background-position: 200% 0;
90
  }
91
}
92
 
93
@keyframes pulse-soft {
94
  0%,
95
  100% {
96
    opacity: 0.55;
97
  }
98
 
99
  50% {
100
    opacity: 1;
101
  }
102
}
103
 
104
@layer base {
105
  html {
106
    -webkit-text-size-adjust: 100%;
107
  }
108
 
109
  html,
110
  body {
111
    min-height: 100vh;
112
  }
113
 
114
  body {
115
    @apply bg-canvas font-sans text-zinc-100 antialiased;
116
    font-weight: 450;
117
    overflow-x: clip;
118
  }
119
 
120
  html:not(.dark) body {
121
    @apply text-zinc-900;
122
    background-color: var(--color-zinc-100);
123
    background-image: none;
124
  }
125
 
126
  html {
127
    color-scheme: dark;
128
  }
129
 
130
  html:not(.dark) {
131
    color-scheme: light;
132
  }
133
 
134
  *:focus-visible {
135
    @apply outline-none ring-2 ring-accent-500/50 ring-offset-2 ring-offset-canvas;
136
  }
137
 
138
  ::selection {
139
    @apply bg-accent-500/[0.28] text-accent-50;
140
  }
141
 
142
  *,
143
  ::before,
144
  ::after {
145
    border-color: var(--color-zinc-200, currentcolor);
146
  }
147
 
148
  h1 {
149
    @apply mb-6 text-3xl font-bold;
150
  }
151
 
152
  h2 {
153
    @apply mt-6 mb-4 text-2xl font-semibold;
154
  }
155
 
156
  h3 {
157
    @apply mt-4 mb-3 text-lg font-semibold;
158
  }
159
 
160
  p {
161
    @apply mb-4;
162
  }
163
 
164
  a {
165
    @apply text-accent-600 transition-colors hover:text-accent-500 dark:text-accent-400 dark:hover:text-accent-300;
166
  }
167
 
168
  button:not(:disabled),
169
  select,
170
  summary,
171
  [role="button"] {
172
    cursor: pointer;
173
  }
174
}
175
 
176
@layer components {
177
  /* Thin 6px scrollbar — applied globally to all scrollable elements.
178
     scrollbar-width/scrollbar-color are Firefox-only fallback;
179
     ::-webkit-scrollbar rules handle Chrome/Safari/Edge. */
180
  @supports not selector(::-webkit-scrollbar) {
181
    * {
182
      scrollbar-width: thin;
183
      scrollbar-color: theme(--color-zinc-700) transparent;
184
    }
185
  }
186
 
187
  *::-webkit-scrollbar {
188
    width: 6px;
189
    height: 6px;
190
  }
191
 
192
  *::-webkit-scrollbar-track {
193
    background: transparent;
194
  }
195
 
196
  *::-webkit-scrollbar-thumb {
197
    background-color: theme(--color-zinc-700);
198
    border-radius: 3px;
199
  }
200
 
201
  *::-webkit-scrollbar-thumb:hover {
202
    background-color: theme(--color-zinc-600);
203
  }
204
 
205
  table {
206
    @apply w-full border-collapse bg-white dark:bg-zinc-900/50;
207
  }
208
 
209
  table th {
210
    @apply bg-zinc-50 px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-zinc-500 dark:bg-zinc-800/50 dark:text-zinc-400;
211
  }
212
 
213
  table td {
214
    @apply px-4 py-3 text-sm;
215
  }
216
 
217
  table tbody tr {
218
    @apply border-t border-zinc-200 transition-colors hover:bg-zinc-50 dark:border-zinc-800 dark:hover:bg-zinc-800/30;
219
  }
220
 
221
  pre {
222
    @apply overflow-x-auto rounded-xl bg-zinc-50 p-4 dark:bg-zinc-900;
223
  }
224
 
225
  code {
226
    @apply rounded-sm bg-zinc-100 px-1 py-0.5 text-sm font-mono dark:bg-zinc-800;
227
  }
228
 
229
  pre code {
230
    @apply bg-transparent p-0;
231
  }
232
 
233
  .blob-container {
234
    background: var(--color-zinc-50);
235
    border-color: var(--color-zinc-300);
236
  }
237
 
238
  html.dark .blob-container {
239
    background: color-mix(in srgb, var(--color-zinc-900) 50%, transparent);
240
    border-color: color-mix(in srgb, var(--color-zinc-800) 60%, transparent);
241
  }
242
 
243
  .ref-menu > summary {
244
    list-style: none;
245
  }
246
 
247
  .ref-menu > summary::-webkit-details-marker,
248
  .ref-menu > summary::marker {
249
    display: none;
250
    content: "";
251
  }
252
 
253
  .ref-menu[open] > summary {
254
    @apply ring-2 ring-accent-500/30;
255
  }
256
 
257
  .markdown-content {
258
    @apply max-w-4xl text-[0.95rem] leading-7 text-zinc-700 dark:text-zinc-200;
259
  }
260
 
261
  .markdown-content > *:first-child {
262
    margin-top: 0;
263
  }
264
 
265
  .markdown-content > *:last-child {
266
    margin-bottom: 0;
267
  }
268
 
269
  .markdown-content h1,
270
  .markdown-content h2,
271
  .markdown-content h3,
272
  .markdown-content h4 {
273
    @apply mt-6 mb-3 font-semibold text-zinc-900 dark:text-zinc-50;
274
  }
275
 
276
  .markdown-content p,
277
  .markdown-content ul,
278
  .markdown-content ol,
279
  .markdown-content blockquote,
280
  .markdown-content pre {
281
    @apply mb-4;
282
  }
283
 
284
  .markdown-content ul,
285
  .markdown-content ol {
286
    @apply ml-6;
287
  }
288
 
289
  .markdown-content ul {
290
    list-style: disc;
291
  }
292
 
293
  .markdown-content ol {
294
    list-style: decimal;
295
  }
296
 
297
  .markdown-content blockquote {
298
    @apply border-l-4 border-zinc-300 pl-4 italic text-zinc-600 dark:border-zinc-700 dark:text-zinc-300;
299
  }
300
 
301
  .markdown-content img {
302
    @apply inline-block max-w-full;
303
  }
304
 
305
  .markdown-content pre {
306
    @apply overflow-x-auto rounded-xl border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900;
307
  }
308
 
309
  .markdown-content pre code,
310
  #blob-code {
311
    @apply font-mono text-sm;
312
  }
313
 
314
  .markdown-content pre code {
315
    display: block;
316
    padding: 0;
317
    border-radius: 0;
318
    white-space: pre;
319
    background: transparent !important;
320
  }
321
 
322
  pre code.hljs,
323
  .blob-container code.hljs,
324
  .markdown-content pre code.hljs,
325
  #blob-code.hljs {
326
    background: transparent !important;
327
  }
328
 
329
  .markdown-content pre code.hljs {
330
    overflow-x: visible;
331
  }
332
 
333
  #blob-pre {
334
    @apply bg-transparent p-0;
335
  }
336
 
337
  pre.has-line-numbers {
338
    padding: 0 !important;
339
  }
340
 
341
  .code-table {
342
    width: 100%;
343
    border-collapse: collapse;
344
    background: transparent;
345
  }
346
 
347
  .code-table.hljs {
348
    display: table;
349
    margin: 0;
350
    padding: 0 !important;
351
    overflow: visible;
352
    background: transparent !important;
353
  }
354
 
355
  .code-table tr,
356
  .code-table td {
357
    border: none;
358
    background: transparent;
359
  }
360
 
361
  .code-table .line-num {
362
    width: 1%;
363
    min-width: 3.5rem;
364
    padding: 0 1rem 0 0.5rem;
365
    text-align: right;
366
    vertical-align: top;
367
    white-space: nowrap;
368
    user-select: none;
369
    border-right: 1px solid color-mix(in srgb, var(--color-zinc-200) 80%, transparent);
370
  }
371
 
372
  html.dark .code-table .line-num {
373
    border-right-color: color-mix(in srgb, var(--color-zinc-700) 90%, transparent);
374
  }
375
 
376
  .code-table .line-num a {
377
    display: block;
378
    color: var(--color-zinc-400);
379
    text-decoration: none;
380
  }
381
 
382
  html.dark .code-table .line-num a {
383
    color: var(--color-zinc-500);
384
  }
385
 
386
  .code-table .line-num a:hover {
387
    color: var(--color-accent-500);
388
  }
389
 
390
  .code-table .line-code {
391
    white-space: pre;
392
    padding: 0 0.75rem;
393
    line-height: 1.375rem;
394
  }
395
 
396
  .code-line:hover {
397
    background: color-mix(in srgb, var(--color-accent-500) 4%, transparent);
398
  }
399
 
400
  html.dark .code-line:hover {
401
    background: color-mix(in srgb, var(--color-accent-500) 8%, transparent);
402
  }
403
 
404
  .code-line {
405
    scroll-margin-top: 6rem;
406
  }
407
 
408
  .code-line:target,
409
  .code-line.line-highlight {
410
    background: color-mix(in srgb, var(--color-accent-500) 8%, transparent);
411
  }
412
 
413
  html.dark .code-line:target,
414
  html.dark .code-line.line-highlight {
415
    background: color-mix(in srgb, var(--color-accent-500) 15%, transparent);
416
  }
417
 
418
  svg.inline {
419
    vertical-align: -0.125em;
420
  }
421
 
422
  [data-theme-toggle] svg {
423
    vertical-align: middle;
424
  }
425
 
426
  html.dark [data-theme-toggle] .icon-light {
427
    display: none;
428
  }
429
 
430
  html.dark [data-theme-toggle] .icon-dark {
431
    display: inline-block;
432
  }
433
 
434
  html:not(.dark) [data-theme-toggle] .icon-light {
435
    display: inline-block;
436
  }
437
 
438
  html:not(.dark) [data-theme-toggle] .icon-dark {
439
    display: none;
440
  }
441
}
442
 
443
@layer components {
444
  @media (max-width: 640px) {
445
    #commits-table th:nth-child(3),
446
    #commits-table td:nth-child(3) {
447
      display: none;
448
    }
449
 
450
    #commits-table {
451
      table-layout: fixed;
452
    }
453
 
454
    #commits-table th,
455
    #commits-table td {
456
      overflow: hidden;
457
      text-overflow: ellipsis;
458
    }
459
 
460
    #commits-table th:nth-child(1),
461
    #commits-table td:nth-child(1) {
462
      width: 5.5rem;
463
      white-space: nowrap;
464
    }
465
 
466
    #commits-table th:nth-child(2),
467
    #commits-table td:nth-child(2) {
468
      white-space: normal;
469
      word-break: break-word;
470
    }
471
 
472
    #commits-table th:nth-child(4),
473
    #commits-table td:nth-child(4) {
474
      white-space: normal;
475
      overflow: visible;
476
      text-overflow: unset;
477
    }
478
 
479
    /* Wrap long code lines on mobile instead of horizontal scroll */
480
    .code-table .line-code {
481
      white-space: pre-wrap;
482
      word-break: break-all;
483
    }
484
 
485
    .diff-code {
486
      white-space: pre-wrap;
487
      word-break: break-all;
488
    }
489
 
490
    .markdown-content pre code {
491
      white-space: pre-wrap;
492
      word-break: break-all;
493
    }
494
 
495
    /* Responsive markdown tables on mobile */
496
    .markdown-content table {
497
      table-layout: fixed;
498
    }
499
 
500
    .markdown-content table td,
501
    .markdown-content table th {
502
      word-break: break-word;
503
      overflow-wrap: break-word;
504
      padding: 0.5rem 0.5rem;
505
    }
506
  }
507
}
508
 
509
/* ── Diff Viewer ──────────────────────────────────────────────── */
510
 
511
@layer components {
512
  .diff-viewer {
513
    @apply rounded-2xl border border-zinc-200 bg-white dark:border-zinc-800/60 dark:bg-zinc-900/50;
514
    overflow: hidden;
515
  }
516
 
517
  /* Summary bar */
518
  .diff-summary {
519
    @apply flex flex-wrap items-center justify-between gap-3 border-b border-zinc-200 px-5 py-3.5 dark:border-zinc-800;
520
  }
521
 
522
  .diff-summary-stats {
523
    @apply flex flex-wrap items-center gap-3 text-sm;
524
  }
525
 
526
  .diff-stat-add {
527
    @apply font-medium text-green-700 dark:text-green-400;
528
  }
529
 
530
  .diff-stat-mod {
531
    @apply font-medium text-amber-700 dark:text-amber-400;
532
  }
533
 
534
  .diff-stat-del {
535
    @apply font-medium text-red-700 dark:text-red-400;
536
  }
537
 
538
  .diff-compare-label {
539
    @apply rounded-full bg-zinc-100 px-3 py-1 text-xs font-medium text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300;
540
  }
541
 
542
  /* File list */
543
  .diff-file-list {
544
    /* no table – just stacked cards */
545
  }
546
 
547
  .diff-file-entry {
548
    @apply border-b border-zinc-100 last:border-b-0 dark:border-zinc-800/60;
549
  }
550
 
551
  .diff-file-row {
552
    @apply flex items-center justify-between gap-3 px-5 py-3 transition-colors;
553
  }
554
 
555
  .diff-file-row:hover {
556
    @apply bg-zinc-50/60 dark:bg-zinc-800/20;
557
  }
558
 
559
  .diff-file-info {
560
    @apply flex items-center gap-3 overflow-hidden;
561
    min-width: 0;
562
  }
563
 
564
  .diff-file-path {
565
    @apply truncate font-mono text-sm;
566
  }
567
 
568
  .diff-file-path a {
569
    @apply no-underline hover:underline;
570
  }
571
 
572
  /* Badges */
573
  .diff-badge {
574
    @apply inline-flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-md text-xs font-bold;
575
  }
576
 
577
  .diff-badge-add {
578
    @apply bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300;
579
  }
580
 
581
  .diff-badge-mod {
582
    @apply bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300;
583
  }
584
 
585
  .diff-badge-del {
586
    @apply bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300;
587
  }
588
 
589
  /* Toggle button */
590
  .diff-toggle-btn {
591
    @apply inline-flex flex-shrink-0 items-center gap-1.5 rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-1.5 text-xs font-medium text-zinc-600 transition-colors hover:border-zinc-300 hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:border-zinc-600 dark:hover:bg-zinc-700;
592
  }
593
 
594
  .diff-toggle-btn.active {
595
    @apply border-accent-200 bg-accent-50 text-accent-700 dark:border-accent-800 dark:bg-accent-900/30 dark:text-accent-300;
596
  }
597
 
598
  .diff-toggle-icon {
599
    @apply text-[0.7rem] leading-none;
600
  }
601
 
602
  /* Expanded content area */
603
  .diff-expand-area {
604
    @apply border-t border-zinc-100 dark:border-zinc-800/60;
605
  }
606
 
607
  /* Patch container */
608
  .diff-patch-container {
609
    overflow-x: auto;
610
    overflow-y: auto;
611
    max-height: 32rem;
612
  }
613
 
614
  .diff-patch-pre {
615
    margin: 0 !important;
616
    padding: 0 !important;
617
    border-radius: 0 !important;
618
    background: transparent !important;
619
  }
620
 
621
  .diff-patch-table {
622
    width: 100%;
623
    border-collapse: collapse;
624
    background: transparent;
625
  }
626
 
627
  .diff-patch-table.hljs {
628
    display: table;
629
    margin: 0;
630
    padding: 0 !important;
631
    overflow: visible;
632
    background: transparent !important;
633
  }
634
 
635
  .diff-patch-table tr,
636
  .diff-patch-table td {
637
    border: none !important;
638
    background: transparent;
639
    padding: 0;
640
  }
641
 
642
  .diff-patch-table tr:hover {
643
    background: transparent;
644
  }
645
 
646
  /* Gutter (prefix column: +/-/space) */
647
  .diff-gutter {
648
    width: 1%;
649
    min-width: 1.25rem;
650
    padding: 0 0.25rem 0 0.75rem !important;
651
    text-align: center;
652
    vertical-align: top;
653
    white-space: pre;
654
    user-select: none;
655
    font-family: var(--font-mono);
656
    font-size: 0.75rem;
657
    line-height: 1.375rem;
658
    color: var(--color-zinc-400);
659
  }
660
 
661
  html.dark .diff-gutter {
662
    color: var(--color-zinc-500);
663
  }
664
 
665
  /* Code cell */
666
  .diff-code {
667
    white-space: pre;
668
    padding: 0 0.75rem 0 0.25rem !important;
669
    font-family: var(--font-mono);
670
    font-size: 0.75rem;
671
    line-height: 1.375rem;
672
  }
673
 
674
  /* Line-level diff coloring - light */
675
  .diff-line-add {
676
    background: rgb(187 247 208 / 0.35) !important;
677
  }
678
 
679
  .diff-line-add .diff-gutter {
680
    color: #16a34a;
681
  }
682
 
683
  .diff-line-del {
684
    background: rgb(254 202 202 / 0.4) !important;
685
  }
686
 
687
  .diff-line-del .diff-gutter {
688
    color: #dc2626;
689
  }
690
 
691
  .diff-line-hunk {
692
    background: color-mix(in srgb, var(--color-accent-100) 40%, transparent) !important;
693
  }
694
 
695
  .diff-line-hunk .diff-code {
696
    color: var(--color-accent-500);
697
    font-style: italic;
698
  }
699
 
700
  .diff-line-hunk .diff-gutter {
701
    color: var(--color-accent-500);
702
  }
703
 
704
  /* Line-level diff coloring - dark */
705
  html.dark .diff-line-add {
706
    background: rgb(22 101 52 / 0.25) !important;
707
  }
708
 
709
  html.dark .diff-line-add .diff-gutter {
710
    color: #4ade80;
711
  }
712
 
713
  html.dark .diff-line-del {
714
    background: rgb(153 27 27 / 0.25) !important;
715
  }
716
 
717
  html.dark .diff-line-del .diff-gutter {
718
    color: #f87171;
719
  }
720
 
721
  html.dark .diff-line-hunk {
722
    background: color-mix(in srgb, var(--color-accent-800) 20%, transparent) !important;
723
  }
724
 
725
  html.dark .diff-line-hunk .diff-code {
726
    color: var(--color-accent-300);
727
  }
728
 
729
  html.dark .diff-line-hunk .diff-gutter {
730
    color: var(--color-accent-300);
731
  }
732
 
733
  /* Loading state */
734
  .diff-loading {
735
    @apply flex items-center gap-2 px-5 py-4 text-sm text-zinc-500 dark:text-zinc-400;
736
  }
737
 
738
  .diff-spinner {
739
    display: inline-block;
740
    width: 1rem;
741
    height: 1rem;
742
    border: 2px solid currentColor;
743
    border-right-color: transparent;
744
    border-radius: 50%;
745
    animation: diff-spin 0.6s linear infinite;
746
  }
747
 
748
  @keyframes diff-spin {
749
    to {
750
      transform: rotate(360deg);
751
    }
752
  }
753
 
754
  /* Skip message */
755
  .diff-skip-msg {
756
    @apply px-5 py-4 text-sm italic text-zinc-500 dark:text-zinc-400;
757
  }
758
 
759
  /* Empty state */
760
  .diff-empty {
761
    @apply px-5 py-6 text-center text-sm text-zinc-500 dark:text-zinc-400;
762
  }
763
}
764
 
765
@media (prefers-reduced-motion: reduce) {
766
  *,
767
  *::before,
768
  *::after {
769
    animation-duration: 0.01ms !important;
770
    animation-iteration-count: 1 !important;
771
    transition-duration: 0.01ms !important;
772
    scroll-behavior: auto !important;
773
  }
774
}