Spaces:
Running
Running
| :root { --bg: #f7f7f4; --fg: #15151a; --muted: #6b6b75; --band: rgba(80, 110, 255, 0.28); --faint: rgba(80, 110, 255, 0.1); --pen: #15151a; --escape: #e5484d; color-scheme: light dark; } | |
| @media (prefers-color-scheme: dark) { :root { --bg: #101014; --fg: #f1f1f4; --muted: #9a9aa6; --band: rgba(120, 150, 255, 0.32); --faint: rgba(120, 150, 255, 0.12); --pen: #f1f1f4; } } | |
| * { box-sizing: border-box; } | |
| html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 16px/1.4 system-ui, sans-serif; } | |
| main { max-width: 1100px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 100%; } | |
| h1 { margin: 0; font-size: 28px; } | |
| .muted { color: var(--muted); } | |
| .bar { display: flex; gap: 16px; font-variant-numeric: tabular-nums; } | |
| canvas.play { width: 100%; height: min(60vh, 520px); touch-action: none; border-radius: 12px; background: color-mix(in srgb, var(--fg) 4%, var(--bg)); } | |
| canvas.strip { width: 100%; height: 160px; border-radius: 12px; } | |
| button { font: inherit; padding: 10px 16px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); background: transparent; color: inherit; cursor: pointer; } | |
| button.primary { background: var(--fg); color: var(--bg); } | |
| .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } | |
| progress { width: 100%; } | |
| .headline { font-size: 32px; font-weight: 700; } | |