inductiveML/monarch-webgpu
1
1/* Research article — crimson-dark reading surface (Inductive ML branding).2 Scoped to `.v9`; the homepage and inner pages use site.css only. */3 4.v9 {5 --bg: #140503;6 --panel: #1c0805;7 --ink: #fbf6ef;8 --ink-2: #e7d9cc;9 --mute: rgba(251, 246, 239, 0.62);10 --faint: rgba(251, 246, 239, 0.4);11 --line: rgba(251, 246, 239, 0.14);12 --line-2: rgba(251, 246, 239, 0.07);13 --accent: #ff6a1a;14 --amber: #ffb066;15 16 --display: "Space Grotesk", "Inter Tight", system-ui, sans-serif;17 --reading: "Spectral", Georgia, serif;18 --mono: "JetBrains Mono", ui-monospace, monospace;19 20 position: relative;21 z-index: 2;22 background: transparent;23 color: var(--ink);24 font-family: var(--mono);25 min-height: 100%;26 font-size: 13px;27 line-height: 1.6;28}29.v9 .pad {30 padding: clamp(36px, 5vw, 64px) var(--pad, clamp(26px, 5vw, 72px)) 72px;31}32 33.v9 a {34 color: inherit;35 text-decoration: none;36}37.v9 *,38.v9 *::before,39.v9 *::after {40 box-sizing: border-box;41}42.v9 ::selection {43 background: rgba(255, 106, 26, 0.32);44 color: #fff;45}46 47/* Grid */48.v9 .grid12 {49 display: grid;50 grid-template-columns: repeat(12, 1fr);51 gap: 16px;52}53 54/* Breadcrumb */55.v9 .crumb {56 grid-column: 1 / -1;57 display: flex;58 gap: 10px;59 align-items: center;60 font-family: var(--mono);61 font-size: 10px;62 letter-spacing: 0.16em;63 text-transform: uppercase;64 color: var(--mute);65 margin-bottom: 24px;66}67.v9 .crumb a:hover {68 color: var(--accent);69}70.v9 .crumb .sep {71 color: var(--line);72}73.v9 .crumb .here {74 color: var(--ink);75}76 77/* Section bars */78.v9 .secbar {79 grid-column: 1 / -1;80 display: grid;81 grid-template-columns: 60px 1fr auto;82 border-top: 1px solid var(--line);83 border-bottom: 1px solid var(--line-2);84 padding: 12px 0;85 margin: 64px 0 24px;86 font-family: var(--mono);87 font-size: 11px;88 letter-spacing: 0.16em;89 text-transform: uppercase;90}91.v9 .secbar .num {92 color: var(--accent);93 font-weight: 500;94}95.v9 .secbar .ttl {96 font-weight: 500;97 color: var(--ink);98}99.v9 .secbar .meta {100 color: var(--mute);101}102 103/* Paper hero */104.v9 .paper-hero {105 grid-column: 1 / -1;106 display: grid;107 grid-template-columns: repeat(12, 1fr);108 gap: 16px;109}110.v9 .paper-hero .head {111 grid-column: span 9;112}113.v9 .paper-hero .sub {114 font-family: var(--display);115 font-weight: 400;116 font-size: clamp(22px, 2.4vw, 30px);117 line-height: 1.32;118 letter-spacing: -0.005em;119 color: var(--ink-2);120 margin: 0 0 26px;121 max-width: 720px;122}123.v9 .paper-hero .sub em {124 font-style: italic;125 color: var(--amber);126}127.v9 .paper-hero .links {128 display: flex;129 gap: 14px;130 flex-wrap: wrap;131}132.v9 .paper-hero .meta-rail {133 grid-column: span 3;134 align-self: end;135 font-family: var(--mono);136 font-size: 11px;137 letter-spacing: 0.14em;138 text-transform: uppercase;139 color: var(--mute);140 border-top: 1px solid var(--line);141 padding-top: 10px;142}143.v9 .paper-hero .meta-rail .row {144 display: flex;145 justify-content: space-between;146 padding: 5px 0;147 border-bottom: 1px solid var(--line-2);148}149.v9 .paper-hero .meta-rail .row:last-child {150 border-bottom: none;151}152.v9 .paper-hero .meta-rail .row span:last-child {153 color: var(--ink-2);154}155 156/* Buttons */157.v9 .btn {158 display: inline-block;159 padding: 9px 16px;160 border: 1px solid var(--line);161 border-radius: 999px;162 background: transparent;163 color: var(--ink);164 font-family: var(--mono);165 font-size: 11px;166 letter-spacing: 0.14em;167 text-transform: uppercase;168 cursor: pointer;169 transition:170 background 0.18s ease,171 color 0.18s ease,172 border-color 0.18s ease;173 text-decoration: none;174}175.v9 .btn:hover,176.v9 .btn.active {177 background: var(--accent);178 border-color: var(--accent);179 color: var(--bg);180}181.v9 .btn.accent {182 border-color: rgba(255, 106, 26, 0.6);183 color: var(--amber);184}185.v9 .btn.accent:hover,186.v9 .btn.accent.active {187 background: var(--accent);188 color: var(--bg);189}190 191/* Paper prose */192.v9 .paper {193 grid-column: 2 / span 10;194 max-width: 760px;195 margin: 0 auto;196 width: 100%;197}198.v9 .paper.full {199 grid-column: 1 / -1;200 max-width: none;201}202.v9 .paper h2 {203 font-family: var(--display);204 font-size: clamp(28px, 3.4vw, 38px);205 font-weight: 500;206 letter-spacing: -0.01em;207 line-height: 1.1;208 color: var(--ink);209 margin: 56px 0 18px;210}211.v9 .paper p {212 font-family: var(--reading);213 font-size: 17px;214 line-height: 1.72;215 color: var(--ink-2);216 margin: 0 0 20px;217}218.v9 .paper p strong {219 color: var(--ink);220 font-weight: 500;221}222.v9 .paper p em {223 font-style: italic;224 color: var(--amber);225}226.v9 .paper ul,227.v9 .paper ol {228 font-family: var(--reading);229 font-size: 17px;230 line-height: 1.7;231 color: var(--ink-2);232 margin: 0 0 20px;233 padding-left: 24px;234}235.v9 .paper li {236 margin-bottom: 9px;237}238.v9 .paper li::marker {239 color: var(--amber);240}241.v9 .paper li strong {242 color: var(--ink);243 font-weight: 500;244}245 246/* Inline code / math */247.v9 .code-inline {248 font-family: var(--mono);249 font-size: 0.82em;250 background: rgba(255, 106, 26, 0.12);251 color: var(--amber);252 padding: 1px 6px;253 border-radius: 4px;254}255 256/* Callout — raised ember-tinted panel */257.v9 .callout {258 background: rgba(255, 106, 26, 0.05);259 border: 1px solid var(--line);260 border-left: 2px solid var(--accent);261 border-radius: 12px;262 padding: 28px 32px;263 margin: 32px 0;264 display: grid;265 grid-template-columns: 100px 1fr;266 gap: 18px;267}268.v9 .callout .lbl {269 font-family: var(--mono);270 font-size: 10px;271 letter-spacing: 0.18em;272 text-transform: uppercase;273 color: var(--amber);274 padding-top: 8px;275 align-self: start;276}277.v9 .callout p {278 font-family: var(--display);279 font-weight: 400;280 font-size: clamp(19px, 1.7vw, 24px);281 line-height: 1.4;282 letter-spacing: -0.005em;283 color: var(--ink);284 margin: 0;285}286.v9 .callout p strong {287 color: var(--amber);288 font-weight: 500;289}290 291/* Visualization wrapper */292.v9 .viz {293 grid-column: 1 / -1;294 border: 1px solid var(--line);295 border-radius: 12px;296 padding: 32px;297 margin: 32px 0;298 background: rgba(255, 255, 255, 0.015);299}300.v9 .viz .viz-cap {301 font-family: var(--mono);302 font-size: 11px;303 line-height: 1.6;304 color: var(--mute);305 text-align: center;306 margin: 16px auto 0;307 max-width: 560px;308}309.v9 .viz .viz-cap strong {310 color: var(--ink);311 font-weight: 500;312}313 314/* Stat strip */315.v9 .stat-strip {316 display: grid;317 grid-template-columns: repeat(3, 1fr);318 border-top: 1px solid var(--line);319 margin-top: 24px;320}321.v9 .stat-strip .stat {322 border-right: 1px solid var(--line-2);323 padding: 14px 16px;324 display: flex;325 flex-direction: column;326 gap: 4px;327}328.v9 .stat-strip .stat:last-child {329 border-right: none;330}331.v9 .stat-strip .stat .idx {332 font-family: var(--mono);333 font-size: 10px;334 letter-spacing: 0.14em;335 text-transform: uppercase;336 color: var(--mute);337}338.v9 .stat-strip .stat .val {339 font-family: var(--display);340 font-size: 40px;341 font-weight: 400;342 line-height: 1;343 letter-spacing: -0.01em;344 color: var(--ink);345}346.v9 .stat-strip .stat .val.accent {347 color: var(--accent);348}349.v9 .stat-strip .stat .val.muted {350 color: var(--mute);351}352 353/* Tables */354.v9 .table-wrap {355 grid-column: 1 / -1;356 margin: 32px 0;357 overflow-x: auto;358}359.v9 .v9-table {360 width: 100%;361 border-collapse: collapse;362 font-family: var(--mono);363 font-size: 12px;364}365.v9 .v9-table thead tr.head {366 border-top: 1px solid var(--line);367 border-bottom: 1px solid var(--line);368}369.v9 .v9-table thead tr.subhead {370 border-bottom: 1px solid var(--line-2);371}372.v9 .v9-table th {373 text-align: left;374 padding: 12px 16px;375 font-weight: 500;376 font-size: 10px;377 letter-spacing: 0.14em;378 text-transform: uppercase;379 color: var(--mute);380}381.v9 .v9-table th.center {382 text-align: center;383}384.v9 .v9-table th.ink {385 color: var(--ink);386}387.v9 .v9-table th.accent {388 color: var(--accent);389}390.v9 .v9-table tbody td {391 padding: 12px 16px;392 border-bottom: 1px solid var(--line-2);393 color: var(--mute);394}395.v9 .v9-table tbody td.center {396 text-align: center;397}398.v9 .v9-table tbody td.ink {399 color: var(--ink);400 font-weight: 500;401}402.v9 .v9-table tbody td.accent {403 color: var(--accent);404 font-weight: 500;405}406.v9 .v9-table tbody td.label {407 color: var(--ink);408}409.v9 .v9-table tbody td.never {410 color: var(--accent);411}412.v9 .v9-table tbody td .icon {413 margin-right: 8px;414}415.v9 .v9-table tbody tr.summary {416 border-top: 1px solid var(--line);417}418.v9 .v9-table tbody tr.summary td {419 font-weight: 500;420 color: var(--ink);421}422.v9 .v9-table .ratio {423 font-family: var(--display);424 font-size: 20px;425 font-weight: 400;426}427 428/* Held-out grid */429.v9 .holdout {430 grid-column: 1 / -1;431 display: grid;432 grid-template-columns: repeat(4, 1fr);433 border-top: 1px solid var(--line);434 margin: 32px 0;435}436.v9 .holdout .cell {437 border-right: 1px solid var(--line-2);438 border-bottom: 1px solid var(--line-2);439 padding: 20px 18px;440 display: flex;441 flex-direction: column;442 gap: 6px;443 min-height: 130px;444}445.v9 .holdout .cell:nth-child(4n) {446 border-right: none;447}448.v9 .holdout .cell .name {449 font-family: var(--mono);450 font-size: 10px;451 letter-spacing: 0.14em;452 text-transform: uppercase;453 color: var(--mute);454}455.v9 .holdout .cell .num {456 font-family: var(--display);457 font-size: 34px;458 font-weight: 400;459 line-height: 1;460 letter-spacing: -0.01em;461}462.v9 .holdout .cell .num.win {463 color: var(--accent);464}465.v9 .holdout .cell .num.tie {466 color: var(--mute);467}468.v9 .holdout .cell .was {469 margin-top: auto;470 font-family: var(--mono);471 font-size: 10px;472 letter-spacing: 0.12em;473 text-transform: uppercase;474 color: var(--mute);475}476 477/* Two-up cards */478.v9 .two-up {479 grid-column: 1 / -1;480 display: grid;481 grid-template-columns: repeat(2, 1fr);482 border-top: 1px solid var(--line);483 margin: 32px 0;484}485.v9 .two-up .cell {486 border-right: 1px solid var(--line-2);487 border-bottom: 1px solid var(--line-2);488 padding: 24px;489 display: flex;490 flex-direction: column;491 gap: 12px;492}493.v9 .two-up .cell:last-child {494 border-right: none;495}496.v9 .two-up .cell .lbl {497 font-family: var(--mono);498 font-size: 10px;499 letter-spacing: 0.14em;500 text-transform: uppercase;501 color: var(--ink);502}503.v9 .two-up .cell .lbl.accent {504 color: var(--accent);505}506.v9 .two-up .cell p {507 font-family: var(--reading);508 font-size: 15px;509 line-height: 1.7;510 color: var(--ink-2);511 margin: 0;512}513.v9 .two-up .cell .meta {514 font-family: var(--mono);515 font-size: 11px;516 line-height: 1.7;517 color: var(--mute);518}519.v9 .two-up .cell .meta strong {520 color: var(--ink);521 font-weight: 500;522}523 524/* Three-up feature cards */525.v9 .three-up {526 grid-column: 1 / -1;527 display: grid;528 grid-template-columns: repeat(3, 1fr);529 border-top: 1px solid var(--line);530 margin: 32px 0;531}532.v9 .three-up .cell {533 border-right: 1px solid var(--line-2);534 border-bottom: 1px solid var(--line-2);535 padding: 24px;536 display: flex;537 flex-direction: column;538 gap: 10px;539 min-height: 200px;540}541.v9 .three-up .cell:last-child {542 border-right: none;543}544.v9 .three-up .cell .icon {545 font-family: var(--mono);546 font-size: 16px;547 color: var(--accent);548 margin-bottom: 4px;549}550.v9 .three-up .cell h4 {551 font-family: var(--display);552 font-size: 22px;553 font-weight: 500;554 letter-spacing: -0.005em;555 color: var(--ink);556 margin: 0;557}558.v9 .three-up .cell p {559 font-family: var(--reading);560 font-size: 14px;561 line-height: 1.6;562 color: var(--ink-2);563 margin: 0;564}565 566/* Synthetic task list */567.v9 .task-list {568 grid-column: 1 / -1;569 border-top: 1px solid var(--line);570 margin: 32px 0;571}572.v9 .task-list .row {573 display: grid;574 grid-template-columns: 60px 1fr;575 gap: 18px;576 padding: 20px 0;577 border-bottom: 1px solid var(--line-2);578}579.v9 .task-list .row .icon {580 font-family: var(--display);581 font-size: 28px;582 color: var(--accent);583 text-align: center;584}585.v9 .task-list .row .body .name {586 font-family: var(--display);587 font-size: 20px;588 font-weight: 500;589 letter-spacing: -0.005em;590 color: var(--ink);591 margin: 0 0 6px;592}593.v9 .task-list .row .body .desc {594 font-family: var(--reading);595 font-size: 14px;596 line-height: 1.7;597 color: var(--ink-2);598 margin: 0 0 6px;599}600.v9 .task-list .row .body .result {601 font-family: var(--mono);602 font-size: 11px;603 letter-spacing: 0.04em;604 color: var(--accent);605}606 607/* Failure list */608.v9 .fail-list {609 grid-column: 1 / -1;610 border-top: 1px solid var(--line);611 margin: 32px 0;612}613.v9 .fail-list .row {614 padding: 18px 0;615 border-bottom: 1px solid var(--line-2);616}617.v9 .fail-list .row .name {618 font-family: var(--mono);619 font-size: 12px;620 letter-spacing: 0.04em;621 color: var(--accent);622 text-transform: uppercase;623 margin-bottom: 8px;624}625.v9 .fail-list .row .desc {626 font-family: var(--reading);627 font-size: 15px;628 line-height: 1.72;629 color: var(--ink-2);630 margin: 0;631}632 633/* Gain share bars */634.v9 .gain {635 grid-column: 1 / -1;636 display: grid;637 grid-template-columns: 1fr 1fr;638 gap: 24px;639 margin: 32px 0;640 padding: 24px;641 border: 1px solid var(--line);642 border-radius: 12px;643}644.v9 .gain .col h5 {645 font-family: var(--mono);646 font-size: 11px;647 letter-spacing: 0.14em;648 text-transform: uppercase;649 text-align: center;650 margin: 0 0 18px;651}652.v9 .gain .col h5.ink {653 color: var(--ink);654}655.v9 .gain .col h5.accent {656 color: var(--accent);657}658.v9 .gain .row {659 margin-bottom: 14px;660}661.v9 .gain .row .name {662 font-family: var(--mono);663 font-size: 10px;664 letter-spacing: 0.08em;665 color: var(--mute);666 margin-bottom: 4px;667 text-transform: uppercase;668}669.v9 .gain .row .bar {670 display: flex;671 height: 22px;672 border: 1px solid var(--line-2);673}674.v9 .gain .row .bar .seg {675 display: flex;676 align-items: center;677 justify-content: center;678 font-family: var(--mono);679 font-size: 9px;680 letter-spacing: 0.08em;681}682.v9 .gain .legend {683 display: flex;684 gap: 14px;685 justify-content: center;686 margin-top: 12px;687 font-family: var(--mono);688 font-size: 9px;689 letter-spacing: 0.08em;690 color: var(--mute);691 text-transform: uppercase;692}693.v9 .gain .legend span {694 display: flex;695 align-items: center;696 gap: 6px;697}698.v9 .gain .legend .swatch {699 display: inline-block;700 width: 12px;701 height: 10px;702}703 704/* Bib block */705.v9 .bib {706 grid-column: 1 / -1;707 background: var(--panel);708 border: 1px solid var(--line);709 border-radius: 12px;710 padding: 32px 40px;711 margin: 32px 0 0;712}713.v9 .bib .lbl {714 font-family: var(--mono);715 font-size: 10px;716 letter-spacing: 0.18em;717 text-transform: uppercase;718 color: var(--amber);719 border-top: 1px solid var(--line);720 padding-top: 10px;721 margin-bottom: 18px;722}723.v9 .bib pre {724 font-family: var(--mono);725 font-size: 12px;726 line-height: 1.7;727 color: var(--ink-2);728 margin: 0;729 white-space: pre-wrap;730 word-break: break-word;731}732 733/* Footer */734.v9 .foot {735 grid-column: 1 / -1;736 margin-top: 64px;737 border-top: 1px solid var(--line);738 padding-top: 16px;739 display: grid;740 grid-template-columns: repeat(12, 1fr);741 gap: 16px;742 font-family: var(--mono);743 font-size: 10px;744 letter-spacing: 0.16em;745 text-transform: uppercase;746 color: var(--mute);747}748.v9 .foot .a {749 grid-column: span 4;750}751.v9 .foot .b {752 grid-column: span 4;753 text-align: center;754}755.v9 .foot .c {756 grid-column: span 4;757 text-align: right;758}759.v9 .foot .c a:hover {760 color: var(--accent);761}762 763/* ---------- Responsive ---------- */764@media (max-width: 1024px) {765 .v9 .grid12,766 .v9 .paper-hero {767 gap: 12px;768 }769 .v9 .secbar {770 margin: 48px 0 20px;771 }772}773 774@media (max-width: 760px) {775 .v9 .paper {776 grid-column: 1 / -1;777 }778 .v9 .paper h2 {779 font-size: 24px;780 margin: 40px 0 14px;781 }782 .v9 .paper p,783 .v9 .paper ul,784 .v9 .paper ol {785 font-size: 16px;786 line-height: 1.7;787 }788 .v9 .paper-hero .head,789 .v9 .paper-hero .meta-rail {790 grid-column: 1 / -1;791 }792 .v9 .paper-hero .meta-rail {793 margin-top: 12px;794 }795 .v9 .paper-hero .sub {796 font-size: 20px;797 }798 .v9 .paper-hero .links {799 gap: 10px;800 }801 .v9 .crumb {802 flex-wrap: wrap;803 gap: 8px;804 font-size: 9px;805 margin-bottom: 16px;806 }807 .v9 .secbar {808 grid-template-columns: 48px 1fr auto;809 margin: 40px 0 16px;810 padding: 10px 0;811 font-size: 10px;812 }813 .v9 .viz {814 padding: 18px 14px;815 margin: 20px 0;816 }817 .v9 .viz canvas {818 max-width: 100% !important;819 }820 .v9 .viz .viz-cap {821 font-size: 10.5px;822 }823 .v9 .btn {824 padding: 8px 14px;825 font-size: 10px;826 letter-spacing: 0.12em;827 }828 .v9 .stat-strip {829 grid-template-columns: 1fr;830 border-top: 1px solid var(--line);831 }832 .v9 .stat-strip .stat {833 border-right: none;834 border-bottom: 1px solid var(--line-2);835 padding: 12px 14px;836 }837 .v9 .stat-strip .stat:last-child {838 border-bottom: none;839 }840 .v9 .stat-strip .stat .val {841 font-size: 30px;842 }843 .v9 .three-up,844 .v9 .two-up {845 grid-template-columns: 1fr;846 }847 .v9 .three-up .cell,848 .v9 .two-up .cell {849 border-right: none;850 min-height: auto;851 padding: 18px 16px;852 }853 .v9 .holdout {854 grid-template-columns: 1fr 1fr;855 }856 .v9 .holdout .cell {857 padding: 16px 14px;858 min-height: 110px;859 }860 .v9 .holdout .cell:nth-child(2n) {861 border-right: none;862 }863 .v9 .holdout .cell .num {864 font-size: 28px;865 }866 .v9 .gain {867 grid-template-columns: 1fr;868 padding: 18px 14px;869 gap: 18px;870 }871 .v9 .task-list .row {872 grid-template-columns: 40px 1fr;873 gap: 12px;874 padding: 16px 0;875 }876 .v9 .task-list .row .icon {877 font-size: 22px;878 }879 .v9 .task-list .row .body .name {880 font-size: 17px;881 }882 .v9 .callout {883 grid-template-columns: 1fr;884 padding: 22px 20px;885 gap: 12px;886 }887 .v9 .callout p {888 font-size: clamp(17px, 4vw, 20px);889 }890 .v9 .bib {891 padding: 22px 20px;892 }893 .v9 .bib pre {894 font-size: 11px;895 line-height: 1.6;896 }897 .v9 .table-wrap {898 margin: 24px -8px;899 }900 .v9 .v9-table th,901 .v9 .v9-table td {902 padding: 10px 12px;903 }904 .v9 .v9-table {905 font-size: 11.5px;906 }907 .v9 .v9-table .ratio {908 font-size: 17px;909 }910 .v9 .foot .a,911 .v9 .foot .b,912 .v9 .foot .c {913 grid-column: 1 / -1;914 text-align: left;915 }916}917 918@media (max-width: 480px) {919 .v9 .holdout {920 grid-template-columns: 1fr;921 }922 .v9 .holdout .cell {923 border-right: none;924 min-height: 90px;925 }926 .v9 .stat-strip .stat .val {927 font-size: 26px;928 }929}930