| |
| |
| |
|
|
| :root { |
| --vt-ink: #17131f; |
| --vt-accent: #e4287c; |
| --vt-line: #e9e4ef; |
| --vt-muted: #6b6478; |
| } |
|
|
| .gradio-container { |
| max-width: 1500px !important; |
| } |
|
|
| |
| .vt-header { |
| display: flex; |
| align-items: center; |
| gap: 18px; |
| padding: 26px 4px 20px; |
| border-bottom: 1px solid var(--vt-line); |
| margin-bottom: 18px; |
| } |
|
|
| .vt-mark { |
| width: 46px; |
| height: 46px; |
| flex: 0 0 46px; |
| border-radius: 14px; |
| background: linear-gradient(145deg, var(--vt-ink) 0%, var(--vt-ink) 48%, var(--vt-accent) 49%); |
| } |
|
|
| .vt-header h1 { |
| font-size: 30px; |
| font-weight: 800; |
| letter-spacing: -0.03em; |
| line-height: 1.05; |
| margin: 0; |
| color: var(--vt-ink); |
| } |
|
|
| .vt-header p { |
| margin: 4px 0 0; |
| font-size: 15px; |
| color: var(--vt-muted); |
| max-width: 62ch; |
| } |
|
|
| |
| .vt-panel { |
| padding: 4px 8px; |
| } |
|
|
| .vt-go button, |
| button.vt-go { |
| font-weight: 700; |
| letter-spacing: -0.01em; |
| } |
|
|
| .vt-status p { |
| min-height: 22px; |
| margin: 2px 0 10px; |
| font-size: 14px; |
| color: var(--vt-muted); |
| } |
|
|
| .vt-note { |
| font-size: 13px; |
| line-height: 1.5; |
| color: var(--vt-muted); |
| max-width: 78ch; |
| margin: 8px 0 0; |
| } |
|
|
| label > span { |
| font-weight: 600 !important; |
| } |
|
|
| |
| .dark { |
| --vt-ink: #f4f1f7; |
| --vt-line: #2c2735; |
| --vt-muted: #a49dae; |
| } |
|
|
| .dark .vt-header h1 { color: var(--vt-ink); } |
| .dark .vt-mark { |
| background: linear-gradient(145deg, #2c2735 0%, #2c2735 48%, var(--vt-accent) 49%); |
| } |
|
|
| |
| @media (max-width: 720px) { |
| .vt-header { padding: 18px 2px 14px; gap: 12px; } |
| .vt-header h1 { font-size: 23px; } |
| .vt-header p { font-size: 14px; } |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } |
| } |
|
|
