1:root {
2 font-family: Inter, ui-sans-serif, system-ui, sans-serif;
3 color: #dfeee8;
4 background: #0c1714;
5 font-synthesis: none;
6 line-height: 1.6;
7 color-scheme: dark;
8}
9* {
10 box-sizing: border-box;
11}
12body {
13 margin: 0;
14}
15main {
16 max-width: 780px;
17 margin: auto;
18 padding: 56px 24px 80px;
19}
20header {
21 margin-bottom: 32px;
22}
23.eyebrow {
24 font-size: 0.75rem;
25 font-weight: 700;
26 letter-spacing: 0.18em;
27 color: #8ee5b4;
28}
29h1 {
30 font-size: clamp(2.3rem, 7vw, 3.8rem);
31 letter-spacing: -0.05em;
32 line-height: 1.1;
33 margin: 18px 0;
34}
35h2 {
36 font-size: 1.2rem;
37 letter-spacing: -0.02em;
38 margin: 0 0 12px;
39}
40p {
41 color: #afc7bc;
42}
43section,
44details {
45 border: 1px solid #2e473c;
46 border-radius: 16px;
47 padding: 24px;
48 margin: 20px 0;
49 background: #13221c;
50}
51label {
52 display: block;
53 font-size: 0.9rem;
54 color: #bdd3c8;
55 margin: 14px 0;
56}
57input {
58 display: block;
59 margin-top: 6px;
60 width: 100%;
61 padding: 12px;
62 border: 1px solid #426152;
63 border-radius: 8px;
64 background: #0d1913;
65 font: inherit;
66 color: #e8f2ee;
67}
68input[type="file"] {
69 font-size: 0.85rem;
70}
71button {
72 border: 1px solid #9de5b8;
73 border-radius: 8px;
74 padding: 10px 17px;
75 background: #afeac0;
76 color: #13281d;
77 font: inherit;
78 font-size: 0.9rem;
79 font-weight: 650;
80 cursor: pointer;
81 white-space: nowrap;
82}
83button.secondary {
84 border-color: #496556;
85 background: transparent;
86 color: #d2eadc;
87}
88button:hover:not(:disabled) {
89 filter: brightness(1.12);
90}
91button:disabled {
92 opacity: 0.45;
93 cursor: not-allowed;
94}
95button:focus-visible,
96input:focus-visible,
97summary:focus-visible {
98 outline: 2px solid #c9fbb4;
99 outline-offset: 4px;
100}
101.actions,
102.section-title {
103 display: flex;
104 align-items: center;
105 justify-content: space-between;
106 gap: 12px;
107}
108.actions {
109 justify-content: flex-start;
110}
111.section-title h2 {
112 margin: 0;
113}
114#message {
115 padding: 14px 18px;
116 background: #203b2b;
117 border-left: 3px solid #9ee5ae;
118 border-radius: 6px;
119 overflow-wrap: anywhere;
120}
121#message[data-error="true"] {
122 background: #3e2725;
123 border-color: #ffaf9b;
124 color: #ffcfbc;
125}
126#files {
127 list-style: none;
128 padding: 0;
129 margin: 0;
130}
131#files li {
132 display: flex;
133 align-items: center;
134 justify-content: space-between;
135 gap: 16px;
136 padding: 18px 0;
137 border-top: 1px solid #2e473c;
138}
139#files strong {
140 display: block;
141 overflow-wrap: anywhere;
142}
143#files li > div {
144 min-width: 0;
145}
146.file-status {
147 font-size: 0.8rem;
148 color: #a6c5b2;
149}
150summary {
151 cursor: pointer;
152 color: #bdd3c8;
153}
154details p {
155 font-size: 0.9rem;
156}
157[hidden] {
158 display: none !important;
159}
160@media (max-width: 520px) {
161 main {
162 padding: 32px 16px 48px;
163 }
164 section,
165 details {
166 padding: 18px;
167 }
168 .section-title {
169 align-items: flex-start;
170 flex-direction: column;
171 }
172 #files li {
173 align-items: flex-start;
174 flex-direction: column;
175 }
176 .actions {
177 flex-wrap: wrap;
178 }
179}