@snowztech/ui-css 0.4.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +3 -0
  2. package/dist/components/callout.css +28 -0
  3. package/dist/components/code.css +41 -0
  4. package/dist/components/terminal.css +51 -0
  5. package/dist/snowztech-ui.css +159 -0
  6. package/dist/snowztech-ui.min.css +1 -1
  7. package/package.json +1 -1
  8. package/src/components/callout.css +28 -0
  9. package/src/components/code.css +41 -0
  10. package/src/components/terminal.css +51 -0
  11. package/src/index.css +3 -0
package/README.md CHANGED
@@ -57,6 +57,9 @@ Tokens prefix `--sn-`. Classes prefix `sn-`. Modifier classes use `--`.
57
57
  | `sn-copy-btn` | uses `data-copied="true"` |
58
58
  | `sn-prose` | styles the plain HTML of an article inside it |
59
59
  | `sn-toc`, `sn-toc-layout` | contents box, sticky beside the text on wide screens |
60
+ | `sn-callout` | `--note --tip --warning --danger`, `__title` |
61
+ | `sn-code` | `__bar __name`, code block with a filename and copy button |
62
+ | `sn-terminal` | `__bar __title __body __out`, window frame for a session or screenshot |
60
63
  | `sn-theme-toggle` | reads `[data-theme="light"]` from `<html>` |
61
64
 
62
65
  ## Theming
package/dist/components/callout.css ADDED
@@ -0,0 +1,28 @@
1
+ .sn-callout {
2
+ --sn-callout-color: var(--sn-fg-muted);
3
+ --sn-callout-bg: var(--sn-bg-elev-1);
4
+ margin: 0 0 var(--sn-s-4);
5
+ padding: var(--sn-s-3) var(--sn-s-4);
6
+ border: 1px solid var(--sn-border);
7
+ border-left: 2px solid var(--sn-callout-color);
8
+ border-radius: var(--sn-r-xs);
9
+ background: var(--sn-callout-bg);
10
+ color: var(--sn-fg-muted);
11
+ font-size: var(--sn-text-sm);
12
+ line-height: var(--sn-leading-normal);
13
+ }
14
+ .sn-callout--note { --sn-callout-color: var(--sn-accent); --sn-callout-bg: var(--sn-accent-soft); }
15
+ .sn-callout--tip { --sn-callout-color: var(--sn-success); --sn-callout-bg: var(--sn-success-soft); }
16
+ .sn-callout--warning { --sn-callout-color: var(--sn-warning); --sn-callout-bg: var(--sn-warning-soft); }
17
+ .sn-callout--danger { --sn-callout-color: var(--sn-danger); --sn-callout-bg: var(--sn-danger-soft); }
18
+
19
+ .sn-callout__title {
20
+ display: block;
21
+ margin-bottom: var(--sn-s-1);
22
+ color: var(--sn-callout-color);
23
+ font-size: var(--sn-text-2xs);
24
+ font-weight: 600;
25
+ letter-spacing: 0.04em;
26
+ text-transform: uppercase;
27
+ }
28
+ .sn-callout > :last-child { margin-bottom: 0; }
package/dist/components/code.css ADDED
@@ -0,0 +1,41 @@
1
+ .sn-code {
2
+ margin: 0 0 var(--sn-s-4);
3
+ overflow: hidden;
4
+ border: 1px solid var(--sn-border-subtle);
5
+ border-radius: var(--sn-r-lg);
6
+ background: var(--sn-bg-elev-1);
7
+ }
8
+
9
+ .sn-code__bar {
10
+ display: flex;
11
+ align-items: center;
12
+ justify-content: space-between;
13
+ gap: var(--sn-s-2);
14
+ min-height: 34px;
15
+ padding: 0 var(--sn-s-1) 0 var(--sn-s-4);
16
+ border-bottom: 1px solid var(--sn-border-subtle);
17
+ color: var(--sn-fg-subtle);
18
+ font-family: var(--sn-font-mono);
19
+ font-size: var(--sn-text-xs);
20
+ }
21
+ .sn-code__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
22
+
23
+ /* Loaded after prose.css, so this wins over .sn-prose pre. */
24
+ .sn-code pre {
25
+ margin: 0;
26
+ padding: var(--sn-s-4) 18px;
27
+ overflow-x: auto;
28
+ border: 0;
29
+ border-radius: 0;
30
+ background: none;
31
+ color: var(--sn-fg);
32
+ font-family: var(--sn-font-mono);
33
+ font-size: var(--sn-text-sm);
34
+ line-height: 1.6;
35
+ tab-size: 4;
36
+ }
37
+ .sn-code pre code { padding: 0; border: 0; background: none; font: inherit; }
38
+
39
+ @media (max-width: 600px) {
40
+ .sn-code pre { padding: 14px; font-size: var(--sn-text-xs); }
41
+ }
package/dist/components/terminal.css ADDED
@@ -0,0 +1,51 @@
1
+ .sn-terminal {
2
+ overflow: hidden;
3
+ border: 1px solid var(--sn-border-strong);
4
+ border-radius: var(--sn-r-lg);
5
+ background: var(--sn-bg-inset);
6
+ font-family: var(--sn-font-mono);
7
+ }
8
+
9
+ .sn-terminal__bar {
10
+ position: relative;
11
+ display: flex;
12
+ align-items: center;
13
+ justify-content: center;
14
+ height: 32px;
15
+ padding: 0 60px;
16
+ border-bottom: 1px solid var(--sn-border);
17
+ background: var(--sn-bg-elev-1);
18
+ color: var(--sn-fg-subtle);
19
+ font-size: var(--sn-text-xs);
20
+ }
21
+ /* Three window dots, drawn in one pseudo-element. */
22
+ .sn-terminal__bar::before {
23
+ content: "";
24
+ position: absolute;
25
+ left: 14px;
26
+ width: 8px;
27
+ height: 8px;
28
+ border-radius: 50%;
29
+ background: var(--sn-fg-faint);
30
+ box-shadow: 14px 0 var(--sn-fg-faint), 28px 0 var(--sn-fg-faint);
31
+ }
32
+ .sn-terminal__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
33
+
34
+ .sn-terminal__body {
35
+ margin: 0;
36
+ padding: var(--sn-s-4) 18px;
37
+ overflow-x: auto;
38
+ color: var(--sn-fg);
39
+ font-size: var(--sn-text-sm);
40
+ line-height: 1.6;
41
+ }
42
+ /* Each child is one line, so spacing inside a line is kept as typed. */
43
+ .sn-terminal__body > * { margin: 0; white-space: pre-wrap; }
44
+ .sn-terminal__body:has(> img, > video) { padding: 0; }
45
+ .sn-terminal__body > :is(img, video) { display: block; width: 100%; height: auto; }
46
+
47
+ .sn-terminal__out { color: var(--sn-fg-muted); }
48
+
49
+ @media (max-width: 600px) {
50
+ .sn-terminal__body { padding: 14px; font-size: var(--sn-text-xs); }
51
+ }
package/dist/snowztech-ui.css CHANGED
@@ -820,6 +820,165 @@ a:hover {
820
820
  }
821
821
  }
822
822
 
