Spaces:
Running
Running
| :root { color-scheme: light dark; font-family: system-ui, sans-serif; background: #f8fafc; color: #172033; } | |
| * { box-sizing: border-box; } | |
| body { max-width: 610px; margin: clamp(48px, 15vh, 140px) auto; padding: 0 28px; line-height: 1.65; } | |
| h1 { margin: 0 0 18px; font-size: clamp(2rem, 6vw, 3rem); letter-spacing: -.04em; line-height: 1.15; } | |
| .description { margin: 0 0 28px; font-size: 1.12rem; color: #526078; } | |
| button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 13px 20px; border: 0; border-radius: 9px; background: #245edb; color: #fff; font: inherit; font-weight: 600; cursor: pointer; } | |
| button:hover { background: #1e4fb9; } | |
| button:disabled { opacity: .6; cursor: wait; } | |
| button:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid #7ba6ff; outline-offset: 4px; } | |
| button svg { flex-shrink: 0; } | |
| .hint { margin: 12px 0 0; font-size: .9rem; color: #64748b; } | |
| #copy-status { min-height: 1.5em; margin: 12px 0; font-size: .9rem; } | |
| textarea { display: block; width: 100%; height: 240px; margin-top: 10px; padding: 12px; border: 1px solid #94a3b8; border-radius: 8px; font: .85rem/1.5 ui-monospace, monospace; resize: vertical; } | |
| a { color: #245edb; text-underline-offset: 3px; } | |
| @media (prefers-color-scheme: dark) { | |
| :root { background: #101722; color: #f1f5f9; } | |
| .description { color: #c0cad9; } | |
| .hint { color: #99a8be; } | |
| a { color: #9abbff; } | |
| } | |