Spaces:
Running
Running
File size: 15,984 Bytes
b2fee12 3e65159 b2fee12 d3de41b b2fee12 d3de41b b2fee12 3ba468f b2fee12 3ba468f b2fee12 3ba468f b2fee12 3ba468f b2fee12 d3de41b dd7161c 538ab06 dd7161c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 | :root {
--bg: #f7f7fb; --panel: #ffffff; --ink: #1b1d29; --mute: #5d6378; --line: #dfe1ea;
--pub: #f08a24; --snap: #2f7bf6; --move: rgba(120, 124, 140, .75); --accent: #7c5cff; --held: #e5487f; --fill: #9cc0ff;
--code: #eef0f7;
}
@media (prefers-color-scheme: dark) {
:root { --bg: #11131c; --panel: #191c28; --ink: #e7e9f2; --mute: #9aa1b8; --line: #2b3042; --code: #222738;
--move: rgba(200, 204, 220, .6); }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; background: var(--code); padding: .05em .3em; border-radius: 4px; }
.top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; padding: 20px 24px 8px; }
.brand { flex: 1 1 420px; }
h1 { margin: 0; font-size: 1.7em; letter-spacing: -.01em;
background: linear-gradient(90deg, var(--pub), var(--accent) 55%, var(--snap)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { margin: 4px 0 0; color: var(--mute); max-width: 60em; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs button { border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: 6px 14px; border-radius: 99px; cursor: pointer; font: inherit; }
.tabs button[aria-selected="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; padding: 8px 24px 4px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.stat b { display: block; font-size: 1.45em; }
.stat:nth-child(1) b { color: var(--snap); } .stat:nth-child(2) b { color: var(--accent); }
.stat:nth-child(3) b { color: var(--pub); } .stat:nth-child(4) b { color: var(--held); }
.stat span { color: var(--mute); font-size: .88em; }
main { padding: 12px 24px 32px; }
.viewer { display: grid; grid-template-columns: clamp(260px, 25vw, 340px) 1fr; gap: 16px; } /* wide enough that most names fit one line */
/* the segment list grows with the page: no box here scrolls on its own, the page does */
.side { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; align-self: start; min-width: 0; }
.lbl { font-size: .8em; color: var(--mute); text-transform: uppercase; letter-spacing: .05em; }
select, input[type="search"] { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.seglist { list-style: none; margin: 4px 0 0; padding: 0; }
.seglist li { padding: 6px 8px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.seglist li span { min-width: 0; overflow-wrap: anywhere; }
.seglist li:hover { background: var(--bg); }
.seglist li.on { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.seglist small { color: var(--mute); white-space: nowrap; }
.stage { min-width: 0; }
.bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.vt { font-weight: 600; }
.sp { flex: 1; }
.tog { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--mute); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.pub { background: var(--pub); } .dot.snap { background: var(--snap); } .dot.move { background: var(--move); border-radius: 2px; height: 3px; width: 14px; }
.canvaswrap { position: relative; background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 1 / 1; max-width: 760px; }
canvas { width: 100%; height: 100%; display: block; cursor: crosshair; image-rendering: pixelated; }
.cvmsg { position: absolute; inset: auto 0 0 0; padding: 8px 12px; background: rgba(0, 0, 0, .6); color: #fff; font-size: .9em; }
.ctl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; max-width: 760px; }
.ctl button { font: inherit; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 8px; padding: 4px 12px; cursor: pointer; }
.zl { display: inline-flex; align-items: center; gap: 6px; color: var(--mute); }
.zl input[type="range"] { width: 260px; accent-color: var(--accent); }
.hint { color: var(--mute); font-size: .85em; max-width: 760px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; max-width: 760px; }
.card .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.card .row div b { display: block; font-size: 1.15em; }
.card .row div span { color: var(--mute); font-size: .8em; }
.meter { height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; display: flex; margin: 6px 0; }
.meter i { display: block; height: 100%; }
.legend { font-size: .8em; color: var(--mute); display: flex; gap: 12px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
pre.cmd { background: var(--code); padding: 8px 10px; border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .82em; margin: 6px 0 0; }
.tablewrap { overflow-x: auto; overflow-y: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: .9em; }
th, td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th.n, td.n { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr { cursor: pointer; } tbody tr:hover { background: var(--bg); }
.prose { max-width: 52em; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 20px 16px; }
.prose h2 { font-size: 1.1em; margin: 1em 0 .3em; }
.credit { color: var(--mute); font-size: .85em; }
.fig { margin: 12px 0; }
.fig img { max-width: 100%; height: auto; border-radius: 10px; display: block; }
.fig figcaption { color: var(--mute); font-size: .85em; margin-top: 4px; }
@media (max-width: 760px) {
.top, .stats, main { padding-left: 16px; padding-right: 16px; }
.viewer { grid-template-columns: 1fr; }
.side { order: 1; } /* on a phone the viewer comes first and the list follows it */
.zl input[type="range"] { width: 160px; }
}
/* ---------------------------------------------------------------- Voxel exact tab */
:root { --band: #d9c6a3; --neutral: #c9ccd6; --neg: #2f7bf6; --pos: #d9661a; --heldcell: #ece6ee; --tol: rgba(47, 123, 246, .14);
--ok: #1f8a5b; --bad: #c4352b; --warnbg: #fff4d6; --warnink: #6b4a00; --warnline: #e8b931; }
@media (prefers-color-scheme: dark) {
:root { --band: #6d5d43; --neutral: #3d4256; --heldcell: #2a2433; --tol: rgba(110, 160, 255, .18); --ok: #4cc38a; --bad: #ff7a6e;
--warnbg: #3a2f10; --warnink: #ffe39a; --warnline: #c99a1c; }
}
.vx-banner { background: repeating-linear-gradient(135deg, var(--warnbg) 0 14px, color-mix(in srgb, var(--warnbg) 70%, var(--warnline)) 14px 28px);
color: var(--warnink); border-bottom: 2px solid var(--warnline); padding: 8px 24px; font-size: .95em; }
.vx-banner.inline { border: 2px solid var(--warnline); border-radius: 10px; margin: 0 0 12px; }
.vx-error { background: var(--panel); border: 2px solid var(--bad); border-radius: 10px; padding: 8px 12px; }
.vx { max-width: 1100px; }
.vx-intro h2, .vx-showwrap h2 { font-size: 1.15em; margin: .2em 0 .3em; }
.vx-intro p { color: var(--mute); max-width: 60em; margin: 0 0 8px; }
.vx-tiles { padding: 4px 0 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vx-t-measured b { color: var(--snap) !important; } .vx-t-certified b { color: var(--accent) !important; } .vx-t-not_shown b { color: var(--mute) !important; }
.vx-cards { display: grid; gap: 14px; }
.vx-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.vx-card.c-measured { border-left: 4px solid var(--snap); } .vx-card.c-certified { border-left: 4px solid var(--accent); }
.vx-card.c-not_shown { border-left: 4px dashed var(--mute); }
.vx-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.vx-head h3 { margin: 0; font-size: 1.2em; }
.vx-head small { color: var(--mute); }
.vx-badge { font-size: .82em; color: var(--mute); border: 1px solid var(--line); border-radius: 99px; padding: 2px 10px; }
.vx-badge b { color: var(--ink); margin-right: 4px; }
.vx-headline { font-size: 1.05em; margin: 8px 0 0; }
.vx-headline b { font-size: 1.35em; }
.vx-card h4 { font-size: .9em; margin: 12px 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vx-meter { margin-top: 10px; gap: 2px; background: transparent; }
.vx-meter i:first-child { border-radius: 99px 0 0 99px; } .vx-meter i:last-child { border-radius: 0 99px 99px 0; }
.vx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.vx-chip { font: inherit; font-size: .85em; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 8px; padding: 4px 10px; cursor: pointer; }
.vx-chip.sub { margin-left: 18px; }
.vx-chip[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.vx-chip .vx-v { font-weight: 600; margin-left: 4px; }
.vx-chip.v-pass .vx-v { color: var(--ok); } .vx-chip.v-fail .vx-v { color: var(--bad); }
.vx-chip.v-not-shown .vx-v, .vx-chip.v-unanswerable .vx-v, .vx-chip.v-void .vx-v { color: var(--mute); }
.vx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; }
.vx-tol { display: grid; gap: 8px; }
.vx-tolrow { display: grid; grid-template-columns: 70px 1fr 150px; align-items: center; gap: 10px; font-size: .9em; }
.vx-toll { color: var(--mute); }
.vx-track { position: relative; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--line) 70%, transparent); }
.vx-track.na { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--line) 5px 6px); display: flex; align-items: center; padding-left: 8px; }
.vx-track.na em { font-size: .8em; color: var(--mute); }
.vx-fill { position: absolute; left: 0; top: 2px; bottom: 2px; border-radius: 0 4px 4px 0; background: var(--snap); }
.vx-whisk { position: absolute; top: 50%; height: 0; border-top: 2px solid var(--ink); }
.vx-whisk::before, .vx-whisk::after { content: ""; position: absolute; top: -6px; height: 10px; border-left: 2px solid var(--ink); }
.vx-whisk::before { left: 0; } .vx-whisk::after { right: 0; }
.vx-barline { position: absolute; top: -4px; bottom: -4px; border-left: 2px dashed var(--ink); }
.vx-tolv b { font-variant-numeric: tabular-nums; } .vx-tolv small { color: var(--mute); display: block; font-size: .78em; }
.vx-hist { width: 100%; height: auto; display: block; color: var(--ink); }
.vx-hist .vx-band { fill: var(--tol); }
.vx-hist .vx-hbar { fill: var(--snap); }
.vx-hist .vx-hpub { fill: none; stroke: var(--pub); stroke-width: 2; stroke-linejoin: round; }
.vx-hist .vx-base { stroke: var(--line); stroke-width: 1; }
.vx-hist .vx-zero { stroke: var(--mute); stroke-width: 1; }
.vx-hist .vx-tick { stroke: var(--mute); } .vx-hist .vx-tickt { fill: var(--mute); font-size: 10px; }
.vx-pubtog { font-weight: 400; font-size: .95em; }
.vx-ctl { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2px 18px; font-size: .86em; }
.vx-ctl li.yes span { color: var(--ok); font-weight: 700; } .vx-ctl li.no span { color: var(--bad); font-weight: 700; }
.vx-not { margin-top: 10px; }
.vx-assume { margin: 4px 0 8px; font-size: .9em; }
.vx-fill.cov { background: var(--fill); }
.vx-cov { margin-bottom: 4px; }
.vx-scope { border-left: 3px solid var(--accent); padding: 6px 10px; margin: 6px 0 10px; background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 0 6px 6px 0; font-size: .92em; }
.vx-single, .vx-earlier { margin-top: 8px; }
.vx-single summary, .vx-earlier summary { cursor: pointer; color: var(--accent); }
.vx-earlier ul { margin: 4px 0 0; padding-left: 18px; font-size: .88em; }
.vx-earlier small { color: var(--mute); }
.vx-num summary { cursor: pointer; color: var(--accent); margin-top: 6px; }
.vx-num table { font-size: .82em; }
.vx-showwrap { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 16px 0; }
.vx-showgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 576px); gap: 16px; align-items: start; }
.vx-heatwrap { position: relative; min-width: 0; }
#vx-heat { width: 100%; height: auto; image-rendering: pixelated; border-radius: 8px; border: 1px solid var(--line); cursor: pointer; }
.vx-tip { position: absolute; background: var(--ink); color: var(--bg); font-size: .8em; padding: 3px 8px; border-radius: 6px; pointer-events: none; white-space: nowrap; }
.vx-heatlegend { margin-top: 6px; align-items: center; }
.vx-grad { display: inline-block; width: 120px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--neg), var(--neutral), var(--pos)); }
.legend i.hatch { background: repeating-linear-gradient(135deg, transparent 0 2px, var(--mute) 2px 3px); border: 1px solid var(--line); }
.vx-modes { border: 0; margin: 0; padding: 0; display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .88em; color: var(--mute); }
.vx-modes legend { float: left; margin-right: 6px; }
.dot.truth { background: transparent; border: 2px dashed var(--ink); width: 12px; height: 12px; }
#vx-cv { cursor: default; }
.vx-how { max-width: none; margin-top: 16px; }
.vx-diagram { width: 100%; max-width: 680px; height: auto; display: block; color: var(--ink); font: 13px system-ui, sans-serif; }
.vx-diagram .d-band { fill: var(--band); }
.vx-diagram .d-tol { fill: var(--tol); }
.vx-diagram .d-truth { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 5; }
.vx-diagram .d-recto { fill: none; stroke: var(--snap); stroke-width: 2.5; }
.vx-diagram .d-verso { fill: none; stroke: var(--mute); stroke-width: 2; stroke-dasharray: 2 4; }
.vx-diagram .d-arrow, .vx-diagram .d-normal { stroke: currentColor; stroke-width: 2; }
.vx-diagram .d-lead { stroke: var(--mute); stroke-width: 1; }
.vx-diagram .d-pub { fill: var(--pub); stroke: var(--panel); stroke-width: 2; }
.vx-diagram .d-snap { fill: var(--snap); stroke: var(--panel); stroke-width: 2; }
.vx-diagram .d-t { fill: currentColor; } .vx-diagram .muted { fill: var(--mute); }
.vx-flow { list-style: none; counter-reset: f; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.vx-flow li { counter-increment: f; position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 26px 10px 10px; font-size: .86em; }
.vx-flow li::before { content: counter(f); position: absolute; top: 6px; left: 10px; font-weight: 700; color: var(--accent); }
.vx-tw { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.vx-tw th, .vx-tw td { white-space: normal; overflow-wrap: anywhere; padding: 5px 8px; }
#vx-prereg { overflow-wrap: anywhere; word-break: break-all; }
button.anim { font: inherit; font-size: .9em; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 99px; padding: 3px 12px; cursor: pointer; }
button.anim[aria-pressed="true"] { border-color: var(--snap); box-shadow: inset 0 0 0 1px var(--snap); }
@media (max-width: 760px) {
.vx-banner { padding-left: 16px; padding-right: 16px; }
.vx-grid, .vx-showgrid { grid-template-columns: 1fr; }
.vx-tolrow { grid-template-columns: 60px 1fr 110px; }
.vx-ctl { grid-template-columns: 1fr; }
}
|