823
+ /* src/components/callout.css */
824
+ .sn-callout {
825
+ --sn-callout-color: var(--sn-fg-muted);
826
+ --sn-callout-bg: var(--sn-bg-elev-1);
827
+ margin: 0 0 var(--sn-s-4);
828
+ padding: var(--sn-s-3) var(--sn-s-4);
829
+ border: 1px solid var(--sn-border);
830
+ border-left: 2px solid var(--sn-callout-color);
831
+ border-radius: var(--sn-r-xs);
832
+ background: var(--sn-callout-bg);
833
+ color: var(--sn-fg-muted);
834
+ font-size: var(--sn-text-sm);
835
+ line-height: var(--sn-leading-normal);
836
+ }
837
+ .sn-callout--note {
838
+ --sn-callout-color: var(--sn-accent);
839
+ --sn-callout-bg: var(--sn-accent-soft);
840
+ }
841
+ .sn-callout--tip {
842
+ --sn-callout-color: var(--sn-success);
843
+ --sn-callout-bg: var(--sn-success-soft);
844
+ }
845
+ .sn-callout--warning {
846
+ --sn-callout-color: var(--sn-warning);
847
+ --sn-callout-bg: var(--sn-warning-soft);
848
+ }
849
+ .sn-callout--danger {
850
+ --sn-callout-color: var(--sn-danger);
851
+ --sn-callout-bg: var(--sn-danger-soft);
852
+ }
853
+ .sn-callout__title {
854
+ display: block;
855
+ margin-bottom: var(--sn-s-1);
856
+ color: var(--sn-callout-color);
857
+ font-size: var(--sn-text-2xs);
858
+ font-weight: 600;
859
+ letter-spacing: 0.04em;
860
+ text-transform: uppercase;
861
+ }
862
+ .sn-callout > :last-child {
863
+ margin-bottom: 0;
864
+ }
865
+
866
+ /* src/components/code.css */
867
+ .sn-code {
868
+ margin: 0 0 var(--sn-s-4);
869
+ overflow: hidden;
870
+ border: 1px solid var(--sn-border-subtle);
871
+ border-radius: var(--sn-r-lg);
872
+ background: var(--sn-bg-elev-1);
873
+ }
874
+ .sn-code__bar {
875
+ display: flex;
876
+ align-items: center;
877
+ justify-content: space-between;
878
+ gap: var(--sn-s-2);
879
+ min-height: 34px;
880
+ padding: 0 var(--sn-s-1) 0 var(--sn-s-4);
881
+ border-bottom: 1px solid var(--sn-border-subtle);
882
+ color: var(--sn-fg-subtle);
883
+ font-family: var(--sn-font-mono);
884
+ font-size: var(--sn-text-xs);
885
+ }
886
+ .sn-code__name {
887
+ overflow: hidden;
888
+ text-overflow: ellipsis;
889
+ white-space: nowrap;
890
+ }
891
+ .sn-code pre {
892
+ margin: 0;
893
+ padding: var(--sn-s-4) 18px;
894
+ overflow-x: auto;
895
+ border: 0;
896
+ border-radius: 0;
897
+ background: none;
898
+ color: var(--sn-fg);
899
+ font-family: var(--sn-font-mono);
900
+ font-size: var(--sn-text-sm);
901
+ line-height: 1.6;
902
+ tab-size: 4;
903
+ }
904
+ .sn-code pre code {
905
+ padding: 0;
906
+ border: 0;
907
+ background: none;
908
+ font: inherit;
909
+ }
910
+ @media (max-width: 600px) {
911
+ .sn-code pre {
912
+ padding: 14px;
913
+ font-size: var(--sn-text-xs);
914
+ }
915
+ }
916
+
917
+ /* src/components/terminal.css */
918
+ .sn-terminal {
919
+ overflow: hidden;
920
+ border: 1px solid var(--sn-border-strong);
921
+ border-radius: var(--sn-r-lg);
922
+ background: var(--sn-bg-inset);
923
+ font-family: var(--sn-font-mono);
924
+ }
925
+ .sn-terminal__bar {
926
+ position: relative;
927
+ display: flex;
928
+ align-items: center;
929
+ justify-content: center;
930
+ height: 32px;
931
+ padding: 0 60px;
932
+ border-bottom: 1px solid var(--sn-border);
933
+ background: var(--sn-bg-elev-1);
934
+ color: var(--sn-fg-subtle);
935
+ font-size: var(--sn-text-xs);
936
+ }
937
+ .sn-terminal__bar::before {
938
+ content: "";
939
+ position: absolute;
940
+ left: 14px;
941
+ width: 8px;
942
+ height: 8px;
943
+ border-radius: 50%;
944
+ background: var(--sn-fg-faint);
945
+ box-shadow: 14px 0 var(--sn-fg-faint), 28px 0 var(--sn-fg-faint);
946
+ }
947
+ .sn-terminal__title {
948
+ overflow: hidden;
949
+ text-overflow: ellipsis;
950
+ white-space: nowrap;
951
+ }
952
+ .sn-terminal__body {
953
+ margin: 0;
954
+ padding: var(--sn-s-4) 18px;
955
+ overflow-x: auto;
956
+ color: var(--sn-fg);
957
+ font-size: var(--sn-text-sm);
958
+ line-height: 1.6;
959
+ }
960
+ .sn-terminal__body > * {
961
+ margin: 0;
962
+ white-space: pre-wrap;
963
+ }
964
+ .sn-terminal__body:has(> img, > video) {
965
+ padding: 0;
966
+ }
967
+ .sn-terminal__body > :is(img, video) {
968
+ display: block;
969
+ width: 100%;
970
+ height: auto;
971
+ }
972
+ .sn-terminal__out {
973
+ color: var(--sn-fg-muted);
974
+ }
975
+ @media (max-width: 600px) {
976
+ .sn-terminal__body {
977
+ padding: 14px;
978
+ font-size: var(--sn-text-xs);
979
+ }
980
+ }
981
+
823
982
  /* src/components/toc.css */
