Hugging Face's logo

Spaces:
ProAudience
/
FlowAct-R2
Running

App Files Community
FlowAct-R2
File size: 14,296 Bytes
16ed0c5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
/* Standalone editorial theme; no shared project-page selectors or overrides. */
:root {
  color-scheme: light;
  --ink: #171918;
  --muted: #6b706d;
  --line: #dedfdd;
  --paper: #fff;
  --soft: #f3f4f2;
  --accent: #057866;
  --max: 1384px;
}
* { box-sizing: border-box; letter-spacing: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 36px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible, .gallery-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .3; }
button, a { touch-action: manipulation; }
figure, h1, h2, p { margin: 0; }
svg.svg-inline--fa { width: 1em; height: 1em; }
[hidden] { display: none !important; }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { display: block; padding: 16px; }
.site-header, .site-footer { max-width: var(--max); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-header { min-height: 92px; padding: 0 48px; }
.wordmark { display: inline-flex; align-items: baseline; gap: 5px; font-size: 23px; font-weight: 700; }
.wordmark-version { color: var(--accent); font-weight: 400; font-size: 14px; }
.site-header nav { display: flex; align-items: center; gap: 32px; font-size: 14px; }
.site-header nav a:hover, .text-link:hover, .site-footer a:hover { color: var(--accent); }
.site-header .project-link { margin-left: 22px; }
.project-link svg, .site-footer > a:last-child svg, .related-research svg { transform: rotate(45deg); margin-left: 8px; font-size: 12px; }
.article-header { max-width: var(--max); padding: 66px 48px 48px 300px; margin: auto; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 36px; color: var(--muted); font-size: 13px; margin-bottom: 30px; }
.eyebrow { font-family: 'Courier New', monospace; text-transform: uppercase; font-size: 11px; font-weight: 600; }
.article-meta .eyebrow { color: var(--accent); }
h1 { font-size: 88px; line-height: 1.04; font-weight: 500; }
.article-deck { font-size: 34px; line-height: 1.23; max-width: 830px; margin-top: 22px; font-weight: 400; text-wrap: balance; }
.article-author-byline { max-width: 830px; margin-top: 22px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.article-author-byline .publication-authors { margin-top: 4px; }
.article-author-byline .publication-authors:first-child { color: var(--ink); }
.article-author-byline .author-block { display: inline; }
.article-author-byline small { font-size: 12px; }
.text-link { display: inline-flex; align-items: center; gap: 16px; font-size: 14px; padding: 12px 0; margin-top: 23px; }
.text-link svg { font-size: 12px; transition: transform .2s; }
.text-link:hover svg { transform: translateY(3px); }
.featured-media { max-width: var(--max); padding: 0 48px; margin: 0 auto 88px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.featured-media figcaption { display: flex; gap: 13px; font-size: 12px; line-height: 1.5; padding-top: 16px; }
.featured-media figcaption > span { color: var(--muted); font-family: 'Courier New', monospace; }
.video-shell { position: relative; isolation: isolate; background: #e9ebe8; border-radius: 4px; overflow: hidden; }
.video-shell video { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: #111; }
/* Show portrait posters without letterbox padding; playback always preserves the full frame. */
.video-shell:not(.is-loaded) video { object-fit: cover; }
.video-shell:not(.is-loaded) video::-webkit-media-controls { display: none; }
.video-play { display: grid; place-items: center; position: absolute; inset: 0; margin: auto; width: 50px; height: 50px; color: var(--ink); background: #fff; border: 0; border-radius: 50%; box-shadow: 0 2px 12px #0002; transition: transform .2s, background .2s; z-index: 1; }
.video-play svg { font-size: 13px; margin-left: 2px; }
.video-play:hover { transform: scale(1.07); background: #e1fff0; }
.video-shell.is-loaded .video-play { display: none; }
.video-shell.is-loaded video { background: #080908; }
.video-error { position: absolute; top: 12px; left: 12px; right: 12px; padding: 10px; color: #fff; background: #262927; font-size: 12px; line-height: 1.5; z-index: 2; }
.article-layout { max-width: var(--max); margin: auto; padding: 0 48px; display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 64px; }
.contents { min-width: 0; }
.contents nav { position: sticky; top: 36px; display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.contents .eyebrow { margin-bottom: 17px; color: #858b86; }
.contents a { display: flex; gap: 13px; padding: 9px 0; font-size: 12px; color: var(--muted); line-height: 1.4; }
.contents a > span { font-family: 'Courier New', monospace; color: #909690; }
.contents a:hover, .contents a[aria-current="location"] { color: var(--ink); }
.contents a[aria-current="location"] { font-weight: 600; }
.contents a[aria-current="location"] > span { color: var(--accent); }
.contents .back-top { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 20px; align-items: center; }
.contents .back-top svg { font-size: 10px; }
article { min-width: 0; }
.article-section { border-top: 1px solid var(--line); padding: 38px 0 74px; scroll-margin-top: 28px; }
.section-heading { display: flex; align-items: baseline; gap: 20px; margin-bottom: 32px; }
.section-number { color: var(--accent); font-family: 'Courier New', monospace; font-size: 12px; flex-shrink: 0; }
.section-heading h2 { font-size: 32px; line-height: 1.2; font-weight: 500; text-wrap: balance; }
.prose { max-width: 700px; }
.prose p { font-size: 17px; line-height: 1.8; color: #414641; margin-bottom: 24px; overflow-wrap: break-word; }
.prose p:last-child { margin-bottom: 0; }
.prose .lead { color: var(--ink); font-size: 23px; line-height: 1.55; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { text-decoration: underline; text-underline-offset: 4px; }
.capabilities { margin-top: 40px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--line); padding-top: 25px; gap: 20px; }
.capabilities > div { display: flex; flex-direction: column; gap: 12px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.capability-value { font-size: 27px; color: var(--ink); font-weight: 400; }
.method-figure { margin: 0 0 40px; }
.method-figure > a { position: relative; display: block; }
.method-figure img { width: 100%; height: auto; display: block; background: #fff; }
.diagram-expand { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 34px; height: 34px; background: #fff; border: 1px solid var(--line); border-radius: 50%; font-size: 12px; }
.method-figure figcaption { font-size: 12px; line-height: 1.5; color: var(--muted); margin-top: 16px; }
.gallery { margin-top: 32px; --columns: 3; }
.gallery-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 15px; font-size: 12px; color: var(--muted); }
.gallery-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.gallery-counter { font-size: 11px; font-family: 'Courier New', monospace; min-width: 50px; text-align: right; margin-right: 4px; }
.icon-button { width: 34px; height: 34px; padding: 0; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); font-size: 12px; flex-shrink: 0; }
.icon-button:hover:not(:disabled) { background: var(--soft); }
.gallery-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--columns) - 1) * 14px) / var(--columns)); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #c5cac5 transparent; padding-bottom: 12px; overscroll-behavior-x: contain; }
.gallery-item { min-width: 0; scroll-snap-align: start; }
.gallery-item .video-shell video { aspect-ratio: 3 / 4; }
.comparison-gallery { --columns: 2; }
.comparison-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; }
.comparison-method { min-width: 0; }
.method-label { display: block; text-align: center; color: var(--muted); font-size: 11px; margin-bottom: 12px; }
.comparison-method:last-child .method-label { color: var(--accent); }
.comparison-method .video-shell { border-radius: 4px 0 0 4px; }
.comparison-method:last-child .video-shell { border-radius: 0 4px 4px 0; }
.comparison-method .video-shell video { object-fit: contain; }
.comparison-gallery.comparison-portrait .video-shell video { aspect-ratio: 9 / 16; }
.comparison-method .video-play { width: 36px; height: 36px; }
.evaluation-summary { background: #171c19; color: #fff; padding: 30px 34px; margin: 0 0 32px; }
.evaluation-summary .eyebrow { color: #b0bcb4; }
.evaluation-scores { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; margin-top: 20px; }
.evaluation-scores > div { display: flex; flex-direction: column; gap: 15px; font-size: 13px; }
.score { font-size: 48px; line-height: 1.2; font-weight: 400; color: #d0f4dd; }
.score > span { font-size: 29px; }
.score-unit { font-size: 10px; color: #aebcb2; margin-left: 10px; }
.citation { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.citation summary { list-style: none; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; font-size: 17px; cursor: pointer; }
.citation summary::-webkit-details-marker { display: none; }
.citation summary svg { font-size: 12px; transition: transform .2s; }
.citation[open] summary svg { transform: rotate(45deg); }
.citation-content { position: relative; background: var(--soft); padding: 52px 24px 24px; }
.copy-citation { position: absolute; right: 15px; top: 12px; }
.citation pre { margin: 0; font-size: 12px; line-height: 1.7; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.copy-status { display: block; margin-top: 12px; font-size: 12px; color: var(--accent); }
.related-research { margin-top: 24px; }
.related-research a { display: flex; justify-content: space-between; align-items: center; padding: 19px 0; border-bottom: 1px solid var(--line); font-size: 18px; }
.related-research a:hover { color: var(--accent); }
.ethics { padding: 0 0 70px; }
.ethics h2 { font-size: 16px; font-weight: 500; margin-bottom: 18px; }
.ethics p { font-size: 13px; line-height: 1.7; color: var(--muted); }
.site-footer { border-top: 1px solid var(--line); padding: 36px 48px; font-size: 12px; color: var(--muted); }
.site-footer .wordmark { color: var(--ink); }
@media (min-width: 1600px) { .article-header { padding-top: 78px; } }
@media (max-width: 1100px) {
  .article-layout { grid-template-columns: 150px minmax(0,1fr); gap: 36px; }
  .article-header { padding: 36px 48px 36px 234px; }
  .article-deck { font-size: 30px; }
  .gallery { --columns: 2; }
  .comparison-gallery { --columns: 1; }
  .score { font-size: 38px; }
  .score > span { font-size: 23px; }
  .section-heading h2 { font-size: 28px; }
  .capability-value { font-size: 23px; }
}
@media (max-width: 800px) {
  .site-header { padding: 0 24px; min-height: 76px; }
  .site-header nav { gap: 20px; font-size: 12px; }
  .site-header .project-link { margin-left: 0; }
  .article-header { padding: 40px 24px 32px; }
  h1 { font-size: 64px; }
  .article-deck { font-size: 29px; }
  .article-meta { margin-bottom: 24px; font-size: 12px; }
  .featured-media { padding: 0 24px; gap: 12px; margin-bottom: 52px; grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 26px; }
  .featured-media figcaption { font-size: 12px; padding-top: 12px; }
  .article-layout { display: block; padding: 0 24px; }
  .contents { margin-bottom: 36px; }
  .contents nav { position: static; flex-direction: row; overflow-x: auto; gap: 24px; border-top: 1px solid var(--line); padding: 15px 0; scrollbar-width: thin; }
  .contents a { white-space: nowrap; gap: 8px; }
  .contents .eyebrow, .contents .back-top { display: none; }
  .gallery { --columns: 2; }
  .comparison-gallery { --columns: 1; }
  .article-section { padding: 30px 0 54px; }
  .section-heading { margin-bottom: 24px; gap: 14px; }
  .prose p { font-size: 16px; line-height: 1.75; }
  .prose .lead { font-size: 21px; }
  .site-footer { padding: 28px 24px; flex-wrap: wrap; }
  .site-footer > span { order: 3; flex-basis: 100%; }
}
@media (max-width: 480px) {
  .site-header nav > a:first-child { display: none; }
  .site-header nav { gap: 18px; }
  .wordmark { font-size: 21px; }
  .article-header { padding-top: 24px; }
  h1 { font-size: 52px; }
  .article-deck { font-size: 25px; line-height: 1.25; }
  .article-meta { gap: 12px; }
  .text-link { margin-top: 17px; }
  .featured-media { gap: 10px; row-gap: 20px; }
  .featured-media figcaption { gap: 6px; font-size: 11px; }
  .video-play { width: 40px; height: 40px; }
  .section-heading h2 { font-size: 26px; }
  .capabilities { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
  .capabilities > div { flex-direction: row; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 18px 0; gap: 16px; }
  .capabilities > div > span:last-child { max-width: 50%; text-align: right; }
  .gallery:not(.comparison-gallery) .gallery-track { grid-auto-columns: 72%; }
  .gallery-toolbar { gap: 8px; font-size: 11px; }
  .gallery-actions { gap: 6px; }
  .gallery-counter { min-width: 42px; }
  .icon-button { width: 32px; height: 32px; }
  .evaluation-summary { padding: 24px 20px; }
  .evaluation-scores { gap: 12px; }
  .score { font-size: 31px; }
  .score > span { font-size: 20px; }
  .evaluation-scores > div { font-size: 11px; line-height: 1.5; }
  .score-unit { display: block; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}