embedl/Edge-Inference-Benchmarks
10
1/* ── Page Layout ─────────────────────────────────────── */2.page {3 position: relative;4 z-index: 1;5 display: flex;6 flex-direction: row;7 min-height: 100vh;8 max-width: 1640px;9 margin: 0 auto;10}11 12/* ── Sidebar ─────────────────────────────────────────── */13.sidebar {14 width: 280px;15 max-width: 300px;16 flex-shrink: 0;17 padding: var(--space-xl) 0;18 position: sticky;19 top: 0;20 height: 100vh;21 overflow-y: auto;22}23 24.sidebar-logo {25 display: block;26 padding: 0 var(--space-md) var(--space-2xl);27}28 29.sidebar-nav {30 display: flex;31 flex-direction: column;32}33 34.sidebar-item {35 display: block;36 padding: var(--space-sm) var(--space-md);37 font-size: var(--text-lg);38 font-weight: 400;39 color: var(--text-dim);40 text-decoration: none;41 cursor: pointer;42 border-left: 2px solid transparent;43 transition: color 0.15s, background 0.15s, border-color 0.15s;44}45 46.sidebar-item:hover {47 color: var(--text-muted);48}49 50.sidebar-item.active {51 color: var(--teal);52 font-weight: 600;53}54 55.sidebar-variant {56 display: block;57 padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-xl);58 font-size: var(--text-md);59 font-weight: 400;60 color: var(--text-dim);61 cursor: pointer;62 border-left: 2px solid transparent;63 transition: color 0.15s, background 0.15s;64}65 66.sidebar-variant:hover {67 color: var(--text-muted);68}69 70.sidebar-variant.active {71 color: var(--teal);72 font-weight: 600;73}74 75/* ── Main Column ─────────────────────────────────────── */76.main {77 flex: 1;78 min-width: 0;79}80 81.main-inner {82 width: 100%;83 padding: 0 var(--space-xl) var(--space-xl);84}85 86/* ── Hero ────────────────────────────────────────────── */87.hero {88 position: relative;89 padding: var(--space-xl) 0;90}91 92.hero-badge {93 display: inline-block;94 padding: 1px;95 border-radius: 999px;96 background: linear-gradient(90deg, var(--teal), var(--blue));97 margin-bottom: var(--space-md);98}99 100.hero-badge span {101 display: inline-block;102 padding: var(--space-sm) var(--space-md);103 border-radius: 999px;104 background: var(--bg-opaque);105 color: var(--teal);106 font-size: var(--text-md);107 font-weight: 600;108 letter-spacing: 0.03em;109 text-transform: uppercase;110}111 112.hero h1 {113 font-size: clamp(1.8rem, 3.5vw, 3.0rem);114 font-weight: 700;115 margin-bottom: var(--space-sm);116 letter-spacing: -0.02em;117}118 119.hero .accent {120 color: var(--teal);121}122 123.hero-sub {124 color: var(--text-muted);125 font-size: var(--text-md);126 line-height: 1.6;127}128 129/* ── Filters ─────────────────────────────────────────── */130.filters-bar {131 display: flex;132 flex-wrap: wrap;133 gap: var(--space-md);134 padding: var(--space-md) 0 var(--space-2xl);135 top: 0;136 z-index: 10;137}138 139.filter-group label {140 display: block;141 font-size: var(--text-sm);142 font-weight: 600;143 letter-spacing: 0.08em;144 color: var(--text-dim);145 margin-bottom: var(--space-xs);146}147 148.btn-group {149 display: flex;150}151 152.btn {153 background: transparent;154 border: 1px solid var(--border);155 color: var(--text-muted);156 font-size: var(--text-md);157 font-weight: 400;158 padding: var(--space-sm) var(--space-md);159 cursor: pointer;160 transition: all 0.15s;161}162 163.btn:first-child {164 border-radius: 6px 0 0 6px;165}166 167.btn:last-child {168 border-radius: 0 6px 6px 0;169}170 171.btn:not(:first-child) {172 margin-left: -1px;173}174 175.btn:hover {176 color: var(--text);177 background: var(--btn-hover-bg);178}179 180.btn.active {181 background: var(--btn-active-bg);182 color: var(--teal);183 border-color: var(--btn-active-border);184 font-weight: 600;185 z-index: 1;186 position: relative;187}188 189/* ── Chart ───────────────────────────────────────────── */190.chart-header {191 display: flex;192 flex-wrap: wrap;193 align-items: center;194 justify-content: space-between;195 gap: var(--space-sm) var(--space-md);196 margin-bottom: var(--space-xs);197}198 199.chart-header-left {200 display: flex;201 align-items: baseline;202 gap: var(--space-md);203}204 205.chart-header-right {206 display: flex;207 align-items: center;208 gap: var(--space-md);209 margin-left: auto;210}211 212.chart-header .filter-group {213 margin: 0;214}215 216.chart-header .filter-group label {217 display: none;218}219 220.chart-header .btn,221.demo-device-selector .btn {222 border: 0;223 background: transparent;224}225 226.chart-header .btn:hover,227.demo-device-selector .btn:hover {228 color: var(--text);229 background: transparent;230}231 232.chart-header .btn.active,233.demo-device-selector .btn.active {234 background: transparent;235 border-color: var(--btn-active-border);236}237 238.chart-block {239 margin: var(--space-lg) 0;240}241 242.chart-heading {243 font-size: var(--text-lg);244 font-weight: 600;245 color: var(--text);246 margin-bottom: 0;247}248 249.chart-subtitle {250 font-size: var(--text-md);251 color: var(--text-muted);252 margin-bottom: 0;253}254 255.chart-wrap {256 height: 340px;257}258 259/* ── Tables ──────────────────────────────────────────── */260.table-card {261 margin: var(--space-lg) 0;262}263 264.table-card h3 {265 font-size: var(--text-md);266 font-weight: 600;267 color: var(--text);268 margin-bottom: var(--space-sm);269 padding-bottom: var(--space-sm);270 border-bottom: 1px solid var(--border);271}272 273.table-scroll {274 overflow-x: auto;275 scrollbar-color: var(--text-dim) var(--border);276 scrollbar-width: thin;277}278 279.table-scroll::-webkit-scrollbar {280 height: 8px;281}282 283.table-scroll::-webkit-scrollbar-track {284 background: var(--border);285 border-radius: 4px;286}287 288.table-scroll::-webkit-scrollbar-thumb {289 background: var(--text-dim);290 border-radius: 4px;291}292 293.table-scroll::-webkit-scrollbar-thumb:hover {294 background: var(--text-muted);295}296 297table {298 width: 100%;299 border-collapse: collapse;300 font-size: var(--text-md);301}302 303thead th {304 text-align: left;305 font-weight: 600;306 font-size: var(--text-sm);307 letter-spacing: 0.05em;308 color: var(--text-dim);309 padding: var(--space-sm) var(--space-ms);310 border-bottom: 1px solid var(--border);311 white-space: nowrap;312}313 314tbody td {315 padding: var(--space-sm) var(--space-ms);316 border-bottom: 1px solid var(--row-border);317 white-space: nowrap;318 color: var(--text-muted);319}320 321th.metric-cell,322td.metric-cell {323 text-align: right;324}325 326tbody tr:last-child td {327 border-bottom: 1px solid var(--border);328}329 330tbody tr:hover {331 background: var(--row-hover-bg);332}333 334.model-cell {335 display: flex;336 align-items: center;337 gap: var(--space-sm);338 font-weight: 500;339 color: var(--text);340}341 342.model-cell a {343 color: var(--teal);344 text-decoration: none;345 transition: color 0.15s;346}347 348.model-cell a:hover {349 text-decoration: underline;350}351 352.model-dot {353 width: 8px;354 height: 8px;355 border-radius: 50%;356 flex-shrink: 0;357}358 359th.first-metric, td.first-metric {360 padding-left: var(--space-xl);361}362 363.oom {364 color: var(--red);365 font-weight: 600;366}367 368tbody tr.row-group-break td {369 border-top: 2px solid var(--border);370}371 372/* ── Sticky first column in scrollable tables ─────────── */373.table-split {374 display: flex;375}376 377.table-split-fixed table,378.table-split-scroll table {379 width: 100%;380}381 382.table-split-fixed {383 flex-shrink: 0;384}385 386.table-split-scroll {387 overflow-x: auto;388 flex: 1;389 min-width: 0;390 scrollbar-color: var(--text-dim) var(--border);391 scrollbar-width: thin;392}393 394.table-scroll-mobile {395 display: none;396}397#accuracy-section:empty {398 margin-bottom: 0;399}400#accuracy-section {401 margin-bottom: var(--space-xl);402}403 404.acc-title-link {405 color: inherit;406 text-decoration: none;407}408.acc-title-link:hover {409 text-decoration: underline;410 color: var(--accent);411}412 413.legend-section {414 margin: var(--space-xl) 0;415 padding-top: var(--space-lg);416}417 418.legend-grid {419 display: grid;420 grid-template-columns: 1fr;421 gap: var(--space-xs);422 font-size: var(--text-sm);423 color: var(--text-dim);424}425 426.legend-grid strong {427 color: var(--text-muted);428 font-weight: 500;429}430 431.experiment-setup {432 margin-top: var(--space-md);433 font-size: var(--text-md);434 color: var(--text-dim);435 font-style: italic;436 line-height: 1.6;437}438 439.experiment-setup p {440 margin-bottom: var(--space-xs);441}442 443/* ── Footer ──────────────────────────────────────────── */444.footer {445 padding: var(--space-xl) 0;446 margin-top: var(--space-2xl);447 text-align: center;448}449 450.footer-inner {451 max-width: 1640px;452 margin: 0 auto;453 padding: 0 var(--space-xl);454}455 456.footer-cta {457 color: var(--text-muted);458 font-size: var(--text-md);459 margin-bottom: var(--space-lg);460}461 462.footer-products {463 display: grid;464 grid-template-columns: repeat(3, 1fr);465 gap: var(--space-md);466 margin-bottom: var(--space-xl);467}468 469.footer-product {470 display: flex;471 align-items: center;472 gap: var(--space-md);473 padding: var(--space-md) var(--space-lg);474 background: var(--btn-hover-bg);475 border: 1px solid var(--border);476 border-radius: 8px;477 text-decoration: none;478 transition: background 0.15s, border-color 0.15s;479}480 481.footer-product:hover {482 background: var(--btn-active-bg);483 border-color: var(--btn-active-border);484}485 486.footer-product-icon {487 width: 48px;488 height: 48px;489 border-radius: 10px;490 flex-shrink: 0;491}492 493.icon-deploy {494 background: linear-gradient(135deg, #58b1c3, #a8e6cf, #dcedc1);495}496 497.icon-hub {498 background: linear-gradient(135deg, #b8cc52, #e8c547, #f0a040);499}500 501.icon-models {502 background: linear-gradient(135deg, #ff9a9e, #fad0c4, #f6a085);503}504 505.footer-product-text {506 display: flex;507 flex-direction: column;508 text-align: left;509}510 511.footer-product-name {512 font-size: var(--text-md);513 font-weight: 600;514 color: var(--text);515}516 517.footer-product-tag {518 font-size: var(--text-sm);519 font-weight: 500;520 letter-spacing: 0.08em;521 text-transform: uppercase;522 color: var(--text-dim);523}524 525.footer-copy {526 color: var(--text-muted);527 font-size: var(--text-md);528 font-style: italic;529}530 531.footer-copy a {532 color: var(--text-muted);533 text-decoration: none;534}535 536.footer-copy a:hover {537 text-decoration: underline;538}539 540/* ── Embed ──────────────────────────────────────────── */541.embed-btn {542 display: inline-flex;543 align-items: center;544 gap: var(--space-sm);545 border: 1px solid var(--border);546 border-radius: 6px;547 padding: var(--space-sm) var(--space-md);548 font-size: var(--text-sm);549 color: var(--text-muted);550 background: transparent;551 cursor: pointer;552 transition: all 0.15s;553 margin-left: auto;554 white-space: nowrap;555}556 557.embed-btn:hover {558 color: var(--teal);559 border-color: var(--btn-active-border);560 background: var(--btn-active-bg);561}562 563.embed-overlay {564 position: fixed;565 inset: 0;566 z-index: 1000;567 background: rgba(0, 0, 0, 0.7);568 display: flex;569 align-items: center;570 justify-content: center;571 opacity: 0;572 pointer-events: none;573 transition: opacity 0.2s;574 backdrop-filter: blur(4px);575}576 577.embed-overlay.visible {578 opacity: 1;579 pointer-events: auto;580}581 582.embed-modal {583 background: #0e1a2e;584 border: 1px solid rgba(88, 177, 195, 0.2);585 border-radius: 12px;586 width: 90%;587 max-width: 720px;588 max-height: 90vh;589 overflow-y: auto;590 padding: var(--space-xl);591 scrollbar-color: var(--text-dim) var(--border);592 scrollbar-width: thin;593}594 595.embed-modal::-webkit-scrollbar {596 width: 8px;597}598 599.embed-modal::-webkit-scrollbar-track {600 background: var(--border);601 border-radius: 4px;602}603 604.embed-modal::-webkit-scrollbar-thumb {605 background: var(--text-dim);606 border-radius: 4px;607}608 609.embed-modal::-webkit-scrollbar-thumb:hover {610 background: var(--text-muted);611}612 613.embed-modal-header {614 display: flex;615 align-items: center;616 justify-content: space-between;617 margin-bottom: var(--space-lg);618}619 620.embed-modal-header h3 {621 font-size: var(--text-lg);622 font-weight: 600;623 color: var(--text);624}625 626.embed-close {627 background: none;628 border: none;629 color: var(--text-dim);630 font-size: 1.5rem;631 cursor: pointer;632 padding: var(--space-sm);633 line-height: 1;634 transition: color 0.15s;635}636 637.embed-close:hover {638 color: var(--text);639}640 641.embed-preview {642 background: #0B1527;643 border-radius: 8px;644 padding: var(--space-sm);645 margin-bottom: var(--space-lg);646 overflow: hidden;647}648 649.embed-preview svg {650 width: 100%;651 height: auto;652 display: block;653}654 655.embed-status-bar {656 margin-bottom: var(--space-md);657}658 659.embed-status {660 font-size: var(--text-sm);661 font-weight: 500;662}663 664.embed-status.checking {665 color: var(--text-dim);666}667 668.embed-status.checking::before {669 content: "\25CB ";670}671 672.embed-status.up-to-date {673 display: none;674}675 676.embed-status.uploading {677 color: var(--teal);678}679 680.embed-status.uploading::before {681 content: "\21BB ";682}683 684.embed-status.uploaded {685 color: var(--green);686}687 688.embed-status.uploaded::before {689 content: "\2713 ";690}691 692.embed-status.needs-token {693 color: #ffd166;694}695 696.embed-status.needs-token::before {697 content: "\26A0 ";698}699 700.embed-status a {701 color: var(--teal);702 text-decoration: none;703 font-weight: 600;704}705 706.embed-status a:hover {707 text-decoration: underline;708}709 710.embed-status.error {711 color: var(--red);712 word-break: break-word;713}714 715.embed-status.error::before {716 content: "\2717 ";717}718 719.embed-actions {720 display: flex;721 gap: var(--space-md);722 margin-bottom: var(--space-lg);723}724 725.embed-action-btn {726 border-radius: 6px !important;727 padding: var(--space-sm) var(--space-md);728 font-size: var(--text-md);729 cursor: pointer;730 transition: all 0.15s;731}732 733.embed-action-btn:first-child {734 background: var(--btn-active-bg);735 border-color: var(--btn-active-border);736 color: var(--teal);737}738 739.embed-action-btn:first-child:hover {740 background: rgba(88, 177, 195, 0.2);741}742 743.embed-secondary {744 opacity: 0.7;745}746 747.embed-secondary:hover {748 opacity: 1;749}750 751.embed-code-section {752 margin-bottom: var(--space-sm);753}754 755.embed-code-section label {756 display: block;757 font-size: var(--text-sm);758 color: var(--text-dim);759 margin-bottom: var(--space-sm);760}761 762.embed-code {763 width: 100%;764 background: rgba(0, 0, 0, 0.3);765 border: 1px solid var(--border);766 border-radius: 6px;767 color: var(--teal);768 font-family: "SF Mono", "Fira Code", "Consolas", monospace;769 font-size: var(--text-sm);770 padding: var(--space-md);771 resize: vertical;772 line-height: 1.5;773 scrollbar-color: var(--text-dim) var(--border);774 scrollbar-width: thin;775}776 777.embed-code::-webkit-scrollbar {778 width: 8px;779 height: 8px;780}781 782.embed-code::-webkit-scrollbar-track {783 background: var(--border);784 border-radius: 4px;785}786 787.embed-code::-webkit-scrollbar-thumb {788 background: var(--text-dim);789 border-radius: 4px;790}791 792.embed-code::-webkit-scrollbar-thumb:hover {793 background: var(--text-muted);794}795 796.embed-code:focus {797 outline: none;798 border-color: var(--btn-active-border);799}800 801/* ── Speedup ─────────────────────────────────────────── */802td.speedup-cell {803 position: relative;804 color: var(--text);805 font-variant-numeric: tabular-nums;806}807 808.speedup-val {809 position: relative;810 font-weight: 600;811 color: var(--green);812}813 814.speedup-val.is-down {815 color: var(--red);816}817 818.speedup-ref {819 color: var(--text-dim);820}821 822/* ── Responsive ──────────────────────────────────────── */823@media (max-width: 900px) {824 .page {825 flex-direction: column;826 }827 828 .sidebar {829 width: 100%;830 max-width: none;831 height: auto;832 position: static;833 border-right: none;834 border-bottom: 1px solid var(--border);835 padding: var(--space-sm) 0;836 }837 838 .sidebar-nav {839 flex-direction: row;840 flex-wrap: wrap;841 align-items: center;842 padding: 0 var(--space-sm);843 }844 845 .sidebar-item {846 border-left: none;847 border-bottom: 2px solid transparent;848 padding: var(--space-sm) var(--space-md);849 }850 851 .sidebar-item.active {852 border-left-color: transparent;853 border-bottom-color: var(--teal);854 }855 856 .sidebar-variant {857 border-left: none;858 border-bottom: 2px solid transparent;859 padding: var(--space-sm) var(--space-md);860 font-size: var(--text-sm);861 }862 863 .sidebar-variant.active {864 border-bottom-color: var(--teal);865 }866 867 .main-inner {868 padding: 0 var(--space-md) var(--space-xl);869 }870 871 .table-split {872 display: none;873 }874 875 .table-scroll-mobile {876 display: block;877 }878 879 .footer-products {880 grid-template-columns: 1fr;881 }882 883 .footer-inner {884 padding: 0 var(--space-md);885 }886}887