Spaces:
Running
Running
| :root { | |
| --bg: #f7f7f5; | |
| --card: #ffffff; | |
| --ink: #1c1d1f; | |
| --muted: #5d6066; | |
| --line: #e2e2de; | |
| --chip: #ecece8; | |
| --chip-on: #1c1d1f; | |
| --chip-on-ink: #ffffff; | |
| --accent-hf: #2f6fde; | |
| --accent-pk: #c2410c; | |
| --code: #f1f1ee; | |
| color-scheme: light; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --bg: #121315; | |
| --card: #1b1c1f; | |
| --ink: #e9e9e6; | |
| --muted: #a0a3a9; | |
| --line: #2c2e32; | |
| --chip: #26282c; | |
| --chip-on: #e9e9e6; | |
| --chip-on-ink: #121315; | |
| --accent-hf: #7aa7ff; | |
| --accent-pk: #ff9a5c; | |
| --code: #232529; | |
| color-scheme: dark; | |
| } | |
| } | |
| * { box-sizing: border-box; } | |
| html { background: var(--bg); } | |
| body { | |
| margin: 0; | |
| background: var(--bg); | |
| color: var(--ink); | |
| font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |
| padding-top: env(safe-area-inset-top, 0px); | |
| padding-bottom: env(safe-area-inset-bottom, 0px); | |
| } | |
| .wrap { max-width: 1360px; margin: 0 auto; padding-left: 20px; padding-right: 20px; } | |
| .top { padding-block: 28px 12px; } | |
| h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 6px; letter-spacing: -0.01em; } | |
| .lede { margin: 0 0 10px; color: var(--muted); font-size: 1.02rem; } | |
| .facts { margin: 0; padding-left: 1.1em; color: var(--muted); font-size: 0.92rem; } | |
| .facts li { margin: 2px 0; } | |
| .filters { | |
| position: sticky; | |
| top: env(safe-area-inset-top, 0px); | |
| z-index: 5; | |
| background: color-mix(in srgb, var(--bg) 92%, transparent); | |
| backdrop-filter: blur(6px); | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .filters .wrap { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 10px; } | |
| .chip { | |
| border: 0; | |
| border-radius: 999px; | |
| padding: 6px 12px; | |
| background: var(--chip); | |
| color: var(--ink); | |
| font: inherit; | |
| font-size: 0.88rem; | |
| cursor: pointer; | |
| } | |
| .chip[aria-pressed="true"] { background: var(--chip-on); color: var(--chip-on-ink); } | |
| .chip .n { opacity: 0.6; margin-left: 4px; } | |
| main { padding-block: 18px 30px; display: grid; gap: 22px; } | |
| .case { | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-radius: 14px; | |
| padding: 16px 18px 14px; | |
| } | |
| .case-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 10px; } | |
| .case-id { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.85rem; } | |
| .case-cat { | |
| font-size: 0.78rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| padding: 2px 8px; | |
| border-radius: 999px; | |
| background: var(--chip); | |
| color: var(--muted); | |
| } | |
| .case-caption { font-size: 1.05rem; margin: 0; flex-basis: 100%; font-weight: 600; } | |
| .refs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; } | |
| .ref { margin: 0; display: flex; flex-direction: column; gap: 4px; max-width: 100%; } | |
| .ref .lbl { font-size: 0.78rem; color: var(--muted); } | |
| .ref img, .ref video { height: 96px; width: auto; max-width: 100%; border-radius: 8px; display: block; background: #000; } | |
| .ref audio { width: 260px; max-width: 100%; height: 36px; } | |
| .prompt { margin-bottom: 12px; } | |
| .prompt summary, .note summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; } | |
| .prompt pre { | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| background: var(--code); | |
| border-radius: 8px; | |
| padding: 10px 12px; | |
| font-size: 0.82rem; | |
| line-height: 1.45; | |
| margin: 8px 0 0; | |
| max-height: 340px; | |
| overflow: auto; | |
| } | |
| .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } | |
| .side { margin: 0; min-width: 0; } | |
| .side figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } | |
| .side .model { font-weight: 650; font-size: 0.95rem; } | |
| .side[data-side="hyperflow"] .model { color: var(--accent-hf); } | |
| .side[data-side="pika"] .model { color: var(--accent-pk); } | |
| .frame { position: relative; aspect-ratio: 1344 / 768; background: #000; border-radius: 10px; overflow: hidden; } | |
| .frame video { width: 100%; height: 100%; display: block; object-fit: contain; } | |
| .na { position: absolute; inset: 0; display: grid; place-items: center; color: #ddd; padding: 16px; text-align: center; font-size: 0.9rem; } | |
| .snd, .play { | |
| font: inherit; | |
| font-size: 0.82rem; | |
| border: 1px solid var(--line); | |
| background: var(--chip); | |
| color: var(--ink); | |
| border-radius: 8px; | |
| padding: 4px 10px; | |
| cursor: pointer; | |
| } | |
| .snd[aria-pressed="true"] { background: var(--chip-on); color: var(--chip-on-ink); border-color: var(--chip-on); } | |
| .controls { display: flex; align-items: center; gap: 12px; margin-top: 10px; } | |
| .play { min-width: 74px; font-weight: 600; } | |
| .seek { flex: 1; min-width: 0; accent-color: var(--ink); } | |
| .time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.85rem; min-width: 92px; text-align: right; } | |
| .note { margin-top: 8px; } | |
| .note p { margin: 6px 0 0; color: var(--muted); font-size: 0.88rem; } | |
| .foot { color: var(--muted); font-size: 0.85rem; padding-block: 10px 36px; } | |
| .foot h3 { font-size: 0.95rem; color: var(--ink); margin: 14px 0 4px; } | |
| .foot table { border-collapse: collapse; font-size: 0.8rem; } | |
| .foot .tbl { overflow-x: auto; } | |
| .foot td, .foot th { border-bottom: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; } | |
| [hidden] { display: none ; } | |
| @media (max-width: 760px) { | |
| .wrap { padding-left: 16px; padding-right: 16px; } | |
| h1 { font-size: 1.4rem; } | |
| .pair { grid-template-columns: 1fr; } | |
| .ref img, .ref video { height: 76px; } | |
| .case { padding: 14px 14px 12px; } | |
| .filters .wrap { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } | |
| .chip { flex: 0 0 auto; } | |
| } | |