inductiveML/monarch-webgpu

1/* MONARCH uses the shared research article system from v9.css. */2.monarch-research .secbar { scroll-margin-top: 24px; }3.monarch-research .overview-callout,4.monarch-research .monarch-stats,5.monarch-research .demo-section { grid-column: 1 / -1; min-width: 0; }6.monarch-stats .val small { font: 11px var(--mono); color: var(--mute); }7.monarch-research .monarch-article { min-width: 0; }8.monarch-article > h2:first-child { margin-top: 12px; }9.monarch-article p a { color: var(--amber); text-decoration: underline; text-underline-offset: 4px; }10.monarch-article code { font: .77em var(--mono); color: var(--amber); background: #ff6a1a15; padding: 2px 5px; border-radius: 4px; overflow-wrap: anywhere; }11.monarch-article .subheading { font: 500 23px/1.4 var(--display); margin: 36px 0 15px; }12.monarch-callout > span { font: 10px/1.7 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--amber); }13.monarch-research .monarch-callout p { font-size: 19px; }14.monarch-research .muted-callout p { font-size: 17px; }15.monarch-article .kernel-flow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 25px 18px; margin: 30px 0; border: 1px solid var(--line); border-radius: 12px; background: #ffffff04; }16.kernel-flow > span { font: 11px/1.7 var(--mono); text-align: center; color: var(--ink-2); }17.kernel-flow small { font-size: 9px; color: var(--mute); }18.kernel-flow b { font: 18px var(--mono); color: var(--accent); }19.monarch-article .method-list { list-style: none; margin: 36px 0; padding: 0; }20.method-list > li { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 19px; margin-bottom: 30px; }21.method-list > li > span { border-top: 1px solid var(--line); padding-top: 7px; color: var(--accent); font: 10px/1.8 var(--mono); }22.method-list h3 { font: 500 21px/1.4 var(--display); color: var(--ink); margin: 0 0 9px; }23.monarch-article .method-list p { font-size: 16px; margin: 0; }24.throughput-plot { display: grid; gap: 21px; margin: 32px 0 28px; }25.throughput-row { display: grid; grid-template-columns: 140px minmax(30px,1fr) 80px; gap: 18px; align-items: center; }26.throughput-row strong { display: block; font: 12px var(--display); margin-bottom: 5px; }27.throughput-row > div:first-child span { font: 9px/1.5 var(--mono); color: var(--mute); }28.throughput-track { height: 8px; background: #ff6a1a16; }29.throughput-track > span { display: block; height: 100%; background: #925334; }30.throughput-track > span.selected { background: var(--accent); }31.throughput-row > b { font: 17px/1.3 var(--display); text-align: right; color: var(--amber); font-variant-numeric: tabular-nums; }32.throughput-row > b small { display: block; font: 8px var(--mono); color: var(--mute); }33.table-scroll { overflow-x: auto; max-width: 100%; min-width: 0; margin: 30px 0; }34.monarch-article .v9-table { min-width: 460px; font-size: 11px; }35.monarch-article caption { font: 12px/1.6 var(--reading); text-align: left; color: var(--mute); margin-bottom: 14px; }36.visibility-comparison { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 12px; margin: 30px 0; background: #ffffff04; }37.visibility-comparison > div { padding: 23px; min-width: 0; }38.visibility-comparison > div + div { border-left: 1px solid var(--line); }39.visibility-comparison > div > span { font: 9px/1.6 var(--mono); color: var(--mute); }40.visibility-comparison strong { display: block; color: var(--amber); font: 23px/1.3 var(--display); margin: 15px 0; }41.monarch-article .visibility-comparison p { font-size: 14px; margin: 0; }42.evidence-links { border-top: 1px solid var(--line); }43.evidence-links > a { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); padding: 19px 0; }44.evidence-links > a > span { font: 16px var(--display); }45.evidence-links small { display: block; font: 10px/1.6 var(--mono); color: var(--mute); margin-top: 6px; }46.evidence-links b { font: 18px var(--mono); color: var(--accent); }47.evidence-links a:hover > span { color: var(--amber); }48.monarch-article p.credits { font: 13px/1.7 var(--reading); color: var(--mute); margin-top: 25px; }49 50/* Browser demo: the same crimson panels, monospaced labels, and pill controls. */51.monarch-demo { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #ffffff04; }52.demo-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--line); }53.demo-top > div { display: flex; align-items: center; gap: 10px; }54.mono { font: 10px var(--mono); letter-spacing: .12em; }55.demo-local { font: 10px var(--mono); color: var(--mute); }56.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }57.status-dot.is-ready { background: #afd497; box-shadow: 0 0 0 4px #afd49712; }58.demo-layout { display: grid; grid-template-columns: minmax(0,1fr) 284px; }59.demo-workspace { padding: 28px; min-width: 0; }60.demo-mode { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 25px; }61.demo-mode button,62.prompt-suggestions button,63.solid-button { border: 1px solid var(--line); border-radius: 999px; font: 10px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; }64.demo-mode button { padding: 8px 15px; color: var(--mute); }65.demo-mode button[aria-pressed=true] { color: var(--bg); background: var(--accent); border-color: var(--accent); }66.control-label { display: block; font: 12px var(--display); color: var(--ink-2); margin-bottom: 11px; }67.demo-workspace textarea { display: block; resize: vertical; min-height: 105px; max-height: 300px; width: 100%; padding: 14px 15px; border: 1px solid var(--line); border-radius: 8px; background: #0003; color: var(--ink); font: 16px/1.55 var(--reading); }68.demo-workspace textarea:focus { outline: 1px solid var(--amber); border-color: var(--amber); }69.prompt-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 23px; }70.prompt-suggestions button { padding: 6px 11px; color: var(--mute); font-size: 9px; letter-spacing: .03em; }71.prompt-suggestions button:hover,72.prompt-suggestions button[aria-pressed=true] { border-color: #ff6a1a88; color: var(--amber); background: #ff6a1a0b; }73.demo-output { min-height: 175px; max-height: 440px; overflow: auto; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 20px; scrollbar-color: #73412a transparent; }74.output-label { font: 9px var(--mono); letter-spacing: .16em; color: var(--mute); }75.output-placeholder { font: 16px/1.65 var(--reading); color: var(--mute); margin: 14px 0 0; }76.output-placeholder span { font-size: 14px; color: var(--faint); }77.generation-cursor { color: var(--amber); }78.demo-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }79.solid-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 25px; padding: 12px 18px; border-color: var(--accent); background: var(--accent); color: var(--bg); }80.solid-button:hover:not(:disabled) { background: var(--amber); border-color: var(--amber); }81.solid-button span { font-size: 10px; opacity: .8; }82.solid-button:disabled { opacity: .4; }83.demo-actions .solid-button { min-width: 185px; }84.stop-button { background: transparent; color: var(--amber); }85.token-limit { display: flex; align-items: center; gap: 8px; font: 10px var(--mono); color: var(--mute); }86.monarch-demo select { background: var(--panel); color: var(--ink); border: 1px solid var(--line); padding: 8px 10px; border-radius: 5px; font: 11px var(--mono); max-width: 100%; cursor: pointer; }87.monarch-demo select:disabled { opacity: .5; }88.unload-button { margin-left: auto; font: 10px var(--mono); color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }89.demo-status { min-height: 15px; margin: 13px 0 0; color: var(--mute); font: 10px/1.5 var(--mono); overflow-wrap: anywhere; }90.demo-meter { display: flex; flex-direction: column; border-left: 1px solid var(--line); padding: 31px 26px 24px; background: #ff6a1a04; }91.meter-label { font: 8px/1.5 var(--mono); letter-spacing: .09em; color: var(--mute); }92.meter-number { font: 66px/1.15 var(--display); color: var(--accent); letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin-top: 20px; }93.meter-unit { font: 10px/1.5 var(--mono); letter-spacing: .11em; color: var(--ink-2); }94.meter-device { font: 10px/1.6 var(--mono); color: var(--mute); overflow-wrap: anywhere; margin: 17px 0 22px; min-height: 32px; }95.meter-details { margin: 0 0 24px; font: 10px/1.5 var(--mono); }96.meter-details > div { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); }97.meter-details dt { color: var(--mute); }98.meter-details dd { margin: 0; text-align: right; white-space: nowrap; }99.meter-footnote { margin-top: auto; }100.meter-footnote > span { font: 10px var(--display); color: var(--ink-2); }101.meter-footnote p { font: 12px/1.55 var(--reading); color: var(--mute); margin: 8px 0 0; }102.demo-bottom { display: flex; justify-content: space-between; gap: 20px; padding: 14px 24px; border-top: 1px solid var(--line); font: 9px/1.6 var(--mono); color: var(--mute); }103.demo-bottom a { color: var(--amber); white-space: nowrap; }104.under-demo { font: 12px/1.6 var(--reading); color: var(--mute); margin: 15px 0 0; max-width: 100ch; }105.demo-error { background: #7e251226; border: 1px solid #d7704e55; color: #ffd1b5; padding: 13px 16px; border-radius: 8px; font: 13px/1.6 var(--display); margin-bottom: 16px; }106.load-progress { height: 3px; background: #4a281b; margin: 8px 0 19px; overflow: hidden; }107.load-progress > span { display: block; height: 100%; background: var(--accent); transition: width .18s; }108.benchmark-controls { display: flex; align-items: center; gap: 15px; }109.benchmark-controls > span { font: 10px/1.6 var(--mono); color: var(--mute); }110.benchmark-explainer { color: var(--ink-2); font: 15px/1.5 var(--reading); margin: 16px 0 24px; }111.run-chart { height: 205px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; padding: 0 15px; margin-bottom: 22px; }112.run-column { display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; }113.run-track { height: 137px; width: 100%; background: repeating-linear-gradient(to top,var(--line-2) 0px,var(--line-2) 1px,transparent 1px,transparent 34px); position: relative; border-bottom: 1px solid var(--line); }114.run-bar { position: absolute; bottom: 0; left: 20%; width: 60%; background: var(--accent); border-radius: 2px 2px 0 0; transition: height .3s; }115.run-column strong { font: 16px var(--display); color: var(--amber); font-variant-numeric: tabular-nums; }116.run-column > span { font: 9px var(--mono); color: var(--mute); }117.benchmark-summary { display: flex; justify-content: space-between; gap: 12px; font: 10px/1.6 var(--mono); margin-bottom: 19px; color: var(--mute); }118.benchmark-summary button { color: var(--amber); text-decoration: underline; text-underline-offset: 4px; }119.measurement-note { color: var(--amber); background: #ff6a1a0d; border-left: 2px solid var(--accent); padding: 12px 15px; font: 13px/1.5 var(--reading); margin: 16px 0; }120.demo-placeholder { padding: 65px 30px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font: 14px var(--display); color: var(--mute); }121.monarch-page :focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }122.monarch-page button:disabled { cursor: not-allowed; opacity: .5; }123 124/* Markdown keeps streaming structure intact, including unfinished code fences. */125.markdown-response { margin-top: 14px; font: 16px/1.7 var(--reading); color: var(--ink-2); overflow-wrap: anywhere; }126.markdown-response > :first-child { margin-top: 0; }127.markdown-response > :last-child { margin-bottom: 0; }128.markdown-response p { margin: 0 0 14px; white-space: normal; }129.markdown-response h1,130.markdown-response h2,131.markdown-response h3,132.markdown-response h4,133.markdown-response h5,134.markdown-response h6 { font-family: var(--display); font-weight: 500; color: var(--ink); line-height: 1.3; margin: 22px 0 10px; }135.markdown-response h1 { font-size: 27px; }136.markdown-response h2 { font-size: 23px; }137.markdown-response h3 { font-size: 20px; }138.markdown-response h4,139.markdown-response h5,140.markdown-response h6 { font-size: 17px; }141.markdown-response strong { color: var(--ink); font-weight: 500; }142.markdown-response ul,143.markdown-response ol { margin: 10px 0 18px; padding-left: 25px; }144.markdown-response li { margin: 5px 0; }145.markdown-response li::marker { color: var(--amber); }146.markdown-response li > p { margin-bottom: 5px; }147.markdown-response .contains-task-list { list-style: none; padding-left: 4px; }148.markdown-response input[type=checkbox] { accent-color: var(--accent); margin-right: 8px; }149.markdown-response code { font: .82em/1.6 var(--mono); background: #ff6a1a12; color: var(--amber); border-radius: 4px; padding: 2px 5px; }150.markdown-response pre { padding: 16px 18px; margin: 16px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: #0004; white-space: pre; }151.markdown-response pre code { padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink-2); font: 12px/1.75 var(--mono); white-space: pre; overflow-wrap: normal; }152.markdown-response blockquote { border-left: 2px solid var(--accent); margin: 16px 0; padding: 2px 18px; color: var(--mute); }153.markdown-response blockquote p:last-child { margin-bottom: 0; }154.v9 .markdown-response a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }155.markdown-response hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }156.markdown-table { max-width: 100%; overflow-x: auto; margin: 16px 0; }157.markdown-table table { border-collapse: collapse; width: 100%; font: 12px/1.6 var(--mono); }158.markdown-table th,159.markdown-table td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; min-width: 95px; }160.markdown-table th { color: var(--amber); font-weight: 500; background: #ff6a1a0d; }161.markdown-image-alt { color: var(--mute); font-style: italic; }162 163@media(max-width:1024px) {164 .demo-layout { grid-template-columns: minmax(0,1fr) 230px; }165 .demo-workspace { padding: 22px; }166 .demo-meter { padding: 27px 20px; }167 .meter-number { font-size: 57px; }168 .meter-details { font-size: 9px; }169}170@media(max-width:760px) {171 .monarch-research .secbar .meta { display: none; }172 .monarch-research .secbar { grid-template-columns: 48px minmax(0,1fr); }173 .monarch-research .secbar .ttl { overflow-wrap: anywhere; }174 .demo-layout { display: flex; flex-direction: column; }175 .demo-workspace { padding: 20px 17px; }176 .demo-top { padding: 15px 17px; }177 .demo-local { font-size: 8px; }178 .demo-top .mono { font-size: 9px; }179 .demo-meter { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); border-left: 0; border-top: 1px solid var(--line); padding: 22px 18px; gap: 0 20px; }180 .meter-label { grid-column: 1 / -1; }181 .meter-number { grid-column: 1; font-size: 56px; margin-top: 12px; }182 .meter-unit { grid-column: 1; font-size: 9px; }183 .meter-device { grid-column: 1; font-size: 9px; margin-bottom: 0; margin-top: 13px; min-height: 0; }184 .meter-details { grid-column: 2; grid-row: 2 / 6; margin: 7px 0 0; font-size: 8px; }185 .meter-details > div { padding: 10px 0; gap: 5px; }186 .meter-footnote { grid-column: 1 / -1; margin-top: 17px; border-top: 1px solid var(--line); padding-top: 16px; }187 .demo-bottom { display: block; padding: 13px 17px; font-size: 8px; }188 .demo-bottom a { display: block; margin-top: 8px; }189 .demo-actions { gap: 13px; }190 .demo-actions .solid-button { min-width: 176px; padding: 12px 14px; }191 .token-limit { font-size: 9px; gap: 5px; }192 .token-limit select { padding: 8px 5px; font-size: 10px; }193 .benchmark-controls { gap: 10px; }194 .benchmark-controls > span { font-size: 9px; }195 .run-chart { gap: 13px; padding: 0; }196 .benchmark-summary { flex-wrap: wrap; font-size: 9px; }197 .monarch-article .kernel-flow { padding: 18px 10px; gap: 7px; }198 .kernel-flow > span { font-size: 9px; }199 .kernel-flow small { font-size: 8px; }200 .kernel-flow b { font-size: 14px; }201 .throughput-row { grid-template-columns: 108px minmax(0,1fr) 63px; gap: 10px; }202 .throughput-row > div:first-child span { font-size: 8px; }203 .throughput-row > b { font-size: 15px; }204 .visibility-comparison { grid-template-columns: 1fr; }205 .visibility-comparison > div + div { border-left: 0; border-top: 1px solid var(--line); }206 .method-list > li { grid-template-columns: 29px minmax(0,1fr); gap: 15px; }207 .evidence-links small { font-size: 9px; }208 .evidence-links > a > span { font-size: 15px; }209}210@media(max-width:640px) {211 .monarch-page .top-nav { gap: 14px; font-size: 9px; letter-spacing: .07em; }212 .monarch-page .top-nav a:last-child { display: none; }213 .monarch-page .mh-back { font-size: 9px; letter-spacing: .09em; }214 .monarch-page .page-kicker { font-size: 10px; letter-spacing: .14em; }215 .monarch-research .paper-hero .meta-rail .row { gap: 12px; }216 .prompt-suggestions { gap: 7px; }217 .prompt-suggestions button { font-size: 8px; padding: 6px 8px; }218 .monarch-research .monarch-callout p { font-size: 17px; }219}220@media(prefers-reduced-motion:reduce) { .monarch-page * { transition: none !important; } }221