/* Warm paper / terracotta / sage research theme.
   Standalone research project page. All media and fonts work without a CDN. */
:root {
  color-scheme: light;
  --bg: #faf8f4; --alt: #f0eee7; --surface: #fffefa; --raised: #ebe7de;
  --text: #292d29; --secondary: #535a50; --muted: #60665b; --line: #dad8cd;
  --accent: #a44630; --sage: #466650; --accent-hover: #873722;
  --accent-soft: #f3e5dc; --sage-soft: #e8eee4; --media: #1c211e;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
body:has(dialog[open]) { overflow: hidden; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; height: auto; }
h1,h2,h3,p,figure { margin: 0; }
h1,h2,h3 { line-height: 1.18; letter-spacing: -.035em; }
h2 { font-family: var(--serif); font-size: clamp(30px, 3.7vw, 43px); font-weight: 500; }
h3 { font-weight: 600; }
::selection { background: #d7dfcb; color: var(--text); }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 5px; }
.container,.container-wide { width: min(1180px, calc(100% - 72px)); margin-inline: auto; }
.section-space { padding-block: 96px; }
.eyebrow,.panel-kicker { font: 500 10px/1.6 var(--mono); color: var(--sage); letter-spacing: .14em; margin-bottom: 17px; }
.icon { display: inline-block; width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.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; }
.skip-link { position: fixed; z-index: 100; left: 16px; top: 8px; transform: translateY(-180%); padding: 10px 18px; background: var(--surface); }
.skip-link:focus { transform: translateY(0); }
/* Navigation */
.site-header { height: 66px; position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); background: #faf8f4ed; backdrop-filter: blur(16px); }
.nav-wrap { width: min(1336px, calc(100% - 72px)); height: 100%; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; letter-spacing: -.35px; font-weight: 650; white-space: nowrap; }
.brand-light { font-weight: 450; }
.brand-mark { width: 29px; height: 29px; display: grid; place-items: center; color: var(--sage); }
.brand-mark svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.site-header nav { display: flex; align-items: center; gap: 24px; font-size: 12px; color: var(--secondary); }
.site-header nav a { transition: color .2s; white-space: nowrap; }
.site-header nav a:hover,.site-header nav a.active { color: var(--sage); }
.nav-paper { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); padding: 6px 12px; border-radius: 6px; }
.nav-paper .icon { width: 14px; height: 14px; }
/* Hero */
.hero { position: relative; isolation: isolate; padding-top: 65px; overflow: hidden; }
.hero-backdrop { position: absolute; z-index: -1; inset: 0 0 auto; height: 640px; background: radial-gradient(ellipse at 23% 6%,#ead7c34a,transparent 56%),radial-gradient(ellipse at 84% 12%,#d7dfcb50,transparent 53%); }
.hero-copy { text-align: center; }
.hero-eyebrow { display: inline-block; font-size: 10px; letter-spacing: .16em; color: var(--sage); border: 1px solid #d3dacb; background: var(--sage-soft); padding: 5px 12px; border-radius: 4px; margin-bottom: 22px; }
.hero h1 { font-size: clamp(42px,5.6vw,76px); font-family: var(--serif); font-weight: 500; letter-spacing: -.05em; line-height: 1.12; text-wrap: balance; }
.title-accent { color: var(--accent); }
.hero-subtitle { font-size: clamp(18px,2vw,25px); font-weight: 400; line-height: 1.45; letter-spacing: -.4px; color: var(--secondary); margin-top: 17px; }
.authors { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; font-size: 15px; margin-top: 27px; }
.authors sup { font-size: 9px; color: var(--accent); margin-left: 3px; }
.institutions { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 10px; margin-top: 9px; color: var(--secondary); font-size: 12px; }
.institutions sup { font-size: 9px; }
.institution-dot { color: var(--muted); }
.author-notes { color: var(--muted); font-size: 10px; margin-top: 5px; }
.author-notes span { margin-inline: 8px; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 27px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 7px; font-size: 12px; font-weight: 550; border: 1px solid var(--line); transition: background .2s,border-color .2s,transform .2s; }
.button .icon { width: 16px; height: 16px; }
.button-primary { color: white; background: var(--accent); border-color: var(--accent); box-shadow: 0 6px 22px #a4463018; }
.button-secondary { background: var(--surface); }
.button:hover { transform: translateY(-2px); border-color: var(--accent); background: var(--accent-soft); }
.button-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.showcase { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-top: 51px; align-items: stretch; }
.showcase-card { min-width: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; text-align: left; overflow: hidden; transition: border-color .2s,transform .2s; }
.showcase-card { box-shadow: 0 7px 24px #39322607; }
.showcase-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.showcase-image { aspect-ratio: 16/9; position: relative; overflow: hidden; background: var(--media); }
.showcase-image>img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.center-card .showcase-image>img { object-position: 50% 54%; }
.showcase-card:hover img { transform: scale(1.025); }
.showcase-label { padding: 13px 16px 15px; display: flex; justify-content: space-between; align-items: center; }
.showcase-label small { display: block; color: var(--muted); font: 10px/1.7 var(--mono); letter-spacing: .045em; }
.showcase-label strong { display: block; font-size: 14px; font-weight: 550; margin-top: 3px; }
.tiny-plus { font-size: 19px; color: var(--accent); font-weight: 300; }
.image-badge { display: none; }
.image-arrow { position: absolute; right: 11px; bottom: 11px; display: grid; place-items: center; height: 29px; width: 29px; border-radius: 5px; color: white; background: #292d29dd; border: 1px solid #ffffff55; opacity: 0; transition: opacity .2s; }
.image-arrow .icon { width: 14px; height: 14px; }
button:hover .image-arrow,button:focus-visible .image-arrow { opacity: 1; }
.hero-bottom { display: flex; justify-content: space-between; gap: 20px; padding-block: 19px 0; font-size: 11px; color: var(--muted); }
.hero-bottom a { color: var(--accent); display: flex; align-items: center; gap: 9px; }
.hero-bottom .icon { width: 15px; }
/* Research overview */
.highlights { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 42px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.highlights>div { padding: 24px 31px; }
.highlights>div+div { border-left: 1px solid var(--line); }
.highlights strong { display: block; font-size: 33px; line-height: 1.3; letter-spacing: -1px; color: var(--accent); font-weight: 600; }
.highlights strong span { font-size: 16px; color: var(--secondary); letter-spacing: -.2px; font-weight: 400; }
.highlights p { font-size: 11px; color: var(--muted); margin-top: 6px; }
.intro-body { max-width: 900px; margin-inline: auto; }
.intro-body h2 { margin-bottom: 27px; }
.abstract-label { font-size: 17px; margin-bottom: 14px; letter-spacing: -.2px; }
.intro-body>p:not(.eyebrow) { color: var(--secondary); margin-bottom: 16px; font-size: 14px; line-height: 1.85; }
.intro-body strong { color: var(--text); font-weight: 550; }
/* Method */
.method-section { background: var(--alt); border: 1px solid var(--line); border-radius: 12px; padding: 42px 40px 26px; }
.method-top { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.method-top h2 { font-size: 35px; }
.method-top>p { max-width: 300px; font-size: 12px; line-height: 1.8; color: var(--secondary); }
.method-figure { margin-top: 30px; }
.method-figure button { width: 100%; background: #fff; border-radius: 7px; overflow: hidden; padding: 20px; position: relative; }
.method-figure img { width: 100%; }
.method-figure figcaption { font-size: 11px; color: var(--muted); text-align: center; margin-top: 12px; }
.role-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 34px; }
.role { display: flex; flex-direction: column; padding: 0 21px; }
.role:first-child { padding-left: 0; }.role:last-child { padding-right: 0; }
.role+.role { border-left: 1px solid var(--line); }
.role-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font: 9px var(--mono); letter-spacing: .07em; }
.role-number { color: var(--accent); }
.role>img { width: 67px; height: 67px; object-fit: contain; margin-block: 20px 15px; }
.role h3 { font-size: 20px; }
.role p { font-size: 11px; line-height: 1.85; color: var(--secondary); margin-block: 12px 20px; }
.role-output { margin-top: auto; display: flex; gap: 7px; align-items: center; color: var(--accent); font-size: 10px; }
.role-output .icon { width: 14px; height: 14px; }
.loop-footer { display: flex; justify-content: center; align-items: center; gap: 11px; margin-top: 32px; padding-top: 22px; border-top: 1px dashed var(--line); color: var(--muted); font: 10px/1.6 var(--mono); }
.loop-footer>.icon { width: 16px; color: var(--sage); }
/* Version explorer */
.section-title-row { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 32px; }
.section-deck { max-width: 350px; color: var(--secondary); font-size: 12px; line-height: 1.85; }
.evolution-film { margin-bottom: 42px; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: var(--surface); box-shadow: 0 15px 50px #3932260d; }
.hero .hero-film { margin-block: 40px 0; }
.film-header { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 24px 27px; }
.film-header .eyebrow { margin-bottom: 8px; font-size: 9px; }
.film-header h3 { font-size: 24px; }
.film-actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.film-spec { font: 10px var(--mono); color: var(--muted); }
.evolution-film video { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: contain; background: var(--media); border-block: 1px solid var(--line); }
.evolution-film figcaption { display: flex; justify-content: space-between; align-items: start; gap: 28px; padding: 21px 27px 23px; font-size: 11px; color: var(--secondary); line-height: 1.85; }
.evolution-film figcaption>div:first-child { max-width: 710px; }
.film-source-note { margin-top: 6px; color: var(--muted); font-size: 10px; }
.film-links { display: grid; gap: 7px; flex-shrink: 0; color: var(--accent); }
.film-links a:hover { color: var(--sage); }.film-links span { margin-left: 6px; }
.explorer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.game-tabs { display: flex; gap: 4px; background: var(--alt); border: 1px solid var(--line); padding: 4px; border-radius: 8px; }
.game-tabs button { background: transparent; color: var(--secondary); padding: 9px 17px; border-radius: 5px; font-size: 12px; }
.game-tabs button[aria-selected=true] { color: white; background: var(--sage); box-shadow: inset 0 0 0 1px #46665030; }
.game-tabs button:hover { color: var(--text); }
.game-tabs button[aria-selected=true]:hover { color: white; }
.compare-toggle { background: none; color: var(--accent); padding: 8px 0; font-size: 11px; }
.compare-toggle span { margin-left: 7px; }
.game-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.stage-view { display: grid; grid-template-columns: 1.8fr 1fr; min-height: 460px; }
.zoom-button { position: relative; padding: 0; text-align: left; }
.stage-image { background: var(--media); display: grid; align-items: center; }
.stage-image>img { width: 100%; height: 100%; object-fit: contain; }
.stage-version { position: absolute; left: 16px; top: 16px; font: 10px var(--mono); color: #fffefa; padding: 6px 9px; background: #292d29e8; border: 1px solid #ffffff55; border-radius: 5px; }
.stage-copy { padding: 28px; }
.stage-kicker { color: var(--accent); font: 9px/1.5 var(--mono); letter-spacing: .1em; }
.stage-copy h3 { font-size: 25px; line-height: 1.25; margin-top: 11px; }
.stage-copy>p { font-size: 12px; color: var(--secondary); line-height: 1.85; margin-top: 14px; }
.stage-copy ul { padding: 0; list-style: none; margin: 16px 0; color: var(--secondary); font-size: 11px; line-height: 2; }
.stage-copy li::before { content: '+'; color: var(--sage); margin-right: 8px; font-family: var(--mono); }
.detail-image { padding: 0; display: block; background: none; width: 100%; border-top: 1px solid var(--line); padding-top: 15px; }
.detail-image>img { width: 100%; height: 86px; object-fit: cover; border-radius: 4px; }
.detail-image>span { display: block; font-size: 9px; color: var(--muted); margin-top: 8px; }
.version-switcher { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }
.version-switcher button { padding: 18px 24px; display: flex; align-items: center; gap: 13px; background: var(--alt); text-align: left; }
.version-switcher button+button { border-left: 1px solid var(--line); }
.version-switcher button[aria-pressed=true] { background: var(--accent-soft); box-shadow: inset 0 2px var(--accent); }
.version-dot { height: 6px; width: 6px; background: #929688; border-radius: 50%; flex-shrink: 0; }
.version-switcher button[aria-pressed=true] .version-dot { background: var(--sage); }
.version-switcher strong { display: block; font: 600 12px var(--mono); color: var(--text); }
.version-switcher small { display: block; font-size: 10px; color: var(--muted); margin-top: 5px; }
.figure-note { font-size: 10px; line-height: 1.8; color: var(--muted); margin-top: 15px; }
.comparison-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: var(--line); }
.comparison-card { background: var(--surface); padding-bottom: 22px; }
.comparison-card>button { display: block; padding: 0; width: 100%; background: var(--media); }
.comparison-card img { width: 100%; aspect-ratio: 1.6; object-fit: contain; }
.comparison-card h3 { padding: 19px 20px 0; font-size: 17px; line-height: 1.4; }
.comparison-card h3 small { display: block; color: var(--accent); font: 10px var(--mono); margin-bottom: 10px; }
.comparison-card p { padding: 11px 20px 0; color: var(--secondary); font-size: 11px; line-height: 1.85; }
.comparing .version-switcher { display: none; }
/* Results */
.results-section { background: var(--alt); border-block: 1px solid var(--line); }
.results-layout { display: grid; grid-template-columns: 1fr 1.45fr; gap: 25px; }
.overall-panel,.category-panel { padding: 29px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; }
.panel-kicker { color: var(--muted); font-size: 9px; }
.main-score { font-size: 68px; font-weight: 600; line-height: 1.1; letter-spacing: -3px; color: var(--sage); margin-top: 17px; font-variant-numeric: tabular-nums; }
.main-score>span { font-size: 14px; color: var(--muted); font-weight: 400; letter-spacing: 0; margin-left: 10px; }
.score-gain { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--sage); margin-top: 12px; }
.score-gain .icon { width: 14px; }
.score-staircase { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-top: 29px; }
.score-staircase>div>span { font-size: 10px; color: var(--muted); }
.score-staircase strong { display: block; font-size: 23px; font-weight: 550; margin-top: 3px; font-variant-numeric: tabular-nums; }
.score-staircase>div>div { height: 4px; background: linear-gradient(to right,var(--accent) var(--value),var(--raised) var(--value)); margin-top: 10px; border-radius: 3px; }
.score-staircase>div:last-child>div { background: linear-gradient(to right,var(--sage) var(--value),var(--raised) var(--value)); }
.score-footnote { margin-top: 21px; color: var(--muted); font-size: 10px; }
.chart-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.chart-header h3 { font-size: 17px; letter-spacing: -.3px; }
.chart-controls { display: flex; gap: 2px; border: 1px solid var(--line); border-radius: 5px; padding: 3px; }
.chart-controls button { background: none; font: 10px var(--mono); padding: 6px 8px; border-radius: 3px; color: var(--muted); }
.chart-controls button[aria-pressed=true] { background: var(--sage); color: white; }
.chart-scale { display: flex; justify-content: space-between; margin: 24px 47px 14px 107px; color: var(--muted); font: 9px var(--mono); }
.category-chart { display: grid; gap: 21px; }
.chart-row { display: grid; grid-template-columns: 95px 1fr 36px; align-items: center; gap: 12px; }
.chart-label { color: var(--secondary); font-size: 11px; }
.bar-track { position: relative; height: 12px; background: var(--raised); border-radius: 2px; }
.bar-fill { height: 100%; background: #587c60; border-radius: 2px; transition: width .35s ease; }
.bar-reference { position: absolute; width: 2px; height: 20px; top: -4px; border: 1px solid #292d29; }
.chart-value { font: 11px var(--mono); text-align: right; color: var(--text); }
.chart-legend { display: flex; gap: 7px; align-items: center; margin-top: 27px; margin-left: 107px; color: var(--muted); font-size: 9px; flex-wrap: wrap; }
.legend-marker { width: 8px; height: 8px; background: #587c60; display: inline-block; }
.legend-outline { height: 12px; width: 2px; border: 1px solid #292d29; margin-left: 8px; }
.results-table { margin-top: 28px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--surface); }
.results-table summary { padding: 17px 21px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 12px; font-weight: 550; list-style: none; }
.results-table summary::-webkit-details-marker { display: none; }
.results-table summary span { font-size: 20px; font-weight: 300; color: var(--accent); }
.results-table[open] summary span { transform: rotate(45deg); }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
caption { text-align: left; padding: 0 21px 13px; font-size: 10px; color: var(--muted); }
th,td { padding: 13px 15px; border-top: 1px solid var(--line); text-align: right; white-space: nowrap; }
thead th { font: 10px var(--mono); color: var(--muted); background: var(--alt); }
th:first-child { text-align: left; padding-left: 21px; }
tbody th { font-weight: 400; color: var(--secondary); }
td { color: var(--secondary); }
.highlight-row { background: var(--sage-soft); }.highlight-row th,.highlight-row td { color: var(--text); font-weight: 600; }
.gameasg-strip { display: grid; grid-template-columns: 1.5fr repeat(3,1fr); align-items: center; margin-top: 36px; padding-top: 31px; border-top: 1px solid var(--line); gap: 24px; }
.gameasg-strip .eyebrow { font-size: 8px; color: var(--muted); }
.gameasg-strip h3 { font-size: 20px; margin-top: 7px; }
.gameasg-strip p { font-size: 10px; color: var(--muted); margin-top: 8px; }
.small-metric { border-left: 1px solid var(--line); padding-left: 26px; }
.small-metric>strong { display: block; font-size: 32px; font-weight: 500; line-height: 1.4; letter-spacing: -1px; }
.small-metric strong span { font-size: 14px; color: var(--muted); margin-left: 3px; }
.small-metric>span { color: var(--muted); font-size: 10px; }
/* Exploration, citation, footer */
.exploration-section { display: grid; gap: 36px; scroll-margin-top: 90px; }
.exploration-copy { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; }
.exploration-summary p { color: var(--secondary); font-size: 13px; line-height: 1.85; margin: 0 0 14px; }
.exploration-full-view { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 12px; margin-top: 5px; }
.exploration-full-view:hover { color: var(--accent-hover); }
.exploration-figure { min-width: 0; }
.exploration-frame { display: block; width: 100%; border: 0; border-radius: 16px; height: 750px; }
.exploration-fallback { width: 100%; height: auto; border-radius: 12px; }
.exploration-section figcaption { color: var(--muted); font-size: 10px; line-height: 1.8; margin-top: 14px; }
.exploration-section figcaption a { color: var(--accent); white-space: nowrap; }
.citation-section { display: grid; grid-template-columns: .8fr 1.3fr; gap: 65px; border-top: 1px solid var(--line); padding-block: 60px 80px; }
.citation-intro>p:not(.eyebrow) { font-size: 12px; color: var(--secondary); margin-top: 20px; }
.citation-links { display: flex; gap: 21px; margin-top: 24px; font-size: 11px; color: var(--accent); }
.citation-links a { display: flex; align-items: center; gap: 5px; }.citation-links .icon { width: 13px; height: 13px; }
.bibtex-block { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: hidden; }
.bibtex-header { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 12px 18px; border-bottom: 1px solid var(--line); font: 9px var(--mono); color: var(--muted); }
.bibtex-header button { padding: 5px 8px; background: var(--raised); border: 1px solid var(--line); border-radius: 5px; font-size: 10px; color: var(--secondary); display: flex; align-items: center; gap: 7px; }
.bibtex-header .icon { width: 13px; height: 13px; }
.bibtex-block pre { margin: 0; padding: 20px; overflow-x: auto; font: 11px/1.85 var(--mono); color: var(--secondary); }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 25px; border-top: 1px solid var(--line); padding-block: 28px; }
.site-footer .brand { font-size: 12px; }
.site-footer p { font-size: 9px; color: var(--muted); }.site-footer p span { margin: 0 5px; }
.site-footer>a:last-child { font-size: 10px; color: var(--accent); white-space: nowrap; }
.noscript-note { padding: 20px; text-align: center; color: var(--secondary); }
dialog { border: 1px solid var(--line); padding: 0; border-radius: 10px; width: fit-content; max-width: min(1280px,95vw); max-height: 94vh; background: var(--surface); color: var(--text); box-shadow: 0 22px 90px #23271f40; }
dialog::backdrop { background: #23271fbb; backdrop-filter: blur(7px); }
.dialog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 9px 17px; color: var(--muted); font: 9px var(--mono); letter-spacing: .04em; }
.dialog-toolbar button { background: none; padding: 5px; display: grid; place-items: center; }
#dialog-image { max-height: 76vh; max-width: 100%; width: auto; margin: auto; object-fit: contain; }
#dialog-caption { font-size: 11px; color: var(--secondary); line-height: 1.8; padding: 13px 18px; max-width: 980px; }
/* Selected, on-demand browser games */
.play-section { border-bottom: 1px solid var(--line); }
.play-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.play-card { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.play-cover { display: block; position: relative; overflow: hidden; background: var(--media); }
.play-cover img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .3s; }
.play-cover:hover img { transform: scale(1.025); }
.play-cover-action { position: absolute; right: 15px; bottom: 15px; display: flex; gap: 20px; align-items: center; padding: 8px 13px; background: #fffefaeb; border: 1px solid #fffefa70; border-radius: 6px; color: var(--text); font-size: 11px; font-weight: 600; }
.play-card-body { padding: 23px 25px 20px; }
.play-card-meta { display: flex; justify-content: space-between; gap: 12px; font: 9px/1.6 var(--mono); color: var(--sage); letter-spacing: .06em; }
.play-card-meta span:last-child { color: var(--muted); letter-spacing: 0; }
.play-card h3 { margin-top: 12px; font: 500 27px/1.2 var(--serif); letter-spacing: -.025em; }
.play-card-body>p { margin-top: 10px; min-height: 44px; font-size: 12px; line-height: 1.8; color: var(--secondary); }
.play-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 15px; border-top: 1px solid var(--line); margin-top: 18px; padding-top: 15px; }
.play-card-bottom>span { color: var(--muted); font-size: 10px; }
.play-card-bottom>a { color: var(--accent); font-size: 12px; font-weight: 600; }
.play-card-bottom>a span { margin-left: 8px; }
.play-section-note { margin-top: 20px; font-size: 11px; color: var(--muted); }
@media(max-width:760px) { .play-grid{gap:18px;}.play-card-body{padding:19px;}.play-card h3{font-size:24px;}.play-card-meta{font-size:8px;flex-wrap:wrap;gap:5px;}.play-card-body>p{font-size:11px;min-height:60px;}.site-header nav{gap:10px;} }
@media(max-width:600px) { .play-grid{grid-template-columns:1fr;}.play-card-body>p{min-height:0;}.play-card-meta{font-size:9px;}.play-section-note{line-height:1.8;} }

/* Responsive layout */
@media (min-width:1600px) { .hero{padding-top:80px;} .showcase{margin-top:60px;} }
@media (max-width:1050px) {
  .nav-wrap { width: calc(100% - 44px); }.site-header nav{gap:16px;}.brand{font-size:13px;}
  .container,.container-wide{width:calc(100% - 56px);}.hero h1{font-size:6.3vw;}.hero{padding-top:50px;}
  .method-section{padding:35px 28px 25px;}.method-top h2{font-size:30px;}.method-top>p{max-width:250px;}.role{padding-inline:17px;}
  .stage-view{grid-template-columns:1.6fr 1fr;min-height:420px;}.stage-copy{padding:23px;}.stage-copy h3{font-size:23px;}
  .results-layout{gap:18px;}.overall-panel,.category-panel{padding:24px;}.main-score{font-size:58px;}.chart-header h3{font-size:15px;}
  .chart-row{grid-template-columns:78px 1fr 34px;gap:10px;}.chart-scale{margin-left:88px;margin-right:44px;}.chart-legend{margin-left:88px;}
  .exploration-section{gap:32px;}.small-metric{padding-left:20px;}.small-metric>strong{font-size:28px;}.site-footer p{max-width:260px;text-align:center;}
}
@media (max-width:760px) {
  html{scroll-padding-top:86px;}.site-header{height:62px;}.brand-light{display:none;}.nav-wrap{gap:12px;}.site-header nav{gap:12px;font-size:10px;}.site-header nav a[href='#overview'],.site-header nav a[href='#citation']{display:none;}
  .container,.container-wide{width:calc(100% - 40px);}.nav-wrap{width:calc(100% - 36px);}.section-space{padding-block:64px;}
  .hero{padding-top:45px;}.hero-eyebrow{font-size:8px;letter-spacing:.11em;padding:5px 9px;margin-bottom:24px;}.hero h1{font-size:clamp(39px,8.4vw,60px);line-height:1.12;max-width:600px;margin:auto;}.title-accent{display:block;}
  .hero-subtitle{font-size:17px;line-height:1.5;margin-top:20px;}.authors{font-size:13px;gap:8px 19px;margin-top:24px;}.authors sup{font-size:8px;}.institutions{font-size:10px;gap:4px 7px;margin-top:11px;}.author-notes{font-size:9px;margin-top:7px;}
  .hero-actions{margin-top:25px;gap:8px;}.button{padding:9px 13px;font-size:11px;gap:7px;}.button .icon{width:14px;height:14px;}
  .showcase{margin-top:35px;gap:11px;}.showcase-label{padding:10px 11px;}.showcase-label small{font-size:7px;letter-spacing:0;}.showcase-label strong{font-size:11px;}.tiny-plus{display:none;}
  .hero-bottom{font-size:9px;gap:20px;line-height:1.8;}.hero-bottom>span{max-width:250px;}.hero-bottom a{max-width:150px;}.highlights{margin-top:30px;}.highlights>div{padding:18px 17px;}.highlights strong{font-size:25px;}.highlights strong span{font-size:12px;}.highlights p{font-size:9px;line-height:1.7;}
  .intro-body>p:not(.eyebrow){font-size:13px;}
  .method-section{padding:29px 24px 23px;}.method-top{display:block;}.method-top h2{font-size:30px;}.method-top>p{margin-top:17px;max-width:100%;}.method-figure{margin-top:24px;}.method-figure button{padding:8px;}.method-figure figcaption{font-size:9px;}
  .role-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 0;margin-top:26px;}.role{padding:0 17px;}.role:nth-child(odd){border-left:0;padding-left:0;}.role:nth-child(even){padding-right:0;}.role>img{width:60px;height:60px;margin-block:17px 11px;}.role h3{font-size:19px;}.role p{font-size:11px;}.role-top{font-size:8px;}.loop-footer{font-size:8px;gap:8px;text-align:center;}
  .section-title-row{display:block;margin-bottom:26px;}.section-deck{margin-top:17px;max-width:100%;font-size:12px;}.section-deck br{display:none;}.eyebrow{font-size:9px;margin-bottom:13px;}
  .hero .hero-film{margin-top:30px;}
  .evolution-film{margin-bottom:30px;}.film-header{padding:20px;flex-wrap:wrap;gap:16px;}.film-header h3{font-size:23px;}.film-actions{gap:15px;}.evolution-film figcaption{display:block;padding:17px 20px 20px;}.film-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:14px;}.film-source-note{font-size:9px;}
  .explorer-toolbar{flex-wrap:wrap;gap:10px;}.game-tabs{width:100%;justify-content:space-between;}.game-tabs button{padding:8px 11px;font-size:11px;flex:1;}.compare-toggle{margin-left:auto;font-size:10px;padding:3px 0;}
  .stage-view{grid-template-columns:1fr;min-height:0;}.stage-image>img{width:100%;aspect-ratio:1.6;max-height:440px;}.stage-copy{display:grid;grid-template-columns:1fr 120px;gap:0 20px;padding:23px;}.stage-copy .stage-kicker,.stage-copy h3,.stage-copy>p{grid-column:1/-1;}.stage-copy h3{font-size:24px;}.stage-copy ul{margin-bottom:0;align-self:center;font-size:10px;}.detail-image{margin-top:15px;padding-top:0;border:0;align-self:center;}.detail-image>img{height:65px;}.detail-image>span{font-size:8px;line-height:1.6;}
  .version-switcher button{padding:16px 13px;gap:10px;}.version-switcher small{font-size:8px;line-height:1.6;}.version-switcher strong{font-size:11px;}.version-dot{width:5px;height:5px;}.figure-note{font-size:9px;}.comparison-grid{grid-template-columns:1fr;}.comparison-card h3{font-size:20px;}.comparison-card p{font-size:12px;}.comparison-card img{max-height:400px;}
  .results-layout{grid-template-columns:1fr;gap:18px;}.main-score{font-size:66px;}.category-panel{padding-block:26px 29px;}.chart-header h3{font-size:17px;}.chart-row{grid-template-columns:80px 1fr 36px;}.chart-scale{margin-left:90px;margin-top:26px;}.chart-legend{margin-left:90px;}.chart-controls button{padding:7px 9px;}.score-staircase strong{font-size:26px;}
  .gameasg-strip{grid-template-columns:repeat(3,1fr);gap:24px 10px;}.gameasg-strip>div:first-child{grid-column:1/-1;}.small-metric{padding-left:14px;}.small-metric>span{font-size:9px;}.small-metric>strong{font-size:29px;}
  .exploration-section{gap:28px;}.exploration-copy{grid-template-columns:1fr;gap:20px;}.exploration-copy h2 br{display:none;}.exploration-frame{height:1250px;}
  .citation-section{grid-template-columns:1fr;gap:27px;padding-block:42px 54px;}.citation-intro>p:not(.eyebrow){margin-top:15px;}.citation-links{margin-top:17px;}.bibtex-block pre{font-size:10px;padding:18px;}
  .site-footer{flex-wrap:wrap;padding-block:25px;gap:15px;}.site-footer p{order:3;max-width:none;text-align:left;width:100%;font-size:8px;}.site-footer>a:last-child{font-size:9px;}.site-footer .brand{font-size:11px;}
  .image-arrow{opacity:1;width:24px;height:24px;right:8px;bottom:8px;}.image-arrow .icon{width:12px;height:12px;}.dialog-toolbar{font-size:7px;padding:7px 12px;}#dialog-caption{font-size:10px;}
}
@media (max-width:520px) {
  .authors{display:grid;grid-template-columns:repeat(2,max-content);gap:8px 23px;}
  .showcase{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;}.center-card{grid-column:1/-1;grid-row:1;}.showcase-label strong{font-size:12px;}.showcase-label small{font-size:8px;}.showcase-label{padding:11px 13px;}
  .hero-bottom>span{max-width:180px;}.hero-bottom a{max-width:120px;}.highlights>div{padding:17px 11px;}.highlights strong{font-size:23px;}.highlights strong span{font-size:10px;display:block;margin-top:2px;}.highlights p{font-size:8px;margin-top:7px;}
  .method-top h2{font-size:28px;}.stage-copy{grid-template-columns:1fr 95px;gap:0 12px;}.small-metric>strong{font-size:27px;}.small-metric strong span{font-size:12px;}
}
@media (max-width:380px) {
  .site-header nav{gap:11px;}.site-header nav a[href='#method']{display:none;}.brand{font-size:12px;gap:5px;}.brand-mark{width:24px;}.nav-paper{padding:5px 8px;}.hero-subtitle{font-size:15px;}.authors{font-size:12px;gap:8px 13px;}.hero h1{font-size:40px;}.hero-eyebrow{font-size:7px;}.institutions{font-size:9px;}.institution-dot{display:none;}.button{padding:9px 11px;font-size:10px;}.hero-actions{gap:6px;}
  .method-section{padding-inline:19px;}.stage-copy{padding:20px;}.version-switcher button{padding-inline:10px;gap:7px;}.overall-panel,.category-panel{padding:22px 18px;}.main-score{font-size:61px;}.chart-header h3{font-size:14px;}.chart-row{grid-template-columns:69px 1fr 32px;gap:8px;}.chart-scale{margin-left:77px;margin-right:40px;}.chart-legend{margin-left:77px;font-size:8px;}.chart-label,.chart-value{font-size:10px;}.game-tabs button{font-size:10px;padding-inline:7px;}.small-metric>strong{font-size:24px;}.small-metric{padding-left:10px;}
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto;}*,*::before,*::after{animation:none!important;transition:none!important;}.button:hover,.showcase-card:hover,.showcase-card:hover img{transform:none;} }