@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap');
:root{--bg:#111211;--surface:#202221;--hover:#363936;--fg:#cfdacd;--muted:#777d77;--green:#42c07e;--red:#c15f5f;--border:#363936;font-family:'JetBrains Mono',ui-monospace,monospace;color:var(--fg);background:var(--bg);font-size:14px;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0}::selection{background:var(--green);color:var(--bg)}a{color:inherit;text-decoration:none}button,select{font:inherit;color:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer;border:1px solid var(--border);background:transparent;border-radius:6px;padding:9px 12px}button:hover{background:var(--hover)}button:focus-visible,a:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--green);outline-offset:5px}button:disabled{opacity:.35;cursor:default}.nav{max-width:1440px;margin:auto;padding:26px 48px;display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid var(--surface)}.brand pre{font-size:10px;line-height:1.05;margin:0;color:var(--green)}nav{display:flex;align-items:center;gap:32px;font-size:12px}.text-button{border:0;padding:0;background:none;border-radius:0}.text-button:hover,a:hover{color:var(--green);background:none}main{max-width:1440px;margin:auto;padding:0 48px}.hero{padding:100px 0 90px;position:relative}.dot,.leave-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);vertical-align:middle}.leave-dot{background:var(--muted);margin-left:18px}h1{font-size:clamp(48px,6.8vw,96px);line-height:1.02;letter-spacing:-.075em;font-weight:600;margin:32px 0}.accent{color:var(--green)}.hero p{font-size:16px;line-height:1.8;max-width:660px;color:var(--muted)}.hero-meta{display:flex;gap:28px;margin-top:32px;font-size:11px;color:var(--fg)}.hero-meta span+span{border-left:1px solid var(--border);padding-left:28px}section{scroll-margin-top:30px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:24px}h2{font-size:clamp(22px,2.4vw,32px);letter-spacing:-.045em;font-weight:600;margin:12px 0 0}.section-note{font-size:11px;color:var(--muted);white-space:nowrap}.legend{font-size:11px;color:var(--muted);line-height:1.9;margin:0 0 20px}.legend>span{margin:0 10px}.info{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--muted);border-radius:50%;width:16px;height:16px;padding:0;font-size:10px;vertical-align:middle;color:var(--muted)}.table-scroll{overflow:auto;border:1px solid var(--border);border-radius:8px}table{border-collapse:separate;border-spacing:0;width:100%;font-size:12px;min-width:1150px}th,td{border-bottom:1px solid var(--surface);padding:22px 14px;text-align:center}th{font-weight:400;color:var(--muted);height:95px;background:var(--bg)}th:first-child,td:first-child{position:sticky;left:0;z-index:1;background:var(--bg);text-align:left;min-width:280px;max-width:330px;border-right:1px solid var(--surface);padding-left:24px}th:first-child{z-index:2}thead th .model-logo{display:block;width:27px;height:27px;object-fit:contain;margin:0 auto 12px;filter:brightness(0) invert(.8)}thead th .model-logo.jev{filter:none;border-radius:5px}th .model-trigger{border:0;padding:0;background:transparent;font-size:11px;min-width:60px}th .model-trigger:hover{color:var(--green)}.disabled{color:var(--muted)}.disabled .model-logo{opacity:.45}.question-top{display:flex;align-items:center;gap:10px}.number{color:var(--muted);font-size:10px;width:19px;flex:none}.question-title{line-height:1.6;flex:1}.detail-button{font-size:10px;color:var(--muted);margin:10px 0 0 29px;text-decoration:underline;text-underline-offset:4px}.result{display:grid;gap:7px;white-space:nowrap}.choice{font-size:13px;font-weight:600}.pull{color:var(--green)}.leave{color:var(--fg)}.custom{color:var(--fg);font-size:10px;white-space:normal;line-height:1.5}.metric{font-size:10px;color:var(--muted)}.metric b{font-weight:400;color:var(--fg)}.future-cell{font-size:18px;border:0;color:var(--muted);background:transparent}.human-cell{font-size:10px;color:var(--muted);line-height:1.7}.group-row td{position:static!important;background:var(--surface)!important;padding:12px 24px;text-align:left;font-size:10px;color:var(--muted);border-right:0!important}tr:last-child td{border-bottom:0}.table-footer{display:flex;justify-content:space-between;gap:20px;font-size:10px;color:var(--muted);padding:18px 0;line-height:1.8}.table-footer .dot{margin-right:8px}#statistics{padding:80px 0 60px}.bento{display:grid;grid-template-columns:1fr 1fr;gap:16px}.chart-card{background:var(--surface);border-radius:10px;padding:28px 30px}.chart-top{display:flex;align-items:center;justify-content:space-between;gap:20px}.chart-top h3{font-size:15px;font-weight:400;margin:0}.chart-summary{font-size:32px;letter-spacing:-.06em;margin:24px 0 5px}.chart-note{font-size:10px;color:var(--muted);line-height:1.8;margin:0 0 28px}.bar-row{display:grid;grid-template-columns:100px 1fr 76px;align-items:center;gap:12px;margin:18px 0;font-size:10px}.bar-track{height:7px;background:var(--hover);border-radius:2px;overflow:hidden}.bar{height:100%;background:var(--green)}.bar-value{text-align:right;font-variant-numeric:tabular-nums}.stability-detail{font-size:10px;color:var(--muted);line-height:1.8;border-top:1px solid var(--hover);padding-top:14px;margin-top:20px}.run-strip{display:flex;justify-content:space-between;gap:20px;margin-top:20px;border-top:1px solid var(--border);padding:24px 0;font-size:11px}.run-strip span{color:var(--muted)}.run-strip strong{display:block;font-weight:400;color:var(--fg);margin-top:8px}footer{border-top:1px solid var(--border);padding:28px 0 40px;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:var(--muted)}dialog{background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:12px;width:min(1180px,calc(100% - 48px));max-height:calc(100dvh - 48px);padding:0;overscroll-behavior:contain}dialog::backdrop{background:rgba(17,18,17,.86);backdrop-filter:blur(8px)}body:has(dialog[open]){overflow:hidden}.dialog-nav{position:sticky;top:0;z-index:3;background:var(--bg);padding:20px 28px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted)}.dialog-nav>div{display:flex;gap:8px}.close{font-size:20px;line-height:1;padding:7px 11px}#detail-content{padding:32px}.context{font-size:14px;line-height:1.9;max-width:850px;color:var(--muted)}.context strong{color:var(--fg);font-weight:400}.options{display:grid;gap:12px;margin:22px 0 32px}.option{padding:15px 18px;background:var(--surface);font-size:12px;line-height:1.7;border-radius:6px}.option b{color:var(--green);font-weight:400;margin-right:12px}.modal-models{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.model-card{background:var(--surface);border-radius:8px;padding:20px;font-size:11px;overflow:hidden}.model-card h3{font-size:12px;line-height:1.6;margin:0 0 18px}.model-card .result{margin-bottom:20px}.counts{line-height:1.9;color:var(--muted);font-size:10px}.counts div{display:flex;justify-content:space-between;gap:8px}.code-toggle{font-size:11px;margin:28px 0}summary{cursor:pointer;color:var(--green);padding:12px 0}pre.payload,pre.response{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface);padding:18px;border-radius:8px;font:10px/1.7 'JetBrains Mono',monospace;margin:12px 0}pre.response{padding:0}.payload-select{margin:10px 0;background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:8px;max-width:100%}.trial{display:flex;align-items:center;gap:14px;font-size:11px;margin:24px 0 14px}.trial select{background:var(--surface);padding:8px;border:1px solid var(--border);border-radius:5px}.about-body{padding:36px;max-width:850px}.about-body h2{font-size:36px;margin-bottom:28px}.about-body p{font-size:13px;line-height:1.9;color:var(--muted)}.about-body h3{font-size:14px;font-weight:400;margin-top:30px}.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:30px 0;padding:24px;background:var(--surface);border-radius:8px}.method-grid span{font-size:10px;color:var(--muted)}.method-grid strong{display:block;font-size:20px;font-weight:400;margin-top:8px}.sources{font-size:10px;color:var(--muted);margin-top:30px}.sources a{color:var(--green)}#tooltip{position:fixed;z-index:20;max-width:min(340px,calc(100vw - 24px));padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:7px;box-shadow:0 8px 30px #111211;font-size:11px;line-height:1.7;pointer-events:none}.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}@media(min-width:1500px){.hero{padding-top:120px}}@media(max-width:800px){.nav{padding:24px;align-items:start;flex-direction:column;gap:24px}nav{gap:24px}main{padding:0 24px}.hero{padding:64px 0}.hero p{font-size:14px}.section-head{display:block}.section-note{display:block;margin-top:18px}.bento{grid-template-columns:1fr}.table-footer,footer{flex-direction:column}.run-strip{flex-wrap:wrap}.run-strip>div{width:40%}.modal-models{grid-template-columns:1fr 1fr}dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px)}#detail-content,.about-body{padding:24px}.dialog-nav{padding:16px 24px}.about-body h2{font-size:28px}.chart-card{padding:24px}.bar-row{grid-template-columns:85px 1fr 70px}th:first-child,td:first-child{min-width:210px;max-width:210px;padding-left:16px}.question-title{font-size:11px}.hero-meta{gap:16px}.hero-meta span+span{padding-left:16px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Design-system layout and shape tokens. */
:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-10:40px;--radius-1:4px}.nav{padding-inline:var(--space-10)}main{padding-inline:var(--space-10)}.chart-card,.model-card,.method-grid,.table-scroll{border-radius:0}.option,.payload,.response,button,.payload-select,.trial select,#tooltip{border-radius:var(--radius-1)}.info{border-radius:50%}.chart-card{padding:var(--space-6)}@media(max-width:767px){main,.nav{padding-inline:var(--space-4)}.modal-models{grid-template-columns:1fr}.about-body,#detail-content{padding:var(--space-6)}}

