vimarsh/repro-float8-2bits-entropy-coding-enables-data-free-model-compression
0
1:root {2 --bg: #ffffff;3 --paper: #fdfcf9;4 --panel: #ffffff;5 --ink: #1f2937;6 --muted: #6b7280;7 --line: #e5e7eb;8 --accent: #f97316;9 --accent-strong: #ea580c;10 --accent-soft: #fff7ed;11 --accent-line: rgba(249, 115, 22, 0.16);12 --grid-line: rgba(31, 41, 55, 0.045);13 --code-bg: #f3f4f6;14 --radius: 12px;15 --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, serif;16 --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,17 sans-serif;18 --mono: "SFMono-Regular", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas,19 ui-monospace, monospace;20}21 22* {23 box-sizing: border-box;24}25 26html,27body {28 margin: 0;29 padding: 0;30}31 32html {33 scroll-behavior: smooth;34}35 36body {37 background: var(--bg);38 color: var(--ink);39 font-family: var(--sans);40 font-size: 13px;41 line-height: 1.65;42 -webkit-font-smoothing: antialiased;43}44 45#app {46 display: flex;47 min-height: 100vh;48}49 50/* ---- sidebar (composition-book cover) ---- */51#sidebar {52 width: 280px;53 flex: 0 0 280px;54 background: #17181c;55 color: #e7e7ea;56 position: sticky;57 top: 0;58 height: 100vh;59 overflow-y: auto;60 padding: 22px 16px;61 display: flex;62 flex-direction: column;63}64 65#book-head {66 display: flex;67 align-items: center;68 gap: 10px;69 padding: 8px;70 margin-bottom: 12px;71 border-radius: 10px;72 cursor: pointer;73 transition: background 0.12s;74}75#book-head:hover {76 background: rgba(255, 255, 255, 0.05);77}78#book-wordmark {79 width: 154px;80 height: auto;81 object-fit: contain;82}83.sr-only {84 position: absolute;85 width: 1px;86 height: 1px;87 padding: 0;88 margin: -1px;89 overflow: hidden;90 clip: rect(0, 0, 0, 0);91 white-space: nowrap;92 border: 0;93}94 95#tree {96 flex: 1;97 padding-top: 8px;98}99 100#tree a {101 display: block;102 padding: 6px 10px;103 border-radius: 8px;104 color: #c3c4cb;105 text-decoration: none;106 font-size: 14px;107 transition: background 0.12s, color 0.12s;108}109 110#tree a:hover {111 background: rgba(255, 255, 255, 0.06);112 color: #ffffff;113}114 115#tree a.active {116 background: rgba(249, 115, 22, 0.16);117 color: #fdba74;118 font-weight: 600;119}120 121#tree a .tree-mark {122 color: #6b6d76;123}124 125#tree a:hover .tree-mark,126#tree a.active .tree-mark {127 color: inherit;128 opacity: 0.6;129}130 131#tree .depth-1 {132 padding-left: 22px;133}134#tree .depth-2 {135 padding-left: 34px;136}137#tree .depth-3 {138 padding-left: 46px;139}140 141 142/* ---- content ---- */143#content {144 flex: 1;145 min-width: 0;146 padding: 48px 40px 120px;147 background-color: var(--paper);148 background-image:149 linear-gradient(var(--grid-line) 1px, transparent 1px),150 linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);151 background-size: 26px 26px;152 background-position: center top;153}154 155#page {156 width: 100%;157 min-width: 0;158 max-width: 1052px;159 margin: 0 auto;160}161 162.page-section {163 scroll-margin-top: 40px;164 padding: 0 0 35px;165 margin: 0 0 32px;166}167 168.page-section:last-child {169 margin-bottom: 0;170}171 172.page-layout {173 display: grid;174 grid-template-columns: minmax(0, 760px) 248px;175 gap: 44px;176 align-items: start;177}178 179.page-body {180 min-width: 0;181}182 183.resource-anchor {184 display: block;185 height: 0;186 overflow: hidden;187}188 189/* ---- pinned notes ---- */190.pinned-notes {191 margin: 30px 0 0;192}193.pinned-notes-list .cell {194 margin: 0;195 border-color: rgba(249, 115, 22, 0.55);196}197.pinned-notes-list .cell + .cell {198 margin-top: 12px;199}200.cell.pinned-source {201 border-color: rgba(249, 115, 22, 0.55);202}203.book-intro.has-pinned-notes {204 border-bottom: none;205 padding-bottom: 22px;206 margin-bottom: 30px;207}208.book-intro.book-intro-tight {209 border-bottom: none;210 padding-bottom: 4px;211 margin-bottom: 20px;212}213 214#page h1 {215 font-family: var(--serif);216 font-size: 34px;217 line-height: 1.15;218 letter-spacing: -0.02em;219 margin: 0 0 8px;220 overflow-wrap: anywhere;221}222 223#page .page-section:not(.book-intro) h1 {224 font-size: 26px;225}226 227#page h2 {228 font-family: var(--serif);229 font-size: 24px;230 margin: 36px 0 10px;231}232 233#page h3 {234 font-size: 17px;235 font-weight: 700;236 margin: 26px 0 2px;237 letter-spacing: -0.01em;238}239 240#page h3::before {241 content: "";242 display: inline-block;243 width: 7px;244 height: 7px;245 border-radius: 2px;246 background: var(--accent);247 margin-right: 10px;248 vertical-align: middle;249 transform: translateY(-1px);250}251 252#page p {253 margin: 10px 0;254}255 256#page blockquote {257 margin: 14px 0;258 padding: 2px 16px;259 border-left: 3px solid #fdba74;260 color: var(--muted);261}262 263#page hr {264 display: none;265}266 267#page code {268 font-family: var(--mono);269 font-size: 0.86em;270 background: var(--code-bg);271 padding: 2px 6px;272 border-radius: 6px;273}274 275#page pre {276 max-width: 100%;277 background: var(--code-bg);278 border: 1px solid var(--line);279 border-radius: var(--radius);280 padding: 14px 16px;281 overflow-x: auto;282}283#page pre code {284 background: none;285 padding: 0;286 font-size: 11.5px;287}288 289/* ---- code blocks + collapsible accordion ---- */290#page pre.hl {291 background: #17181c;292 border: none;293 color: #e7e7ea;294 font-size: 13px;295 line-height: 1.58;296}297#page pre.hl code {298 color: inherit;299 font-family: var(--mono);300}301.code-accordion {302 border: 1px solid rgba(249, 115, 22, 0.2);303 border-radius: 8px;304 overflow: hidden;305 margin: 12px 0;306 background: #17181c;307}308.code-accordion summary {309 list-style: none;310 cursor: pointer;311 display: flex;312 align-items: center;313 gap: 9px;314 padding: 9px 12px;315 font-family: var(--mono);316 font-size: 11.5px;317 font-weight: 700;318 color: #e7e7ea;319 background: #1e2027;320 user-select: none;321 overflow-wrap: anywhere;322}323.code-accordion summary::-webkit-details-marker {324 display: none;325}326.code-accordion summary::after {327 content: "▸";328 margin-left: auto;329 color: var(--accent);330 transition: transform 0.12s;331 transform: rotate(180deg);332}333.code-accordion[open] summary::after {334 transform: rotate(90deg);335}336.code-accordion .code-ico {337 color: var(--accent);338 font-weight: 700;339}340.code-accordion pre.hl {341 margin: 0;342 border-radius: 0;343 border: none;344 border-top: 1px solid rgba(249, 115, 22, 0.16);345}346.tok-comment {347 color: #7a7d87;348 font-style: italic;349}350.tok-string {351 color: #a5d6a7;352}353.tok-keyword {354 color: #fdba74;355}356.tok-number {357 color: #7fd0e0;358}359 360#page a {361 color: var(--accent);362}363 364#page ul {365 padding-left: 20px;366}367 368.ts {369 font-family: var(--mono);370 font-size: 12px;371 color: var(--muted);372 background: none;373 padding: 0;374}375 376/* ---- notebook-style cells ---- */377.cell {378 max-width: 100%;379 border: 1px solid var(--line);380 border-radius: 10px;381 background: rgba(255, 255, 255, 0.86);382 margin: 18px 0;383 overflow: hidden;384 box-shadow: 0 2px 10px rgba(31, 41, 55, 0.035);385}386.cell-head {387 display: flex;388 justify-content: space-between;389 gap: 16px;390 align-items: center;391 padding: 14px 18px;392 background: rgba(255, 255, 255, 0.92);393 border-bottom: 1px solid var(--line);394}395.cell-head.no-title {396 justify-content: flex-end;397 padding-top: 10px;398 padding-bottom: 10px;399}400.cell-title {401 flex: 1;402 min-width: 0;403 font-size: 13px;404 font-weight: 650;405 color: var(--ink);406 line-height: 1.35;407 overflow-wrap: anywhere;408}409.cell-meta {410 flex: 0 0 auto;411 display: flex;412 align-items: center;413 gap: 10px;414 font-family: var(--sans);415 font-size: 13px;416 color: var(--muted);417}418.cell-open {419 flex: 0 0 auto;420 font-family: var(--mono);421 font-size: 12px;422 color: var(--accent);423 text-decoration: none;424}425.cell-open:hover {426 color: var(--accent-strong);427}428.cell-body {429 min-width: 0;430 padding: 14px 18px 18px;431}432.cell.dashboard .cell-body {433 padding: 0;434}435#page .cell-body h1,436#page .cell-body h2 {437 font-family: var(--sans);438 font-size: 17px;439 font-weight: 700;440 letter-spacing: -0.01em;441 line-height: 1.35;442 margin: 22px 0 6px;443}444#page .cell-body > :first-child {445 margin-top: 0;446}447#page .cell-body > :last-child {448 margin-bottom: 0;449}450.cell.code .cell-head {451 background: #fbfbfc;452}453.figure-fit {454 position: relative;455 overflow: hidden;456 min-height: 160px;457 border: 1px solid var(--line);458 border-radius: 8px;459 background: #fff;460}461.figure-fit[hidden] {462 display: none;463}464.figure-fit:fullscreen,465.figure-fit:-webkit-full-screen {466 width: 100%;467 height: 100%;468 border: none;469 border-radius: 0;470}471.figure-frame {472 display: block;473 width: 100%;474 min-height: 160px;475 border: none;476 background: #fff;477}478.figure-frame[hidden],479.figure-raw[hidden] {480 display: none;481}482.fig-switch {483 position: relative;484 display: inline-flex;485 flex: 0 0 auto;486 border: 1px solid var(--line);487 border-radius: 999px;488 background: var(--code-bg);489 padding: 2px;490}491.fig-switch button {492 position: relative;493 z-index: 1;494 flex: 1;495 min-width: 62px;496 border: none;497 background: none;498 font-family: var(--sans);499 font-size: 12px;500 font-weight: 600;501 color: var(--muted);502 padding: 3px 12px;503 border-radius: 999px;504 cursor: pointer;505 transition: color 0.15s;506}507.fig-switch button.active {508 color: var(--accent-strong);509}510.fig-switch-thumb {511 position: absolute;512 top: 2px;513 bottom: 2px;514 left: 2px;515 width: calc(50% - 2px);516 border-radius: 999px;517 background: var(--panel);518 border: 1px solid rgba(249, 115, 22, 0.35);519 box-shadow: 0 1px 4px rgba(31, 41, 55, 0.08);520 transition: transform 0.18s ease;521}522.fig-switch.raw .fig-switch-thumb {523 transform: translateX(100%);524}525#page .figure-raw pre {526 margin: 0;527 max-height: 420px;528 overflow: auto;529 font-family: var(--mono);530 font-size: 13px;531 line-height: 1.55;532 background: var(--code-bg);533 border: 1px solid var(--line);534 border-radius: 8px;535 padding: 12px 14px;536}537/* ---- figure fullscreen ---- */538.cell-fullscreen {539 position: relative;540 display: inline-flex;541 flex: 0 0 auto;542}543.cell-fullscreen-btn {544 display: inline-flex;545 align-items: center;546 justify-content: center;547 width: 26px;548 height: 26px;549 padding: 0;550 border: 1px solid var(--line);551 border-radius: 999px;552 background: var(--code-bg);553 color: var(--muted);554 cursor: pointer;555 transition: color 0.15s, border-color 0.15s, background 0.15s;556}557.cell-fullscreen-btn:hover {558 color: var(--accent-strong);559 border-color: rgba(249, 115, 22, 0.35);560 background: var(--accent-soft);561}562.cell-fullscreen-btn svg {563 width: 14px;564 height: 14px;565}566/* ---- copyable snippets ---- */567.snippet {568 position: relative;569}570.copy-snippet {571 position: absolute;572 top: 7px;573 right: 8px;574 width: 24px;575 height: 24px;576 border: none;577 border-radius: 6px;578 background: rgba(255, 255, 255, 0.08);579 color: #9a9da8;580 font-size: 12px;581 line-height: 1;582 cursor: pointer;583 opacity: 0;584 transition: opacity 0.12s, color 0.12s, background 0.12s;585}586.snippet:hover .copy-snippet,587.jp-out:hover .copy-snippet,588.figure-raw:hover .copy-snippet,589.code-accordion summary:hover .copy-snippet {590 opacity: 1;591}592.copy-snippet:hover {593 color: #ffffff;594 background: rgba(255, 255, 255, 0.16);595}596.copy-snippet.copied {597 color: #52d08a;598 opacity: 1;599}600.code-accordion .code-name {601 user-select: text;602 cursor: text;603}604.jp-out,605.figure-raw {606 position: relative;607}608.jp-out .copy-snippet,609.figure-raw .copy-snippet {610 background: var(--code-bg);611 color: var(--muted);612 border: 1px solid var(--line);613}614.jp-out .copy-snippet:hover,615.figure-raw .copy-snippet:hover {616 color: var(--accent-strong);617 background: var(--panel);618}619 620/* ---- jupyter-style code cells ---- */621.jp {622 border: 1px solid var(--line);623 border-radius: 10px;624 overflow: hidden;625 margin: 12px 0;626 background: var(--panel);627}628.jp-gutter {629 flex: 0 0 46px;630 padding: 13px 0 0 13px;631 font-family: var(--mono);632 font-size: 10.5px;633 letter-spacing: 0.07em;634 text-transform: uppercase;635 font-weight: 600;636 user-select: none;637}638.jp-in {639 display: flex;640 background: #17181c;641}642.jp-in .jp-gutter {643 color: #6f727d;644}645.jp-in-body {646 flex: 1;647 min-width: 0;648}649#page .jp-in-body pre.hl {650 margin: 0;651 border: none;652 border-radius: 0;653 background: none;654 padding: 12px 16px 12px 0;655}656.jp-in-body .code-accordion {657 margin: 0;658 border: none;659 border-top: 1px solid rgba(255, 255, 255, 0.09);660 border-radius: 0;661 background: none;662}663.jp-in-body .code-accordion summary {664 background: none;665 padding: 9px 16px 9px 0;666}667.jp-in-body .code-accordion pre.hl {668 border-top: 1px solid rgba(255, 255, 255, 0.09);669}670.jp-meta {671 padding: 5px 14px;672 font-family: var(--mono);673 font-size: 11.5px;674 color: var(--muted);675 background: #fbfbfc;676 border-top: 1px solid var(--line);677}678.jp-out {679 display: flex;680 border-top: 1px solid var(--line);681 background: var(--panel);682}683.jp-out .jp-gutter {684 color: var(--accent-strong);685}686.jp-out-body {687 flex: 1;688 min-width: 0;689}690#page .jp-out-pre {691 min-width: 0;692 margin: 0;693 border: none;694 border-radius: 0;695 background: none;696 color: var(--ink);697 font-family: var(--mono);698 font-size: 13px;699 line-height: 1.55;700 padding: 12px 16px 12px 0;701 white-space: pre;702 overflow-x: auto;703 overflow-y: auto;704 max-height: 26em;705}706.jp-artifacts {707 display: flex;708 flex-direction: column;709}710.jp-out-body .jp-out-pre + .jp-artifacts {711 border-top: 1px solid var(--line);712}713.out-artifact {714 display: flex;715 align-items: baseline;716 gap: 8px;717 padding: 9px 16px 9px 0;718 text-decoration: none;719 color: inherit;720}721.out-artifact + .out-artifact {722 border-top: 1px solid var(--line);723}724a.out-artifact:hover .out-artifact-name {725 color: var(--accent-strong);726}727.out-artifact-ico {728 flex: 0 0 auto;729 font-size: 13px;730}731.out-artifact-name {732 font-family: var(--mono);733 font-size: 12.5px;734 font-weight: 600;735 color: var(--ink);736 overflow: hidden;737 text-overflow: ellipsis;738 white-space: nowrap;739}740.out-artifact-meta {741 flex: 0 0 auto;742 margin-left: auto;743 padding-left: 12px;744 font-size: 12px;745 color: var(--muted);746 white-space: nowrap;747}748.out-artifact-state.open {749 color: var(--accent);750 font-weight: 600;751}752.trackio-embed {753 border: 1px solid var(--line);754 border-radius: var(--radius);755 overflow: hidden;756 background: var(--panel);757}758.trackio-cell-meta {759 display: flex;760 gap: 6px;761 flex-wrap: wrap;762 justify-content: flex-end;763}764 765/* ---- unfurl cards ---- */766.unfurl {767 display: block;768 border: 1px solid var(--line);769 border-radius: var(--radius);770 background: var(--panel);771 margin: 12px 0;772 overflow: hidden;773 text-decoration: none;774 color: inherit;775 transition: border-color 0.14s, box-shadow 0.14s;776}777.unfurl:hover {778 border-color: #cfcbe6;779 box-shadow: 0 4px 18px rgba(30, 20, 80, 0.06);780}781 782.unfurl-body {783 padding: 13px 16px;784 display: flex;785 gap: 12px;786 align-items: flex-start;787}788 789.unfurl-ico {790 font-size: 20px;791 line-height: 1.3;792 flex: 0 0 auto;793}794 795.unfurl-main {796 min-width: 0;797 flex: 1;798}799 800.unfurl-kind {801 font-family: var(--mono);802 font-size: 10.5px;803 text-transform: uppercase;804 letter-spacing: 0.08em;805 color: var(--accent);806 font-weight: 600;807}808 809.unfurl-title {810 font-weight: 650;811 font-size: 15px;812 margin: 1px 0 2px;813 white-space: nowrap;814 overflow: hidden;815 text-overflow: ellipsis;816}817 818.unfurl-desc {819 color: var(--muted);820 font-size: 13.5px;821 line-height: 1.45;822}823 824.unfurl-meta {825 margin-top: 6px;826 display: flex;827 flex-wrap: wrap;828 gap: 6px;829}830 831.chip {832 font-size: 11.5px;833 background: var(--code-bg);834 border-radius: 999px;835 padding: 2px 9px;836 color: var(--muted);837 font-family: var(--mono);838}839 840.unfurl-raw {841 font-family: var(--mono);842 font-size: 11px;843 color: var(--muted);844 border-top: 1px solid var(--line);845 padding: 7px 16px;846 white-space: nowrap;847 overflow: hidden;848 text-overflow: ellipsis;849}850 851.unfurl.embed {852 padding: 0;853 overflow: hidden;854}855.embed-head {856 display: flex;857 align-items: center;858 gap: 10px;859 padding: 10px 14px;860 border-bottom: 1px solid var(--line);861}862.embed-head .unfurl-kind {863 flex: 0 0 auto;864}865.embed-title {866 flex: 1;867 min-width: 0;868 font-weight: 650;869 font-size: 14px;870 color: var(--ink);871 text-decoration: none;872 white-space: nowrap;873 overflow: hidden;874 text-overflow: ellipsis;875}876.embed-title:hover {877 color: var(--accent);878}879.embed-open {880 flex: 0 0 auto;881 font-family: var(--mono);882 font-size: 12px;883 color: var(--accent);884 text-decoration: none;885}886.embed-frame {887 display: block;888 width: 100%;889 height: 560px;890 border: 0;891 background: var(--code-bg);892}893 894.dashboard-shell {895 display: block;896}897.dashboard-shell .dashboard-frame {898 display: block;899 width: 100%;900 height: 900px;901 border: 0;902 background: var(--code-bg);903}904 905.unfurl.image {906 padding: 0;907}908.unfurl.image img {909 display: block;910 width: 100%;911 height: auto;912 max-height: 460px;913 object-fit: contain;914 background: var(--code-bg);915}916 917.artifact-chip {918 border: 1px solid var(--line);919 background: var(--panel);920 border-radius: var(--radius);921 padding: 10px 14px;922 margin: 8px 0;923 font-size: 14px;924}925.cell.dashboard .artifact-chip {926 margin: 14px 18px 18px;927}928.artifact-chip code {929 color: var(--accent);930}931 932/* ---- task board ---- */933.board-wrap {934 overflow-x: auto;935 border: 1px solid var(--line);936 border-radius: var(--radius);937 margin: 12px 0 20px;938 background: var(--panel);939}940table.board {941 border-collapse: collapse;942 width: 100%;943 font-size: 14px;944}945table.board th,946table.board td {947 text-align: left;948 padding: 9px 14px;949 border-bottom: 1px solid var(--line);950 vertical-align: top;951}952table.board thead th {953 background: var(--accent-soft);954 font-size: 12px;955 text-transform: uppercase;956 letter-spacing: 0.05em;957 color: #9a4a12;958 font-weight: 600;959 border-bottom: 1px solid var(--line);960}961table.board tbody tr:last-child td {962 border-bottom: none;963}964table.board .col-check {965 text-align: center;966 width: 92px;967 white-space: nowrap;968}969table.board tr.section-row td {970 background: var(--accent-soft);971 text-align: center;972 font-weight: 700;973 font-size: 13px;974 color: var(--accent-strong);975 padding: 7px 14px;976 letter-spacing: 0.02em;977}978.box {979 display: inline-flex;980 align-items: center;981 justify-content: center;982 width: 18px;983 height: 18px;984 border: 1.5px solid #cfcbe0;985 border-radius: 5px;986 font-size: 12px;987 color: #fff;988 line-height: 1;989}990.box.on {991 background: var(--accent);992 border-color: var(--accent);993}994.who-chip {995 display: inline-block;996 padding: 3px 12px;997 border-radius: 999px;998 font-size: 12.5px;999 font-weight: 600;1000 white-space: nowrap;1001}1002.who-chip.muted {1003 background: var(--code-bg);1004 color: var(--muted);1005 font-weight: 500;1006}1007 1008/* ---- status badges + clickable rows ---- */1009table.board .col-status {1010 width: 130px;1011 white-space: nowrap;1012}1013.badge {1014 display: inline-block;1015 padding: 3px 11px;1016 border-radius: 999px;1017 font-size: 12px;1018 font-weight: 600;1019 letter-spacing: 0.01em;1020}1021.badge.gray {1022 background: var(--code-bg);1023 color: var(--muted);1024}1025.badge.amber {1026 background: var(--accent-soft);1027 color: #b45309;1028}1029.badge.green {1030 background: #e6f7ee;1031 color: #1a8a55;1032}1033.badge.red {1034 background: #fde8ec;1035 color: #c62a4b;1036}1037table.board tr.linked-row {1038 cursor: pointer;1039}1040table.board tr.linked-row:hover td {1041 background: var(--accent-soft);1042}1043table.board tr.linked-row a {1044 color: var(--ink);1045 font-weight: 600;1046 text-decoration: none;1047}1048table.board tr.linked-row:hover a {1049 color: var(--accent-strong);1050}1051 1052/* ---- agent read hint ---- */1053.agent-hint {1054 display: flex;1055 align-items: center;1056 flex-wrap: wrap;1057 gap: 8px;1058 margin: 4px 0 22px;1059 font-size: 12.5px;1060 color: var(--muted);1061}1062#page .agent-hint code {1063 background: var(--code-bg);1064 padding: 2px 9px;1065 border-radius: 6px;1066 font-family: var(--mono);1067 font-size: 12px;1068 font-weight: 500;1069 color: var(--ink);1070}1071.agent-hint .copy {1072 flex: 0 0 auto;1073 background: none;1074 color: var(--muted);1075 border: 1px solid var(--line);1076 border-radius: 6px;1077 width: 22px;1078 height: 22px;1079 font-size: 11px;1080 line-height: 1;1081 cursor: pointer;1082 transition: color 0.12s, border-color 0.12s;1083}1084.agent-hint .copy:hover {1085 color: var(--accent-strong);1086 border-color: var(--accent);1087}1088.agent-hint .copy.copied {1089 color: #1a8a55;1090 border-color: #1a8a55;1091}1092.agent-hint-note {1093 margin-left: auto;1094 font-size: 12px;1095 color: var(--muted);1096}1097 1098/* ---- logbook summary stats ---- */1099.logbook-stats {1100 display: flex;1101 flex-wrap: wrap;1102 gap: 12px;1103 margin: 0 0 28px;1104}1105.stat-tile {1106 position: relative;1107 display: inline-flex;1108 align-items: center;1109 gap: 11px;1110 border: 1px solid var(--line);1111 background: var(--panel);1112 border-radius: var(--radius);1113 padding: 12px 23px;1114 font: inherit;1115 text-align: left;1116 cursor: pointer;1117 transition: border-color 0.12s, box-shadow 0.12s;1118}1119.stat-tile:hover:not([disabled]) {1120 border-color: rgba(249, 115, 22, 0.45);1121 box-shadow: 0 3px 12px rgba(31, 41, 55, 0.06);1122}1123.stat-tile:focus-visible {1124 outline: 2px solid var(--accent);1125 outline-offset: 2px;1126}1127.stat-tile[disabled] {1128 cursor: default;1129 opacity: 0.7;1130}1131.stat-tile.open {1132 border-color: rgba(249, 115, 22, 0.6);1133 box-shadow: 0 3px 12px rgba(31, 41, 55, 0.08);1134}1135.stat-icon {1136 width: 24px;1137 height: 24px;1138 flex: 0 0 24px;1139 object-fit: contain;1140 align-self: center;1141}1142.stat-text {1143 display: flex;1144 align-items: baseline;1145 gap: 8px;1146 white-space: nowrap;1147 line-height: 1;1148}1149.stat-num {1150 font-family: var(--mono);1151 font-size: 20px;1152 font-weight: 600;1153 line-height: 1;1154 color: var(--accent-strong);1155}1156.stat-label {1157 font-size: 15px;1158 line-height: 1;1159 color: var(--muted);1160}1161.stat-caret {1162 margin-left: 2px;1163 font-size: 10px;1164 color: var(--muted);1165 align-self: center;1166 transition: transform 0.12s;1167}1168.stat-tile.open .stat-caret {1169 transform: rotate(180deg);1170}1171.stat-popover {1172 position: absolute;1173 top: 100%;1174 left: 0;1175 margin-top: 6px;1176 min-width: 300px;1177 max-width: min(460px, 92vw);1178 max-height: 340px;1179 overflow-y: auto;1180 z-index: 20;1181 background: var(--panel);1182 border: 1px solid var(--line);1183 border-radius: var(--radius);1184 box-shadow: 0 8px 28px rgba(31, 41, 55, 0.12);1185 padding: 6px;1186}1187.stat-popover[hidden] {1188 display: none;1189}1190.stat-pop-head {1191 padding: 6px 10px 8px;1192 font-size: 11.5px;1193 font-weight: 700;1194 letter-spacing: 0.03em;1195 text-transform: uppercase;1196 color: var(--muted);1197}1198.stat-row {1199 display: flex;1200 align-items: flex-start;