Spaces:
Running
Running
| :root { | |
| --background: #f3f4f6; | |
| --surface: #ffffff; | |
| --tile: #e8eaed; | |
| --ink: #15171a; | |
| --muted: #5b616a; | |
| --faint: #8a9099; | |
| --accent: #0b7a5c; | |
| --accent-ink: #ffffff; | |
| --focus: #2f6fdb; | |
| --danger: #c2372b; | |
| --radius: 10px; | |
| --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; | |
| --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace; | |
| color-scheme: light; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root:not([data-theme="light"]) { | |
| --background: #101113; | |
| --surface: #18191c; | |
| --tile: #2a2c30; | |
| --ink: #ececee; | |
| --muted: #a3a8b0; | |
| --faint: #737982; | |
| --accent: #3fc79c; | |
| --accent-ink: #06261c; | |
| --focus: #7aa7ff; | |
| --danger: #ff7a6b; | |
| color-scheme: dark; | |
| } | |
| } | |
| * { box-sizing: border-box; } | |
| html, body { | |
| margin: 0; | |
| background: var(--background); | |
| color: var(--ink); | |
| font-family: var(--sans); | |
| font-size: 15px; | |
| line-height: 1.45; | |
| } | |
| a { color: inherit; } | |
| svg { | |
| width: 18px; | |
| height: 18px; | |
| fill: none; | |
| stroke: currentColor; | |
| stroke-width: 2; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| flex: none; | |
| } | |
| :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } | |
| .top { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 16px; | |
| padding: 20px 24px 8px; | |
| max-width: 1440px; | |
| margin: 0 auto; | |
| user-select: none; | |
| } | |
| .brand { | |
| font-weight: 700; | |
| font-size: 18px; | |
| text-decoration: none; | |
| white-space: nowrap; | |
| } | |
| .summary { | |
| margin: 0; | |
| color: var(--muted); | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .summary strong { color: var(--accent); font-weight: 600; white-space: nowrap; } | |
| .dataset-link { | |
| margin-left: auto; | |
| color: var(--muted); | |
| text-decoration: none; | |
| white-space: nowrap; | |
| } | |
| .dataset-link:hover { color: var(--ink); } | |
| .browse, .detail { | |
| max-width: 1440px; | |
| margin: 0 auto; | |
| padding: 8px 24px 24px; | |
| } | |
| .filters { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 8px 0 16px; | |
| position: sticky; | |
| top: 0; | |
| z-index: 2; | |
| background: var(--background); | |
| user-select: none; | |
| } | |
| .search { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| flex: 0 1 420px; | |
| height: 40px; | |
| padding: 0 12px; | |
| background: var(--surface); | |
| border-radius: var(--radius); | |
| color: var(--faint); | |
| } | |
| .search input { | |
| flex: 1; | |
| min-width: 0; | |
| border: 0; | |
| outline: 0; | |
| background: transparent; | |
| color: var(--ink); | |
| font: inherit; | |
| } | |
| .search:focus-within { outline: 2px solid var(--focus); outline-offset: 0; } | |
| select { | |
| height: 40px; | |
| padding: 0 12px; | |
| border: 0; | |
| border-radius: var(--radius); | |
| background: var(--surface); | |
| color: var(--ink); | |
| font: inherit; | |
| max-width: 220px; | |
| } | |
| .count { | |
| color: var(--faint); | |
| font-variant-numeric: tabular-nums; | |
| white-space: nowrap; | |
| } | |
| .grid { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); | |
| gap: 12px; | |
| } | |
| .tile a { | |
| display: block; | |
| text-decoration: none; | |
| border-radius: var(--radius); | |
| user-select: none; | |
| } | |
| .tile .thumb { | |
| width: 100%; | |
| aspect-ratio: 1; | |
| background-color: var(--tile); | |
| background-size: 1000% 1000%; | |
| background-repeat: no-repeat; | |
| border-radius: var(--radius); | |
| transition: transform 160ms cubic-bezier(0.2, 0, 0, 1); | |
| } | |
| @media (hover: hover) { | |
| .tile a:hover .thumb { transform: scale(1.03); } | |
| } | |
| .tile-meta { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| padding: 6px 2px 0; | |
| font-size: 12px; | |
| } | |
| .tile-name { | |
| font-family: var(--mono); | |
| overflow-wrap: break-word; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| .tile-size { | |
| color: var(--faint); | |
| font-variant-numeric: tabular-nums; | |
| white-space: nowrap; | |
| } | |
| .sentinel { height: 1px; } | |
| .empty { color: var(--muted); padding: 48px 0; text-align: center; } | |
| .back { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 8px 10px 8px 4px; | |
| margin-bottom: 8px; | |
| color: var(--muted); | |
| text-decoration: none; | |
| border-radius: 8px; | |
| user-select: none; | |
| } | |
| .back:hover { color: var(--ink); background: var(--tile); } | |
| .detail-body { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) 340px; | |
| gap: 24px; | |
| align-items: start; | |
| } | |
| .stage { | |
| position: relative; | |
| aspect-ratio: 4 / 3; | |
| max-height: calc(100vh - 140px); | |
| width: 100%; | |
| border-radius: 14px; | |
| background: radial-gradient(ellipse at 50% 40%, var(--surface), var(--tile)); | |
| overflow: hidden; | |
| } | |
| .stage canvas { display: block; width: 100%; height: 100%; touch-action: none; } | |
| .stage-status { | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| color: var(--muted); | |
| pointer-events: none; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .stage-status.failed { color: var(--danger); } | |
| .stage-hint { | |
| position: absolute; | |
| left: 16px; | |
| bottom: 12px; | |
| margin: 0; | |
| font-size: 12px; | |
| color: var(--faint); | |
| pointer-events: none; | |
| user-select: none; | |
| } | |
| .spinner { | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| border: 2px solid var(--faint); | |
| border-top-color: transparent; | |
| animation: spin 800ms linear infinite; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| @media (prefers-reduced-motion: reduce) { | |
| .spinner { animation: none; } | |
| .tile .thumb { transition: none; } | |
| } | |
| .facts { user-select: none; } | |
| .asset-name { | |
| margin: 0; | |
| font-family: var(--mono); | |
| font-size: 18px; | |
| font-weight: 500; | |
| overflow-wrap: break-word; | |
| user-select: text; | |
| } | |
| .asset-category { margin: 4px 0 20px; color: var(--muted); } | |
| .ratio { | |
| display: flex; | |
| flex-direction: column; | |
| padding: 16px; | |
| margin-bottom: 16px; | |
| background: var(--surface); | |
| border-radius: var(--radius); | |
| } | |
| .ratio-value { | |
| font-size: 40px; | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| line-height: 1.1; | |
| color: var(--accent); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .ratio-label { color: var(--muted); } | |
| .stats { | |
| display: grid; | |
| grid-template-columns: auto 1fr; | |
| gap: 10px 16px; | |
| margin: 0 0 20px; | |
| padding: 16px; | |
| background: var(--surface); | |
| border-radius: var(--radius); | |
| } | |
| .stats dt { color: var(--muted); } | |
| .stats dd { | |
| margin: 0; | |
| text-align: right; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .stats .before { color: var(--faint); } | |
| .actions { display: flex; flex-direction: column; gap: 8px; } | |
| .button { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| height: 42px; | |
| padding: 0 16px; | |
| border: 0; | |
| border-radius: var(--radius); | |
| background: var(--tile); | |
| color: var(--ink); | |
| font: inherit; | |
| font-weight: 500; | |
| text-decoration: none; | |
| cursor: pointer; | |
| } | |
| .button:hover { filter: brightness(0.96); } | |
| .button.primary { background: var(--accent); color: var(--accent-ink); } | |
| .source-link { | |
| display: inline-block; | |
| margin-top: 16px; | |
| color: var(--muted); | |
| font-size: 13px; | |
| } | |
| .credit { | |
| max-width: 1440px; | |
| margin: 0 auto; | |
| padding: 24px; | |
| color: var(--faint); | |
| font-size: 13px; | |
| } | |
| @media (max-width: 860px) { | |
| .detail-body { grid-template-columns: 1fr; } | |
| .stage { aspect-ratio: 1; } | |
| } | |
| @media (max-width: 600px) { | |
| .top { flex-wrap: wrap; padding: 16px 16px 4px; gap: 4px 12px; } | |
| .summary { order: 3; flex-basis: 100%; } | |
| .browse, .detail { padding: 8px 16px 16px; } | |
| .filters { flex-wrap: wrap; gap: 8px; } | |
| .search { flex: 1 1 100%; } | |
| select { flex: 1; max-width: none; } | |
| .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } | |
| .credit { padding: 16px; } | |
| } | |
| .parts { | |
| margin: 0 0 20px; | |
| padding: 12px 16px 16px; | |
| background: var(--surface); | |
| border-radius: var(--radius); | |
| } | |
| .parts-head { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; } | |
| .parts-head h2 { flex: 1; margin: 0; font-size: 15px; font-weight: 600; } | |
| .quiet { | |
| height: 30px; | |
| padding: 0 10px; | |
| border: 0; | |
| border-radius: 8px; | |
| background: transparent; | |
| color: var(--muted); | |
| font: inherit; | |
| font-size: 13px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| } | |
| .quiet:hover { color: var(--ink); background: var(--tile); } | |
| .part-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| max-height: 320px; | |
| margin: 0 -4px; | |
| padding: 0 8px 0 4px; | |
| overflow-y: auto; | |
| scrollbar-gutter: stable; | |
| list-style: none; | |
| } | |
| .part label { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 12px; | |
| margin-bottom: 4px; | |
| font-size: 13px; | |
| } | |
| .part output { color: var(--muted); font-variant-numeric: tabular-nums; } | |
| .part input { width: 100%; margin: 0; accent-color: var(--accent); } | |
| .toggle { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| height: 40px; | |
| padding: 0 14px; | |
| border: 0; | |
| border-radius: var(--radius); | |
| background: var(--surface); | |
| color: var(--ink); | |
| font: inherit; | |
| white-space: nowrap; | |
| cursor: pointer; | |
| } | |
| .toggle svg { width: 16px; height: 16px; color: var(--muted); } | |
| .toggle:hover { filter: brightness(0.97); } | |
| .toggle[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); } | |
| .toggle[aria-pressed="true"] svg { color: var(--accent-ink); } | |