Spaces:
Running
Running
| /* Standalone editorial theme; no shared project-page selectors or overrides. */ | |
| :root { | |
| color-scheme: light; | |
| --ink: #171918; | |
| --muted: #6b706d; | |
| --line: #dedfdd; | |
| --paper: #fff; | |
| --soft: #f3f4f2; | |
| --accent: #057866; | |
| --max: 1384px; | |
| } | |
| * { box-sizing: border-box; letter-spacing: 0; } | |
| html { scroll-behavior: smooth; scroll-padding-top: 36px; } | |
| body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; } | |
| a { color: inherit; text-decoration: none; } | |
| a, button, summary { -webkit-tap-highlight-color: transparent; } | |
| a:focus-visible, button:focus-visible, summary:focus-visible, .gallery-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; } | |
| button { font: inherit; cursor: pointer; } | |
| button:disabled { cursor: default; opacity: .3; } | |
| button, a { touch-action: manipulation; } | |
| figure, h1, h2, p { margin: 0; } | |
| svg.svg-inline--fa { width: 1em; height: 1em; } | |
| [hidden] { display: none ; } | |
| .sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } | |
| .skip-link:focus { display: block; padding: 16px; } | |
| .site-header, .site-footer { max-width: var(--max); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; } | |
| .site-header { min-height: 92px; padding: 0 48px; } | |
| .wordmark { display: inline-flex; align-items: baseline; gap: 5px; font-size: 23px; font-weight: 700; } | |
| .wordmark-version { color: var(--accent); font-weight: 400; font-size: 14px; } | |
| .site-header nav { display: flex; align-items: center; gap: 32px; font-size: 14px; } | |
| .site-header nav a:hover, .text-link:hover, .site-footer a:hover { color: var(--accent); } | |
| .site-header .project-link { margin-left: 22px; } | |
| .project-link svg, .site-footer > a:last-child svg, .related-research svg { transform: rotate(45deg); margin-left: 8px; font-size: 12px; } | |
| .article-header { max-width: var(--max); padding: 66px 48px 48px 300px; margin: auto; } | |
| .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 36px; color: var(--muted); font-size: 13px; margin-bottom: 30px; } | |
| .eyebrow { font-family: 'Courier New', monospace; text-transform: uppercase; font-size: 11px; font-weight: 600; } | |
| .article-meta .eyebrow { color: var(--accent); } | |
| h1 { font-size: 88px; line-height: 1.04; font-weight: 500; } | |
| .article-deck { font-size: 34px; line-height: 1.23; max-width: 830px; margin-top: 22px; font-weight: 400; text-wrap: balance; } | |
| .article-author-byline { max-width: 830px; margin-top: 22px; color: var(--muted); font-size: 14px; line-height: 1.6; } | |
| .article-author-byline .publication-authors { margin-top: 4px; } | |
| .article-author-byline .publication-authors:first-child { color: var(--ink); } | |
| .article-author-byline .author-block { display: inline; } | |
| .article-author-byline small { font-size: 12px; } | |
| .text-link { display: inline-flex; align-items: center; gap: 16px; font-size: 14px; padding: 12px 0; margin-top: 23px; } | |
| .text-link svg { font-size: 12px; transition: transform .2s; } | |
| .text-link:hover svg { transform: translateY(3px); } | |
| .featured-media { max-width: var(--max); padding: 0 48px; margin: 0 auto 88px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; } | |
| .featured-media figcaption { display: flex; gap: 13px; font-size: 12px; line-height: 1.5; padding-top: 16px; } | |
| .featured-media figcaption > span { color: var(--muted); font-family: 'Courier New', monospace; } | |
| .video-shell { position: relative; isolation: isolate; background: #e9ebe8; border-radius: 4px; overflow: hidden; } | |
| .video-shell video { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: #111; } | |
| /* Show portrait posters without letterbox padding; playback always preserves the full frame. */ | |
| .video-shell:not(.is-loaded) video { object-fit: cover; } | |
| .video-shell:not(.is-loaded) video::-webkit-media-controls { display: none; } | |
| .video-play { display: grid; place-items: center; position: absolute; inset: 0; margin: auto; width: 50px; height: 50px; color: var(--ink); background: #fff; border: 0; border-radius: 50%; box-shadow: 0 2px 12px #0002; transition: transform .2s, background .2s; z-index: 1; } | |
| .video-play svg { font-size: 13px; margin-left: 2px; } | |
| .video-play:hover { transform: scale(1.07); background: #e1fff0; } | |
| .video-shell.is-loaded .video-play { display: none; } | |
| .video-shell.is-loaded video { background: #080908; } | |
| .video-error { position: absolute; top: 12px; left: 12px; right: 12px; padding: 10px; color: #fff; background: #262927; font-size: 12px; line-height: 1.5; z-index: 2; } | |
| .article-layout { max-width: var(--max); margin: auto; padding: 0 48px; display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 64px; } | |
| .contents { min-width: 0; } | |
| .contents nav { position: sticky; top: 36px; display: flex; flex-direction: column; gap: 6px; padding-top: 8px; } | |
| .contents .eyebrow { margin-bottom: 17px; color: #858b86; } | |
| .contents a { display: flex; gap: 13px; padding: 9px 0; font-size: 12px; color: var(--muted); line-height: 1.4; } | |
| .contents a > span { font-family: 'Courier New', monospace; color: #909690; } | |
| .contents a:hover, .contents a[aria-current="location"] { color: var(--ink); } | |
| .contents a[aria-current="location"] { font-weight: 600; } | |
| .contents a[aria-current="location"] > span { color: var(--accent); } | |
| .contents .back-top { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 20px; align-items: center; } | |
| .contents .back-top svg { font-size: 10px; } | |
| article { min-width: 0; } | |
| .article-section { border-top: 1px solid var(--line); padding: 38px 0 74px; scroll-margin-top: 28px; } | |
| .section-heading { display: flex; align-items: baseline; gap: 20px; margin-bottom: 32px; } | |
| .section-number { color: var(--accent); font-family: 'Courier New', monospace; font-size: 12px; flex-shrink: 0; } | |
| .section-heading h2 { font-size: 32px; line-height: 1.2; font-weight: 500; text-wrap: balance; } | |
| .prose { max-width: 700px; } | |
| .prose p { font-size: 17px; line-height: 1.8; color: #414641; margin-bottom: 24px; overflow-wrap: break-word; } | |
| .prose p:last-child { margin-bottom: 0; } | |
| .prose .lead { color: var(--ink); font-size: 23px; line-height: 1.55; } | |
| .prose strong { color: var(--ink); font-weight: 600; } | |
| .prose a { text-decoration: underline; text-underline-offset: 4px; } | |
| .capabilities { margin-top: 40px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--line); padding-top: 25px; gap: 20px; } | |
| .capabilities > div { display: flex; flex-direction: column; gap: 12px; font-size: 12px; line-height: 1.5; color: var(--muted); } | |
| .capability-value { font-size: 27px; color: var(--ink); font-weight: 400; } | |
| .method-figure { margin: 0 0 40px; } | |
| .method-figure > a { position: relative; display: block; } | |
| .method-figure img { width: 100%; height: auto; display: block; background: #fff; } | |
| .diagram-expand { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 34px; height: 34px; background: #fff; border: 1px solid var(--line); border-radius: 50%; font-size: 12px; } | |
| .method-figure figcaption { font-size: 12px; line-height: 1.5; color: var(--muted); margin-top: 16px; } | |
| .gallery { margin-top: 32px; --columns: 3; } | |
| .gallery-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 15px; font-size: 12px; color: var(--muted); } | |
| .gallery-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; } | |
| .gallery-counter { font-size: 11px; font-family: 'Courier New', monospace; min-width: 50px; text-align: right; margin-right: 4px; } | |
| .icon-button { width: 34px; height: 34px; padding: 0; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); font-size: 12px; flex-shrink: 0; } | |
| .icon-button:hover:not(:disabled) { background: var(--soft); } | |
| .gallery-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--columns) - 1) * 14px) / var(--columns)); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #c5cac5 transparent; padding-bottom: 12px; overscroll-behavior-x: contain; } | |
| .gallery-item { min-width: 0; scroll-snap-align: start; } | |
| .gallery-item .video-shell video { aspect-ratio: 3 / 4; } | |
| .comparison-gallery { --columns: 2; } | |
| .comparison-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; } | |
| .comparison-method { min-width: 0; } | |
| .method-label { display: block; text-align: center; color: var(--muted); font-size: 11px; margin-bottom: 12px; } | |
| .comparison-method:last-child .method-label { color: var(--accent); } | |
| .comparison-method .video-shell { border-radius: 4px 0 0 4px; } | |
| .comparison-method:last-child .video-shell { border-radius: 0 4px 4px 0; } | |
| .comparison-method .video-shell video { object-fit: contain; } | |
| .comparison-gallery.comparison-portrait .video-shell video { aspect-ratio: 9 / 16; } | |
| .comparison-method .video-play { width: 36px; height: 36px; } | |
| .evaluation-summary { background: #171c19; color: #fff; padding: 30px 34px; margin: 0 0 32px; } | |
| .evaluation-summary .eyebrow { color: #b0bcb4; } | |
| .evaluation-scores { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; margin-top: 20px; } | |
| .evaluation-scores > div { display: flex; flex-direction: column; gap: 15px; font-size: 13px; } | |
| .score { font-size: 48px; line-height: 1.2; font-weight: 400; color: #d0f4dd; } | |
| .score > span { font-size: 29px; } | |
| .score-unit { font-size: 10px; color: #aebcb2; margin-left: 10px; } | |
| .citation { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } | |
| .citation summary { list-style: none; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; font-size: 17px; cursor: pointer; } | |
| .citation summary::-webkit-details-marker { display: none; } | |
| .citation summary svg { font-size: 12px; transition: transform .2s; } | |
| .citation[open] summary svg { transform: rotate(45deg); } | |
| .citation-content { position: relative; background: var(--soft); padding: 52px 24px 24px; } | |
| .copy-citation { position: absolute; right: 15px; top: 12px; } | |
| .citation pre { margin: 0; font-size: 12px; line-height: 1.7; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; } | |
| .copy-status { display: block; margin-top: 12px; font-size: 12px; color: var(--accent); } | |
| .related-research { margin-top: 24px; } | |
| .related-research a { display: flex; justify-content: space-between; align-items: center; padding: 19px 0; border-bottom: 1px solid var(--line); font-size: 18px; } | |
| .related-research a:hover { color: var(--accent); } | |
| .ethics { padding: 0 0 70px; } | |
| .ethics h2 { font-size: 16px; font-weight: 500; margin-bottom: 18px; } | |
| .ethics p { font-size: 13px; line-height: 1.7; color: var(--muted); } | |
| .site-footer { border-top: 1px solid var(--line); padding: 36px 48px; font-size: 12px; color: var(--muted); } | |
| .site-footer .wordmark { color: var(--ink); } | |
| @media (min-width: 1600px) { .article-header { padding-top: 78px; } } | |
| @media (max-width: 1100px) { | |
| .article-layout { grid-template-columns: 150px minmax(0,1fr); gap: 36px; } | |
| .article-header { padding: 36px 48px 36px 234px; } | |
| .article-deck { font-size: 30px; } | |
| .gallery { --columns: 2; } | |
| .comparison-gallery { --columns: 1; } | |
| .score { font-size: 38px; } | |
| .score > span { font-size: 23px; } | |
| .section-heading h2 { font-size: 28px; } | |
| .capability-value { font-size: 23px; } | |
| } | |
| @media (max-width: 800px) { | |
| .site-header { padding: 0 24px; min-height: 76px; } | |
| .site-header nav { gap: 20px; font-size: 12px; } | |
| .site-header .project-link { margin-left: 0; } | |
| .article-header { padding: 40px 24px 32px; } | |
| h1 { font-size: 64px; } | |
| .article-deck { font-size: 29px; } | |
| .article-meta { margin-bottom: 24px; font-size: 12px; } | |
| .featured-media { padding: 0 24px; gap: 12px; margin-bottom: 52px; grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 26px; } | |
| .featured-media figcaption { font-size: 12px; padding-top: 12px; } | |
| .article-layout { display: block; padding: 0 24px; } | |
| .contents { margin-bottom: 36px; } | |
| .contents nav { position: static; flex-direction: row; overflow-x: auto; gap: 24px; border-top: 1px solid var(--line); padding: 15px 0; scrollbar-width: thin; } | |
| .contents a { white-space: nowrap; gap: 8px; } | |
| .contents .eyebrow, .contents .back-top { display: none; } | |
| .gallery { --columns: 2; } | |
| .comparison-gallery { --columns: 1; } | |
| .article-section { padding: 30px 0 54px; } | |
| .section-heading { margin-bottom: 24px; gap: 14px; } | |
| .prose p { font-size: 16px; line-height: 1.75; } | |
| .prose .lead { font-size: 21px; } | |
| .site-footer { padding: 28px 24px; flex-wrap: wrap; } | |
| .site-footer > span { order: 3; flex-basis: 100%; } | |
| } | |
| @media (max-width: 480px) { | |
| .site-header nav > a:first-child { display: none; } | |
| .site-header nav { gap: 18px; } | |
| .wordmark { font-size: 21px; } | |
| .article-header { padding-top: 24px; } | |
| h1 { font-size: 52px; } | |
| .article-deck { font-size: 25px; line-height: 1.25; } | |
| .article-meta { gap: 12px; } | |
| .text-link { margin-top: 17px; } | |
| .featured-media { gap: 10px; row-gap: 20px; } | |
| .featured-media figcaption { gap: 6px; font-size: 11px; } | |
| .video-play { width: 40px; height: 40px; } | |
| .section-heading h2 { font-size: 26px; } | |
| .capabilities { grid-template-columns: 1fr; gap: 0; padding-top: 0; } | |
| .capabilities > div { flex-direction: row; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 18px 0; gap: 16px; } | |
| .capabilities > div > span:last-child { max-width: 50%; text-align: right; } | |
| .gallery:not(.comparison-gallery) .gallery-track { grid-auto-columns: 72%; } | |
| .gallery-toolbar { gap: 8px; font-size: 11px; } | |
| .gallery-actions { gap: 6px; } | |
| .gallery-counter { min-width: 42px; } | |
| .icon-button { width: 32px; height: 32px; } | |
| .evaluation-summary { padding: 24px 20px; } | |
| .evaluation-scores { gap: 12px; } | |
| .score { font-size: 31px; } | |
| .score > span { font-size: 20px; } | |
| .evaluation-scores > div { font-size: 11px; line-height: 1.5; } | |
| .score-unit { display: block; margin-left: 0; } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| html { scroll-behavior: auto; } | |
| *, *::before, *::after { transition: none ; } | |
| } | |