/* Block ASCII treatment from Weirdos. */
.ascii-logo{display:inline-block;white-space:pre;font:600 8px/1.1 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0;color:transparent;background:linear-gradient(#48765e,#274033);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero{text-align:center}.hero p{margin-inline:auto}.hero-meta{justify-content:center}.hero h1{margin-top:0}
@media(max-width:800px){.ascii-logo{font-size:clamp(4px,1vw,8px)}}

#tooltip{pointer-events:auto}#tooltip .detail-button{display:block;margin:12px 0 0;color:var(--green);padding:4px 0}

/* Larger reading sizes with less supporting copy. */
nav{font-size:16px;gap:24px}.hero p{font-size:20px;line-height:1.6;max-width:620px}
table{font-size:15px;min-width:1320px}th .model-trigger,.human-cell,.group-row td{font-size:14px}.question-title{font-size:16px;line-height:1.5}.number{font-size:12px;width:22px}.choice{font-size:18px}.custom{font-size:14px}.metric{font-size:14px}.result{gap:8px}.info{width:20px;height:20px;font-size:12px;flex:none}
.table-footer,footer{font-size:14px}.chart-top h3{font-size:20px}.chart-summary{font-size:38px}.chart-note,.stability-detail{font-size:14px}.bar-row{font-size:13px;grid-template-columns:110px 1fr 90px}.run-strip{font-size:14px}
.dialog-nav{font-size:14px}.context,.about-body p{font-size:17px;line-height:1.7}.option{font-size:15px}.model-card h3{font-size:15px}.counts{font-size:13px}.code-toggle,.trial,.sources{font-size:14px}pre.payload,pre.response{font-size:13px}.about-body h3{font-size:20px}#tooltip{font-size:15px;line-height:1.6;max-width:min(400px,calc(100vw - 24px))}#tooltip .detail-button{font-size:15px}
@media(max-width:800px){nav{font-size:15px;gap:20px}.hero p{font-size:18px}.question-title{font-size:15px}.bar-row{grid-template-columns:100px 1fr 86px;gap:8px}.chart-top h3{font-size:18px}.context,.about-body p{font-size:16px}}

.chart-top+.chart-note{margin-top:20px}

.metrics-line{display:flex;justify-content:center;align-items:center;gap:12px;white-space:nowrap}.metrics-line .metric{font-size:12px}.model-card .metrics-line{justify-content:flex-start}

/* Full-width benchmark with readable result cells. */
.nav,main{max-width:none;width:100%;padding-inline:32px}
table{width:100%;min-width:1480px;font-size:16px}
.question-title{font-size:18px}.choice{font-size:20px}.custom{font-size:16px}
.metrics-line .metric{font-size:15px}.metrics-line{gap:16px}
th .model-trigger,.human-cell,.group-row td{font-size:16px}
th,td{padding-block:24px}.question-top{gap:12px}
@media(max-width:800px){.nav,main{padding-inline:16px}.question-title{font-size:17px}}

/* Slightly smaller reading sizes. */
nav{font-size:15px}.hero p{font-size:18px}
table{font-size:15px}.question-title{font-size:16px}.choice{font-size:18px}.custom{font-size:15px}.metrics-line .metric{font-size:14px}
th .model-trigger,.human-cell,.group-row td{font-size:14px}
.chart-top h3{font-size:18px}.chart-summary{font-size:34px}.chart-note,.stability-detail,.run-strip,footer{font-size:13px}
.context,.about-body p{font-size:16px}.option{font-size:14px}.about-body h3{font-size:18px}#tooltip,#tooltip .detail-button{font-size:14px}
@media(max-width:800px){nav{font-size:14px}.hero p{font-size:17px}.question-title{font-size:16px}.context,.about-body p{font-size:15px}}

/* Equal model columns with a horizontally pinned dilemma column. */
:is(#results-table,#results-header-table){table-layout:fixed;min-width:1340px;width:100%}
:is(#results-table,#results-header-table) .question-col{width:360px}
:is(#results-table,#results-header-table) th,:is(#results-table,#results-header-table) td{position:static;z-index:auto;min-width:0;max-width:none}
:is(#results-table,#results-header-table) th{height:auto;padding:14px 12px}
#results-table td{padding:16px 12px}
#results-table .group-row td{padding:8px 18px}
#results-table .group-title{display:block;position:sticky;left:18px;width:max-content;max-width:calc(100vw - 68px)}
.results-header{position:sticky;top:0;z-index:4;background:var(--bg);border:1px solid var(--border);border-radius:8px 8px 0 0}
.results-header-scroll{overflow:clip;border-radius:inherit}
#results{timeline-scope:--results-x}
#results .table-scroll{scroll-timeline-name:--results-x;scroll-timeline-axis:inline}
.native-table-timeline #results-header-table{animation:results-header-pan 1s linear both;animation-timeline:--results-x}
@keyframes results-header-pan{from{transform:translateX(0)}to{transform:translateX(var(--results-scroll-end,0px))}}
#results-table .question-row>td:first-child{position:sticky;left:0;z-index:2;background:var(--bg);border-right:1px solid var(--border)}
#results-header-table th:first-child{position:relative;z-index:3;background:var(--bg);border-right:1px solid var(--border)}
.native-table-timeline #results-header-table th:first-child{animation:results-dilemma-pin 1s linear both;animation-timeline:--results-x}
@keyframes results-dilemma-pin{from{transform:translateX(0)}to{transform:translateX(calc(0px - var(--results-scroll-end,0px)))}}

.results-header-scroll::-webkit-scrollbar{display:none}
#results-table thead.sr-only{position:absolute}
#results .table-scroll{border-top:0;border-radius:0 0 8px 8px}
:is(#results-table,#results-header-table) th:first-child,#results-table td:first-child{padding-left:18px}
#results-table .metrics-line{display:grid;justify-content:center;gap:3px;font-size:12px;line-height:1.4;color:var(--muted)}
#results-table .metrics-line .metric{font-size:12px;color:var(--muted)}
.model-card .metrics-line{display:grid;justify-content:start;gap:3px}.model-card .metric{font-size:12px;color:var(--muted)}
#results-table .disabled{color:var(--muted);cursor:default}
#results-table .future-cell{display:inline-block;padding:0}
#results-table .row-highlight>td,:is(#results-table,#results-header-table) .column-highlight{background:color-mix(in srgb,var(--bg) 80%,var(--surface))}
#results-table .row-highlight>.column-highlight{background:color-mix(in srgb,var(--bg) 60%,var(--surface))}
#tooltip-text{white-space:pre-line}

.choice.tie{color:#d29922}

/* Keep carousel geometry based on the first question. */
#details[open]{display:flex;flex-direction:column;overflow:hidden}
#details .dialog-nav{position:static;flex:none}
#details #detail-content{min-height:0;overflow:auto;flex:1;scrollbar-gutter:stable}
#details .context{color:var(--fg)}
.question-navigation{align-items:center;gap:8px}
#question-position{margin-right:12px}
.question-navigation button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0}

/* Level ASCII railway orbit; copy remains above the decoration. */
.hero{min-height:800px;padding:80px 0;display:grid;place-items:center;overflow:hidden;isolation:isolate}
.hero-copy{position:relative;z-index:1;max-width:760px}
.hero h1{margin:0 0 32px}
.hero p{margin-block:0}
#railway-orbit{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
@media(min-width:1500px){.hero{padding-top:80px}}
@media(max-width:800px){.hero{min-height:640px;padding:64px 0}.hero-copy{max-width:100%}.hero h1{margin-bottom:24px}.hero p{max-width:320px}}

/* Keep every decision label at the same size. */
.choice{font-size:15px}

/* Front train layer crosses the copy; back half stays behind it. */
.hero{min-height:660px;padding:40px 0 64px}
#railway-orbit{z-index:0}#railway-front{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
#train-whistle{position:absolute;z-index:3;display:block;padding:0;border:0;background:transparent;border-radius:0;cursor:pointer;touch-action:manipulation}
#train-whistle:hover,#train-whistle:active{background:transparent}
#train-whistle:focus-visible{outline:1px dashed var(--green);outline-offset:5px}
@media(min-width:1500px){.hero{padding-top:40px}}
@media(max-width:800px){.hero{min-height:540px;padding:32px 0 48px}}
#train-whistle[hidden]{display:none}
/* More room for the detailed locomotive, with a fully contained mobile orbit. */
.hero{min-height:740px;padding:40px 0 64px}
@media(max-width:800px){.hero{min-height:620px;padding:32px 0 48px}.hero h1{font-size:clamp(30px,10.5vw,44px)}.hero p{max-width:300px}}

.hero-copy{width:min(760px,100%)}
@media(max-width:800px){.hero p{font-size:16px;max-width:320px}}

/* Give the orbit the whole viewport width without changing the results gutters. */
.hero{margin-inline:-32px;width:calc(100% + 64px)}
.hero-copy{padding-inline:32px}
@media(max-width:800px){.hero{margin-inline:-16px;width:calc(100% + 32px)}.hero-copy{padding-inline:16px}}

/* Size the graphic within the hero instead of enlarging the page with width. */
@media(min-width:801px){.hero{min-height:clamp(380px,calc(100svh - 108px),600px)}}

/* Compact table typography on phones and small tablets. */
@media(max-width:800px){
  :is(#results-table,#results-header-table){font-size:13px;min-width:1010px}
  :is(#results-table,#results-header-table) .question-col{width:210px}
  :is(#results-table,#results-header-table) th{padding:8px}
  #results-table td{padding:10px 8px}
  :is(#results-table,#results-header-table) th:first-child,#results-table td:first-child{padding-left:12px}
  #results-table .group-row td{padding:6px 12px}
  #results-table .group-title{left:12px}
  #results-table .question-top{gap:8px}
  #results-table .number{width:18px}
  #results-table .result{gap:4px}
  #results-header-table .model-logo{width:20px;height:20px;margin-bottom:6px}
  #results-table .question-title,#results-table .choice{font-size:13px}
  #results-table .number{font-size:10px}
  #results-header-table .model-trigger,#results-table .group-row td{font-size:12px}
  #results-table .metrics-line,#results-table .metrics-line .metric{font-size:10px}
  #results-table .future-cell{font-size:16px}
  .hero{min-height:clamp(320px,55svh,400px);padding:24px 0 32px}
}

.menu-toggle{display:none}
@media(min-width:801px){.nav nav{gap:clamp(24px,3vw,40px)}}
@media(max-width:800px){
  .nav{position:relative;flex-direction:row;align-items:center;gap:12px;padding-block:16px}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:10px;border:0;flex:none}
  .menu-toggle .menu-close{display:none}
  .nav.menu-open .menu-bars{display:none}
  .nav.menu-open .menu-close{display:block}
  .nav nav{display:none;position:absolute;right:16px;top:calc(100% - 4px);z-index:10;width:200px;flex-direction:column;align-items:stretch;gap:0;padding:8px;background:var(--bg);border:1px solid var(--border);border-radius:4px}
  .nav.menu-open nav{display:flex}
  .nav nav a,.nav nav .text-button{display:block;padding:12px;text-align:left}
  .nav nav a:hover,.nav nav .text-button:hover{background:var(--surface)}
}

@media(max-width:800px){footer{align-items:center;text-align:center}}

.footer-links{display:flex;align-items:center;gap:24px}
@media(max-width:800px){.footer-links{flex-direction:column;gap:20px}}

.footer-credit{display:flex;flex-direction:column;gap:4px}
.footer-credit a{text-decoration:underline;text-underline-offset:3px}

.stability-detail{margin-top:24px}
.stability-detail p{margin:0 0 10px}
.stability-count{display:flex;justify-content:space-between;gap:16px;line-height:1.9}