824
983
  .sn-toc {
825
984
  margin-bottom: var(--sn-s-7);
package/dist/snowztech-ui.min.css CHANGED
@@ -1 +1 @@
1
- :root{--sn-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--sn-font-sans: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--sn-text-2xs: 11px;--sn-text-xs: 12px;--sn-text-sm: 13px;--sn-text-base: 14px;--sn-text-md: 15px;--sn-text-lg: 17px;--sn-text-xl: 20px;--sn-text-2xl: 24px;--sn-text-3xl: 28px;--sn-text-4xl: 36px;--sn-leading-tight: 1.2;--sn-leading-normal: 1.55;--sn-leading-relaxed: 1.75;--sn-s-1: 4px;--sn-s-2: 8px;--sn-s-3: 12px;--sn-s-4: 16px;--sn-s-5: 20px;--sn-s-6: 24px;--sn-s-7: 32px;--sn-s-8: 40px;--sn-s-9: 48px;--sn-s-10: 64px;--sn-s-11: 80px;--sn-s-12: 96px;--sn-r-none: 0;--sn-r-xs: 2px;--sn-r-sm: 4px;--sn-r-md: 6px;--sn-r-lg: 8px;--sn-fast: .1s;--sn-base: .16s;--sn-ease: cubic-bezier(.2, 0, 0, 1);--sn-bg: #0a0a0a;--sn-bg-elev-1: #111111;--sn-bg-elev-2: #181818;--sn-bg-inset: #050505;--sn-border: #1f1f1f;--sn-border-strong: #2a2a2a;--sn-border-subtle: #161616;--sn-fg: #e8e8e8;--sn-fg-muted: #888888;--sn-fg-subtle: #666666;--sn-fg-faint: #444444;--sn-fg-inverse: #0a0a0a;--sn-accent: #8ab4f8;--sn-accent-hover: #a8c7fa;--sn-accent-active: #6c9eed;--sn-accent-fg: #0a0a0a;--sn-accent-soft: rgba(138, 180, 248, .1);--sn-accent-border: rgba(138, 180, 248, .24);--sn-success: #7fc77f;--sn-warning: #d4a857;--sn-danger: #d77070;--sn-success-soft: rgba(127, 199, 127, .1);--sn-warning-soft: rgba(212, 168, 87, .1);--sn-danger-soft: rgba(215, 112, 112, .1);--sn-shadow-sm: none;--sn-shadow-md: 0 0 0 1px var(--sn-border);--sn-shadow-lg: 0 0 0 1px var(--sn-border-strong)}[data-theme=light]{--sn-bg: #f7f7f5;--sn-bg-elev-1: #ffffff;--sn-bg-elev-2: #ffffff;--sn-bg-inset: #efefec;--sn-border: #e2e2dd;--sn-border-strong: #c8c8c2;--sn-border-subtle: #ececea;--sn-fg: #161616;--sn-fg-muted: #6a6a6a;--sn-fg-subtle: #888888;--sn-fg-faint: #b0b0ad;--sn-fg-inverse: #ffffff;--sn-accent: #2a64d6;--sn-accent-hover: #1f56c2;--sn-accent-active: #194ba8;--sn-accent-fg: #ffffff;--sn-accent-soft: rgba(42, 100, 214, .08);--sn-accent-border: rgba(42, 100, 214, .24)}@media(prefers-color-scheme:light){[data-theme=system]{--sn-bg: #f7f7f5;--sn-bg-elev-1: #ffffff;--sn-bg-elev-2: #ffffff;--sn-bg-inset: #efefec;--sn-border: #e2e2dd;--sn-border-strong: #c8c8c2;--sn-border-subtle: #ececea;--sn-fg: #161616;--sn-fg-muted: #6a6a6a;--sn-fg-subtle: #888888;--sn-fg-faint: #b0b0ad;--sn-fg-inverse: #ffffff;--sn-accent: #2a64d6;--sn-accent-hover: #1f56c2;--sn-accent-active: #194ba8;--sn-accent-fg: #ffffff;--sn-accent-soft: rgba(42, 100, 214, .08);--sn-accent-border: rgba(42, 100, 214, .24)}}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}html,body{height:100%}body{font-family:var(--sn-font-mono);font-size:var(--sn-text-sm);line-height:var(--sn-leading-normal);color:var(--sn-fg);background:var(--sn-bg);-webkit-font-smoothing:antialiased}::selection{background:var(--sn-accent-soft);color:var(--sn-fg)}a{color:var(--sn-accent);text-decoration:none}a:hover{color:var(--sn-accent-hover)}@keyframes sn-spin{to{transform:rotate(360deg)}}@keyframes sn-pulse{0%,to{opacity:.3}50%{opacity:1}}@keyframes sn-blink{50%{opacity:0}}.sn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sn-font-mono);font-size:var(--sn-text-sm);font-weight:500;line-height:1;border-radius:var(--sn-r-xs);padding:0 14px;height:30px;border:1px solid transparent;cursor:pointer;transition:background var(--sn-fast) var(--sn-ease),border-color var(--sn-fast) var(--sn-ease),color var(--sn-fast) var(--sn-ease);white-space:nowrap;user-select:none;background:transparent;color:var(--sn-fg)}.sn-btn:focus-visible{outline:1px solid var(--sn-accent);outline-offset:1px}.sn-btn[disabled]{opacity:.4;cursor:not-allowed}.sn-btn--sm{height:24px;font-size:var(--sn-text-xs);padding:0 10px}.sn-btn--lg{height:36px;font-size:var(--sn-text-sm);padding:0 18px}.sn-btn--primary{background:var(--sn-fg);color:var(--sn-fg-inverse);border-color:var(--sn-fg)}.sn-btn--primary:hover{background:var(--sn-fg-muted);border-color:var(--sn-fg-muted)}.sn-btn--secondary{background:transparent;color:var(--sn-fg);border-color:var(--sn-border-strong)}.sn-btn--secondary:hover{border-color:var(--sn-fg-muted)}.sn-btn--ghost{background:transparent;color:var(--sn-fg-muted)}.sn-btn--ghost:hover{color:var(--sn-fg)}.sn-btn--accent{background:var(--sn-accent);color:var(--sn-accent-fg);border-color:var(--sn-accent)}.sn-btn--accent:hover{background:var(--sn-accent-hover);border-color:var(--sn-accent-hover)}.sn-btn--danger{background:transparent;color:var(--sn-danger);border-color:var(--sn-border-strong)}.sn-btn--danger:hover{border-color:var(--sn-danger)}.sn-input,.sn-textarea{font-family:var(--sn-font-mono);font-size:var(--sn-text-sm);color:var(--sn-fg);background:transparent;border:1px solid var(--sn-border-strong);border-radius:var(--sn-r-xs);padding:0 10px;height:30px;width:100%;transition:border-color var(--sn-fast) var(--sn-ease)}.sn-input::placeholder,.sn-textarea::placeholder{color:var(--sn-fg-faint)}.sn-input:hover,.sn-textarea:hover{border-color:var(--sn-fg-muted)}.sn-input:focus,.sn-textarea:focus{outline:none;border-color:var(--sn-accent)}.sn-input:disabled,.sn-textarea:disabled{color:var(--sn-fg-faint);cursor:not-allowed;background:var(--sn-bg-inset)}.sn-input--sm{height:26px;font-size:var(--sn-text-xs);padding:0 8px}.sn-input--lg{height:36px;font-size:var(--sn-text-base);padding:0 12px}.sn-textarea{height:auto;min-height:80px;padding:8px 10px;line-height:var(--sn-leading-normal);resize:vertical}.sn-input--invalid,.sn-input--invalid:hover,.sn-input--invalid:focus,.sn-textarea--invalid,.sn-textarea--invalid:hover,.sn-textarea--invalid:focus{border-color:var(--sn-danger)}.sn-field{display:flex;flex-direction:column;gap:6px;width:100%}.sn-label{font-family:var(--sn-font-mono);font-size:var(--sn-text-xs);color:var(--sn-fg-muted);letter-spacing:.02em}.sn-label__required{color:var(--sn-danger);margin-left:2px}.sn-hint{font-family:var(--sn-font-mono);font-size:var(--sn-text-2xs);color:var(--sn-fg-subtle);line-height:var(--sn-leading-normal)}.sn-error{font-family:var(--sn-font-mono);font-size:var(--sn-text-2xs);color:var(--sn-danger);line-height:var(--sn-leading-normal)}.sn-file{font-family:var(--sn-font-mono);font-size:var(--sn-text-sm);color:var(--sn-fg-muted);background:transparent;border:1px solid var(--sn-border-strong);border-radius:var(--sn-r-xs);width:100%;height:30px;padding:0;display:inline-flex;align-items:center;cursor:pointer;transition:border-color var(--sn-fast) var(--sn-ease)}.sn-file:hover{border-color:var(--sn-fg-muted)}.sn-file:focus-within{outline:none;border-color:var(--sn-accent)}.sn-file::file-selector-button,.sn-file::-webkit-file-upload-button{font-family:var(--sn-font-mono);font-size:var(--sn-text-xs);color:var(--sn-fg);background:var(--sn-bg-elev-1);border:none;border-right:1px solid var(--sn-border-strong);height:100%;padding:0 12px;margin-right:10px;cursor:pointer;transition:background var(--sn-fast) var(--sn-ease)}.sn-file:hover::file-selector-button,.sn-file:hover::-webkit-file-upload-button{background:var(--sn-bg-elev-2)}.sn-file:disabled{cursor:not-allowed;color:var(--sn-fg-faint);background:var(--sn-bg-inset)}.sn-file:disabled::file-selector-button,.sn-file:disabled::-webkit-file-upload-button{cursor:not-allowed;color:var(--sn-fg-faint)}.sn-card{background:transparent;border:1px solid var(--sn-border);border-radius:var(--sn-r-xs);padding:var(--sn-s-5)}.sn-card--rounded{border-radius:var(--sn-r-lg)}.sn-card--accent{border-color:var(--sn-accent-border);background:var(--sn-accent-soft)}.sn-card--inset{background:var(--sn-bg-inset)}.sn-badge{display:inline-flex;align-items:center;gap:4px;font-family:var(--sn-font-mono);font-size:var(--sn-text-2xs);font-weight:400;padding:2px 6px;border-radius:var(--sn-r-xs);border:1px solid var(--sn-border);color:var(--sn-fg-muted);height:18px;text-transform:lowercase}.sn-badge--accent{color:var(--sn-accent);border-color:var(--sn-accent-border)}.sn-badge--success{color:var(--sn-success);border-color:#7fc77f4d}.sn-badge--warning{color:var(--sn-warning);border-color:#d4a8574d}.sn-badge--danger{color:var(--sn-danger);border-color:#d770704d}.sn-kbd{font-family:var(--sn-font-mono);font-size:var(--sn-text-2xs);border:1px solid var(--sn-border-strong);border-radius:var(--sn-r-xs);padding:1px 5px;color:var(--sn-fg-muted)}.sn-divider{height:1px;background:var(--sn-border);border:0;margin:0}.sn-meta{font-family:var(--sn-font-mono);font-size:var(--sn-text-2xs);letter-spacing:.04em;text-transform:uppercase;color:var(--sn-fg-faint)}.sn-prompt{color:var(--sn-fg-faint);user-select:none}.sn-prompt:before{content:"\203a "}.sn-icon{display:inline-block;vertical-align:middle;flex-shrink:0;color:currentColor}.sn-mark{display:inline-block;vertical-align:middle;flex-shrink:0;color:currentColor;width:var(--sn-mark-size, 32px);height:var(--sn-mark-size, 32px)}.sn-mark--xs{--sn-mark-size: 16px}.sn-mark--sm{--sn-mark-size: 24px}.sn-mark--md{--sn-mark-size: 32px}.sn-mark--lg{--sn-mark-size: 48px}.sn-mark--xl{--sn-mark-size: 64px}.sn-mark--accent{color:var(--sn-accent)}.sn-mark--muted{color:var(--sn-fg-muted)}.sn-wordmark{font-family:var(--sn-font-mono);font-size:var(--sn-wordmark-size, 18px);font-weight:700;letter-spacing:-.01em;color:currentColor;line-height:1}.sn-wordmark__dot{color:var(--sn-accent)}.sn-monogram{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--sn-monogram-bg, var(--sn-bg));color:var(--sn-monogram-fg, var(--sn-fg));width:var(--sn-monogram-size, 64px);height:var(--sn-monogram-size, 64px);border-radius:var(--sn-monogram-radius, var(--sn-r-md))}.sn-monogram--xs{--sn-monogram-size: 32px;--sn-monogram-radius: var(--sn-r-xs)}.sn-monogram--sm{--sn-monogram-size: 48px;--sn-monogram-radius: var(--sn-r-sm)}.sn-monogram--md{--sn-monogram-size: 64px;--sn-monogram-radius: var(--sn-r-md)}.sn-monogram--lg{--sn-monogram-size: 96px;--sn-monogram-radius: var(--sn-r-lg)}.sn-monogram--inverse{--sn-monogram-bg: var(--sn-fg);--sn-monogram-fg: var(--sn-bg)}.sn-avatar{display:inline-flex;align-items:center;justify-content:center;width:var(--sn-avatar-size, 32px);height:var(--sn-avatar-size, 32px);border-radius:50%;background:var(--sn-bg-elev-1);color:var(--sn-fg-muted);font-family:var(--sn-font-mono);font-size:max(10px,calc(var(--sn-avatar-size, 32px) * .38));font-weight:500;overflow:hidden;flex-shrink:0;vertical-align:middle}.sn-avatar--square{border-radius:var(--sn-r-xs)}.sn-avatar--ring{box-shadow:0 0 0 1px var(--sn-border-strong)}.sn-avatar--xs{--sn-avatar-size: 20px}.sn-avatar--sm{--sn-avatar-size: 28px}.sn-avatar--md{--sn-avatar-size: 32px}.sn-avatar--lg{--sn-avatar-size: 48px}.sn-avatar--xl{--sn-avatar-size: 64px}.sn-avatar>img{width:100%;height:100%;object-fit:cover;display:block}.sn-avatar-stack{display:inline-flex}.sn-avatar-stack>*+*{margin-left:var(--sn-avatar-overlap, -8px)}.sn-pulse{display:inline-flex;align-items:center;gap:var(--sn-s-2);color:var(--sn-fg-muted);font-size:var(--sn-text-sm)}.sn-pulse__dot{position:relative;display:inline-flex;width:var(--sn-pulse-size, 8px);height:var(--sn-pulse-size, 8px);flex-shrink:0}.sn-pulse__dot:before,.sn-pulse__dot:after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--sn-pulse-color, var(--sn-success))}.sn-pulse__dot:before{opacity:.6;animation:sn-pulse 2s ease-in-out infinite}.sn-pulse--success{--sn-pulse-color: var(--sn-success)}.sn-pulse--warning{--sn-pulse-color: var(--sn-warning)}.sn-pulse--danger{--sn-pulse-color: var(--sn-danger)}.sn-pulse--accent{--sn-pulse-color: var(--sn-accent)}.sn-copy-btn{appearance:none;border:1px solid transparent;background:transparent;color:var(--sn-fg-muted);padding:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--sn-r-xs);transition:color var(--sn-fast) var(--sn-ease),border-color var(--sn-fast) var(--sn-ease)}.sn-copy-btn:hover{color:var(--sn-fg)}.sn-copy-btn:focus-visible{outline:1px solid var(--sn-accent);outline-offset:1px}.sn-copy-btn[data-copied=true],.sn-copy-btn[data-copied=true]:hover{color:var(--sn-success)}.sn-copy-btn .sn-copy-btn__copied{display:none}.sn-copy-btn[data-copied=true] .sn-copy-btn__copied{display:inline-flex}.sn-copy-btn[data-copied=true] .sn-copy-btn__idle{display:none}.sn-prose{max-width:680px;font-size:var(--sn-text-base);line-height:var(--sn-leading-normal);color:var(--sn-fg-muted)}.sn-prose h1,.sn-prose h2,.sn-prose h3{color:var(--sn-fg);font-weight:600}.sn-prose h1{margin:0 0 var(--sn-s-6);font-size:var(--sn-text-3xl);line-height:1.25;letter-spacing:-.02em}.sn-prose h2{margin:var(--sn-s-9) 0 var(--sn-s-4);font-size:var(--sn-text-xl);line-height:var(--sn-leading-tight);letter-spacing:-.01em}.sn-prose h3{margin:var(--sn-s-7) 0 var(--sn-s-2);font-size:inherit}.sn-prose :is(h2,h3)[id]{scroll-margin-top:var(--sn-s-6)}.sn-prose :is(p,ul,ol,blockquote,pre,table,figure){margin:0 0 var(--sn-s-4)}.sn-prose :is(ul,ol){padding-left:var(--sn-s-5)}.sn-prose li+li{margin-top:var(--sn-s-2)}.sn-prose a{color:var(--sn-fg);text-decoration:underline;text-underline-offset:3px}.sn-prose a:hover{color:var(--sn-accent)}.sn-prose strong{color:var(--sn-fg);font-weight:600}.sn-prose code{padding:1px 5px;border:1px solid var(--sn-border-subtle);border-radius:var(--sn-r-sm);background:var(--sn-bg-elev-1);color:var(--sn-fg);font:inherit;overflow-wrap:anywhere}.sn-prose pre{padding:var(--sn-s-4) 18px;overflow-x:auto;border:1px solid var(--sn-border-subtle);border-radius:var(--sn-r-lg);background:var(--sn-bg-elev-1);color:var(--sn-fg);font-size:var(--sn-text-sm);line-height:1.6;tab-size:4}.sn-prose pre code{padding:0;border:0;background:none;overflow-wrap:normal}.sn-prose blockquote{padding-left:var(--sn-s-4);border-left:2px solid var(--sn-border-strong);color:var(--sn-fg)}.sn-prose img{max-width:100%;height:auto}.sn-prose hr{height:1px;margin:var(--sn-s-9) 0;border:0;background:var(--sn-border)}.sn-prose table{width:100%;border-collapse:collapse;font-size:var(--sn-text-sm)}.sn-prose :is(th,td){padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--sn-border-subtle)}.sn-prose thead th{color:var(--sn-fg);font-weight:600;background:var(--sn-bg-elev-1)}.sn-prose tbody th{color:var(--sn-fg);font-weight:500}.sn-prose tr:last-child :is(th,td){border-bottom:0}@media(max-width:600px){.sn-prose h1{font-size:23px}.sn-prose h2{margin-top:var(--sn-s-8);font-size:18px}.sn-prose pre{padding:14px;font-size:var(--sn-text-xs)}}.sn-toc{margin-bottom:var(--sn-s-7);font-size:var(--sn-text-sm)}.sn-toc details{padding:var(--sn-s-3) var(--sn-s-4);border:1px solid var(--sn-border-subtle);border-radius:var(--sn-r-lg)}.sn-toc summary{cursor:pointer;color:var(--sn-fg);font-weight:500}.sn-toc ul{list-style:none;margin:var(--sn-s-3) 0 0;padding:0}.sn-toc li+li{margin-top:var(--sn-s-2)}.sn-toc a{color:var(--sn-fg-muted);text-decoration:none}.sn-toc a:hover,.sn-toc a[aria-current]{color:var(--sn-fg)}.sn-toc-layout{display:grid}@media(min-width:1000px){.sn-toc-layout{grid-template-columns:minmax(0,680px) 220px;column-gap:var(--sn-s-10);justify-content:center}.sn-toc-layout>*{grid-column:1}.sn-toc-layout>.sn-toc{grid-column:2;grid-row:1 / span 2;align-self:start;position:sticky;top:var(--sn-s-6);margin:0;padding-top:var(--sn-s-2)}.sn-toc-layout>.sn-toc details{padding:0;border:0}.sn-toc-layout>.sn-toc summary{list-style:none;pointer-events:none;color:var(--sn-fg-subtle);font-size:var(--sn-text-xs);letter-spacing:.12em;text-transform:uppercase}.sn-toc-layout>.sn-toc summary::-webkit-details-marker{display:none}}.sn-theme-toggle{appearance:none;border:none;background:transparent;padding:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:opacity var(--sn-base)}.sn-theme-toggle:focus-visible{outline:1px solid var(--sn-accent);outline-offset:1px}.sn-theme-toggle__indicator{display:inline-block;width:var(--sn-theme-toggle-size, 12px);height:var(--sn-theme-toggle-size, 12px);border-radius:50%;border:1px solid var(--sn-fg-muted);background:var(--sn-fg);transition:background var(--sn-base) var(--sn-ease)}[data-theme=light] .sn-theme-toggle__indicator{background:transparent}@media(prefers-color-scheme:light){[data-theme=system] .sn-theme-toggle__indicator{background:transparent}}
1
+ :root{--sn-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--sn-font-sans: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--sn-text-2xs: 11px;--sn-text-xs: 12px;--sn-text-sm: 13px;--sn-text-base: 14px;--sn-text-md: 15px;--sn-text-lg: 17px;--sn-text-xl: 20px;--sn-text-2xl: 24px;--sn-text-3xl: 28px;--sn-text-4xl: 36px;--sn-leading-tight: 1.2;--sn-leading-normal: 1.55;--sn-leading-relaxed: 1.75;--sn-s-1: 4px;--sn-s-2: 8px;--sn-s-3: 12px;--sn-s-4: 16px;--sn-s-5: 20px;--sn-s-6: 24px;--sn-s-7: 32px;--sn-s-8: 40px;--sn-s-9: 48px;--sn-s-10: 64px;--sn-s-11: 80px;--sn-s-12: 96px;--sn-r-none: 0;--sn-r-xs: 2px;--sn-r-sm: 4px;--sn-r-md: 6px;--sn-r-lg: 8px;--sn-fast: .1s;--sn-base: .16s;--sn-ease: cubic-bezier(.2, 0, 0, 1);--sn-bg: #0a0a0a;--sn-bg-elev-1: #111111;--sn-bg-elev-2: #181818;--sn-bg-inset: #050505;--sn-border: #1f1f1f;--sn-border-strong: #2a2a2a;--sn-border-subtle: #161616;--sn-fg: #e8e8e8;--sn-fg-muted: #888888;--sn-fg-subtle: #666666;--sn-fg-faint: #444444;--sn-fg-inverse: #0a0a0a;--sn-accent: #8ab4f8;--sn-accent-hover: #a8c7fa;--sn-accent-active: #6c9eed;--sn-accent-fg: #0a0a0a;--sn-accent-soft: rgba(138, 180, 248, .1);--sn-accent-border: rgba(138, 180, 248, .24);--sn-success: #7fc77f;--sn-warning: #d4a857;--sn-danger: #d77070;--sn-success-soft: rgba(127, 199, 127, .1);--sn-warning-soft: rgba(212, 168, 87, .1);--sn-danger-soft: rgba(215, 112, 112, .1);--sn-shadow-sm: none;--sn-shadow-md: 0 0 0 1px var(--sn-border);--sn-shadow-lg: 0 0 0 1px var(--sn-border-strong)}[data-theme=light]{--sn-bg: #f7f7f5;--sn-bg-elev-1: #ffffff;--sn-bg-elev-2: #ffffff;--sn-bg-inset: #efefec;--sn-border: #e2e2dd;--sn-border-strong: #c8c8c2;--sn-border-subtle: #ececea;--sn-fg: #161616;--sn-fg-muted: #6a6a6a;--sn-fg-subtle: #888888;--sn-fg-faint: #b0b0ad;--sn-fg-inverse: #ffffff;--sn-accent: #2a64d6;--sn-accent-hover: #1f56c2;--sn-accent-active: #194ba8;--sn-accent-fg: #ffffff;--sn-accent-soft: rgba(42, 100, 214, .08);--sn-accent-border: rgba(42, 100, 214, .24)}@media(prefers-color-scheme:light){[data-theme=system]{--sn-bg: #f7f7f5;--sn-bg-elev-1: #ffffff;--sn-bg-elev-2: #ffffff;--sn-bg-inset: #efefec;--sn-border: #e2e2dd;--sn-border-strong: #c8c8c2;--sn-border-subtle: #ececea;--sn-fg: #161616;--sn-fg-muted: #6a6a6a;--sn-fg-subtle: #888888;--sn-fg-faint: #b0b0ad;--sn-fg-inverse: #ffffff;--sn-accent: #2a64d6;--sn-accent-hover: #1f56c2;--sn-accent-active: #194ba8;--sn-accent-fg: #ffffff;--sn-accent-soft: rgba(42, 100, 214, .08);--sn-accent-border: rgba(42, 100, 214, .24)}}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}html,body{height:100%}body{font-family:var(--sn-font-mono);font-size:var(--sn-text-sm);line-height:var(--sn-leading-normal);color:var(--sn-fg);background:var(--sn-bg);-webkit-font-smoothing:antialiased}::selection{background:var(--sn-accent-soft);color:var(--sn-fg)}a{color:var(--sn-accent);text-decoration:none}a:hover{color:var(--sn-accent-hover)}@keyframes sn-spin{to{transform:rotate(360deg)}}@keyframes sn-pulse{0%,to{opacity:.3}50%{opacity:1}}@keyframes sn-blink{50%{opacity:0}}.sn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sn-font-mono);font-size:var(--sn-text-sm);font-weight:500;line-height:1;border-radius:var(--sn-r-xs);padding:0 14px;height:30px;border:1px solid transparent;cursor:pointer;transition:background var(--sn-fast) var(--sn-ease),border-color var(--sn-fast) var(--sn-ease),color var(--sn-fast) var(--sn-ease);white-space:nowrap;user-select:none;background:transparent;color:var(--sn-fg)}.sn-btn:focus-visible{outline:1px solid var(--sn-accent);outline-offset:1px}.sn-btn[disabled]{opacity:.4;cursor:not-allowed}.sn-btn--sm{height:24px;font-size:var(--sn-text-xs);padding:0 10px}.sn-btn--lg{height:36px;font-size:var(--sn-text-sm);padding:0 18px}.sn-btn--primary{background:var(--sn-fg);color:var(--sn-fg-inverse);border-color:var(--sn-fg)}.sn-btn--primary:hover{background:var(--sn-fg-muted);border-color:var(--sn-fg-muted)}.sn-btn--secondary{background:transparent;color:var(--sn-fg);border-color:var(--sn-border-strong)}.sn-btn--secondary:hover{border-color:var(--sn-fg-muted)}.sn-btn--ghost{background:transparent;color:var(--sn-fg-muted)}.sn-btn--ghost:hover{color:var(--sn-fg)}.sn-btn--accent{background:var(--sn-accent);color:var(--sn-accent-fg);border-color:var(--sn-accent)}.sn-btn--accent:hover{background:var(--sn-accent-hover);border-color:var(--sn-accent-hover)}.sn-btn--danger{background:transparent;color:var(--sn-danger);border-color:var(--sn-border-strong)}.sn-btn--danger:hover{border-color:var(--sn-danger)}.sn-input,.sn-textarea{font-family:var(--sn-font-mono);font-size:var(--sn-text-sm);color:var(--sn-fg);background:transparent;border:1px solid var(--sn-border-strong);border-radius:var(--sn-r-xs);padding:0 10px;height:30px;width:100%;transition:border-color var(--sn-fast) var(--sn-ease)}.sn-input::placeholder,.sn-textarea::placeholder{color:var(--sn-fg-faint)}.sn-input:hover,.sn-textarea:hover{border-color:var(--sn-fg-muted)}.sn-input:focus,.sn-textarea:focus{outline:none;border-color:var(--sn-accent)}.sn-input:disabled,.sn-textarea:disabled{color:var(--sn-fg-faint);cursor:not-allowed;background:var(--sn-bg-inset)}.sn-input--sm{height:26px;font-size:var(--sn-text-xs);padding:0 8px}.sn-input--lg{height:36px;font-size:var(--sn-text-base);padding:0 12px}.sn-textarea{height:auto;min-height:80px;padding:8px 10px;line-height:var(--sn-leading-normal);resize:vertical}.sn-input--invalid,.sn-input--invalid:hover,.sn-input--invalid:focus,.sn-textarea--invalid,.sn-textarea--invalid:hover,.sn-textarea--invalid:focus{border-color:var(--sn-danger)}.sn-field{display:flex;flex-direction:column;gap:6px;width:100%}.sn-label{font-family:var(--sn-font-mono);font-size:var(--sn-text-xs);color:var(--sn-fg-muted);letter-spacing:.02em}.sn-label__required{color:var(--sn-danger);margin-left:2px}.sn-hint{font-family:var(--sn-font-mono);font-size:var(--sn-text-2xs);color:var(--sn-fg-subtle);line-height:var(--sn-leading-normal)}.sn-error{font-family:var(--sn-font-mono);font-size:var(--sn-text-2xs);color:var(--sn-danger);line-height:var(--sn-leading-normal)}.sn-file{font-family:var(--sn-font-mono);font-size:var(--sn-text-sm);color:var(--sn-fg-muted);background:transparent;border:1px solid var(--sn-border-strong);border-radius:var(--sn-r-xs);width:100%;height:30px;padding:0;display:inline-flex;align-items:center;cursor:pointer;transition:border-color var(--sn-fast) var(--sn-ease)}.sn-file:hover{border-color:var(--sn-fg-muted)}.sn-file:focus-within{outline:none;border-color:var(--sn-accent)}.sn-file::file-selector-button,.sn-file::-webkit-file-upload-button{font-family:var(--sn-font-mono);font-size:var(--sn-text-xs);color:var(--sn-fg);background:var(--sn-bg-elev-1);border:none;border-right:1px solid var(--sn-border-strong);height:100%;padding:0 12px;margin-right:10px;cursor:pointer;transition:background var(--sn-fast) var(--sn-ease)}.sn-file:hover::file-selector-button,.sn-file:hover::-webkit-file-upload-button{background:var(--sn-bg-elev-2)}.sn-file:disabled{cursor:not-allowed;color:var(--sn-fg-faint);background:var(--sn-bg-inset)}.sn-file:disabled::file-selector-button,.sn-file:disabled::-webkit-file-upload-button{cursor:not-allowed;color:var(--sn-fg-faint)}.sn-card{background:transparent;border:1px solid var(--sn-border);border-radius:var(--sn-r-xs);padding:var(--sn-s-5)}.sn-card--rounded{border-radius:var(--sn-r-lg)}.sn-card--accent{border-color:var(--sn-accent-border);background:var(--sn-accent-soft)}.sn-card--inset{background:var(--sn-bg-inset)}.sn-badge{display:inline-flex;align-items:center;gap:4px;font-family:var(--sn-font-mono);font-size:var(--sn-text-2xs);font-weight:400;padding:2px 6px;border-radius:var(--sn-r-xs);border:1px solid var(--sn-border);color:var(--sn-fg-muted);height:18px;text-transform:lowercase}.sn-badge--accent{color:var(--sn-accent);border-color:var(--sn-accent-border)}.sn-badge--success{color:var(--sn-success);border-color:#7fc77f4d}.sn-badge--warning{color:var(--sn-warning);border-color:#d4a8574d}.sn-badge--danger{color:var(--sn-danger);border-color:#d770704d}.sn-kbd{font-family:var(--sn-font-mono);font-size:var(--sn-text-2xs);border:1px solid var(--sn-border-strong);border-radius:var(--sn-r-xs);padding:1px 5px;color:var(--sn-fg-muted)}.sn-divider{height:1px;background:var(--sn-border);border:0;margin:0}.sn-meta{font-family:var(--sn-font-mono);font-size:var(--sn-text-2xs);letter-spacing:.04em;text-transform:uppercase;color:var(--sn-fg-faint)}.sn-prompt{color:var(--sn-fg-faint);user-select:none}.sn-prompt:before{content:"\203a "}.sn-icon{display:inline-block;vertical-align:middle;flex-shrink:0;color:currentColor}.sn-mark{display:inline-block;vertical-align:middle;flex-shrink:0;color:currentColor;width:var(--sn-mark-size, 32px);height:var(--sn-mark-size, 32px)}.sn-mark--xs{--sn-mark-size: 16px}.sn-mark--sm{--sn-mark-size: 24px}.sn-mark--md{--sn-mark-size: 32px}.sn-mark--lg{--sn-mark-size: 48px}.sn-mark--xl{--sn-mark-size: 64px}.sn-mark--accent{color:var(--sn-accent)}.sn-mark--muted{color:var(--sn-fg-muted)}.sn-wordmark{font-family:var(--sn-font-mono);font-size:var(--sn-wordmark-size, 18px);font-weight:700;letter-spacing:-.01em;color:currentColor;line-height:1}.sn-wordmark__dot{color:var(--sn-accent)}.sn-monogram{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--sn-monogram-bg, var(--sn-bg));color:var(--sn-monogram-fg, var(--sn-fg));width:var(--sn-monogram-size, 64px);height:var(--sn-monogram-size, 64px);border-radius:var(--sn-monogram-radius, var(--sn-r-md))}.sn-monogram--xs{--sn-monogram-size: 32px;--sn-monogram-radius: var(--sn-r-xs)}.sn-monogram--sm{--sn-monogram-size: 48px;--sn-monogram-radius: var(--sn-r-sm)}.sn-monogram--md{--sn-monogram-size: 64px;--sn-monogram-radius: var(--sn-r-md)}.sn-monogram--lg{--sn-monogram-size: 96px;--sn-monogram-radius: var(--sn-r-lg)}.sn-monogram--inverse{--sn-monogram-bg: var(--sn-fg);--sn-monogram-fg: var(--sn-bg)}.sn-avatar{display:inline-flex;align-items:center;justify-content:center;width:var(--sn-avatar-size, 32px);height:var(--sn-avatar-size, 32px);border-radius:50%;background:var(--sn-bg-elev-1);color:var(--sn-fg-muted);font-family:var(--sn-font-mono);font-size:max(10px,calc(var(--sn-avatar-size, 32px) * .38));font-weight:500;overflow:hidden;flex-shrink:0;vertical-align:middle}.sn-avatar--square{border-radius:var(--sn-r-xs)}.sn-avatar--ring{box-shadow:0 0 0 1px var(--sn-border-strong)}.sn-avatar--xs{--sn-avatar-size: 20px}.sn-avatar--sm{--sn-avatar-size: 28px}.sn-avatar--md{--sn-avatar-size: 32px}.sn-avatar--lg{--sn-avatar-size: 48px}.sn-avatar--xl{--sn-avatar-size: 64px}.sn-avatar>img{width:100%;height:100%;object-fit:cover;display:block}.sn-avatar-stack{display:inline-flex}.sn-avatar-stack>*+*{margin-left:var(--sn-avatar-overlap, -8px)}.sn-pulse{display:inline-flex;align-items:center;gap:var(--sn-s-2);color:var(--sn-fg-muted);font-size:var(--sn-text-sm)}.sn-pulse__dot{position:relative;display:inline-flex;width:var(--sn-pulse-size, 8px);height:var(--sn-pulse-size, 8px);flex-shrink:0}.sn-pulse__dot:before,.sn-pulse__dot:after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--sn-pulse-color, var(--sn-success))}.sn-pulse__dot:before{opacity:.6;animation:sn-pulse 2s ease-in-out infinite}.sn-pulse--success{--sn-pulse-color: var(--sn-success)}.sn-pulse--warning{--sn-pulse-color: var(--sn-warning)}.sn-pulse--danger{--sn-pulse-color: var(--sn-danger)}.sn-pulse--accent{--sn-pulse-color: var(--sn-accent)}.sn-copy-btn{appearance:none;border:1px solid transparent;background:transparent;color:var(--sn-fg-muted);padding:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--sn-r-xs);transition:color var(--sn-fast) var(--sn-ease),border-color var(--sn-fast) var(--sn-ease)}.sn-copy-btn:hover{color:var(--sn-fg)}.sn-copy-btn:focus-visible{outline:1px solid var(--sn-accent);outline-offset:1px}.sn-copy-btn[data-copied=true],.sn-copy-btn[data-copied=true]:hover{color:var(--sn-success)}.sn-copy-btn .sn-copy-btn__copied{display:none}.sn-copy-btn[data-copied=true] .sn-copy-btn__copied{display:inline-flex}.sn-copy-btn[data-copied=true] .sn-copy-btn__idle{display:none}.sn-prose{max-width:680px;font-size:var(--sn-text-base);line-height:var(--sn-leading-normal);color:var(--sn-fg-muted)}.sn-prose h1,.sn-prose h2,.sn-prose h3{color:var(--sn-fg);font-weight:600}.sn-prose h1{margin:0 0 var(--sn-s-6);font-size:var(--sn-text-3xl);line-height:1.25;letter-spacing:-.02em}.sn-prose h2{margin:var(--sn-s-9) 0 var(--sn-s-4);font-size:var(--sn-text-xl);line-height:var(--sn-leading-tight);letter-spacing:-.01em}.sn-prose h3{margin:var(--sn-s-7) 0 var(--sn-s-2);font-size:inherit}.sn-prose :is(h2,h3)[id]{scroll-margin-top:var(--sn-s-6)}.sn-prose :is(p,ul,ol,blockquote,pre,table,figure){margin:0 0 var(--sn-s-4)}.sn-prose :is(ul,ol){padding-left:var(--sn-s-5)}.sn-prose li+li{margin-top:var(--sn-s-2)}.sn-prose a{color:var(--sn-fg);text-decoration:underline;text-underline-offset:3px}.sn-prose a:hover{color:var(--sn-accent)}.sn-prose strong{color:var(--sn-fg);font-weight:600}.sn-prose code{padding:1px 5px;border:1px solid var(--sn-border-subtle);border-radius:var(--sn-r-sm);background:var(--sn-bg-elev-1);color:var(--sn-fg);font:inherit;overflow-wrap:anywhere}.sn-prose pre{padding:var(--sn-s-4) 18px;overflow-x:auto;border:1px solid var(--sn-border-subtle);border-radius:var(--sn-r-lg);background:var(--sn-bg-elev-1);color:var(--sn-fg);font-size:var(--sn-text-sm);line-height:1.6;tab-size:4}.sn-prose pre code{padding:0;border:0;background:none;overflow-wrap:normal}.sn-prose blockquote{padding-left:var(--sn-s-4);border-left:2px solid var(--sn-border-strong);color:var(--sn-fg)}.sn-prose img{max-width:100%;height:auto}.sn-prose hr{height:1px;margin:var(--sn-s-9) 0;border:0;background:var(--sn-border)}.sn-prose table{width:100%;border-collapse:collapse;font-size:var(--sn-text-sm)}.sn-prose :is(th,td){padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--sn-border-subtle)}.sn-prose thead th{color:var(--sn-fg);font-weight:600;background:var(--sn-bg-elev-1)}.sn-prose tbody th{color:var(--sn-fg);font-weight:500}.sn-prose tr:last-child :is(th,td){border-bottom:0}@media(max-width:600px){.sn-prose h1{font-size:23px}.sn-prose h2{margin-top:var(--sn-s-8);font-size:18px}.sn-prose pre{padding:14px;font-size:var(--sn-text-xs)}}.sn-callout{--sn-callout-color: var(--sn-fg-muted);--sn-callout-bg: var(--sn-bg-elev-1);margin:0 0 var(--sn-s-4);padding:var(--sn-s-3) var(--sn-s-4);border:1px solid var(--sn-border);border-left:2px solid var(--sn-callout-color);border-radius:var(--sn-r-xs);background:var(--sn-callout-bg);color:var(--sn-fg-muted);font-size:var(--sn-text-sm);line-height:var(--sn-leading-normal)}.sn-callout--note{--sn-callout-color: var(--sn-accent);--sn-callout-bg: var(--sn-accent-soft)}.sn-callout--tip{--sn-callout-color: var(--sn-success);--sn-callout-bg: var(--sn-success-soft)}.sn-callout--warning{--sn-callout-color: var(--sn-warning);--sn-callout-bg: var(--sn-warning-soft)}.sn-callout--danger{--sn-callout-color: var(--sn-danger);--sn-callout-bg: var(--sn-danger-soft)}.sn-callout__title{display:block;margin-bottom:var(--sn-s-1);color:var(--sn-callout-color);font-size:var(--sn-text-2xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase}.sn-callout>:last-child{margin-bottom:0}.sn-code{margin:0 0 var(--sn-s-4);overflow:hidden;border:1px solid var(--sn-border-subtle);border-radius:var(--sn-r-lg);background:var(--sn-bg-elev-1)}.sn-code__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sn-s-2);min-height:34px;padding:0 var(--sn-s-1) 0 var(--sn-s-4);border-bottom:1px solid var(--sn-border-subtle);color:var(--sn-fg-subtle);font-family:var(--sn-font-mono);font-size:var(--sn-text-xs)}.sn-code__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sn-code pre{margin:0;padding:var(--sn-s-4) 18px;overflow-x:auto;border:0;border-radius:0;background:none;color:var(--sn-fg);font-family:var(--sn-font-mono);font-size:var(--sn-text-sm);line-height:1.6;tab-size:4}.sn-code pre code{padding:0;border:0;background:none;font:inherit}@media(max-width:600px){.sn-code pre{padding:14px;font-size:var(--sn-text-xs)}}.sn-terminal{overflow:hidden;border:1px solid var(--sn-border-strong);border-radius:var(--sn-r-lg);background:var(--sn-bg-inset);font-family:var(--sn-font-mono)}.sn-terminal__bar{position:relative;display:flex;align-items:center;justify-content:center;height:32px;padding:0 60px;border-bottom:1px solid var(--sn-border);background:var(--sn-bg-elev-1);color:var(--sn-fg-subtle);font-size:var(--sn-text-xs)}.sn-terminal__bar:before{content:"";position:absolute;left:14px;width:8px;height:8px;border-radius:50%;background:var(--sn-fg-faint);box-shadow:14px 0 var(--sn-fg-faint),28px 0 var(--sn-fg-faint)}.sn-terminal__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sn-terminal__body{margin:0;padding:var(--sn-s-4) 18px;overflow-x:auto;color:var(--sn-fg);font-size:var(--sn-text-sm);line-height:1.6}.sn-terminal__body>*{margin:0;white-space:pre-wrap}.sn-terminal__body:has(>img,>video){padding:0}.sn-terminal__body>:is(img,video){display:block;width:100%;height:auto}.sn-terminal__out{color:var(--sn-fg-muted)}@media(max-width:600px){.sn-terminal__body{padding:14px;font-size:var(--sn-text-xs)}}.sn-toc{margin-bottom:var(--sn-s-7);font-size:var(--sn-text-sm)}.sn-toc details{padding:var(--sn-s-3) var(--sn-s-4);border:1px solid var(--sn-border-subtle);border-radius:var(--sn-r-lg)}.sn-toc summary{cursor:pointer;color:var(--sn-fg);font-weight:500}.sn-toc ul{list-style:none;margin:var(--sn-s-3) 0 0;padding:0}.sn-toc li+li{margin-top:var(--sn-s-2)}.sn-toc a{color:var(--sn-fg-muted);text-decoration:none}.sn-toc a:hover,.sn-toc a[aria-current]{color:var(--sn-fg)}.sn-toc-layout{display:grid}@media(min-width:1000px){.sn-toc-layout{grid-template-columns:minmax(0,680px) 220px;column-gap:var(--sn-s-10);justify-content:center}.sn-toc-layout>*{grid-column:1}.sn-toc-layout>.sn-toc{grid-column:2;grid-row:1 / span 2;align-self:start;position:sticky;top:var(--sn-s-6);margin:0;padding-top:var(--sn-s-2)}.sn-toc-layout>.sn-toc details{padding:0;border:0}.sn-toc-layout>.sn-toc summary{list-style:none;pointer-events:none;color:var(--sn-fg-subtle);font-size:var(--sn-text-xs);letter-spacing:.12em;text-transform:uppercase}.sn-toc-layout>.sn-toc summary::-webkit-details-marker{display:none}}.sn-theme-toggle{appearance:none;border:none;background:transparent;padding:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:opacity var(--sn-base)}.sn-theme-toggle:focus-visible{outline:1px solid var(--sn-accent);outline-offset:1px}.sn-theme-toggle__indicator{display:inline-block;width:var(--sn-theme-toggle-size, 12px);height:var(--sn-theme-toggle-size, 12px);border-radius:50%;border:1px solid var(--sn-fg-muted);background:var(--sn-fg);transition:background var(--sn-base) var(--sn-ease)}[data-theme=light] .sn-theme-toggle__indicator{background:transparent}@media(prefers-color-scheme:light){[data-theme=system] .sn-theme-toggle__indicator{background:transparent}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@snowztech/ui-css",
3
- "version": "0.4.0",
3
+ "version": "0.5.0",
4
4
  "description": "Terminal-minimal CSS design system. Tokens, resets, and component classes. Framework-agnostic.",
5
5
  "license": "MIT",
6
6
  "author": {
package/src/components/callout.css ADDED
@@ -0,0 +1,28 @@
1
+ .sn-callout {
2
+ --sn-callout-color: var(--sn-fg-muted);
3
+ --sn-callout-bg: var(--sn-bg-elev-1);
4
+ margin: 0 0 var(--sn-s-4);
5
+ padding: var(--sn-s-3) var(--sn-s-4);
6
+ border: 1px solid var(--sn-border);
7
+ border-left: 2px solid var(--sn-callout-color);
8
+ border-radius: var(--sn-r-xs);
9
+ background: var(--sn-callout-bg);
10
+ color: var(--sn-fg-muted);
11
+ font-size: var(--sn-text-sm);
12
+ line-height: var(--sn-leading-normal);
13
+ }
14
+ .sn-callout--note { --sn-callout-color: var(--sn-accent); --sn-callout-bg: var(--sn-accent-soft); }
15
+ .sn-callout--tip { --sn-callout-color: var(--sn-success); --sn-callout-bg: var(--sn-success-soft); }
16
+ .sn-callout--warning { --sn-callout-color: var(--sn-warning); --sn-callout-bg: var(--sn-warning-soft); }
17
+ .sn-callout--danger { --sn-callout-color: var(--sn-danger); --sn-callout-bg: var(--sn-danger-soft); }
18
+
19
+ .sn-callout__title {
20
+ display: block;
21
+ margin-bottom: var(--sn-s-1);
22
+ color: var(--sn-callout-color);
23
+ font-size: var(--sn-text-2xs);
24
+ font-weight: 600;
25
+ letter-spacing: 0.04em;
26
+ text-transform: uppercase;
27
+ }
28
+ .sn-callout > :last-child { margin-bottom: 0; }
package/src/components/code.css ADDED
@@ -0,0 +1,41 @@
1
+ .sn-code {
2
+ margin: 0 0 var(--sn-s-4);
3
+ overflow: hidden;
4
+ border: 1px solid var(--sn-border-subtle);
5
+ border-radius: var(--sn-r-lg);
6
+ background: var(--sn-bg-elev-1);
7
+ }
8
+
9
+ .sn-code__bar {
10
+ display: flex;
11
+ align-items: center;
12
+ justify-content: space-between;
13
+ gap: var(--sn-s-2);
14
+ min-height: 34px;
15
+ padding: 0 var(--sn-s-1) 0 var(--sn-s-4);
16
+ border-bottom: 1px solid var(--sn-border-subtle);
17
+ color: var(--sn-fg-subtle);
18
+ font-family: var(--sn-font-mono);
19
+ font-size: var(--sn-text-xs);
20
+ }
21
+ .sn-code__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
22
+
23
+ /* Loaded after prose.css, so this wins over .sn-prose pre. */
24
+ .sn-code pre {
25
+ margin: 0;
26
+ padding: var(--sn-s-4) 18px;
27
+ overflow-x: auto;
28
+ border: 0;
29
+ border-radius: 0;
30
+ background: none;
31
+ color: var(--sn-fg);
32
+ font-family: var(--sn-font-mono);
33
+ font-size: var(--sn-text-sm);
34
+ line-height: 1.6;
35
+ tab-size: 4;
36
+ }
37
+ .sn-code pre code { padding: 0; border: 0; background: none; font: inherit; }
38
+
39
+ @media (max-width: 600px) {
40
+ .sn-code pre { padding: 14px; font-size: var(--sn-text-xs); }
41
+ }
package/src/components/terminal.css ADDED
@@ -0,0 +1,51 @@
1
+ .sn-terminal {
2
+ overflow: hidden;
3
+ border: 1px solid var(--sn-border-strong);
4
+ border-radius: var(--sn-r-lg);
5
+ background: var(--sn-bg-inset);
6
+ font-family: var(--sn-font-mono);
7
+ }
8
+
9
+ .sn-terminal__bar {
10
+ position: relative;
11
+ display: flex;
12
+ align-items: center;
13
+ justify-content: center;
14
+ height: 32px;
15
+ padding: 0 60px;
16
+ border-bottom: 1px solid var(--sn-border);
17
+ background: var(--sn-bg-elev-1);
18
+ color: var(--sn-fg-subtle);
19
+ font-size: var(--sn-text-xs);
20
+ }
21
+ /* Three window dots, drawn in one pseudo-element. */
22
+ .sn-terminal__bar::before {
23
+ content: "";
24
+ position: absolute;
25
+ left: 14px;
26
+ width: 8px;
27
+ height: 8px;
28
+ border-radius: 50%;
29
+ background: var(--sn-fg-faint);
30
+ box-shadow: 14px 0 var(--sn-fg-faint), 28px 0 var(--sn-fg-faint);
31
+ }
32
+ .sn-terminal__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
33
+
34
+ .sn-terminal__body {
35
+ margin: 0;
36
+ padding: var(--sn-s-4) 18px;
37
+ overflow-x: auto;
38
+ color: var(--sn-fg);
39
+ font-size: var(--sn-text-sm);
40
+ line-height: 1.6;
41
+ }
42
+ /* Each child is one line, so spacing inside a line is kept as typed. */
43
+ .sn-terminal__body > * { margin: 0; white-space: pre-wrap; }
44
+ .sn-terminal__body:has(> img, > video) { padding: 0; }
45
+ .sn-terminal__body > :is(img, video) { display: block; width: 100%; height: auto; }
46
+
47
+ .sn-terminal__out { color: var(--sn-fg-muted); }
48
+
49
+ @media (max-width: 600px) {
50
+ .sn-terminal__body { padding: 14px; font-size: var(--sn-text-xs); }
51
+ }
package/src/index.css CHANGED
@@ -17,5 +17,8 @@
17
17
  @import "./components/pulse.css";
18
18
  @import "./components/copy-button.css";
19
19
  @import "./components/prose.css";
20
+ @import "./components/callout.css";
21
+ @import "./components/code.css";
22
+ @import "./components/terminal.css";
20
23
  @import "./components/toc.css";
21
24
  @import "./components/theme-toggle.css";