Spaces:
Running
Running
| :root { | |
| color-scheme: light dark; | |
| --bg: #f7f8fa; | |
| --fg: #16181d; | |
| --muted: #5b6270; | |
| --card: #ffffff; | |
| --border: #d9dde4; | |
| --accent: #e0573d; /* coral */ | |
| --accent-fg: #ffffff; | |
| --bar: #f2a493; | |
| --bar-top: #e0573d; | |
| --track: #eceef2; | |
| --focus: #1f6feb; | |
| --radius: 10px; | |
| font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; | |
| line-height: 1.5; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --bg: #111317; | |
| --fg: #e8eaee; | |
| --muted: #9aa2b1; | |
| --card: #1a1d23; | |
| --border: #2e333c; | |
| --accent: #ff7a5c; | |
| --accent-fg: #16181d; | |
| --bar: #8a3d2e; | |
| --bar-top: #ff7a5c; | |
| --track: #262a32; | |
| --focus: #58a6ff; | |
| } | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| background: var(--bg); | |
| color: var(--fg); | |
| } | |
| .wrap { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| padding: 0 1rem; | |
| } | |
| a { | |
| color: var(--accent); | |
| } | |
| :focus-visible { | |
| outline: 3px solid var(--focus); | |
| outline-offset: 2px; | |
| } | |
| .skip { | |
| position: absolute; | |
| left: -999px; | |
| } | |
| .skip:focus { | |
| left: 1rem; | |
| top: 1rem; | |
| background: var(--card); | |
| padding: 0.5rem 1rem; | |
| z-index: 10; | |
| } | |
| .visually-hidden { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| overflow: hidden; | |
| clip-path: inset(50%); | |
| white-space: nowrap; | |
| } | |
| header { | |
| padding-top: 1.5rem; | |
| } | |
| h1 { | |
| margin: 0 0 0.25rem; | |
| font-size: 2rem; | |
| } | |
| .lede { | |
| margin: 0.25rem 0; | |
| max-width: 70ch; | |
| } | |
| .note { | |
| margin: 0.5rem 0 1rem; | |
| color: var(--muted); | |
| max-width: 70ch; | |
| } | |
| .status { | |
| margin: 0 0 1rem; | |
| padding: 0.5rem 0.75rem; | |
| border-radius: var(--radius); | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| font-size: 0.95rem; | |
| } | |
| .status.error { | |
| border-color: var(--accent); | |
| } | |
| .grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1rem; | |
| } | |
| .full { | |
| grid-column: 1 / -1; | |
| } | |
| @media (max-width: 760px) { | |
| .grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .field { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.35rem; | |
| min-width: 0; | |
| } | |
| label { | |
| font-weight: 600; | |
| } | |
| .hint { | |
| color: var(--muted); | |
| font-weight: 400; | |
| font-size: 0.875rem; | |
| margin: 0; | |
| } | |
| select, | |
| textarea, | |
| input { | |
| font: inherit; | |
| color: inherit; | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 0.5rem 0.65rem; | |
| width: 100%; | |
| } | |
| textarea { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; | |
| font-size: 0.82rem; | |
| line-height: 1.45; | |
| resize: vertical; | |
| min-height: 12rem; | |
| tab-size: 2; | |
| } | |
| .actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| flex-wrap: wrap; | |
| } | |
| button { | |
| font: inherit; | |
| font-weight: 600; | |
| border: 0; | |
| border-radius: var(--radius); | |
| padding: 0.6rem 1.6rem; | |
| background: var(--accent); | |
| color: var(--accent-fg); | |
| cursor: pointer; | |
| min-height: 44px; | |
| } | |
| button[disabled] { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| kbd { | |
| font-family: inherit; | |
| font-size: 0.8rem; | |
| border: 1px solid var(--border); | |
| border-bottom-width: 2px; | |
| border-radius: 4px; | |
| padding: 0 0.3rem; | |
| } | |
| .results-wrap { | |
| margin-top: 1.5rem; | |
| } | |
| .usage { | |
| color: var(--muted); | |
| font-size: 0.9rem; | |
| margin: 0 0 0.75rem; | |
| } | |
| .results { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 1rem; | |
| } | |
| .result { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 0.9rem 1rem; | |
| min-width: 0; | |
| } | |
| .result h3 { | |
| margin: 0; | |
| font-size: 1rem; | |
| display: flex; | |
| gap: 0.5rem; | |
| align-items: baseline; | |
| flex-wrap: wrap; | |
| } | |
| .badge { | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| color: var(--muted); | |
| border: 1px solid var(--border); | |
| border-radius: 999px; | |
| padding: 0 0.45rem; | |
| } | |
| .result .instructions { | |
| margin: 0.2rem 0 0.5rem; | |
| color: var(--muted); | |
| font-size: 0.9rem; | |
| } | |
| .verdict { | |
| font-size: 1.15rem; | |
| font-weight: 700; | |
| margin: 0 0 0.6rem; | |
| } | |
| .verdict small { | |
| font-weight: 400; | |
| color: var(--muted); | |
| font-size: 0.85rem; | |
| } | |
| .bars { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.35rem; | |
| } | |
| .bars li { | |
| display: grid; | |
| grid-template-columns: minmax(0, 9rem) 1fr 3.4rem; | |
| gap: 0.5rem; | |
| align-items: center; | |
| font-size: 0.85rem; | |
| } | |
| .bars .name { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .bars .track { | |
| background: var(--track); | |
| border-radius: 4px; | |
| height: 0.7rem; | |
| overflow: hidden; | |
| } | |
| .bars .fill { | |
| background: var(--bar); | |
| height: 100%; | |
| border-radius: 4px; | |
| } | |
| .bars li.top .fill { | |
| background: var(--bar-top); | |
| } | |
| .bars li.top .name { | |
| font-weight: 700; | |
| } | |
| .bars .pct { | |
| text-align: right; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| details { | |
| margin-top: 1rem; | |
| } | |
| summary { | |
| cursor: pointer; | |
| font-weight: 600; | |
| min-height: 44px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| pre { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 0.75rem; | |
| overflow: auto; | |
| font-size: 0.8rem; | |
| max-height: 28rem; | |
| } | |
| .settings form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| max-width: 48rem; | |
| } | |
| .settings button { | |
| align-self: flex-start; | |
| } | |
| footer { | |
| margin: 2rem auto 1.5rem; | |
| color: var(--muted); | |
| font-size: 0.875rem; | |
| } | |
| @media (prefers-reduced-motion: no-preference) { | |
| .bars .fill { | |
| transition: width 0.25s ease-out; | |
| } | |
| } | |