Spaces:
Running
Running
| :root { | |
| --bg: #f4f1ea; | |
| --ink: #1b1a17; | |
| --muted: #5c574e; | |
| --card: #fffdf8; | |
| --line: #d9d2c5; | |
| --hero: #17140f; | |
| --hero-ink: #f6f0e4; | |
| --accent: #a84a1c; | |
| --accent-display: #c45c26; | |
| --good: #2f6d4f; | |
| --warn: #8a5a12; | |
| --bad: #8b2e2e; | |
| --mono: "IBM Plex Mono", "ui-monospace", "SFMono-Regular", Menlo, Consolas, monospace; | |
| --sans: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; | |
| } | |
| * { box-sizing: border-box; } | |
| html, body { margin: 0; padding: 0; } | |
| body { | |
| background: var(--bg); | |
| color: var(--ink); | |
| font-family: var(--sans); | |
| line-height: 1.5; | |
| font-size: 17px; | |
| } | |
| .skip { | |
| position: absolute; | |
| left: -9999px; | |
| top: 0; | |
| z-index: 9; | |
| background: var(--card); | |
| color: var(--ink); | |
| padding: 8px 12px; | |
| } | |
| .skip:focus { | |
| left: 8px; | |
| top: 8px; | |
| } | |
| a { color: var(--accent); } | |
| :focus-visible { | |
| outline: 3px solid #a84a1c; | |
| outline-offset: 2px; | |
| border-radius: 6px; | |
| } | |
| .hero { | |
| background: var(--hero); | |
| color: var(--hero-ink); | |
| display: grid; | |
| grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); | |
| gap: 20px; | |
| align-items: start; | |
| padding: 20px 32px 12px; | |
| } | |
| .eyebrow { letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem; margin: 0 0 6px; color: #d7c7a5; text-align: left; } | |
| .brand { margin: 0 0 6px; font-size: 0.95rem; color: #e0795a; letter-spacing: 0.04em; } | |
| .hero h1 { margin: 0 0 6px; font-size: clamp(1.85rem, 3.8vw, 2.9rem); line-height: 1.05; letter-spacing: -0.01em; text-align: left; } | |
| .headline { margin: 0; max-width: 46rem; color: #efe6d4; font-size: 1.05rem; } | |
| .tiles { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 8px; | |
| margin-top: 12px; | |
| } | |
| .tile { | |
| background: #241f18; | |
| border: 1px solid #3b3429; | |
| border-radius: 10px; | |
| padding: 8px 10px; | |
| } | |
| .tile strong { display: block; font-size: 1.85rem; line-height: 1.1; } | |
| .tile span { display: block; margin-top: 4px; font-size: 0.78rem; color: #d8cbb3; } | |
| .note { color: var(--muted); font-size: 0.92rem; } | |
| .hero .note { color: #cbbda3; margin-top: 8px; max-width: 50rem; } | |
| .links { margin: 8px 0 0; } | |
| .links a { | |
| color: #e0795a; | |
| margin-right: 0.4rem; | |
| display: inline-flex; | |
| align-items: center; | |
| min-height: 44px; | |
| padding: 8px 4px; | |
| } | |
| .panel .links a, #run-links a { color: var(--accent); } | |
| .lead-short { display: none; } | |
| .tiles { min-height: 0; } | |
| .demo-video { grid-column: 1 / -1; max-width: 880px; margin: 4px auto 0; width: 100%; } | |
| .demo-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px; } | |
| .demo-video .video-credit { margin: 8px 0 0; color: #d7c7a5; font-size: 0.85rem; } | |
| .demo-video .transcript { margin-top: 8px; color: #d7c7a5; font-size: 0.92rem; } | |
| .demo-video .transcript summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; } | |
| .demo-video .transcript p { margin: 0 0 8px; } | |
| .drift { | |
| background: #0f0d0a; | |
| border: 1px solid #3b3429; | |
| border-radius: 14px; | |
| padding: 12px; | |
| font: 13px/1.45 var(--mono); | |
| } | |
| .drift .lbl { font: 600 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #a89a80; margin: 0 0 4px; } | |
| .drift pre { margin: 0 0 8px; white-space: pre-wrap; word-break: break-word; } | |
| .drift .doc { border-left: 3px solid #e0795a; background: #2a1712; padding: 10px 12px; border-radius: 6px; color: #ffd9cc; } | |
| .drift .code { border-left: 3px solid #6fbf8f; background: #12241a; padding: 10px 12px; border-radius: 6px; color: #d4f2df; } | |
| .drift .err { border-left: 3px solid #e9b44c; background: #2a210f; padding: 10px 12px; border-radius: 6px; color: #ffe7b3; } | |
| .drift-foot, .drift-honest { font: 13px/1.45 var(--sans); color: #d7c7a5; margin: 0 0 8px; } | |
| .drift-foot a { color: #e0795a; } | |
| .drift pre code, .card .mini code { background: transparent; padding: 0; font: inherit; color: inherit; text-decoration: underline dotted 1px; } | |
| .tabs { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| padding: 12px 16px; | |
| background: #ebe4d6; | |
| border-bottom: 1px solid var(--line); | |
| position: sticky; | |
| top: 0; | |
| z-index: 2; | |
| } | |
| .tab { | |
| border: 1px solid var(--line); | |
| background: var(--card); | |
| color: var(--ink); | |
| border-radius: 999px; | |
| padding: 8px 14px; | |
| min-height: 44px; | |
| cursor: pointer; | |
| font: inherit; | |
| } | |
| .tab.is-active { background: var(--hero); color: var(--hero-ink); border-color: var(--hero); } | |
| main { padding: 20px 16px 48px; max-width: 1100px; margin: 0 auto; } | |
| .panel { display: none; } | |
| .panel.is-active { display: block; } | |
| h2 { margin-top: 0; } | |
| .lede { color: var(--muted); } | |
| .criteria { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 12px; | |
| margin: 0 0 28px; | |
| } | |
| .criteria article { | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| padding: 12px 14px; | |
| } | |
| .criteria h3 { margin: 0 0 6px; font-size: 1rem; color: var(--accent); } | |
| .why-chart { margin: 8px 0 16px; } | |
| .why-chart svg { width: 100%; height: auto; } | |
| .why-chart-list { display: none; list-style: none; padding: 0; margin: 0; } | |
| .why-chart-list li { margin: 0 0 12px; font-size: 15px; line-height: 1.45; } | |
| .why-chart-list .why-arm { display: block; color: var(--muted); font-size: 14px; } | |
| .bar-label { font: 14px var(--sans); fill: var(--ink); } | |
| .bar-whole { fill: #a84a1c; } | |
| .bar-matched { fill: #3d6b8a; } | |
| .bar-local { fill: #8a7b68; } | |
| #sample-cast { margin: 8px 0 16px; overflow: hidden; } | |
| #sample-cast .ap-wrapper { max-width: 100%; } | |
| #sample-cast .ap-player { max-width: 100%; } | |
| #sample-output { margin: 0 0 20px; } | |
| .method { padding-left: 1.2rem; } | |
| .method-diagram { width: 100%; max-width: 640px; height: auto; margin: 8px 0 24px; } | |
| .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; } | |
| .chip { | |
| border: 1px solid var(--line); | |
| background: var(--card); | |
| color: var(--ink); | |
| border-radius: 999px; | |
| padding: 8px 12px; | |
| min-height: 44px; | |
| cursor: pointer; | |
| font: inherit; | |
| } | |
| .chip[aria-pressed="true"] { background: var(--hero); color: var(--hero-ink); border-color: var(--hero); } | |
| .count { color: var(--muted); margin: 0 0 12px; } | |
| .grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 12px; | |
| } | |
| .card { | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| padding: 12px 14px; | |
| min-width: 0; | |
| } | |
| code, .card a { overflow-wrap: anywhere; } | |
| .card .meta a { display: inline-block; padding: 10px 0; } | |
| .card h3 { margin: 0 0 8px; font-size: 1.02rem; } | |
| .card p { margin: 0 0 8px; font-size: 0.92rem; } | |
| .card .mini { font: 12px/1.45 var(--mono); white-space: pre-wrap; word-break: break-word; padding: 8px 10px; border-radius: 6px; margin: 0 0 8px; color: var(--ink); background: #f3eee4; } | |
| .card .mini.doc { background: #f8ece6; border-left: 3px solid #e0795a; } | |
| .card .mini.code { background: #eaf4ee; border-left: 3px solid #6fbf8f; } | |
| .card .mini.err { background: #f6eedc; border-left: 3px solid #e9b44c; } | |
| .meta { font-size: 0.82rem; color: var(--muted); } | |
| .meta a { color: inherit; } | |
| .pill { | |
| display: inline-flex; | |
| align-items: center; | |
| border-radius: 999px; | |
| padding: 8px 12px; | |
| min-height: 44px; | |
| font-size: 0.75rem; | |
| margin: 0 6px 8px 0; | |
| border: 1px solid var(--line); | |
| } | |
| .pill-reproduced { background: #e4f3ea; color: var(--good); border-color: #b9d8c4; } | |
| .pill-checked { background: #f4ead3; color: var(--warn); border-color: #e0cfa6; } | |
| .pill-false { background: #f8e4e4; color: var(--bad); border-color: #e3b8b8; } | |
| .pill-open { background: #fde8d6; color: var(--accent); border-color: #f0c19a; } | |
| .disp-id { font: 600 0.78rem var(--mono); color: var(--muted); float: right; } | |
| .headline-cards { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 10px; | |
| margin: 0 0 16px; | |
| } | |
| .headline-cards .tile { background: var(--card); border: 1px solid var(--line); color: var(--ink); } | |
| .headline-cards .tile span { color: var(--muted); } | |
| .table-wrap { overflow-x: auto; } | |
| table { width: 100%; border-collapse: collapse; background: var(--card); } | |
| th, td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; font-size: 0.92rem; } | |
| th { background: #efe7d8; } | |
| table.beamv3:not(.show-all) .extra-col { display: none; } | |
| .col-toggle { margin: 8px 0 16px; } | |
| .funnel { padding-left: 1.2rem; } | |
| .funnel li { margin-bottom: 8px; } | |
| .notes { white-space: pre-wrap; color: var(--muted); } | |
| .notes ul { white-space: normal; } | |
| .banner { | |
| border-left: 4px solid var(--accent); | |
| background: var(--card); | |
| padding: 12px 14px; | |
| border-radius: 0 10px 10px 0; | |
| } | |
| .player { | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| padding: 12px 16px 16px; | |
| margin: 0 0 28px; | |
| } | |
| .player details summary { | |
| cursor: pointer; | |
| font-weight: 600; | |
| min-height: 44px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .player-kicker { | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| font-size: 0.72rem; | |
| color: var(--accent); | |
| margin: 12px 0 6px; | |
| } | |
| .player-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 16px; | |
| } | |
| .player ol { padding-left: 1.2rem; } | |
| .player li { margin-bottom: 8px; } | |
| .pr-line { margin-top: 12px; font-weight: 600; } | |
| .pr-line a { color: var(--accent); } | |
| pre { | |
| background: var(--hero); | |
| color: var(--hero-ink); | |
| padding: 12px; | |
| border-radius: 10px; | |
| overflow-x: auto; | |
| font-family: var(--mono); | |
| font-size: 0.84rem; | |
| } | |
| code { font: 0.9em var(--mono); background: #efe8da; padding: 0.1em 0.35em; border-radius: 4px; } | |
| pre code { background: transparent; padding: 0; color: inherit; } | |
| img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; } | |
| footer { padding: 16px; color: var(--muted); font-size: 0.85rem; border-top: 1px solid var(--line); } | |
| .footer-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 0; } | |
| .footer-links a { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 4px; } | |
| .recall-svg svg { width: 100%; height: auto; } | |
| .recall-svg .grid { stroke: var(--line); stroke-dasharray: 2 3; } | |
| .recall-svg .endlabel { font: 600 11px var(--mono); } | |
| @media (prefers-reduced-motion: reduce) { | |
| .ap-player *, .ap-player *::before { animation: none ; transition: none ; } | |
| } | |
| @media (max-width: 900px) { | |
| .hero { grid-template-columns: 1fr; padding: 28px 18px; gap: 24px; } | |
| .criteria { grid-template-columns: 1fr; } | |
| .headline-cards { grid-template-columns: 1fr; } | |
| } | |
| @media (max-width: 760px) { | |
| .hero { display: flex; flex-direction: column; } | |
| .hero-copy { display: contents; } | |
| .hero .eyebrow { order: 0; } | |
| .hero .brand { order: 1; } | |
| .hero h1 { order: 2; } | |
| .drift { order: 3; } | |
| .tiles { order: 4; min-height: 0; width: 100%; } | |
| .headline { order: 5; } | |
| .hero .note { order: 6; } | |
| .hero .links { order: 7; } | |
| .demo-video { order: 8; } | |
| .lead-full { display: none; } | |
| .lead-short { display: block; } | |
| } | |
| @media (max-width: 800px) { | |
| .tiles { grid-template-columns: 1fr; width: 100%; } | |
| body { font-size: 16px; } | |
| .player-grid { grid-template-columns: 1fr; } | |
| } | |
| @media (max-width: 640px) { | |
| table.cards thead { position: absolute; left: -9999px; } | |
| table.cards tr { display: block; border: 1px solid var(--line); border-radius: 10px; margin: 0 0 10px; padding: 8px 12px; background: var(--card); } | |
| table.cards td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 0; } | |
| table.cards td::before { content: attr(data-label); font-weight: 600; color: var(--muted); } | |
| table.beamv3:not(.show-all) td.extra-col { display: none; } | |
| } | |
| @media (max-width: 600px) { | |
| .tabs { | |
| flex-wrap: nowrap; | |
| overflow-x: auto; | |
| scrollbar-width: none; | |
| -webkit-overflow-scrolling: touch; | |
| -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); | |
| mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); | |
| } | |
| .tabs::-webkit-scrollbar { display: none; } | |
| .tab { flex: 0 0 auto; padding: 8px 14px; min-height: 44px; } | |
| .chips { | |
| flex-wrap: nowrap; | |
| overflow-x: auto; | |
| scroll-snap-type: x proximity; | |
| -webkit-overflow-scrolling: touch; | |
| -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); | |
| mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); | |
| } | |
| .chips .chip { flex: 0 0 auto; scroll-snap-align: start; } | |
| .why-chart svg { display: none; } | |
| .why-chart-list { display: block; } | |
| .eyebrow, .hero h1, .brand { text-align: left; } | |
| .tiles { grid-template-columns: 1fr; width: 100%; } | |
| #bugs .filters { scroll-margin-top: 64px; } | |
| } | |