Hugging Face's logo

Spaces:
LaelaZ
/
parapilot
Sleeping

App Files Community
parapilot
File size: 4,674 Bytes
d787a09
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
/* ParaPilot design system — editorial-legal refinement on Tailwind utilities.
   Trustworthy editorial: deep navy ink + warm brass accent on cream paper,
   serif display headings, generous whitespace, light + dark. */

:root {
  /* Editorial-legal palette: deep navy ink + warm brass accent. */
  --pp-accent: 47 74 115;         /* navy       */
  --pp-accent-strong: 26 42 71;   /* deep navy  */
  --pp-violet: 166 124 82;        /* warm brass */
}

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Editorial display headings — serif. */
h1, h2, .pp-serif {
  font-family: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino,
    Georgia, "Times New Roman", serif;
  letter-spacing: -0.005em;
}

/* Subtle page background wash (light + dark). */
.pp-bg {
  background-image:
    radial-gradient(60rem 60rem at 110% -10%, rgb(var(--pp-violet) / 0.10), transparent 55%),
    radial-gradient(50rem 50rem at -10% 0%, rgb(var(--pp-accent) / 0.08), transparent 50%);
}
.dark .pp-bg {
  background-image:
    radial-gradient(60rem 60rem at 110% -10%, rgb(var(--pp-violet) / 0.14), transparent 55%),
    radial-gradient(50rem 50rem at -10% 0%, rgb(var(--pp-accent) / 0.16), transparent 50%);
}

/* Gradient brand text (navy -> brass). */
.pp-gradient-text {
  background-image: linear-gradient(
    100deg, rgb(var(--pp-accent-strong)), rgb(var(--pp-violet))
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Card — warm paper. */
.pp-card {
  border-radius: 1rem;
  border: 1px solid rgb(223 213 196);          /* warm taupe */
  background: rgb(255 253 248 / 0.9);          /* warm white */
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px rgb(40 33 22 / 0.05), 0 10px 28px -14px rgb(40 33 22 / 0.16);
}
.dark .pp-card {
  border-color: rgb(72 66 55 / 0.7);           /* warm slate */
  background: rgb(24 28 38 / 0.6);             /* warm dark  */
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 28px -14px rgb(0 0 0 / 0.6);
}

/* Stepper rail. */
.pp-rail::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 2px;
  background: linear-gradient(
    to bottom, rgb(var(--pp-accent) / 0.5), rgb(var(--pp-violet) / 0.4)
  );
}

/* Step node button. */
.pp-step {
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease,
    background-color .12s ease;
}
.pp-step:hover { transform: translateY(-1px); }
.pp-step[data-active="true"] {
  border-color: rgb(var(--pp-accent-strong));
  box-shadow: 0 0 0 3px rgb(var(--pp-accent) / 0.18);
}

/* Step index bubble. */
.pp-bubble {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  color: white;
  background: linear-gradient(135deg, rgb(var(--pp-accent)), rgb(var(--pp-violet)));
  box-shadow: 0 4px 12px -4px rgb(var(--pp-accent) / 0.6);
}
.pp-bubble--sub {
  background: linear-gradient(135deg, rgb(180 132 70), rgb(146 99 45)); /* brass -> bronze */
  box-shadow: 0 4px 12px -4px rgb(146 99 45 / 0.5);
}

/* Inline citation chip. */
.pp-cite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  margin: 0 0.08rem;
  border-radius: 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: super;
  color: rgb(var(--pp-accent-strong));
  background: rgb(var(--pp-accent) / 0.12);
  text-decoration: none;
  transition: background-color .12s ease;
}
.pp-cite:hover { background: rgb(var(--pp-accent) / 0.24); }

/* Confidence meter. */
.pp-meter { height: 0.5rem; border-radius: 999px; background: rgb(228 220 205); overflow: hidden; }
.dark .pp-meter { background: rgb(60 54 45); }
.pp-meter > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, rgb(var(--pp-accent)), rgb(var(--pp-violet)));
}

/* htmx loading affordance. */
.htmx-indicator { opacity: 0; transition: opacity .15s ease; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* Fade-in for swapped content. */
@keyframes pp-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pp-fade { animation: pp-fade-in .22s ease both; }

/* Focus ring. */
.pp-focus:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(var(--pp-accent) / 0.4);
}