Spaces:
Running
Running
| :root { | |
| color-scheme: light; | |
| --paper: #f3f0e8; | |
| --paper-deep: #e8e3d7; | |
| --ink: #17201d; | |
| --muted: #65706a; | |
| --line: rgba(23, 32, 29, 0.17); | |
| --line-strong: rgba(23, 32, 29, 0.36); | |
| --white: #fffdf8; | |
| --green: #0a7457; | |
| --green-soft: #d9eee5; | |
| --red: #bd493e; | |
| --red-soft: #f4ddd8; | |
| --blue: #3659a7; | |
| --amber: #c37b21; | |
| --violet: #7351a6; | |
| --shadow: 0 24px 70px rgba(39, 45, 38, 0.12); | |
| --radius: 18px; | |
| font-family: | |
| Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", | |
| sans-serif; | |
| font-synthesis: none; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| margin: 0; | |
| min-width: 320px; | |
| background: | |
| radial-gradient(circle at 88% 8%, rgba(74, 123, 103, 0.11), transparent 27rem), | |
| var(--paper); | |
| color: var(--ink); | |
| } | |
| button, | |
| input, | |
| select { | |
| font: inherit; | |
| } | |
| button, | |
| select { | |
| cursor: pointer; | |
| } | |
| button:focus-visible, | |
| input:focus-visible, | |
| select:focus-visible, | |
| summary:focus-visible, | |
| tr:focus-visible { | |
| outline: 3px solid rgba(54, 89, 167, 0.34); | |
| outline-offset: 2px; | |
| } | |
| .page-shell { | |
| width: min(1480px, 100%); | |
| margin: 0 auto; | |
| padding: 0 42px 36px; | |
| } | |
| .hero { | |
| padding-top: 22px; | |
| border-bottom: 1px solid var(--line-strong); | |
| } | |
| .topbar { | |
| min-height: 58px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 24px; | |
| border-top: 1px solid var(--line-strong); | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .brand { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 12px; | |
| color: inherit; | |
| text-decoration: none; | |
| font-size: 12px; | |
| font-weight: 760; | |
| letter-spacing: 0.14em; | |
| } | |
| .brand-mark, | |
| .loading-mark { | |
| width: 30px; | |
| height: 30px; | |
| display: grid; | |
| place-items: center; | |
| border-radius: 50%; | |
| background: var(--ink); | |
| color: var(--paper); | |
| font-family: Georgia, serif; | |
| font-style: italic; | |
| font-weight: 700; | |
| font-size: 18px; | |
| } | |
| .topbar-meta { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 9px; | |
| color: var(--muted); | |
| font-size: 12px; | |
| } | |
| .status-dot { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 50%; | |
| background: var(--amber); | |
| box-shadow: 0 0 0 5px rgba(195, 123, 33, 0.1); | |
| } | |
| .status-dot.ready { | |
| background: var(--green); | |
| box-shadow: 0 0 0 5px rgba(10, 116, 87, 0.1); | |
| } | |
| .hero-grid { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) 270px; | |
| gap: 72px; | |
| align-items: end; | |
| padding: 82px 5.5% 66px; | |
| } | |
| .eyebrow, | |
| .section-index { | |
| margin: 0 0 13px; | |
| color: var(--green); | |
| font-size: 11px; | |
| font-weight: 800; | |
| letter-spacing: 0.16em; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| p { | |
| text-wrap: pretty; | |
| } | |
| h1 { | |
| max-width: 820px; | |
| margin: 0; | |
| font-family: Georgia, "Times New Roman", serif; | |
| font-size: clamp(52px, 6.3vw, 98px); | |
| font-weight: 400; | |
| letter-spacing: -0.057em; | |
| line-height: 0.94; | |
| } | |
| .hero-copy { | |
| max-width: 690px; | |
| margin: 34px 0 0; | |
| color: var(--muted); | |
| font-size: 17px; | |
| line-height: 1.7; | |
| } | |
| .hero-stamp { | |
| padding: 24px 0 5px 28px; | |
| border-left: 1px solid var(--line-strong); | |
| } | |
| .stamp-number { | |
| font-family: Georgia, serif; | |
| font-size: 74px; | |
| letter-spacing: -0.06em; | |
| line-height: 1; | |
| } | |
| .stamp-label { | |
| margin-top: 2px; | |
| color: var(--muted); | |
| font-size: 13px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.12em; | |
| } | |
| .stamp-rule { | |
| height: 1px; | |
| margin: 22px 0 15px; | |
| background: var(--line); | |
| } | |
| .stamp-detail { | |
| color: var(--muted); | |
| font-size: 12px; | |
| line-height: 1.5; | |
| } | |
| main > section { | |
| padding: 72px 5.5%; | |
| border-bottom: 1px solid var(--line-strong); | |
| } | |
| .section-heading { | |
| display: flex; | |
| align-items: end; | |
| justify-content: space-between; | |
| gap: 30px; | |
| margin-bottom: 35px; | |
| } | |
| .section-heading.compact { | |
| margin-bottom: 26px; | |
| } | |
| .section-heading h2 { | |
| margin: 0; | |
| font-family: Georgia, "Times New Roman", serif; | |
| font-size: clamp(31px, 3.2vw, 48px); | |
| font-weight: 400; | |
| letter-spacing: -0.038em; | |
| line-height: 1; | |
| } | |
| .section-note { | |
| max-width: 380px; | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: 13px; | |
| line-height: 1.5; | |
| text-align: right; | |
| } | |
| .baseline-pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 9px; | |
| padding: 9px 12px; | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| color: var(--muted); | |
| font-size: 12px; | |
| } | |
| .baseline-pill span { | |
| color: var(--ink); | |
| font-size: 10px; | |
| font-weight: 800; | |
| letter-spacing: 0.12em; | |
| } | |
| .run-controls { | |
| display: grid; | |
| grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); | |
| gap: 30px; | |
| margin-bottom: 24px; | |
| } | |
| .select-field, | |
| .sort-field { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 0 14px; | |
| background: var(--white); | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| } | |
| .select-field span, | |
| .sort-field span, | |
| .mode-fieldset legend { | |
| color: var(--muted); | |
| font-size: 10px; | |
| font-weight: 800; | |
| letter-spacing: 0.11em; | |
| text-transform: uppercase; | |
| } | |
| .select-field select, | |
| .sort-field select { | |
| min-width: 0; | |
| flex: 1; | |
| height: 52px; | |
| border: 0; | |
| outline: 0; | |
| background: transparent; | |
| color: var(--ink); | |
| font-weight: 700; | |
| } | |
| .mode-fieldset { | |
| min-width: 0; | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| } | |
| .mode-fieldset legend { | |
| margin-bottom: 8px; | |
| } | |
| .mode-switcher { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| padding: 4px; | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| background: rgba(255, 253, 248, 0.62); | |
| } | |
| .mode-switcher button, | |
| .domain-filter button { | |
| border: 0; | |
| border-radius: 8px; | |
| background: transparent; | |
| color: var(--muted); | |
| font-size: 12px; | |
| font-weight: 720; | |
| } | |
| .mode-switcher button { | |
| min-height: 44px; | |
| padding: 8px 12px; | |
| } | |
| .mode-switcher button.active { | |
| background: var(--ink); | |
| color: var(--white); | |
| box-shadow: 0 5px 18px rgba(23, 32, 29, 0.16); | |
| } | |
| .score-cards { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| background: rgba(255, 253, 248, 0.55); | |
| } | |
| .score-card { | |
| min-height: 172px; | |
| padding: 24px; | |
| border-right: 1px solid var(--line); | |
| } | |
| .score-card:last-child { | |
| border-right: 0; | |
| } | |
| .score-card-label { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 10px; | |
| color: var(--muted); | |
| font-size: 11px; | |
| font-weight: 760; | |
| letter-spacing: 0.09em; | |
| text-transform: uppercase; | |
| } | |
| .score-value { | |
| margin-top: 26px; | |
| font-family: Georgia, serif; | |
| font-size: 49px; | |
| letter-spacing: -0.055em; | |
| line-height: 1; | |
| } | |
| .score-footer { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| margin-top: 14px; | |
| color: var(--muted); | |
| font-size: 11px; | |
| } | |
| .delta { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| font-variant-numeric: tabular-nums; | |
| font-weight: 780; | |
| } | |
| .delta.positive { | |
| color: var(--green); | |
| } | |
| .delta.negative { | |
| color: var(--red); | |
| } | |
| .delta.neutral { | |
| color: var(--muted); | |
| } | |
| .chart-card { | |
| padding: 24px 24px 12px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| background: var(--white); | |
| box-shadow: 0 14px 50px rgba(39, 45, 38, 0.055); | |
| } | |
| .trend-legend { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 9px 18px; | |
| padding: 2px 6px 18px; | |
| } | |
| .legend-item { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 7px; | |
| color: var(--muted); | |
| font-size: 11px; | |
| font-weight: 650; | |
| } | |
| .legend-line { | |
| width: 20px; | |
| height: 3px; | |
| border-radius: 99px; | |
| background: var(--legend-color); | |
| } | |
| .legend-line.shared-origin { | |
| height: 0; | |
| border-top: 2px dashed rgba(23, 32, 29, 0.62); | |
| border-radius: 0; | |
| background: none; | |
| } | |
| .legend-item.selected { | |
| color: var(--ink); | |
| } | |
| .trend-chart { | |
| min-height: 310px; | |
| overflow-x: auto; | |
| } | |
| .trend-chart svg { | |
| display: block; | |
| width: 100%; | |
| min-width: 660px; | |
| height: auto; | |
| } | |
| .chart-grid { | |
| stroke: rgba(23, 32, 29, 0.1); | |
| stroke-width: 1; | |
| } | |
| .chart-axis-label, | |
| .chart-point-label { | |
| fill: var(--muted); | |
| font-family: ui-sans-serif, system-ui, sans-serif; | |
| font-size: 10px; | |
| } | |
| .chart-point-label { | |
| fill: var(--ink); | |
| font-weight: 700; | |
| } | |
| .task-toolbar { | |
| display: grid; | |
| grid-template-columns: minmax(260px, 1fr) auto minmax(180px, 220px); | |
| gap: 14px; | |
| margin-bottom: 18px; | |
| } | |
| .search-field { | |
| display: flex; | |
| align-items: center; | |
| gap: 11px; | |
| min-height: 52px; | |
| padding: 0 16px; | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| background: var(--white); | |
| } | |
| .search-field svg { | |
| width: 18px; | |
| fill: none; | |
| stroke: var(--muted); | |
| stroke-linecap: round; | |
| stroke-width: 1.8; | |
| } | |
| .search-field input { | |
| min-width: 0; | |
| width: 100%; | |
| border: 0; | |
| outline: 0; | |
| background: transparent; | |
| color: var(--ink); | |
| font-size: 13px; | |
| } | |
| .search-field input::placeholder { | |
| color: #929a96; | |
| } | |
| .domain-filter { | |
| display: flex; | |
| padding: 4px; | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| background: rgba(255, 253, 248, 0.62); | |
| } | |
| .domain-filter button { | |
| padding: 7px 13px; | |
| } | |
| .domain-filter button.active { | |
| background: var(--paper-deep); | |
| color: var(--ink); | |
| } | |
| .task-table-wrap { | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| background: var(--white); | |
| } | |
| .task-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| table-layout: fixed; | |
| } | |
| .task-table th { | |
| padding: 15px 16px; | |
| border-bottom: 1px solid var(--line-strong); | |
| color: var(--muted); | |
| font-size: 10px; | |
| font-weight: 800; | |
| letter-spacing: 0.1em; | |
| text-align: left; | |
| text-transform: uppercase; | |
| } | |
| .task-table th:nth-child(1) { | |
| width: 38%; | |
| } | |
| .task-table th:nth-child(2) { | |
| width: 19%; | |
| } | |
| .task-table th:nth-child(3), | |
| .task-table th:nth-child(4), | |
| .task-table th:nth-child(5) { | |
| width: 11%; | |
| } | |
| .task-table th:last-child { | |
| width: 10%; | |
| } | |
| .task-row { | |
| border-bottom: 1px solid var(--line); | |
| transition: background 120ms ease; | |
| } | |
| .task-row:last-child { | |
| border-bottom: 0; | |
| } | |
| .task-row:hover { | |
| background: #f7f5ee; | |
| } | |
| .task-row td { | |
| padding: 16px; | |
| vertical-align: middle; | |
| } | |
| .task-pretty-name { | |
| margin-bottom: 5px; | |
| font-family: Georgia, serif; | |
| font-size: 16px; | |
| line-height: 1.2; | |
| } | |
| .task-raw-name { | |
| overflow: hidden; | |
| color: var(--muted); | |
| font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; | |
| font-size: 9px; | |
| line-height: 1.35; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .tag-stack { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 5px; | |
| } | |
| .tag { | |
| display: inline-flex; | |
| padding: 5px 7px; | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| color: var(--muted); | |
| font-size: 9px; | |
| font-weight: 720; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| } | |
| .numeric-score { | |
| font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; | |
| font-size: 13px; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .inspect-button { | |
| min-height: 34px; | |
| padding: 7px 10px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: transparent; | |
| color: var(--ink); | |
| font-size: 10px; | |
| font-weight: 780; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| } | |
| .inspect-button:hover { | |
| background: var(--ink); | |
| color: var(--white); | |
| } | |
| .empty-state { | |
| padding: 70px 24px; | |
| color: var(--muted); | |
| text-align: center; | |
| } | |
| footer { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 30px; | |
| padding: 23px 5.5% 0; | |
| color: var(--muted); | |
| font-size: 9px; | |
| font-weight: 760; | |
| letter-spacing: 0.13em; | |
| } | |
| .task-dialog { | |
| width: min(1280px, calc(100% - 36px)); | |
| max-height: calc(100dvh - 36px); | |
| padding: 0; | |
| border: 0; | |
| border-radius: 22px; | |
| background: var(--paper); | |
| color: var(--ink); | |
| box-shadow: 0 30px 110px rgba(15, 22, 19, 0.38); | |
| } | |
| .task-dialog::backdrop { | |
| background: rgba(15, 22, 19, 0.62); | |
| backdrop-filter: blur(4px); | |
| } | |
| .dialog-shell { | |
| min-height: min(820px, calc(100dvh - 36px)); | |
| } | |
| .dialog-header { | |
| position: sticky; | |
| z-index: 5; | |
| top: 0; | |
| display: flex; | |
| align-items: start; | |
| justify-content: space-between; | |
| gap: 30px; | |
| padding: 31px 38px 25px; | |
| border-bottom: 1px solid var(--line-strong); | |
| background: rgba(243, 240, 232, 0.96); | |
| backdrop-filter: blur(14px); | |
| } | |
| .dialog-header h2 { | |
| margin: 0; | |
| font-family: Georgia, serif; | |
| font-size: clamp(28px, 4vw, 49px); | |
| font-weight: 400; | |
| letter-spacing: -0.04em; | |
| line-height: 1; | |
| } | |
| .raw-task-name { | |
| margin: 10px 0 0; | |
| color: var(--muted); | |
| font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; | |
| font-size: 10px; | |
| } | |
| .close-button { | |
| width: 42px; | |
| height: 42px; | |
| flex: 0 0 auto; | |
| border: 1px solid var(--line); | |
| border-radius: 50%; | |
| background: var(--white); | |
| color: var(--ink); | |
| font-size: 25px; | |
| font-weight: 300; | |
| line-height: 1; | |
| } | |
| .dialog-body { | |
| padding: 30px 38px 48px; | |
| } | |
| .dialog-metrics { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| border: 1px solid var(--line); | |
| border-radius: 14px; | |
| overflow: hidden; | |
| background: var(--white); | |
| } | |
| .dialog-metric { | |
| padding: 19px; | |
| border-right: 1px solid var(--line); | |
| } | |
| .dialog-metric:last-child { | |
| border: 0; | |
| } | |
| .dialog-metric span { | |
| display: block; | |
| margin-bottom: 10px; | |
| color: var(--muted); | |
| font-size: 9px; | |
| font-weight: 800; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| } | |
| .dialog-metric strong { | |
| font-family: Georgia, serif; | |
| font-size: 28px; | |
| font-weight: 400; | |
| } | |
| .prompt-panel { | |
| margin-top: 18px; | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| background: rgba(255, 253, 248, 0.6); | |
| } | |
| .prompt-panel summary { | |
| padding: 14px 17px; | |
| color: var(--ink); | |
| cursor: pointer; | |
| font-size: 11px; | |
| font-weight: 760; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| } | |
| .prompt-panel p { | |
| margin: 0; | |
| padding: 0 17px 18px; | |
| color: var(--muted); | |
| font-size: 13px; | |
| line-height: 1.65; | |
| } | |
| .sample-heading { | |
| display: flex; | |
| align-items: end; | |
| justify-content: space-between; | |
| gap: 28px; | |
| margin: 46px 0 20px; | |
| } | |
| .sample-heading h3 { | |
| margin: 0; | |
| font-family: Georgia, serif; | |
| font-size: 28px; | |
| font-weight: 400; | |
| letter-spacing: -0.03em; | |
| } | |
| .sample-heading > p { | |
| max-width: 360px; | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: 11px; | |
| line-height: 1.5; | |
| text-align: right; | |
| } | |
| .sample-grid { | |
| display: grid; | |
| gap: 24px; | |
| } | |
| .sample-card { | |
| padding: 14px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| background: var(--white); | |
| } | |
| .sample-card-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 20px; | |
| padding: 2px 2px 12px; | |
| } | |
| .sample-id { | |
| font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; | |
| font-size: 11px; | |
| font-weight: 780; | |
| } | |
| .sample-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .sync-button { | |
| padding: 6px 9px; | |
| border: 1px solid var(--line); | |
| border-radius: 7px; | |
| background: transparent; | |
| color: var(--muted); | |
| font-size: 9px; | |
| font-weight: 780; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| } | |
| .video-pair { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 12px; | |
| } | |
| .video-panel { | |
| min-width: 0; | |
| overflow: hidden; | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| background: #131917; | |
| } | |
| .video-panel video { | |
| display: block; | |
| width: 100%; | |
| aspect-ratio: 1; | |
| background: #101411; | |
| object-fit: contain; | |
| } | |
| .video-meta { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| padding: 10px 12px; | |
| background: var(--paper); | |
| } | |
| .video-run-label { | |
| overflow: hidden; | |
| font-size: 10px; | |
| font-weight: 780; | |
| letter-spacing: 0.05em; | |
| text-overflow: ellipsis; | |
| text-transform: uppercase; | |
| white-space: nowrap; | |
| } | |
| .video-score { | |
| font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; | |
| font-size: 11px; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .sample-prompt { | |
| margin-top: 11px; | |
| border-top: 1px solid var(--line); | |
| } | |
| .sample-prompt summary { | |
| padding: 12px 3px 4px; | |
| color: var(--muted); | |
| cursor: pointer; | |
| font-size: 9px; | |
| font-weight: 780; | |
| letter-spacing: 0.07em; | |
| text-transform: uppercase; | |
| } | |
| .sample-prompt p { | |
| margin: 8px 3px 3px; | |
| color: var(--muted); | |
| font-size: 12px; | |
| line-height: 1.6; | |
| } | |
| .loading-overlay { | |
| position: fixed; | |
| z-index: 100; | |
| inset: 0; | |
| display: grid; | |
| place-items: center; | |
| background: var(--paper); | |
| transition: | |
| opacity 260ms ease, | |
| visibility 260ms ease; | |
| } | |
| .loading-overlay.hidden { | |
| visibility: hidden; | |
| opacity: 0; | |
| } | |
| .loading-card { | |
| width: min(320px, calc(100% - 48px)); | |
| text-align: center; | |
| } | |
| .loading-mark { | |
| width: 54px; | |
| height: 54px; | |
| margin: 0 auto 18px; | |
| font-size: 29px; | |
| } | |
| .loading-card p { | |
| margin: 0 0 16px; | |
| color: var(--muted); | |
| font-size: 12px; | |
| font-weight: 720; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .loading-line { | |
| height: 2px; | |
| overflow: hidden; | |
| background: var(--paper-deep); | |
| } | |
| .loading-line span { | |
| display: block; | |
| width: 45%; | |
| height: 100%; | |
| background: var(--green); | |
| animation: load 1.1s ease-in-out infinite alternate; | |
| } | |
| .sr-only { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| padding: 0; | |
| margin: -1px; | |
| overflow: hidden; | |
| clip: rect(0, 0, 0, 0); | |
| white-space: nowrap; | |
| border: 0; | |
| } | |
| @keyframes load { | |
| from { | |
| transform: translateX(0); | |
| } | |
| to { | |
| transform: translateX(122%); | |
| } | |
| } | |
| @media (max-width: 1050px) { | |
| .page-shell { | |
| padding-inline: 24px; | |
| } | |
| .hero-grid { | |
| grid-template-columns: 1fr 210px; | |
| gap: 38px; | |
| padding-inline: 2%; | |
| } | |
| main > section { | |
| padding-inline: 2%; | |
| } | |
| .score-cards { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .score-card:nth-child(2) { | |
| border-right: 0; | |
| } | |
| .score-card:nth-child(-n + 2) { | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .task-toolbar { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| .search-field { | |
| grid-column: 1 / -1; | |
| } | |
| .task-table th:nth-child(1) { | |
| width: 42%; | |
| } | |
| .task-table th:nth-child(2) { | |
| width: 18%; | |
| } | |
| .task-table th:nth-child(3), | |
| .task-table th:nth-child(4), | |
| .task-table th:nth-child(5) { | |
| width: 11%; | |
| } | |
| .task-table th:last-child { | |
| width: 7%; | |
| } | |
| } | |
| @media (max-width: 760px) { | |
| .page-shell { | |
| padding: 0 14px 28px; | |
| } | |
| .topbar { | |
| min-height: 52px; | |
| } | |
| .brand { | |
| font-size: 10px; | |
| } | |
| .topbar-meta { | |
| display: none; | |
| } | |
| .hero-grid { | |
| grid-template-columns: 1fr; | |
| padding: 60px 0 45px; | |
| } | |
| .hero-stamp { | |
| display: grid; | |
| grid-template-columns: auto 1fr; | |
| column-gap: 14px; | |
| align-items: end; | |
| padding: 18px 0 0; | |
| border-top: 1px solid var(--line); | |
| border-left: 0; | |
| } | |
| .stamp-number { | |
| grid-row: span 2; | |
| font-size: 55px; | |
| } | |
| .stamp-rule { | |
| display: none; | |
| } | |
| .stamp-detail { | |
| margin-top: 5px; | |
| } | |
| main > section { | |
| padding: 52px 0; | |
| } | |
| .section-heading, | |
| .sample-heading { | |
| display: block; | |
| } | |
| .section-note, | |
| .sample-heading > p { | |
| margin-top: 16px; | |
| text-align: left; | |
| } | |
| .baseline-pill { | |
| margin-top: 18px; | |
| } | |
| .run-controls { | |
| grid-template-columns: 1fr; | |
| gap: 18px; | |
| } | |
| .mode-switcher { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .score-cards { | |
| grid-template-columns: 1fr; | |
| } | |
| .score-card { | |
| min-height: 140px; | |
| border-right: 0; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .score-card:nth-child(3) { | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .score-card:last-child { | |
| border-bottom: 0; | |
| } | |
| .score-value { | |
| margin-top: 17px; | |
| } | |
| .chart-card { | |
| padding-inline: 8px; | |
| } | |
| .trend-legend { | |
| padding-inline: 10px; | |
| } | |
| .task-toolbar { | |
| grid-template-columns: 1fr; | |
| } | |
| .search-field { | |
| grid-column: auto; | |
| } | |
| .task-table thead { | |
| display: none; | |
| } | |
| .task-table, | |
| .task-table tbody, | |
| .task-table tr, | |
| .task-table td { | |
| display: block; | |
| width: 100%; | |
| } | |
| .task-row { | |
| position: relative; | |
| padding: 17px; | |
| } | |
| .task-row td { | |
| padding: 0; | |
| } | |
| .task-row td:nth-child(1) { | |
| padding-right: 70px; | |
| margin-bottom: 12px; | |
| } | |
| .task-row td:nth-child(2) { | |
| margin-bottom: 15px; | |
| } | |
| .task-row td:nth-child(3), | |
| .task-row td:nth-child(4), | |
| .task-row td:nth-child(5) { | |
| display: inline-block; | |
| width: auto; | |
| margin-right: 13px; | |
| } | |
| .task-row td:nth-child(3)::before { | |
| content: "Now "; | |
| color: var(--muted); | |
| font-size: 9px; | |
| } | |
| .task-row td:nth-child(4)::before { | |
| content: "Base "; | |
| color: var(--muted); | |
| font-size: 9px; | |
| } | |
| .task-row td:last-child { | |
| position: absolute; | |
| top: 18px; | |
| right: 17px; | |
| width: auto; | |
| } | |
| footer { | |
| display: block; | |
| padding-inline: 0; | |
| } | |
| footer span { | |
| display: block; | |
| margin-bottom: 8px; | |
| } | |
| .task-dialog { | |
| width: 100%; | |
| max-width: none; | |
| max-height: 100dvh; | |
| margin: 0; | |
| border-radius: 0; | |
| } | |
| .dialog-shell { | |
| min-height: 100dvh; | |
| } | |
| .dialog-header, | |
| .dialog-body { | |
| padding-inline: 18px; | |
| } | |
| .raw-task-name { | |
| max-width: calc(100vw - 90px); | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .dialog-metrics { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .dialog-metric:nth-child(2) { | |
| border-right: 0; | |
| } | |
| .dialog-metric:nth-child(-n + 2) { | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .video-pair { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |