/* Research-first layout; keep the existing ranking and cost-chart components. */
.game-explorer { display:grid; grid-template-columns:300px minmax(0,1fr); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.game-guide { padding:26px; background:#f5f8f7; border-right:1px solid var(--line); }
.game-guide label { display:block; font-size:14px; font-weight:600; margin-bottom:8px; }
.game-guide select { width:100%; padding:11px 10px; border:1px solid #b9cbc5; border-radius:5px; background:white; color:var(--ink); font-size:16px; }
.game-guide h3 { margin:24px 0 12px; }
.game-guide h4 { margin:22px 0 8px; font-size:14px; }
.game-guide p { font-size:15px; line-height:1.7; }
.game-guide .small-note { font-size:12px; margin:22px 0 14px; }
.game-guide>a { font-size:14px; }
.game-replay { min-width:0; display:flex; flex-direction:column; background:white; }
.replay-heading { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; padding:18px 24px; border-bottom:1px solid var(--line); font-size:14px; }
.replay-heading span { font-size:12px; color:var(--muted); }
.sample-action { margin:0; padding:14px 24px; background:#edf5f1; display:flex; align-items:center; gap:16px; font-size:13px; font-weight:500; }
.sample-action>span { text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.sample-action code { font-size:14px; overflow-wrap:anywhere; min-width:0; }
#example-output { margin:0; height:520px; overflow:auto; scrollbar-gutter:stable; color:#293d37; }
#example-output:focus-visible { outline:2px solid var(--green); outline-offset:-2px; }
.transcript-entry + .transcript-entry { border-top:1px solid var(--line); }
.transcript-entry pre { white-space:pre-wrap; overflow-wrap:anywhere; margin:0; padding:24px; font:14px/1.75 ui-monospace,SFMono-Regular,Consolas,monospace; }
.transcript-end { margin:0; border-top:1px solid var(--line); padding:18px 24px; font-size:12px; color:var(--muted); }
.game-example-link { color:var(--green); margin-top:auto; padding-top:16px; font-size:14px; text-decoration:underline; text-underline-offset:4px; }
@media(max-width:760px) {
  .game-explorer { grid-template-columns:1fr; }
  .game-guide { border-right:0; border-bottom:1px solid var(--line); padding:22px; }
  .game-guide h3 { margin-top:20px; }
  #example-output { height:460px; }
  .transcript-entry pre { padding:18px; }
  .replay-heading,.sample-action { padding:14px 18px; }
}
:root { --ink:#182526; --text:#485456; --muted:#637174; --line:#dfe5e5; --paper:#fff; --green:#165c50; --lime:#e6f1ed; --radius:10px; }
body { font-family:'DM Sans',sans-serif; }
.wrap { width:min(1120px,calc(100% - 64px)); }
.header { background:#ffffffef; }
.nav { height:72px; gap:20px; }
.nav nav { gap:24px; }
h1,h2,h3 { letter-spacing:-.035em; }
h2 { font-size:clamp(28px,3.5vw,36px); line-height:1.22; }
h3 { font-size:20px; line-height:1.35; }
.hero { display:block; text-align:center; padding:70px 0 48px; }
.hero-copy { max-width:850px; margin:auto; }
.hero h1 { font-size:clamp(40px,5.8vw,66px); margin:20px 0; }
.hero h1 em { color:var(--green); }
.hero-description { max-width:none; font-size:24px; margin:0 auto 16px; }
.hero-detail { max-width:760px; margin:auto; font-size:18px; line-height:1.75; }
.hero .actions { justify-content:center; margin:27px 0 16px; }
.button { padding:10px 21px; border-radius:6px; }
/* A little arcade character, without distracting from the research. */
.hero .play-button {
  gap:10px;
  padding:9px 19px;
  background:#e4f5bf;
  color:#164e43;
  border:1.5px solid #286455;
  border-radius:14px;
  box-shadow:0 4px 0 #286455;
  white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.play-controller { flex:none; transform:rotate(-9deg); transition:transform .2s ease; }
.play-arrow { font-size:19px; font-weight:500; transition:transform .2s ease; }
.hero .play-button:active { transform:translateY(3px); box-shadow:0 1px 0 #286455; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .hero .play-button:hover { transform:translateY(-3px) rotate(-1deg); box-shadow:0 7px 0 #286455; background:#d9f2a4; }
  .play-button:hover .play-controller { transform:rotate(7deg); }
  .play-button:hover .play-arrow { transform:translate(2px,-2px); }
}
@media(prefers-reduced-motion:reduce) {
  .hero .play-button:hover,.hero .play-button:active { transform:none; }
}
.eyebrow { font-size:12px; color:var(--green); letter-spacing:.12em; }
.small-note { font-size:13px; line-height:1.7; }
.stats { grid-template-columns:repeat(3,1fr); padding:22px 0; }
.stats strong { font-size:20px; letter-spacing:-.025em; }
.stats span { font-size:13px; text-align:center; margin-top:5px; }
.section { padding-top:64px; padding-bottom:64px; }
.section-heading { max-width:800px; margin-bottom:30px; }
.section-heading h2 { margin:12px 0 16px; }
.section-heading>p:last-child { max-width:780px; font-size:17px; }
.text-link { color:var(--green); text-decoration:underline; text-underline-offset:4px; }
.trace-heading { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:16px 0; border-top:1px solid var(--line); font-size:14px; }
.trace-heading span { color:var(--muted); }
.trace-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.trace-grid li { padding:24px; border-right:1px solid var(--line); }
.trace-grid li:last-child { border:0; background:#f5faf8; }
.trace-step { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; margin-bottom:20px; }
.trace-step b { color:var(--green); font-size:18px; font-variant-numeric:tabular-nums; }
.trace-grid h3 { margin-bottom:12px; }
.trace-grid p { font-size:16px; }
.trace-grid code { display:block; margin-top:20px; font-size:12px; overflow-wrap:anywhere; color:#45565a; }
.trace-grid blockquote { font-size:14px; margin:20px 0 0; border-left:2px solid #91b7aa; padding-left:12px; color:var(--text); }
.results-section { background:#f7f9f9; }
.metric-grid { gap:24px; margin-bottom:26px; }
.metric-grid b { font-size:18px; }
.tabs { background:#f0f3f3; }
.rank-first { background:#e2efea; }
td.best { background:#eef6f2; }
.ranked-metric { box-shadow:inset 0 -2px #8bad9f; }
th.ranked-metric { background:#e9f1ee; }
.table-foot { font-size:13px; }
.research-figure { margin:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.figure-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding:20px; border-bottom:1px solid var(--line); }
.figure-toolbar>a { font-size:14px; }
.curve-scroll { padding:20px; overflow-x:auto; }
.curve-scroll img { display:block; width:100%; max-width:920px; min-width:640px; height:auto; margin:auto; }
.research-figure figcaption { padding:20px 24px; border-top:1px solid var(--line); background:#f8faf9; color:var(--muted); font-size:14px; }
.cost-figure { border-radius:10px; }
.cost-figure figcaption { background:#f8faf9; }
.cost-figure figcaption p { font-size:14px; }
.cost-figure figcaption .cost-source { font-size:13px; }
.principles { gap:32px; }
.principles .number { margin-bottom:12px; }
.protocol { background:#f3f7f5; border-radius:10px; gap:35px; margin-top:32px; padding:30px; grid-template-columns:1fr 1.6fr; }
.protocol h3 { font-size:23px; }
.protocol p { font-size:16px; }
.protocol p+p { margin-top:12px; }
#evaluation-protocol { margin:0 0 30px; scroll-margin-top:90px; }
#evaluation-protocol h2 { font-size:25px; margin-top:13px; line-height:1.35; }
.protocol-details { margin-top:20px; border-block:1px solid var(--line); padding:18px 0; }
.protocol-details summary { cursor:pointer; font-size:16px; font-weight:600; }
.protocol-details p { padding-top:14px; font-size:16px; max-width:900px; }
#benchmark,#games { border-bottom:1px solid var(--line); }
.game-grid { grid-template-columns:repeat(4,1fr); gap:14px; }
.game-card { border-radius:8px; padding:20px; }
.game-icon { font-size:24px; margin-bottom:12px; }
.game-card p { font-size:14px; }
.resource-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.resource-grid>a { padding:24px; border:1px solid var(--line); border-radius:8px; display:flex; flex-direction:column; }
.resource-grid>a:hover { border-color:var(--green); }
.resource-grid p { font-size:16px; margin:12px 0 22px; }
.resource-grid span { color:var(--green); font-size:14px; margin-top:auto; }
.resources>.small-note { margin-top:20px; }
.footer { border-top:1px solid var(--line); padding-block:28px; }
.footer-links { display:flex; flex-wrap:wrap; gap:18px; }
.footer-links a { text-decoration:underline; text-underline-offset:4px; }
@media(max-width:1000px) {
  .nav nav { gap:16px; font-size:14px; }
  .brand { font-size:17px; }
  .game-grid { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:760px) {
  .wrap { width:calc(100% - 36px); }
  .hero { padding:42px 0 32px; }
  .hero h1 { font-size:42px; }
  .hero-description { font-size:21px; }
  .hero-detail { font-size:16px; }
  .hero .eyebrow { font-size:11px; }
  .stats { grid-template-columns:1fr; padding:0; gap:0; }
  .stats>div { align-items:flex-start; padding:14px 4px; border:0; border-bottom:1px solid var(--line); }
  .stats strong { font-size:18px; }
  .stats span { text-align:left; }
  .section { padding-block:44px; }
  .trace-grid,.resource-grid { grid-template-columns:1fr; }
  .trace-grid li { border-right:0; border-bottom:1px solid var(--line); padding:22px; }
  .trace-step { margin-bottom:12px; }
  .trace-heading { font-size:13px; }
  .protocol { grid-template-columns:1fr; padding:24px; gap:20px; }
  .game-grid { grid-template-columns:1fr 1fr; }
  .game-card { padding:17px; }
  .figure-toolbar { padding:16px; }
  .figure-toolbar .tabs { width:100%; }
  .figure-toolbar .tabs button { flex:1; font-size:13px; padding:9px; }
  .curve-scroll { padding:12px; }
  .research-figure figcaption { padding:18px; }
  .footer p { font-size:13px; }
}

/* Game-studio identity: playful framing, quiet and readable research panels. */
:root { --paper:#fffefb; --line:#dce5de; }
.brand { gap:6px; }
.brand-play { color:var(--green); }
.header { background:#fffefbf2; }
.nav-play { border-color:#abc7bb; background:#f0f6eb; border-radius:10px; }
.hero.wrap {
  position:relative;
  isolation:isolate;
  width:min(1360px,calc(100% - 32px));
  margin:18px auto 0;
  padding:76px 170px 62px;
  border:1px solid #e1e9d9;
  border-radius:30px;
  background:radial-gradient(ellipse at 50% 45%,#fffefb 26%,#fffefb00 75%),radial-gradient(#65836926 .8px,transparent .8px),linear-gradient(120deg,#edf5e9,#faf8eb 65%,#eaf3ee);
  background-size:auto,18px 18px,auto;
}
.hero-copy { position:relative; z-index:1; max-width:820px; }
.hero h1 { font-size:clamp(42px,5.3vw,72px); letter-spacing:-.055em; }
.hero h1 em { position:relative; }
.hero h1 em::after { content:""; position:absolute; left:2%; right:0; bottom:0; height:8px; background:#d4eaa8; border-radius:50%; z-index:-1; transform:rotate(-3deg); }
.hero-description { font-size:clamp(20px,2vw,24px); }
.hero-detail { max-width:720px; font-size:17px; }
.hero .eyebrow { max-width:540px; margin:auto; }
.hero .secondary { background:#ffffffd9; border-color:#cbd7c9; border-radius:10px; }
.hero .primary { border-radius:10px; }
.hero-tokens { position:absolute; inset:0; pointer-events:none; }
.game-token { position:absolute; width:116px; padding:8px 10px 12px; background:#fffef9; border:1px solid #d7dfd2; border-radius:24px; box-shadow:0 5px 0 #d7dfd280,0 12px 24px #284b3610; }
.game-token svg { display:block; width:94px; height:94px; }
.game-token span { display:block; font:600 11px/1.5 'Manrope',sans-serif; color:#55675d; letter-spacing:.02em; }
.token-butterfly { top:60px; left:35px; transform:rotate(-12deg); background:#eff5fc; }
.token-ghost { top:68px; right:35px; transform:rotate(10deg); background:#f2eef9; }
.token-gem { bottom:54px; left:46px; transform:rotate(8deg); background:#e9f4ee; }
.token-tea { bottom:44px; right:43px; transform:rotate(-9deg); background:#fbf2df; }
.section-heading .eyebrow { display:flex; align-items:center; gap:10px; }
.section-heading .eyebrow::before { content:""; width:9px; height:9px; border:2px solid #638b71; border-radius:3px; transform:rotate(-9deg); }
.game-explorer { border:1px solid #c9d7ca; border-radius:20px; box-shadow:0 8px 0 #e9eee4,0 20px 44px #284b360a; }
.game-guide { background:linear-gradient(160deg,#f0f5e7,#f8f9f2); padding:28px; }
.game-guide select { border-radius:10px; padding:12px; box-shadow:0 3px 0 #dce6d7; }
.game-guide h3 { font-size:22px; }
.game-replay { background:#172e29; }
.replay-heading { background:#203b33; color:#f3f7eb; border-color:#40584b; }
.replay-heading strong { display:flex; align-items:center; gap:10px; }
.replay-heading strong::before { content:""; width:8px; height:8px; background:#d5eba8; border-radius:50%; box-shadow:0 0 0 4px #d5eba81a; }
.replay-heading span { color:#c2d0c7; }
#example-output { color:#edf3e8; scrollbar-color:#638573 #172e29; }
.sample-action { background:#28463b; color:#e2f4b9; }
.sample-action>span { color:#b7cfb7; }
.transcript-entry+.transcript-entry,.transcript-end { border-color:#3c584b; }
.transcript-end { color:#bdcebd; }
#example-output:focus-visible { outline-color:#d5eba8; }
.results-section { margin-top:10px; background:#f3f6f0; border-block:1px solid #e0e7db; }
.protocol { background:#e8eee0; border:1px solid #d7e1d1; border-radius:18px; }
.metric-grid>div { background:#fffefb; border:1px solid #dfe5da; border-radius:14px; padding:18px; }
.metric-grid { gap:14px; }
.results-card,.research-figure,.cost-figure { background:#fff; border-radius:18px; box-shadow:0 8px 24px #283c3206; }
.rank-first { background:#e5efb9; border:1px solid #c9d895; color:#36522c; border-radius:50%; }
.principles { gap:20px; }
.principles article { padding:26px; border:1px solid var(--line); border-radius:18px; background:#f8faf4; }
.principles article:nth-child(2) { background:#f7f3eb; }
.principles article:nth-child(3) { background:#f0f5f7; }
.principles .number { display:inline-grid; place-items:center; width:34px; height:34px; border:1px solid #c5d5c5; border-radius:10px; background:#fffefb; color:#51745c; font-weight:700; }
/* Website cost explorer: readable labels, exact values on demand. */
.cost-explorer { background:#fff; }
.cost-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:24px 26px 18px; }
.cost-toolbar>a { color:var(--muted); font-size:13px; text-decoration:underline; text-underline-offset:4px; }
.cost-filters { display:flex; flex-wrap:wrap; gap:6px; }
.cost-filters button { padding:8px 13px; border:1px solid transparent; border-radius:8px; background:transparent; color:#57675e; font-size:13px; }
.cost-filters button:hover { background:#f4f7f4; }
.cost-filters button[aria-pressed="true"] { background:#edf4ee; color:#175f46; border-color:#d3e3d6; font-weight:700; }
.cost-filters button:disabled { cursor:default; }
.cost-legend { display:flex; align-items:center; flex-wrap:wrap; gap:12px 22px; margin:0 26px; padding:0 0 20px; color:#617167; font-size:12px; }
.cost-key { display:inline-flex; align-items:center; gap:7px; }
.cost-key::before { content:""; width:8px; height:8px; border-radius:50%; background:#1674be; }
.key-methods::before { background:#9473c4; }
.key-claude::before { background:#167457; }
.key-codex::before { background:#c15439; border-radius:1px; transform:rotate(45deg); }
.key-frontier::before { width:20px; height:0; border-top:2px dashed #829d8f; background:transparent; border-radius:0; }
#cost-count { margin-left:auto; color:#7b877f; }
.cost-plot-scroll { overflow-x:auto; scrollbar-color:#bdcfc2 #f6f8f5; }
#cost-plot { min-width:640px; position:relative; }
#cost-plot>svg,#cost-plot>img { display:block; width:100%; height:auto; }
#cost-plot .cost-point:focus-visible { outline:none; }
.cost-tooltip { position:absolute; z-index:2; pointer-events:none; display:grid; gap:4px; padding:12px 16px; background:#fff; border:1px solid #d5e1d8; border-radius:10px; box-shadow:0 6px 24px #233b2c1a; color:#233b2c; }
.cost-tooltip small { color:#6c7b70; font-size:11px; }
.cost-tooltip strong { font-size:14px; }
.cost-tooltip span { font-size:12px; color:#516358; white-space:nowrap; font-variant-numeric:tabular-nums; }
.cost-inspector { margin:4px 26px 0; min-height:68px; display:flex; align-items:center; padding:16px 0; border-top:1px solid #e8eee9; }
#cost-hint { font-size:14px; color:#66766d; }
#cost-selection { display:flex; align-items:center; flex-wrap:wrap; gap:10px 28px; width:100%; font-size:13px; color:#66766d; }
#cost-selection>strong { color:#203b2d; font-size:15px; margin-right:auto; }
#cost-selection b { color:#243c2e; font-size:17px; margin-left:8px; font-variant-numeric:tabular-nums; }
.cost-explorer figcaption { display:block; padding:18px 26px; background:#f8faf7; border-color:#e8eee9; color:#728078; font-size:12px; line-height:1.75; }
.cost-no-script { padding:12px 26px; font-size:13px; }
@media(max-width:760px) {
  .cost-toolbar { padding:18px 16px 14px; gap:10px; }
  .cost-filters { gap:4px; }
  .cost-filters button { padding:7px 9px; font-size:12px; }
  .cost-legend { margin:0 18px; gap:10px 14px; }
  #cost-count { margin-left:0; }
  .cost-inspector { margin-inline:18px; min-height:100px; }
  #cost-selection { gap:8px 18px; }
  #cost-selection>strong { width:100%; }
  .cost-explorer figcaption { padding:16px 18px; }
}
@media(max-width:1100px) {
  .hero.wrap { padding:34px 30px 42px; }
  .hero-tokens { position:relative; display:flex; justify-content:center; gap:20px; margin-bottom:32px; }
  .game-token { position:static; width:74px; padding:3px; border-radius:18px; }
  .game-token svg { width:66px; height:66px; }
  .game-token span { display:none; }
}
@media(max-width:760px) {
  .hero.wrap { width:calc(100% - 20px); margin-top:10px; padding:27px 18px 30px; border-radius:22px; }
  .hero-tokens { gap:16px; margin-bottom:28px; }
  .game-token { width:54px; border-radius:14px; padding:2px; }
  .game-token svg { width:48px; height:48px; }
  .hero h1 { font-size:clamp(35px,8.5vw,53px); margin:18px 0; }
  .hero-detail { font-size:16px; }
  .hero .actions { gap:10px; }
  .hero .button { padding-inline:16px; }
  .hero .play-button { padding-inline:16px; }
  .hero .small-note { font-size:12px; }
  .brand-light { display:inline; }
  .brand { font-size:16px; }
  .nav { gap:10px; }
  .game-guide { padding:22px; }
  .metric-grid>div { padding:14px; }
  .principles article { padding:22px; }
}