1* {
2 margin: 0;
3 padding: 0;
4 box-sizing: border-box;
5}
6
7html {
8 overflow-x: hidden;
9}
10
11body {
12 background-color: #fffff8;
13 background-image: repeating-linear-gradient(
14 0deg,
15 rgba(0, 0, 0, 0.035) 0px,
16 rgba(0, 0, 0, 0.035) 2px,
17 transparent 2px,
18 transparent 4px
19 );
20 background-size: 4px 4px;
21 font-family: Georgia, 'Times New Roman', serif;
22 font-size: 18px;
23 overflow-x: hidden;
24 display: flex;
25 flex-direction: column;
26 align-items: center;
27 justify-content: center;
28 min-height: 100vh;
29 padding: 40px 20px;
30 text-align: center;
31}
32
33main {
34 max-width: 900px;
35 width: 100%;
36 overflow-x: hidden;
37 margin: 0 auto;
38}
39
40/* Header: tagline first */
41h1 {
42 font-size: clamp(30px, 6vw, 50px);
43 line-height: 1.2;
44 color: #000;
45 margin-bottom: 30px;
46 font-weight: normal;
47 letter-spacing: -0.01em;
48}
49
50/* Introduction paragraph */
51.intro {
52 max-width: 780px;
53 margin: 0 auto 30px;
54 line-height: 1.7;
55 color: #333;
56 text-align: left;
57 font-size: 16px;
58}
59
60.intro p {
61 margin-bottom: 16px;
62}
63
64.intro p:last-child {
65 margin-bottom: 0;
66}
67
68.intro code {
69 font-family: 'Courier New', Courier, monospace;
70 background: rgba(0, 0, 0, 0.05);
71 padding: 2px 6px;
72 border-radius: 3px;
73 font-size: 15px;
74}
75
76.next-steps {
77 max-width: 960px;
78 margin: 20px auto 40px;
79 text-align: left;
80}
81
82.next-steps h2 {
83 font-size: 20px;
84 margin-bottom: 16px;
85 font-weight: normal;
86}
87
88.step-grid {
89 display: grid;
90 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
91 gap: 16px;
92}
93
94.step-card {
95 background: rgba(255, 255, 255, 0.6);
96 border: 1px solid rgba(0, 0, 0, 0.08);
97 border-radius: 10px;
98 padding: 18px;
99 box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
100}
101
102.step-card h3 {
103 font-size: 16px;
104 margin-bottom: 10px;
105}
106
107.step-card p {
108 margin-bottom: 10px;
109 color: #555;
110 line-height: 1.4;
111}
112
113.step-card ul {
114 list-style: disc;
115 padding-left: 18px;
116 margin: 0;
117 color: #444;
118 font-size: 14px;
119}
120
121.step-card li {
122 margin-bottom: 6px;
123}
124
125.step-card li:last-child {
126 margin-bottom: 0;
127}
128
129.step-card code {
130 font-family: 'Courier New', Courier, monospace;
131 background: rgba(0, 0, 0, 0.05);
132 padding: 2px 6px;
133 border-radius: 4px;
134 font-size: 13px;
135}
136
137.step-card a {
138 color: #0066cc;
139 text-decoration: none;
140}
141
142.step-card a:hover {
143 text-decoration: underline;
144}
145
146.hostname {
147 font-size: clamp(28px, 5vw, 36px);
148 line-height: 1.2;
149 color: #000;
150 margin-bottom: 40px;
151 font-weight: normal;
152 letter-spacing: -0.01em;
153 font-family: 'Courier New', Courier, monospace;
154}
155
156/* Decorative rule */
157hr {
158 width: 200px;
159 height: 40px;
160 border: 0;
161 margin: 40px auto;
162 position: relative;
163 opacity: 0.4;
164}
165
166hr::before {
167 content: '';
168 position: absolute;
169 top: 50%;
170 left: 0;
171 right: 0;
172 height: 1px;
173 background: linear-gradient(90deg,
174 transparent 0%,
175 #333 20%,
176 #333 80%,
177 transparent 100%);
178}
179
180hr::after {
181 content: '❦';
182 position: absolute;
183 top: 50%;
184 left: 50%;
185 transform: translate(-50%, -50%);
186 font-size: 24px;
187 background: #fffff8;
188 padding: 0 10px;
189 color: #333;
190}
191
192/* Action links section */
193.actions {
194 list-style: none;
195 margin: 40px auto;
196 max-width: 800px;
197 display: flex;
198 gap: 12px;
199 justify-content: center;
200 flex-wrap: wrap;
201}
202
203.actions li {
204 flex: 1 1 0;
205 min-width: 150px;
206 max-width: 200px;
207}
208
209.actions a {
210 color: #0066cc;
211 text-decoration: none;
212 display: flex;
213 flex-direction: column;
214 align-items: center;
215 gap: 8px;
216 padding: 20px 16px;
217 background: rgba(255, 255, 255, 0.6);
218 border: 1px solid rgba(0, 102, 204, 0.3);
219 border-radius: 8px;
220 transition: all 0.2s;
221 height: 100%;
222}
223
224.actions a:hover {
225 background: rgba(0, 102, 204, 0.1);
226 border-color: rgba(0, 102, 204, 0.5);
227 transform: translateY(-2px);
228 box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
229}
230
231.actions a:active {
232 transform: translateY(0);
233}
234
235.action-icon {
236 font-size: 32px;
237 line-height: 1;
238}
239
240.action-label {
241 font-weight: bold;
242 color: #000;
243 font-size: 14px;
244 text-align: center;
245}
246
247.action-detail {
248 font-size: 12px;
249 color: #666;
250 font-family: 'Courier New', Courier, monospace;
251 text-align: center;
252 word-break: break-all;
253}
254
255/* User info section */
256.user-info {
257 margin: 40px auto;
258 padding: 0;
259 max-width: 600px;
260}
261
262.user-status {
263 font-size: 16px;
264 color: #666;
265 margin-bottom: 15px;
266}
267
268.user-status strong {
269 color: #000;
270}
271
272.auth-buttons {
273 display: flex;
274 gap: 12px;
275 justify-content: center;
276 flex-wrap: wrap;
277}
278
279.auth-buttons a {
280 font-family: 'Courier New', Courier, monospace;
281 font-size: 14px;
282 text-decoration: none;
283 color: #0066cc;
284 padding: 8px 16px;
285 border: 1px solid #0066cc;
286 border-radius: 6px;
287 transition: background 0.2s, color 0.2s;
288}
289
290.auth-buttons a:hover {
291 background: #0066cc;
292 color: #fff;
293}
294
295/* Headers section */
296.headers {
297 margin: 32px auto;
298 padding: 20px;
299 max-width: 900px;
300 background: rgba(255, 255, 255, 0.85);
301 border: 1px solid rgba(0, 0, 0, 0.08);
302 border-radius: 12px;
303 text-align: left;
304 box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
305}
306
307.headers-title h2 {
308 font-size: 20px;
309 margin-bottom: 2px;
310 font-weight: normal;
311}
312
313.headers-notes {
314 color: #555;
315 font-size: 15px;
316 line-height: 1.5;
317 display: flex;
318 flex-direction: column;
319 gap: 8px;
320 margin-top: 8px;
321}
322
323.headers-notes p {
324 margin: 0;
325}
326
327.headers-notes ul {
328 margin: 0 0 4px 20px;
329 padding-left: 18px;
330 list-style: disc;
331}
332
333.headers-notes li {
334 margin-bottom: 4px;
335}
336
337.headers-notes code {
338 font-family: 'Courier New', Courier, monospace;
339 background: rgba(0, 0, 0, 0.05);
340 padding: 1px 5px;
341 border-radius: 4px;
342 font-size: 13px;
343}
344
345.headers-table {
346 margin-top: 12px;
347 border: 1px solid rgba(0, 0, 0, 0.1);
348 border-radius: 10px;
349 overflow: hidden;
350}
351
352.headers-row {
353 display: grid;
354 grid-template-columns: minmax(140px, 1fr) 2fr;
355 gap: 12px;
356 padding: 12px 16px;
357 background: rgba(255, 255, 255, 0.92);
358}
359
360.headers-row + .headers-row {
361 border-top: 1px solid rgba(0, 0, 0, 0.05);
362}
363
364.headers-head {
365 background: rgba(0, 0, 0, 0.04);
366 font-weight: bold;
367 text-transform: uppercase;
368 letter-spacing: 0.05em;
369 font-size: 12px;
370}
371
372.header-name code,
373.header-value code {
374 font-family: 'Courier New', Courier, monospace;
375 background: rgba(0, 0, 0, 0.05);
376 padding: 2px 6px;
377 border-radius: 4px;
378 font-size: 14px;
379 word-break: break-all;
380 display: inline-block;
381}
382
383.header-value {
384 color: #222;
385}
386
387.headers-row.exe-header {
388 background: linear-gradient(90deg, rgba(0, 102, 204, 0.12), rgba(0, 102, 204, 0.02));
389 border-left: 3px solid rgba(0, 102, 204, 0.45);
390}
391
392.header-empty {
393 color: #888;
394 font-style: italic;
395}
396
397/* Counter section */
398.counter {
399 margin: 20px auto;
400 font-size: 16px;
401 color: #666;
402}
403
404.counter strong {
405 color: #000;
406}
407
408/* Mobile responsive */
409@media (max-width: 600px) {
410 body {
411 padding: 20px 10px;
412 }
413
414 h1 {
415 margin-bottom: 20px;
416 }
417
418 .intro {
419 font-size: 14px;
420 margin-bottom: 20px;
421 padding: 0 10px;
422 }
423
424 .hostname {
425 margin-bottom: 30px;
426 font-size: clamp(20px, 5vw, 28px);
427 }
428
429 .actions {
430 margin: 30px auto;
431 flex-direction: column;
432 max-width: 100%;
433 padding: 0 10px;
434 }
435
436 .actions li {
437 flex: 1 1 auto;
438 min-width: 0;
439 }
440
441 .actions a {
442 padding: 16px 12px;
443 }
444
445 .action-icon {
446 font-size: 28px;
447 }
448
449 .action-label {
450 font-size: 13px;
451 }
452
453 .action-detail {
454 font-size: 11px;
455 }
456
457 .user-info {
458 padding: 0;
459 }
460
461 hr {
462 transform: scale(0.8);
463 margin: 30px auto;
464 }
465
466 .headers {
467 padding: 16px;
468 }
469
470 .headers-notes {
471 gap: 6px;
472 }
473
474 .headers-row {
475 grid-template-columns: 1fr;
476 gap: 6px;
477 padding: 10px 12px;
478 }
479}
480
481/* Copy feedback */
482.copied-feedback {
483 position: fixed;
484 top: 20px;
485 left: 50%;
486 transform: translateX(-50%);
487 background: rgba(100, 180, 255, 0.9);
488 color: #000;
489 padding: 12px 24px;
490 border-radius: 8px;
491 font-size: 14px;
492 opacity: 0;
493 transition: opacity 0.3s;
494 pointer-events: none;
495 z-index: 1000;
496 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
497}
498
499.copied-feedback.show {
500 opacity: 1;
501}