:root{--ink:#171717;--muted:#6b6b6b;--line:#dedede;--soft:#f5f5f3;--paper:#fff;--accent:#8842fd;--rankw:62px}
*{box-sizing:border-box}html,body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}body{min-width:280px}button,input,select{font:inherit;border-radius:0}.page{max-width:1500px;margin:0 auto;padding:28px 34px 38px}.header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;border-bottom:1px solid #111;padding-bottom:18px}.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}.header h1{font-size:32px;line-height:1.08;margin:0;font-weight:760;letter-spacing:-.035em}.subtitle{margin:9px 0 0;color:var(--muted);font-size:14px;line-height:1.5}.lang{display:flex;border:1px solid #bdbdbd;flex:0 0 auto}.lang button{border:0;border-right:1px solid #bdbdbd;background:#fff;padding:8px 12px;cursor:pointer}.lang button:last-child{border-right:0}.lang button.on{background:#111;color:#fff}.tools{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}.seg{display:flex;border:1px solid #bdbdbd}.seg button{border:0;border-right:1px solid #bdbdbd;background:#fff;padding:9px 15px;cursor:pointer;min-width:92px}.seg button:last-child{border-right:0}.seg button.on{background:#111;color:#fff}.meta{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.chart-shell{margin-top:24px;border-top:1px solid #111;border-bottom:1px solid #111;padding:20px 0 16px}.chart-head{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:12px}.chart-head h2{margin:0;font-size:18px;letter-spacing:-.01em}.chart-head .method{font-size:12px;color:var(--muted);text-align:right;max-width:620px}.window-line{margin-top:5px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.window-tools{display:flex;align-items:end;gap:8px;flex-wrap:wrap;margin:0 0 14px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.window-tools button{height:36px;border:1px solid #aaa;background:#fff;padding:0 12px;cursor:pointer;min-width:40px}.window-tools button:hover{background:#f4f4f2}.window-tools label{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}.window-tools input{height:36px;border:1px solid #aaa;background:#fff;padding:0 8px;color:var(--ink);min-width:138px;font-variant-numeric:tabular-nums}.band-chart{position:relative;user-select:none;touch-action:none}.plot{position:relative;margin-left:var(--rankw);height:198px;border-left:1px solid #aaa;border-right:1px solid #aaa;background:linear-gradient(to bottom,transparent 0,transparent 32%,rgba(0,0,0,.035) 32%,rgba(0,0,0,.035) 33%,transparent 33%,transparent 65%,rgba(0,0,0,.035) 65%,rgba(0,0,0,.035) 66%,transparent 66%);overflow:visible}.rank-row{position:absolute;left:0;right:0;height:48px;z-index:2}.rank-row.r1{top:8px}.rank-row.r2{top:72px}.rank-row.r3{top:136px}.rank-label{position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%);width:48px;text-align:right;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}.track{position:absolute;inset:0;background:#f1f1ef;border-top:1px solid #e3e3e0;border-bottom:1px solid #e3e3e0}.segment{position:absolute;top:0;bottom:0;overflow:hidden;border-right:1px solid rgba(255,255,255,.52);z-index:2;transition:opacity 120ms ease-out,box-shadow 120ms ease-out}.segment-label{position:absolute;inset:0 8px;display:flex;align-items:center;font-size:13px;font-weight:750;color:white;white-space:nowrap;overflow:hidden;text-overflow:clip;text-shadow:0 1px 1px rgba(0,0,0,.35)}.segment[data-dark="0"] .segment-label{color:#151515;text-shadow:0 1px 0 rgba(255,255,255,.4)}.flow-svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:3}.flow-path{fill:none;opacity:.96;transition:opacity 120ms ease-out;vector-effect:non-scaling-stroke}.axis{position:relative;margin-left:var(--rankw);height:44px;border-top:1px solid #aaa}.tick{position:absolute;top:0;height:9px;border-left:1px solid #aaa}.tick span{position:absolute;top:12px;transform:translateX(-50%);font-size:11px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}.cursor{position:absolute;top:0;bottom:44px;width:1px;background:#111;pointer-events:none;display:none}.cursor-dot{position:absolute;bottom:43px;width:7px;height:7px;background:#111;transform:translate(-3px,3px);display:none}.hit{position:absolute;left:var(--rankw);right:0;top:0;height:198px;cursor:crosshair;z-index:4}.overview-wrap{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}.overview-head{display:flex;justify-content:space-between;gap:14px;align-items:center;font-size:11px;color:var(--muted);margin-bottom:6px}.overview-help{text-align:right}.overview{position:relative;height:62px;border:1px solid #aaa;background:#f7f7f5;overflow:hidden;touch-action:none}.overview-row{position:absolute;left:0;right:0;height:13px;background:#efefec}.overview-row.o1{top:8px}.overview-row.o2{top:24px}.overview-row.o3{top:40px}.mini-seg{position:absolute;top:0;bottom:0}.window-selection{position:absolute;top:0;bottom:0;border:2px solid #111;background:rgba(255,255,255,.1);pointer-events:none;z-index:4}.window-selection .handle{position:absolute;top:-2px;bottom:-2px;width:10px;background:#111}.window-selection .handle.left{left:-6px}.window-selection .handle.right{right:-6px}.overview-hit{position:absolute;inset:0;z-index:5;cursor:ew-resize}.inspector{display:grid;grid-template-columns:170px repeat(3,minmax(0,1fr));gap:0;border-bottom:1px solid #111;margin-top:18px}.inspect-date{padding:16px 16px 16px 0;border-right:1px solid var(--line)}.inspect-date .d{font-size:24px;font-weight:780;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.inspect-date .hint{margin-top:6px;font-size:11px;color:var(--muted)}.rank-card{padding:14px 16px;border-right:1px solid var(--line);min-width:0}.rank-card:last-child{border-right:0}.rank-card .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.creator-line{display:flex;align-items:center;gap:8px;margin-top:7px;min-width:0}.swatch{width:12px;height:12px;flex:0 0 auto}.creator{font-size:17px;font-weight:780;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.model{font-size:12px;color:var(--muted);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score{font-size:13px;margin-top:4px;font-weight:700;font-variant-numeric:tabular-nums}.summary{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}.summary .cell{padding:14px 16px;border-right:1px solid var(--line)}.summary .cell:first-child{padding-left:0}.summary .cell:last-child{border-right:0}.summary .v{font-size:23px;font-weight:780;font-variant-numeric:tabular-nums}.summary .l{font-size:11px;color:var(--muted);margin-top:3px}.legend{padding-top:18px}.legend-title{font-size:12px;color:var(--muted);margin-bottom:10px}.legend-list{display:flex;flex-wrap:wrap;gap:9px 18px}.legend-item{display:flex;align-items:center;gap:7px;font-size:12px}.legend-item i{width:11px;height:11px;display:inline-block}.note{margin-top:22px;font-size:11px;color:var(--muted);line-height:1.55;border-top:1px solid var(--line);padding-top:13px}.footer{margin-top:16px;font-size:11px;color:var(--muted)}
@media(max-width:800px){.page{padding:18px 16px 28px}.header{gap:14px}.header h1{font-size:25px}.subtitle{font-size:12px}.chart-head{align-items:flex-start;flex-direction:column}.chart-head .method{text-align:left}.plot{height:178px}.rank-row{height:42px}.rank-row.r1{top:8px}.rank-row.r2{top:67px}.rank-row.r3{top:126px}.hit{height:178px}.segment-label{font-size:11px}.inspector{grid-template-columns:1fr 1fr}.inspect-date{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line);padding-right:0}.rank-card{border-bottom:1px solid var(--line)}.rank-card:nth-child(3){border-right:0}.rank-card:last-child{grid-column:1/-1;border-bottom:0}.summary{grid-template-columns:1fr 1fr}.summary .cell{border-bottom:1px solid var(--line)}.summary .cell:nth-child(2){border-right:0}.summary .cell:nth-child(3),.summary .cell:nth-child(4){border-bottom:0}.summary .cell:nth-child(3){padding-left:0}.meta{width:100%}:root{--rankw:42px}.rank-label{font-size:16px;right:calc(100% + 9px);width:34px}.seg{width:100%}.seg button{flex:1;padding:9px 5px;min-width:0}.tools{gap:10px}.window-tools label{width:calc(50% - 4px);justify-content:space-between}.window-tools input{min-width:0;flex:1}.overview-head{align-items:flex-start;flex-direction:column}.overview-help{text-align:left}}
@media(max-width:430px){.header{flex-direction:column}.lang{align-self:flex-start;margin-top:0}.header h1{font-size:23px}.plot{height:166px}.rank-row{height:40px}.rank-row.r1{top:6px}.rank-row.r2{top:62px}.rank-row.r3{top:118px}.hit{height:166px}.axis{height:39px}.tick span{font-size:10px}.inspect-date .d{font-size:21px}.creator{font-size:15px}.legend-list{gap:8px 12px}.window-tools label{width:100%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* v1.1 — optional flow connections, motion-safe by default */
.tool-groups{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.flow-control{display:flex;align-items:center;border:1px solid #bdbdbd;min-height:38px}
.flow-control>span{padding:0 10px;font-size:11px;color:var(--muted);border-right:1px solid #bdbdbd;line-height:36px}
.flow-control button{border:0;border-right:1px solid #bdbdbd;background:#fff;padding:9px 14px;cursor:pointer;min-width:58px}
.flow-control button:last-child{border-right:0}.flow-control button.on{background:#111;color:#fff}
.flow-svg.is-off{display:none}
.flow-svg.flow-reveal .flow-path{animation:flowReveal 160ms ease-out}
@keyframes flowReveal{from{opacity:0}to{opacity:.96}}
@media(prefers-reduced-motion:reduce){.flow-svg.flow-reveal .flow-path{animation:none!important}}
@media(max-width:800px){.tool-groups{width:100%}.flow-control{flex:1}.flow-control>span{flex:1}.flow-control button{min-width:52px}}

/* v1.2 — community-informed block-flow readability */
.plot.has-flow-focus .segment:not(.is-flow-focus){opacity:.28}
.plot.has-flow-focus .segment.is-flow-focus{opacity:1;box-shadow:inset 0 0 0 2px rgba(17,17,17,.65)}
.plot.has-flow-focus .flow-path:not(.is-flow-focus){opacity:.12}
.plot.has-flow-focus .flow-path.is-flow-focus{opacity:1}
.legend-item{border:0;background:transparent;padding:4px 0;cursor:pointer;color:inherit;font:inherit}
.legend-item:focus-visible{outline:2px solid #111;outline-offset:3px}
.legend-item.is-flow-focus{font-weight:800;text-decoration:underline;text-underline-offset:3px}
@media(max-width:800px){.flow-path{opacity:.92}.plot.has-flow-focus .flow-path.is-flow-focus{opacity:1}}
.latest-release{margin-top:4px;font-size:12px;font-weight:700;letter-spacing:.01em;color:#3f3f46;font-variant-numeric:tabular-nums}

/* unified public navigation */
.source-link{color:var(--muted);text-decoration:none}.source-link:hover{text-decoration:underline;text-underline-offset:3px}.header-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}.viewnav{display:flex;border:1px solid #bdbdbd;height:36px}.viewnav a{display:flex;align-items:center;padding:0 12px;border-right:1px solid #bdbdbd;color:var(--ink);text-decoration:none;font-size:12px}.viewnav a:last-child{border-right:0}.viewnav a.on{background:#111;color:#fff}.note{max-width:760px}.footer{line-height:1.5}.chart-head{align-items:flex-start}.chart-head .method,.subtitle,.meta{display:none!important}
@media(max-width:430px){.header-actions{width:100%;justify-content:space-between}.viewnav{height:34px}.viewnav a{padding:0 10px}}