Spaces:
Running
Running
| :root { | |
| --bg: #f3f2f8; | |
| --surface: #ffffff; | |
| --ink: #12121a; | |
| --muted: #4e5162; | |
| --line: #e2e1ea; | |
| --soft: #f7f6fb; | |
| --accent: #4c3ad6; | |
| --accent-ink: #ffffff; | |
| --ok: #0b6b38; | |
| --ok-bg: #e5f6ec; | |
| --warn: #7a4500; | |
| --warn-bg: #fff3dc; | |
| --no: #9f1220; | |
| --no-bg: #fdeaea; | |
| --shadow: 0 1px 2px rgba(18, 18, 26, 0.04), 0 16px 40px -24px rgba(28, 16, 70, 0.45); | |
| --radius: 18px; | |
| --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |
| --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; | |
| --focus: 0 0 0 3px #ffffff, 0 0 0 6px var(--accent); | |
| color-scheme: light; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --bg: #0c0c10; | |
| --surface: #16161c; | |
| --ink: #f4f4f8; | |
| --muted: #b4b6c4; | |
| --line: #2c2c36; | |
| --soft: #1e1e26; | |
| --accent: #b8adf8; | |
| --accent-ink: #1a1238; | |
| --ok: #8ee0b0; | |
| --ok-bg: #143224; | |
| --warn: #f3c27a; | |
| --warn-bg: #3a2c12; | |
| --no: #ffb4bc; | |
| --no-bg: #3e171c; | |
| --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 40px -24px rgba(0, 0, 0, 0.8); | |
| color-scheme: dark; | |
| } | |
| } | |
| * { box-sizing: border-box; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| margin: 0; | |
| background: | |
| radial-gradient(900px 280px at 10% -40px, rgba(76, 58, 214, 0.16), transparent 60%), | |
| var(--bg); | |
| color: var(--ink); | |
| font: 16.5px/1.5 var(--font); | |
| } | |
| .mono { font-family: var(--mono); font-size: 0.92em; } | |
| .wrap { width: min(1120px, calc(100% - 32px)); margin-inline: auto; } | |
| .skip { | |
| position: absolute; | |
| left: 12px; | |
| top: -40px; | |
| background: var(--accent); | |
| color: var(--accent-ink); | |
| padding: 8px 12px; | |
| border-radius: 8px; | |
| z-index: 5; | |
| } | |
| .skip:focus { top: 12px; } | |
| a { color: var(--accent); } | |
| a:hover { text-decoration: none; } | |
| :focus { outline: none; } | |
| :focus-visible { box-shadow: var(--focus); border-radius: 8px; } | |
| .site-header { | |
| border-bottom: 1px solid var(--line); | |
| background: color-mix(in srgb, var(--surface) 88%, transparent); | |
| } | |
| .header-row { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 16px; | |
| align-items: baseline; | |
| padding: 16px 0; | |
| } | |
| .brand { | |
| font-weight: 750; | |
| letter-spacing: -0.03em; | |
| font-size: 1.15rem; | |
| color: var(--ink); | |
| text-decoration: none; | |
| } | |
| .freshness { | |
| margin: 18px 0 0; | |
| padding: 12px 14px; | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| background: var(--surface); | |
| color: var(--ink); | |
| font-weight: 680; | |
| } | |
| .intro { padding: 28px 0 8px; } | |
| h1 { | |
| margin: 0 0 8px; | |
| font-size: clamp(1.8rem, 3vw, 2.5rem); | |
| letter-spacing: -0.04em; | |
| line-height: 1.12; | |
| } | |
| .lede { margin: 0; max-width: 68ch; } | |
| .count-line { margin: 12px 0 0; max-width: 78ch; } | |
| .source-links, .more-links, .links { display: flex; flex-wrap: wrap; gap: 12px 18px; } | |
| .source-links { margin: 12px 0 0; } | |
| .source-links a, .more-links a, .links a { font-weight: 680; } | |
| #boot { color: var(--muted); } | |
| .query-note { | |
| background: var(--warn-bg); | |
| color: var(--warn); | |
| padding: 10px 14px; | |
| border-radius: 12px; | |
| margin: 12px 0; | |
| } | |
| .layout { | |
| display: grid; | |
| grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); | |
| gap: 22px; | |
| align-items: start; | |
| padding: 12px 0 8px; | |
| } | |
| form, .result-card, .assumptions { | |
| background: var(--surface); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| } | |
| form { padding: 18px; } | |
| .field { margin: 0 0 16px; padding: 0; border: 0; min-width: 0; } | |
| .field legend, label, .sublabel { | |
| display: block; | |
| font-weight: 680; | |
| margin-bottom: 6px; | |
| } | |
| .sublabel { margin-top: 10px; font-size: 0.92rem; } | |
| .hint { margin: 6px 0 0; color: var(--muted); font-size: 0.9rem; } | |
| input, select, button { | |
| font: inherit; | |
| color: inherit; | |
| } | |
| input[type="text"], input[type="search"], select { | |
| width: 100%; | |
| min-height: 48px; | |
| padding: 10px 12px; | |
| border-radius: 12px; | |
| border: 1px solid var(--line); | |
| background: var(--soft); | |
| } | |
| .presets { display: flex; flex-wrap: wrap; gap: 8px; } | |
| .presets button, .submit, #copy-link { | |
| min-height: 44px; | |
| border-radius: 999px; | |
| border: 1px solid var(--line); | |
| background: var(--soft); | |
| padding: 8px 14px; | |
| cursor: pointer; | |
| } | |
| .presets button[aria-pressed="true"] { | |
| background: var(--accent); | |
| color: var(--accent-ink); | |
| border-color: transparent; | |
| } | |
| .presets button:disabled { opacity: 0.45; cursor: not-allowed; } | |
| .submit { | |
| background: var(--ink); | |
| color: var(--bg); | |
| border-color: transparent; | |
| width: 100%; | |
| font-weight: 680; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| .submit { background: var(--accent); color: var(--accent-ink); } | |
| } | |
| .result-card { padding: 18px 18px 16px; } | |
| .result-card h2, .assumptions h2 { margin: 0 0 8px; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } | |
| .eyebrow { margin: 0; color: var(--muted); } | |
| .result-top { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 12px; | |
| align-items: end; | |
| margin-top: 4px; | |
| } | |
| .need { margin: 0; } | |
| .need-label { display: block; color: var(--muted); font-size: 0.86rem; } | |
| .need strong { | |
| font-family: var(--mono); | |
| font-size: clamp(2rem, 4vw, 2.8rem); | |
| letter-spacing: -0.04em; | |
| font-weight: 680; | |
| line-height: 1; | |
| } | |
| .verdict { | |
| margin: 0; | |
| padding: 8px 12px; | |
| border-radius: 999px; | |
| font-weight: 750; | |
| white-space: nowrap; | |
| } | |
| .is-ok .verdict { background: var(--ok-bg); color: var(--ok); } | |
| .is-warn .verdict { background: var(--warn-bg); color: var(--warn); } | |
| .is-no .verdict { background: var(--no-bg); color: var(--no); } | |
| .status-detail { margin: 10px 0 0; } | |
| .exact, .budget, .room, .best, .checked, .note, .mac { margin: 8px 0 0; } | |
| .exact, .budget, .room { font-family: var(--mono); font-size: 0.92rem; } | |
| .note, .mac { | |
| background: var(--soft); | |
| padding: 10px 12px; | |
| border-radius: 12px; | |
| } | |
| .error { | |
| background: var(--no-bg); | |
| color: var(--no); | |
| padding: 12px; | |
| border-radius: 12px; | |
| } | |
| .meter { margin: 18px 0 8px; } | |
| .meter-flag { | |
| width: max-content; | |
| margin-left: 90%; | |
| transform: translateX(-50%); | |
| color: var(--muted); | |
| font-size: 0.75rem; | |
| font-weight: 680; | |
| line-height: 1; | |
| margin-bottom: 4px; | |
| } | |
| .meter-track { | |
| position: relative; | |
| height: 14px; | |
| border-radius: 999px; | |
| background: var(--soft); | |
| border: 1px solid var(--line); | |
| overflow: hidden; | |
| } | |
| .meter-fill { | |
| height: 100%; | |
| width: 0; | |
| background: var(--ok); | |
| } | |
| .is-warn .meter-fill { background: var(--warn); } | |
| .is-no .meter-fill { background: var(--no); } | |
| .meter-mark { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 90%; | |
| width: 2px; | |
| background: var(--ink); | |
| } | |
| .meter-scale { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 8px; | |
| color: var(--muted); | |
| font-size: 0.78rem; | |
| margin-top: 4px; | |
| } | |
| .stats { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 10px 16px; | |
| margin: 14px 0 0; | |
| } | |
| .stats div { | |
| margin: 0; | |
| padding-top: 8px; | |
| border-top: 1px solid var(--line); | |
| } | |
| .stats dt { color: var(--muted); font-size: 0.82rem; } | |
| .stats dd { margin: 2px 0 0; font-family: var(--mono); font-size: 0.92rem; white-space: pre-line; } | |
| .links, .more-links { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 14px; } | |
| .links a, .more-links a { font-weight: 680; } | |
| .module-details { margin-top: 12px; } | |
| .module-details summary { cursor: pointer; color: var(--muted); } | |
| .share { margin-top: 14px; } | |
| .share-row { display: flex; gap: 8px; } | |
| .share-row input { flex: 1; min-width: 0; } | |
| #copy-link { flex: 0 0 auto; } | |
| .assumptions { margin: 8px 0 28px; padding: 18px 18px 8px; } | |
| .assumptions li { margin: 0 0 8px; } | |
| .site-footer { border-top: 1px solid var(--line); padding: 18px 0 32px; color: var(--muted); } | |
| .site-footer p { margin: 0; max-width: 78ch; } | |
| .noscript { | |
| width: min(1120px, calc(100% - 32px)); | |
| margin: 12px auto; | |
| padding: 12px; | |
| background: var(--warn-bg); | |
| color: var(--warn); | |
| border-radius: 12px; | |
| } | |
| @media (min-width: 861px) { | |
| .result-card { align-self: start; } | |
| } | |
| @media (max-width: 860px) { | |
| .layout { grid-template-columns: 1fr; } | |
| .header-row { flex-direction: column; align-items: flex-start; } | |
| .result-top { flex-direction: column; align-items: flex-start; } | |
| .verdict { white-space: normal; } | |
| } | |
| @media (max-width: 420px) { | |
| .stats { grid-template-columns: 1fr; } | |
| .wrap { width: min(1120px, calc(100% - 20px)); } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| html { scroll-behavior: auto; } | |
| } | |
| [hidden] { display: none ; } | |