:root {
  color-scheme: light;
  --bg:#fcfcfb; --fg:#0b0b0b; --fg2:#52514e; --fg3:#8a8983; --rule:#e2e0da; --rule2:#efeee9; --panel:#f4f3ef;
  
  --c-b:#eb6834; --c-p:#1baf7a; --c-z:#2a78d6;
  --t-b:rgba(235,104,52,.13); --t-p:rgba(27,175,122,.13); --t-z:rgba(42,120,214,.12);
  
  --c-f:#a0417a; --c-c:#6b8e23; --t-f:rgba(160,65,122,.13); --t-c:rgba(107,142,35,.14);
  --hi:#eda100;                           
  
  --w1:#eda100; --w2:#e87ba4; --w3:#008300; --w4:#4a3aa7; --w5:#e34948; --w-a:.42;
  --ink:40,44,52; --ink-a:.42;            
  --mark:rgba(20,20,20,.05);              
  --serif: Charter, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:#1a1a19; --fg:#ffffff; --fg2:#c3c2b7; --fg3:#8f8e87; --rule:#3a3935; --rule2:#262624; --panel:#232321;
    --c-b:#d95926; --c-p:#199e70; --c-z:#3987e5;
    --t-b:rgba(217,89,38,.24); --t-p:rgba(25,158,112,.24); --t-z:rgba(57,135,229,.24);
    --c-f:#d0628f; --c-c:#7f9c36; --t-f:rgba(208,98,143,.24); --t-c:rgba(127,156,54,.24);
    --hi:#c98500; --ink:232,232,236; --ink-a:.36; --mark:rgba(255,255,255,.07);
    --w1:#c98500; --w2:#d55181; --w3:#008300; --w4:#9085e9; --w5:#e66767; --w-a:.62;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#1a1a19; --fg:#ffffff; --fg2:#c3c2b7; --fg3:#8f8e87; --rule:#3a3935; --rule2:#262624; --panel:#232321;
  --c-b:#d95926; --c-p:#199e70; --c-z:#3987e5;
  --t-b:rgba(217,89,38,.24); --t-p:rgba(25,158,112,.24); --t-z:rgba(57,135,229,.24);
  --c-f:#d0628f; --c-c:#7f9c36; --t-f:rgba(208,98,143,.24); --t-c:rgba(127,156,54,.24);
  --hi:#c98500; --ink:232,232,236; --ink-a:.36; --mark:rgba(255,255,255,.07);
  --w1:#c98500; --w2:#d55181; --w3:#008300; --w4:#9085e9; --w5:#e66767; --w-a:.62;
}


* { box-sizing: border-box }
body { background: var(--bg); color: var(--fg); margin: 0; font: 16px/1.6 var(--serif) }
a { color: inherit; text-decoration-color: var(--fg3); text-underline-offset: 2px }
.jl-page { max-width: 1320px; margin: 0 auto; padding: 24px 16px 80px }
.jl-nav { font: 13px var(--sans); color: var(--fg2) }
.jl-page h1 { font-size: 30px; line-height: 1.15; margin: 14px 0 12px; font-weight: 600; letter-spacing: -.01em }
.jl-page h2 { font-size: 21px; line-height: 1.25; margin: 48px 0 4px; font-weight: 600; border-top: 1px solid var(--rule); padding-top: 18px }
.jl-page h3 { font: 600 17px/1.3 var(--sans); margin: 36px 0 2px }
.jl-lede, .jl-sec { color: var(--fg2); max-width: 780px } .jl-lede { margin: 0 0 16px } .jl-sec { margin: 2px 0 0 }
.jl-ctl { position: sticky; top: 0; z-index: 6; background: var(--bg); border-bottom: 1px solid var(--rule); padding: 8px 0; font: 13px var(--sans); color: var(--fg2); display: flex; gap: 18px; flex-wrap: wrap; align-items: center }
.jl-ctl label { cursor: pointer } .jl-ctl input { vertical-align: -2px; margin-right: 4px } .jl-ctl [hidden] { display: none }
.jl-seg { display: inline-flex } .jl-seg button { font: inherit; border: 1px solid var(--rule); background: transparent; color: var(--fg2); padding: 1px 10px; cursor: pointer; margin-left: -1px }
.jl-seg button:first-child { border-radius: 4px 0 0 4px; margin-left: 6px } .jl-seg button:last-child { border-radius: 0 4px 4px 0 }
.jl-seg button.on { background: var(--fg); color: var(--bg); border-color: var(--fg) }

.jl-seg.sm button { font-size: 11px; padding: 0 7px; color: var(--fg3) } .jl-seg.sm button:first-child { margin-left: 0 }
.jl-seg.sm button.on { color: var(--bg) }
.jl-tog { font: inherit; border: 1px solid var(--rule); background: transparent; color: var(--fg3); padding: 0 7px; border-radius: 4px; cursor: pointer }
.jl-tog.on { background: var(--fg); color: var(--bg); border-color: var(--fg) }
.jl-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px }
.jl-cap { font: 13px/1.5 var(--sans); color: var(--fg2); margin-top: 8px; max-width: 840px } .jl-cap b { color: var(--fg); font-weight: 600 }
.jl-quote { font: 13px/1.5 var(--sans); color: var(--fg2); border-left: 2px solid var(--rule); padding: 2px 0 2px 10px; margin: 8px 0 0; max-width: 840px }
.jl-quote q { color: var(--fg); font: italic 14px var(--serif) }
.jl-box { background: var(--panel); border-radius: 6px; padding: 12px 16px; font-size: 15px; max-width: 840px }
.jl-box .tag { font: 600 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--fg2); display: block; margin-bottom: 6px }
.jl-box code { font: 13px var(--mono) }
.jl-notes { font: 13px/1.55 var(--sans); color: var(--fg2); max-width: 840px } .jl-notes li { margin: 4px 0 }


.jl-chead { position: sticky; top: var(--ctlh, 40px); z-index: 4; background: var(--bg); padding-top: 6px }


.rh { position: relative; overflow-x: auto; overflow-y: hidden; padding: 4px 2px 12px; outline: none; scrollbar-width: none; -webkit-user-select: none; user-select: none }
.rh::-webkit-scrollbar { display: none }
.rh:focus-visible .rh-track { box-shadow: 0 0 0 2px var(--rule) }
.rh-track { position: relative; display: inline-flex; align-items: center; flex-wrap: nowrap; isolation: isolate; background: var(--bg); border-radius: 3px; cursor: grab; touch-action: pan-y }
.rh.drag .rh-track { cursor: grabbing }
.rh-w { display: inline-block; padding: 3px 7px; font: 19px/1.35 var(--serif); color: var(--fg); white-space: pre }
.rh-w.tpl { font: 12px/1.35 var(--sans); color: var(--fg3); padding: 6px 5px; letter-spacing: .02em }
.rh-head { position: absolute; left: 0; top: 0; bottom: 0; width: 20px; border-radius: 3px; background: #fff; mix-blend-mode: difference; pointer-events: none; z-index: 2 }
.rh-ticks { position: absolute; left: 0; right: 0; bottom: -9px; height: 7px; pointer-events: none }
.rh-ticks i { position: absolute; bottom: 0; width: 1px; height: 5px; margin-left: -.5px; background: var(--fg3); opacity: .5; transform-origin: bottom }
.rh-ticks i.on { opacity: 1; background: var(--fg) }
.rh-ticks i.case::after { content: ""; position: absolute; left: -2px; bottom: -5px; width: 5px; height: 5px; border-radius: 50%; background: var(--fg2) }
.rh-info { font: 12px var(--sans); color: var(--fg3); margin: 2px 0 6px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap }
.rh-info .pos { color: var(--fg2) } .rh-info > button { font: inherit; background: none; border: 0; padding: 0; color: var(--fg2); text-decoration: underline; text-decoration-color: var(--fg3); text-underline-offset: 2px; cursor: pointer }
.rh-info > button[hidden] { display: none }
.rh-hint { color: var(--fg3); margin-left: auto }
.jl-tip { position: fixed; z-index: 20; display: none; pointer-events: none; max-width: 340px; font: 12px/1.45 var(--sans); color: var(--fg);
  background: var(--bg); border: 1px solid var(--rule); border-radius: 4px; padding: 6px 9px; box-shadow: 0 3px 12px rgba(0,0,0,.18) }

.jl-howto { font: 12px/1.45 var(--sans); color: var(--fg2); position: sticky; left: 0; max-width: min(1040px, calc(100vw - 32px)); margin: 10px 0 8px;
  padding-left: 10px; border-left: 2px solid var(--rule); display: flex; flex-wrap: wrap; gap: 3px 18px; align-items: baseline }
.jl-howto .t { font-weight: 600; color: var(--fg); text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px }
.jl-howto b { color: var(--fg); font-weight: 600 } .jl-howto:empty { display: none }

.jl-tools { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-left: auto }
.jl-tools .jl-seg button:first-child { margin-left: 0 } .jl-tools .jl-seg.vt button { font: 12.5px var(--sans); padding: 1px 9px }
.jl-tools select { font: 12px var(--sans); color: var(--fg2); background: var(--bg); border: 1px solid var(--rule); border-radius: 4px; padding: 1px 4px }
.jl-tools .set { color: var(--fg3); display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px }
.jl-how { font: 600 12px var(--sans); color: var(--fg); background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; padding: 1px 10px; cursor: pointer }
.jl-how[aria-expanded="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg) }
.jl-legend { font: 12px/1.45 var(--sans); color: var(--fg2); padding: 2px 0 6px; border-bottom: 1px solid var(--rule) }
.jl-legend b { color: var(--fg); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px }
.jl-chead { z-index: 5 }
.jl-howpanel { position: absolute; left: 0; right: 0; top: 100%; z-index: 7; background: var(--bg); border: 1px solid var(--rule); border-top: 0;
  border-radius: 0 0 6px 6px; box-shadow: 0 10px 24px rgba(0,0,0,.16); padding: 10px 14px 12px; max-height: 60vh; overflow: auto }
.jl-howpanel .jl-howto { position: static; max-width: none; border: 0; padding: 0; margin: 0; font-size: 12.5px }
.jl-casepick { display: inline-flex; align-items: center; gap: 6px }
.jl-casepick select { font: 13px var(--sans); color: var(--fg); background: var(--bg); border: 1px solid var(--rule); border-radius: 4px; padding: 1px 4px; max-width: 280px }
.jl-casepick button { font: 14px var(--sans); line-height: 1; border: 1px solid var(--rule); background: transparent; color: var(--fg2); border-radius: 4px; padding: 2px 7px; cursor: pointer }
.jl-casepick button:disabled { opacity: .35; cursor: default } .jl-casepick label { margin-left: 8px; color: var(--fg3) }


.p5fig { position: relative } .p5fig canvas { display: block } .p5fig[hidden], .jl-rows[hidden] { display: none }
.jl-loupe { position: fixed; z-index: 30; display: none; pointer-events: none; background: var(--bg); border: 1px solid var(--rule); box-shadow: 0 8px 28px rgba(0,0,0,.2) }
.jl-loupe canvas { display: block }


.jl-g4 { display: grid; grid-template-columns: 62px repeat(3, minmax(0, 1fr)) }
.jl-cols { position: sticky; top: calc(var(--ctlh, 40px) + var(--cheadh, 90px)); z-index: 3; background: var(--bg); border-bottom: 1px solid var(--rule) }
.jl-cols > div { font: 600 13px var(--sans); padding: 5px 8px } .jl-cols .lens { font-weight: 400; color: var(--fg3); font-size: 11px; margin-left: 5px }
.jl-reps > div { padding: 8px 8px 12px; border-bottom: 1px solid var(--rule); font: italic 14px/1.5 var(--serif); white-space: pre-line }
.jl-reps > .lab { font: 500 11px/1.8 var(--sans); color: var(--fg3); text-align: right; padding-left: 0; text-transform: uppercase; letter-spacing: .05em; white-space: normal }
.jl-row > div { padding: 1px 6px; border-bottom: 1px solid var(--rule2); min-height: 23px }
.jl-row > .lab { font: 11px/22px var(--mono); color: var(--fg3); text-align: right; padding: 1px 10px 1px 0; white-space: nowrap }
.jl-row.m > div { background: var(--mark) } .jl-row.m > .lab { color: var(--fg); font-weight: 700; box-shadow: inset 3px 0 0 var(--fg2) }
.jl-row.out > div { border-top: 2px solid var(--rule) } .jl-row.out > .lab { color: var(--fg2) }
.jl-rows.fade .cell { animation: jl-fade .16s ease-out } @keyframes jl-fade { from { opacity: .55 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .jl-rows.fade .cell { animation: none } }
@media (max-width: 820px) { .jl-wide { overflow-x: auto; -webkit-overflow-scrolling: touch } .jl-wide > .inner { min-width: 780px } }


.w { display: inline-block; margin: 1px 3px 1px 0; padding: 0 5px; border-radius: 0; line-height: 20px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; font: 13px/20px var(--sans); cursor: default }
.w .g { color: var(--fg2); font-size: 11px; margin-left: 4px }
.w.hl, .sb.hl { outline: 1.5px solid var(--fg); outline-offset: -1px; font-weight: 700 }
.w.sp { color: var(--fg3) } .w.lk { box-shadow: 0 0 0 2px var(--hi) }


.jl-row.sv > div { padding: 2px 6px } .jl-row.sv > .lab { line-height: var(--boxh, 84px) }  
.share { position: relative; height: var(--boxh, 84px); overflow: hidden }
.sv-svg { display: block; shape-rendering: crispEdges }
.sv-svg text { shape-rendering: auto; font-family: var(--sans); font-weight: 500; fill: var(--fg); text-anchor: middle; dominant-baseline: central; pointer-events: none }
.sv-svg text.g { font-weight: 400; fill: var(--fg2) }
.sb > rect:first-of-type { fill: var(--tint, var(--panel)) }
.sb.sp > rect:first-of-type { fill: var(--rule2) } .sb.sp text { fill: var(--fg3); font-weight: 400 } .sb.lump text { font-style: italic }
.sb.rest > rect { fill: url(#jl-hatch) } .sb.rest text { fill: var(--fg3); font-style: italic; font-weight: 400 }
.sb .ol { fill: none; stroke: none } .sb.hl .ol { stroke: var(--fg); stroke-width: 1.5 } .sb.hl text { font-weight: 700 }
.sb.lk .ol { stroke: var(--hi); stroke-width: 2.5 }
.col-b { --tint: var(--t-b) } .col-p { --tint: var(--t-p) } .col-z { --tint: var(--t-z) }
.ramp { display: inline-flex; gap: 2px; vertical-align: -3px; margin: 0 6px } .ramp span { width: 26px; height: 14px; border-radius: 2px; font-size: 9px; line-height: 14px; text-align: center; color: var(--fg) }
.ring { display: inline-block; padding: 0 5px; border-radius: 3px; box-shadow: 0 0 0 2px var(--hi); color: var(--fg); margin: 0 2px }
.hatch { display: inline-block; width: 22px; height: 12px; vertical-align: -1px; border-radius: 2px; background: repeating-linear-gradient(135deg, var(--fg3) 0 1px, transparent 1px 5px) }
@media (max-width: 640px) { .jl-page h1 { font-size: 24px } body { font-size: 15px } .rh-w { font-size: 16px } .jl-ctl { position: static }
  .rh-hint { display: none } .jl-chead { border-bottom: 1px solid var(--rule) } .jl-legend { display: none }
  .jl-tools { margin-left: 0; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; padding-bottom: 2px } .jl-tools::-webkit-scrollbar { display: none } .jl-tools > * { flex: none } }


figure.case { margin: 4px 0 6px } figure.case .link { font: 12px var(--sans); margin-top: 6px; display: inline-block }
figure.case:not([data-view="shares"]):not([data-view="words"]) .jl-cols { position: static }  
.gaugekey { display: inline-block; width: 4px; height: 12px; vertical-align: -1px; background: linear-gradient(var(--rule2) 40%, var(--fg3) 40%) }
.focuskey { display: inline-block; width: 18px; height: 10px; border-radius: 2px; vertical-align: -1px; background: var(--w5); opacity: .85 }
.olkey { display: inline-block; width: 16px; height: 10px; vertical-align: -1px; border: 1.5px solid var(--fg) }
.x-tracker { display: none; margin: 10px 0 4px; border-top: 1px solid var(--rule); padding-top: 8px } .x-tracker canvas { display: block; cursor: pointer }
.x-th { font: 12px/1.5 var(--sans); color: var(--fg2); margin-bottom: 4px; max-width: 980px } .x-th b { color: var(--fg) }
.x-th button { font: inherit; background: none; border: 0; padding: 0; color: var(--fg2); text-decoration: underline; cursor: pointer }
.x-layer { display: flex; align-items: center; gap: 8px } .x-layer .rh-w { font-size: 12px; padding: 3px 4px }
.x-ll { font: 600 11px var(--sans); color: var(--fg3); text-transform: uppercase; letter-spacing: .05em }
.nextcase { font: 13px var(--sans); margin: 14px 0 0; display: block; background: none; border: 0; padding: 0; color: var(--fg); text-decoration: underline; text-decoration-color: var(--fg3); text-underline-offset: 3px; cursor: pointer }
[hidden] { display: none !important }


.chart { position: relative; margin-top: 26px } .chart svg { width: 100%; height: auto; display: block }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font: 13px var(--sans); color: var(--fg2); margin: 6px 0 2px }
details.tbl { font: 12px var(--sans); color: var(--fg2); margin-top: 6px; max-width: 100%; overflow-x: auto } details.tbl table { border-collapse: collapse; margin-top: 6px }
details.tbl td, details.tbl th { padding: 1px 10px 1px 0; text-align: right; font-variant-numeric: tabular-nums } details.tbl th { font-weight: 600; color: var(--fg) }


.jl-draft { font: 600 12px var(--sans); color: var(--fg3); border: 1px solid var(--rule); border-radius: 4px; padding: 2px 8px; vertical-align: middle; letter-spacing: .02em }
.jl-toc { font: 13px var(--sans); color: var(--fg2); margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px } .jl-toc .mute { color: var(--fg3) }
.jl-ex { font: italic 17px/1.5 var(--serif); color: var(--fg); border-left: 3px solid var(--rule); padding: 2px 0 2px 14px; margin: 10px 0 14px; max-width: 860px }
.jl-ex.small { font-size: 15px; margin: 4px 0 8px }
.jl-ex .who { display: block; font: 600 10.5px var(--sans); color: var(--fg3); text-transform: uppercase; letter-spacing: .06em; font-style: normal }
.jl-status { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 4px 0 10px; font: 12px var(--sans) }
.jl-tag { display: inline-flex; gap: 6px; align-items: baseline; border: 1px solid var(--rule); border-radius: 4px; padding: 1px 8px; color: var(--fg2); font: 12px var(--sans) }
.jl-tag b { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; color: var(--fg2) }
.jl-tag.strong { border-color: var(--fg) } .jl-tag.strong b { color: var(--fg) }
.jl-summary { font: 13px var(--sans); border-collapse: collapse; margin: 8px 0 4px; max-width: 980px; width: 100% }
.jl-summary th { text-align: left; font-weight: 600; color: var(--fg3); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 4px 12px 4px 0; border-bottom: 1px solid var(--rule) }
.jl-summary td { padding: 6px 12px 2px 0; border-bottom: 1px solid var(--rule); vertical-align: top } .jl-summary td:first-child { white-space: nowrap; width: 1% } .jl-summary .jl-status { margin: 0 }
.jl-part { margin: 10px 0 34px } .jl-part > h3 { font-size: 18px; margin-top: 42px }
.jl-facts { font: 14px/1.55 var(--sans); color: var(--fg2); max-width: 900px; margin: 6px 0 10px; padding-left: 18px } .jl-facts li { margin: 4px 0 } .jl-facts b { color: var(--fg) }
.jl-claim { margin: 14px 0 6px } .jl-claim.retired { background: transparent; border: 1px dashed var(--rule); color: var(--fg2) }
.jl-replies { font: 13px/1.45 var(--serif); border-collapse: collapse; min-width: 780px; margin: 8px 0 0 }
.jl-replies th { font: 600 12px var(--sans); text-align: left; padding: 4px 10px; border-bottom: 1px solid var(--rule) }
.jl-replies td { vertical-align: top; padding: 6px 10px; border-bottom: 1px solid var(--rule); font-style: italic; color: var(--fg) }
.jl-replies td.q { font: 600 12.5px var(--sans); font-style: normal; white-space: nowrap; color: var(--fg2) }


.jl-page h2, .jl-page h3, .jl-part, figure.case { scroll-margin-top: calc(var(--ctlh, 40px) + 12px) }


.jl-avg { margin: 18px 0 10px }
.jl-avg-top { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font: 12px var(--sans); color: var(--fg3) } .jl-avg-top .avg-src { color: var(--fg2) }
.jl-avg .jl-seg.sm button { font-size: 12px; padding: 1px 9px }
.avg-rh { margin-top: 6px } .avg-rh .rh-w { font-size: 15px }
.jl-avg-h { font: 12.5px/1.5 var(--sans); color: var(--fg2); margin: 10px 0 4px; max-width: 1000px } .jl-avg-h b { color: var(--fg) }
.jl-avg-h .x { font: inherit; background: none; border: 0; padding: 0; color: var(--fg2); text-decoration: underline; cursor: pointer; margin-left: 6px }
.avg-lists { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font: 12px var(--sans); color: var(--fg3); align-items: baseline; margin: 4px 0 }
.avg-lists .l span { display: inline-block; border: 1px solid var(--rule); border-radius: 3px; padding: 0 6px; margin: 0 4px 3px 0; color: var(--fg) }
.avg-lists .l span.sh { background: var(--fg); color: var(--bg); border-color: var(--fg) }
@media (max-width: 760px) {  
  .jl-summary, .jl-lead, .sw-replies { display: block; max-width: 100%; overflow-x: auto }  
  .jl-summary td:first-child { white-space: normal }
  .jl-casepick { flex-wrap: wrap; max-width: 100% } .jl-casepick select { max-width: 100% }
  .avg-lists { grid-template-columns: minmax(0, 1fr) }  
}
.avg-t { border-collapse: collapse; font: 10px var(--mono); margin: 4px 0 } .avg-t th { font-weight: 400; color: var(--fg3); padding: 0 6px 0 0; text-align: right; white-space: nowrap }
.avg-t tr:first-child th { text-align: center; padding: 0 } .avg-t td { width: 22px; height: 16px; border: 1px solid var(--bg); padding: 0 }
.avg-t td.nil { background: repeating-linear-gradient(135deg, var(--rule2) 0 2px, transparent 2px 5px) }
.avg-t tr.m th { color: var(--fg); font-weight: 700 } .avg-t tr.m td { border-top: 2px solid var(--fg2) }
.avg-list { font: 12px var(--sans); color: var(--fg2); margin-top: 6px } .avg-list ol { columns: 2; max-width: 1000px; padding-left: 22px; margin: 6px 0 } .avg-list .n { color: var(--fg3); font-variant-numeric: tabular-nums }


.jl-reps > .one { grid-column: 2 / -1 } .jl-reps > .one .note { font: 12px var(--sans); font-style: normal; color: var(--fg3) }


.jl-wmap { margin: 16px 0 10px }
.wm-key { font: 12px/1.5 var(--sans); color: var(--fg2); margin-bottom: 8px; max-width: 1100px } .wm-key b { color: var(--fg) }
.wm-panels { display: flex; flex-wrap: wrap; gap: 14px 22px }
.wm-h { font: 600 13px var(--sans); margin-bottom: 4px } .wm-h .lens { font-weight: 400; color: var(--fg3); font-size: 11px; margin-left: 6px }
.wm-t { border-collapse: separate; border-spacing: 1px; font: 10px var(--mono) }
.wm-t th { font-weight: 400; color: var(--fg3); padding: 0; text-align: left; border: 0 } .wm-t th.tick { font-size: 9.5px; overflow: visible; white-space: nowrap }
.wm-t th.w { text-align: left; padding-right: 8px; font: 12px var(--sans); color: var(--fg); white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis }
.wm-t th.w .g { display: block; font-size: 10px; color: var(--fg3) }
.wm-t td { width: 7px; min-width: 7px; height: 17px; padding: 0; border: 0 } .wm-t td.out, .wm-t th.out { border-left: 6px solid var(--bg) }


.col-f { --tint: var(--t-f) } .col-c { --tint: var(--t-c) }

.jl-reps .who { display: none; font: 600 11px var(--sans); color: var(--fg2); margin-bottom: 3px; font-style: normal }
figure.case:not([data-view="shares"]):not([data-view="words"]) .jl-cols { display: none }
figure.case:not([data-view="shares"]):not([data-view="words"]) .jl-reps .who { display: block }

.wm-t th.w .own { color: var(--fg); font-weight: 700 } .wm-t th.w .pk { font: 10px var(--mono); color: var(--fg3); margin-left: 5px }
.wm-t th.w .piece { font-size: 10px; color: var(--fg3); margin-left: 4px }
.jl-wmap details.tbl table { margin-top: 6px }
.wm-key .ramp span { color: var(--fg) } .wm-key .ramp span.dk { color: var(--bg) }
@media (max-width: 640px) { .wm-t td { width: 5px; min-width: 5px; height: 15px } .wm-t th.w { max-width: 96px; font-size: 11px } .wm-t th.w .pk { display: none } }

.jl-claim .scope { display: block; font: 12.5px/1.45 var(--sans); color: var(--fg2); margin-top: 8px }
.jl-claim details summary { cursor: pointer }

.jl-lead { font: 13px var(--sans); border-collapse: collapse; margin: 6px 0 14px }
.jl-lead th { text-align: left; font-weight: 600; color: var(--fg2); padding: 4px 16px 4px 0; border-bottom: 1px solid var(--rule) }
.jl-lead td { padding: 5px 16px 5px 0; border-bottom: 1px solid var(--rule2); font-variant-numeric: tabular-nums }
.avg-lists .l span .g { display: block; font-size: 10px; line-height: 1.2; color: var(--fg3) } .avg-lists .l span.sh .g { color: inherit; opacity: .8 }
.chart .legend svg { width: 22px; height: 10px; display: inline-block; vertical-align: middle }  
.chart .legend span { display: inline-flex; align-items: center; gap: 4px }

.ll-host { position: relative }
.ll-cv { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2 } .ll-cv canvas { display: block }
.ll-thread + .ll-thread { border-top: 1px dashed var(--rule); margin-top: 16px; padding-top: 4px }
.ll-lab { font: 600 13px var(--mono); color: var(--fg); margin: 16px 0 6px }
.ll-turns { display: grid; gap: 6px; max-width: 900px; margin: 8px 0 12px }
.ll-t { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 1px 12px; align-items: baseline; font: 16px/1.5 var(--sans) }
.ll-t .ll-r { font: 11px var(--mono); color: var(--fg3); text-align: right }
.ll-t .ll-x { color: var(--fg); min-width: 0 }
.ll-t .ll-n { grid-column: 2; font: 11px var(--mono); color: var(--fg3); margin-top: -2px }
.ll-t.pre .ll-x { justify-self: start; border-bottom: 1px dashed var(--fg3) }   
.ll-spot { background: var(--fg); color: var(--bg); padding: 0 2px }             
.ll-spot.end { background: none; color: var(--fg2); padding: 0; animation: ll-blink 1.1s steps(2) 3 }
@keyframes ll-blink { 50% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .ll-spot.end { animation: none } }
.ll-at { font: 12px/1.5 var(--mono); color: var(--fg2); margin: 4px 0 4px } .ll-at b { color: var(--fg); font-weight: 400; white-space: nowrap } .ll-at .ll-ol { white-space: nowrap }
.ll-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 0 0 10px }
.ll-bar .unf { margin-left: 0 }
.ll-bar.ll-sticky { position: sticky; top: var(--ctlh, 0px); z-index: 3; background: var(--bg); border-bottom: 1px dashed var(--rule); padding: 6px 0 2px; margin: 0 }
.ll-switch { font: 13px var(--sans); color: var(--fg2) } .ll-switch .jl-seg { flex-wrap: wrap } .ll-switch .jl-seg button { white-space: nowrap }
.ll-pre:empty { display: none }
.ll-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; max-width: 1100px }
.ll-who { font: 600 13px var(--sans); color: var(--fg2); margin-bottom: 5px }
.ll-rib { height: 34px; margin: 0 0 8px; cursor: default; position: relative }
.ll-items { position: absolute; inset: 0; pointer-events: none }   
.ll-items [data-word], .ll-items [data-pct] { position: absolute; line-height: 1; white-space: pre; color: transparent; transform: translateY(-50%) }
.ll-items [data-word] { font-family: var(--sans); font-weight: 500 } .ll-items [data-pct] { font-family: var(--mono); font-weight: 400 }
.ll-unfolding .ll-items span { color: var(--fg) }
.ll-stage { display: flow-root } .ll-stage > [hidden] { display: none }
.ll-alongbox:empty { display: none }
.ll-along-cap { font: 11px/1.4 var(--mono); color: var(--fg3); margin: 6px 0 2px }
.ll-posfig { margin: 0 0 10px; max-width: 1100px; min-width: 640px }  
.ll-alongbox, .ll-rowalong { overflow-x: auto; overflow-y: hidden }
.ll-rowopen { display: block; margin: 4px 0 0 auto; font: 11px var(--mono); color: var(--fg3); background: none; border: 0; border-bottom: 1px dashed var(--fg3); padding: 0; cursor: pointer }
.ll-rowopen::after { content: " ▸" } .ll-rowopen.on::after { content: " ▾" } .ll-rowopen:hover, .ll-rowopen.on { color: var(--fg); border-bottom-color: var(--fg) }
.ll-rowalong { padding: 0 0 10px; border-top: 1px dashed var(--rule2) }
@media (max-width: 760px) { .ll-rowopen { margin: 2px 0 0 } }
.ll-spot.end.off { opacity: .35; animation: none }
.ll-w { font: 15px/1.5 var(--sans); color: var(--fg); overflow-wrap: anywhere }
.ll-w.u { border-left: 2px solid var(--rule); padding-left: 10px }
.ll-hid { opacity: 0 }   
.ll-end { font: 11px var(--mono); color: var(--fg2); white-space: nowrap; margin-left: 2px }
.ll-cap { font: 11px var(--mono); color: var(--fg3); white-space: nowrap }
.ll-none { color: var(--fg3) }
.ll-role { font: 11px var(--mono); color: var(--fg2); border: 1px solid var(--rule); padding: 0 4px }
.ll-strip { --sqw: 7px; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 11px var(--mono); color: var(--fg3); user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: pointer; outline: none }
.ll-strip .ll-sq { display: inline-flex; align-items: center; gap: 1px; padding: 5px 0 14px; position: relative }
.ll-strip .ll-sq b { position: absolute; bottom: 0; font: 400 9px/1 var(--mono); color: var(--fg3) }
.ll-strip .ll-sq .t0 { left: 0 } .ll-strip .ll-sq .t33 { left: calc(34 * (var(--sqw) + 1px) - 1px); transform: translateX(-100%) } .ll-strip .ll-sq .tout { left: calc(34 * (var(--sqw) + 1px) + 9px) }
.ll-strip i { display: block; width: var(--sqw); height: 16px; background: var(--rule2) }
.ll-strip i:hover { background: var(--fg3) }
.ll-strip i.out { width: calc(2 * var(--sqw) + 2px); margin-left: 10px }
.ll-strip i.mk { box-shadow: inset 0 -4px 0 var(--fg3) }
.ll-strip i.on { background: var(--fg); height: 22px; margin-top: -3px; margin-bottom: -3px }
.ll-strip:focus-visible .ll-sq { outline: 1px dashed var(--fg2); outline-offset: 2px }
.ll-strip .ll-sv { color: var(--fg2); min-width: 30ch; padding-bottom: 9px } .ll-strip .ll-sv b { color: var(--fg); font-weight: 400 }
.ll-grid { max-width: 1200px }
.ll-row { display: grid; grid-template-columns: 140px repeat(2, minmax(0, 1fr)); gap: 4px 22px; padding: 10px 0 12px; border-top: 1px solid var(--rule2); align-items: start }
.ll-row.ll-head { font: 600 13px var(--sans); color: var(--fg2); border-top: 0; padding: 8px 0 2px }
.ll-stem { font: 16px/1.4 var(--sans); color: var(--fg); text-align: right; padding-top: 7px; min-width: 0 }
.ll-stem .ll-ctx { display: block; font: 11px/1.4 var(--mono); color: var(--fg3) }
.ll-rowlay { display: block; font: 11px/1.4 var(--mono); color: var(--fg2); margin-top: 2px }
.ll-row .ll-w { font-size: 14px }
.ll-mn { display: none; font: 600 12px var(--sans); color: var(--fg2); margin-bottom: 4px }  
.ll-sc { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 15px var(--sans); color: var(--fg) }
.ll-sc span { display: inline-flex; flex-direction: column; align-items: center } .ll-sc i { font: 11px var(--mono); color: var(--fg2); font-style: normal }
.ll-sck { font: 11px/1.4 var(--mono); color: var(--fg3); margin-top: 4px }
.ll-caret { color: var(--fg3); font-weight: 400 }
@media (max-width: 760px) {
  .ll-pair { grid-template-columns: minmax(0, 1fr) }
  .ll-row { grid-template-columns: minmax(0, 1fr); gap: 6px } .ll-row.ll-head { display: none } .ll-mn { display: block }
  .ll-stem { text-align: left; padding-top: 0 }
  .ll-t { grid-template-columns: minmax(0, 1fr) } .ll-t .ll-r { text-align: left } .ll-t .ll-n { grid-column: 1 }
  .ll-strip { --sqw: 6px }
}
@media print {  
  .ll-cv, .ll-strip, .ll-open, .ll-words, .ll-posfig { display: none } .ll-hid { opacity: 1 !important }
  .ll-rib { height: auto; margin: 0 0 4px } .ll-rib::after { content: attr(aria-label); font: 11px var(--mono); color: var(--fg2) }
  .ll-bar.ll-sticky { position: static }
}

.lp-card { border-top: 1px solid var(--rule); padding: 22px 0 20px }
.lp-cap { font: 11px/1.4 var(--mono); color: var(--fg3); margin: 0 0 8px }
.lp-hist { display: grid; gap: 10px; max-width: 760px; margin: 0 auto 6px }
.lp-msg { display: flex; flex-direction: column; max-width: 80% }
.lp-msg.u { margin-left: auto; align-items: flex-end } .lp-msg.a { margin-right: auto; align-items: flex-start }
.lp-who { font: 11px var(--mono); color: var(--fg3); margin: 0 2px 3px }
.lp-bub { font: 16px/1.45 var(--sans); color: var(--fg); padding: 8px 12px; border: 1px solid var(--rule); background: var(--panel); overflow-wrap: anywhere }
.lp-msg.u .lp-bub { background: var(--rule2) }
.lp-now { text-align: center; font: 13px/1.5 var(--sans); color: var(--fg2); margin: 16px 0 12px } .lp-now span { display: inline-block; border-top: 1px dashed var(--rule); padding: 6px 14px 0 } .lp-now b { color: var(--fg) }
.lp-swap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; max-width: 1100px; margin: 0 auto }
.lp-side { display: flex; flex-direction: column; min-width: 0 }
.lp-tag { align-self: flex-end; font: 13px var(--sans); color: var(--fg2); margin-bottom: 6px; white-space: nowrap } .lp-tag b { color: var(--fg) }
.lp-fs .lp-tag { align-self: flex-start }
.lp-msg.played { max-width: 100%; width: 100% } .lp-msg.u.played { align-items: stretch }
.lp-side[data-k="b"] .lp-msg.played .lp-bub { border-left: 3px solid var(--c-b) } .lp-side[data-k="z"] .lp-msg.played .lp-bub { border-left: 3px solid var(--c-z) }
.lp-end { font: 11px var(--mono); color: var(--fg2); margin-top: 5px; text-align: right } .lp-fs .lp-end { text-align: left }
.lp-endm { white-space: nowrap } .lp-endm.cut { color: var(--fg3) }
.lp-fixed { border-bottom: 1px dashed var(--fg2); color: var(--fg2) }
.lp-lensbox { margin: 18px auto 0; max-width: 1100px }
.lp-lens { position: relative; outline: none; cursor: ns-resize; touch-action: pan-x; user-select: none; -webkit-user-select: none }
.lp-lens:focus-visible { outline: 1px dashed var(--fg3); outline-offset: 4px } .lp-lens canvas { display: block }
.lp-wide { position: relative }
.lp-wscroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--fg3) transparent; outline: none; cursor: grab; padding-bottom: 4px }
.lp-wscroll.drag { cursor: grabbing; user-select: none; -webkit-user-select: none } .lp-wscroll:focus-visible { outline: 1px dashed var(--fg3); outline-offset: 4px }
.lp-wtag { position: absolute; left: 0; transform: translateY(-50%); font: 700 13px var(--sans); color: var(--fg); background: var(--bg); padding: 2px 10px 2px 0;
  pointer-events: none; opacity: 0; transition: opacity .15s; display: flex; align-items: center; gap: 6px } .lp-wtag .jl-sw { width: 10px; height: 10px }
.lp-wide.scrolled .lp-wtag { opacity: .92 }
.lp-switch { font: 13px var(--sans); color: var(--fg2); margin: 0 0 10px } .lp-switch .jl-seg { flex-wrap: wrap } .lp-switch .jl-seg button { white-space: nowrap }
.lp-pre:empty { display: none } .lp-pre { margin-bottom: 8px }
.lp-khead { font: 11px var(--mono); color: var(--fg3); margin: 0 0 4px }
.lp-krow { display: grid; grid-template-columns: 150px repeat(2, minmax(0, 1fr)); gap: 6px 24px; padding: 12px 0; border-top: 1px solid var(--rule2); align-items: start }
.lp-kstem { font: 16px/1.4 var(--sans); color: var(--fg); text-align: right; padding-top: 22px }
.lp-in { display: block; margin: 6px 0 0 auto; font: 11px var(--mono); color: var(--fg3); background: none; border: 0; border-bottom: 1px dashed var(--fg3); padding: 0; cursor: pointer }
.lp-in::after { content: " ▸" } .lp-in.on::after { content: " ▾" } .lp-in:hover, .lp-in.on { color: var(--fg); border-bottom-color: var(--fg) }
.lp-kname { font: 600 12px var(--sans); color: var(--fg2); margin-bottom: 4px }
.lp-field { font: 15px/1.45 var(--sans); color: var(--fg); padding: 6px 10px; border: 1px solid var(--rule); background: var(--rule2); overflow-wrap: anywhere }
.lp-stemt { color: var(--fg2) } .lp-caret { color: var(--fg3); font-weight: 300; margin: 0 1px }
.lp-keys { display: flex; gap: 2px; margin-top: 3px }
.lp-key { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 4px 6px; background: var(--panel); border: 1px solid var(--rule2); font: 13px var(--sans); color: var(--fg); overflow: hidden; cursor: default }
.lp-key b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100% } .lp-key i { font: 10px var(--mono); color: var(--fg3); font-style: normal }
.lp-key.top { border-color: var(--fg3) }
.lp-kin { padding: 6px 0 16px; border-top: 1px dashed var(--rule2) }
@media (max-width: 760px) {
  .lp-swap { grid-template-columns: minmax(0, 1fr) } .lp-msg { max-width: 92% }
  .lp-krow { grid-template-columns: minmax(0, 1fr) } .lp-kstem { text-align: left; padding-top: 0 } .lp-in { margin-left: 0 }
}
@media print { .lp-lens, .lp-wide, .lp-in { display: none } }


.sw-fig { margin: 18px 0 30px; display: flex; flex-direction: column; gap: 8px }
.sw-top { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font: 12px var(--sans) }
.sw-top .sw-src { font-size: 11.5px; color: var(--fg3) }
.sw-pick { font: 12px var(--sans); background: var(--bg); color: var(--fg); border: 1px solid var(--rule); padding: 2px 6px; max-width: 100% }
.sw-cv { width: 100%; min-height: 60px } .sw-cv canvas { display: block }
.sw-rh { max-width: 100% }
.sw-drill { border-top: 1px dashed var(--rule); padding-top: 10px; display: flex; flex-direction: column; gap: 8px }
.sw-drill-h { font: 13px/1.5 var(--sans); color: var(--fg2) } .sw-drill-h b { color: var(--fg) }
.sw-drill-h .x { font: inherit; background: none; border: 1px solid var(--rule); color: var(--fg2); cursor: pointer; margin-left: 8px }
.sw-run { display: flex; flex-direction: column; gap: 6px; font: 14px/1.5 var(--sans) }
.sw-run-h { color: var(--fg2) } .sw-run-h b { color: var(--fg) }
.sw-moved { font-size: 12.5px } .sw-moved .w, .sw-cardmoved .w { display: inline-block; padding: 0 4px; margin: 1px 0; background: rgba(var(--ink), .12) }
.sw-replies { border-collapse: collapse; max-width: 900px } .sw-replies th { text-align: left; font: 600 11px var(--mono); color: var(--fg3); padding: 3px 12px 3px 0; vertical-align: top; white-space: nowrap }
.sw-replies td { padding: 3px 0; color: var(--fg2) } .sw-replies td.e { color: var(--fg) }

.sw-pos { display: flex; flex-wrap: wrap; gap: 4px }
.sw-pos button { font: 13.5px var(--sans); background: none; border: 1px solid var(--rule); color: var(--fg); padding: 2px 7px 1px; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1.25 }
.sw-pos button.tpl { color: var(--fg3) } .sw-pos button[disabled] { border-color: transparent; color: var(--fg3); cursor: default }
.sw-pos button.on { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg) }
.sw-pos .dots { font: 9px var(--mono); letter-spacing: 1px; color: var(--c-z); min-height: 11px }
.sw-pairrun { display: flex; flex-direction: column; gap: 8px; margin-top: 6px }
.sw-dec { display: grid; grid-template-columns: 92px repeat(4, minmax(0, 1fr)); gap: 6px 16px; font: 13.5px/1.45 var(--sans) }
.sw-dec .hd { font: 600 11px var(--mono); color: var(--fg3); text-transform: uppercase; border-bottom: 1px solid var(--rule); padding-bottom: 3px }
.sw-dec .lab { font: 600 11px var(--mono); color: var(--fg3); padding-top: 3px; text-transform: uppercase }
.sw-dec .c { color: var(--fg2); overflow-wrap: anywhere } .sw-dec .c.e { color: var(--fg) }
.sw-dec mark { background: var(--t-z); color: inherit; box-shadow: inset 0 -1.5px 0 var(--c-z); padding: 0 1px }
.sw-dec-pick { display: none }
@media (max-width: 760px) {  
  .sw-dec-pick { display: inline-flex } .sw-dec { grid-template-columns: 84px minmax(0, 1fr) }
  .sw-dec[data-show="g"] [data-col]:not([data-col="g"]), .sw-dec[data-show="s1"] [data-col]:not([data-col="s1"]),
  .sw-dec[data-show="s2"] [data-col]:not([data-col="s2"]), .sw-dec[data-show="s3"] [data-col]:not([data-col="s3"]) { display: none }
  .sw-dec .hd { display: none }
}

.sw-cv { overflow-x: auto }
.sw-top .jl-seg { flex-wrap: wrap } .sw-rh { overflow-x: auto }
.sw-cardmoved .w .g { color: var(--fg3); font-size: .85em; margin-left: 3px }
.sw-picks { display: flex; flex-direction: column; gap: 5px; align-items: flex-start } .sw-pickrow { display: flex; align-items: baseline; gap: 8px; max-width: 100% }
.sw-pl { font: 11px var(--mono); color: var(--fg3); min-width: 6ch } .sw-pickrow .jl-seg { flex-wrap: wrap; row-gap: 4px } .sw-pickrow .jl-seg button { white-space: nowrap }

.sw-views { color: var(--fg3); display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px } .sw-views .jl-seg { flex-wrap: wrap } .sw-views .jl-seg button { white-space: nowrap }
.sw-judged { font: 12.5px/1.5 var(--sans); color: var(--fg2); margin: 8px 0 2px } .sw-judged b { color: var(--fg) }

.sw-morph { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 8px 0 2px; font: 12px var(--sans); color: var(--fg3) }
.sw-morph .sw-rh { flex: 1 1 420px; min-width: 0 } .sw-morph .rh-w { font-size: 14px }

.sw-anim { position: relative; border: 1px dashed var(--rule); padding: 10px 12px; margin: 10px 0 12px; font: 12.5px/1.5 var(--sans); color: var(--fg2) }
.sw-anim .chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 7px 0 9px; min-height: 22px }
.sw-anim .w { font: 12px var(--mono); border: 1px solid var(--rule); padding: 0 5px; color: var(--fg); display: inline-block; white-space: nowrap }
.sw-anim .w.out { text-decoration: line-through; text-decoration-color: var(--w1); color: var(--fg2) } .sw-anim .w.out small { color: var(--fg3) }
.sw-anim .w small { color: var(--fg3); margin-left: 4px; font: 10px var(--sans) }
.sw-anim .in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
.sw-anim .new { border-color: var(--c-z); color: var(--c-z); font-weight: 700; font-size: 14px; opacity: 0 }
.sw-anim .replay { margin-left: auto; font: 11px var(--mono); background: none; border: 0; color: var(--fg3); cursor: pointer }

.lr { position: relative; display: flex; flex-direction: column; gap: 1px; touch-action: none; outline: none; user-select: none; -webkit-user-select: none }
.lr:focus-visible { box-shadow: 0 0 0 2px var(--rule) }
.lr-pill { position: absolute; left: 0; right: 0; top: 0; height: 0; background: rgba(var(--ink), .1); border-left: 2px solid var(--c-z); pointer-events: none; z-index: 0 }
.lr { cursor: grab } .lr.drag { cursor: grabbing }
.lr-i { position: relative; z-index: 1; display: grid; grid-template-columns: 50px auto; column-gap: 8px; align-items: center; text-align: left;
  color: var(--fg3); padding: 5px 8px; font: 13px var(--mono); transition: color .3s }
.lr-i.none { opacity: .35 } .lr-i.d0 { color: var(--fg) } .lr-i.d1 { color: var(--fg2) }
.lr-i .rq-sm { display: inline-flex; gap: 2px } .lr-i .rq-sm i { width: 6px; height: 5px; background: var(--rule2) }
.lr-i .sn { grid-column: 1 / 3; font: 12px/1.4 var(--sans); color: var(--fg3); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s, opacity .35s, margin .35s }
.lr-i.d1 .sn { max-height: 1.45em; opacity: .75; margin-top: 2px; white-space: nowrap; text-overflow: ellipsis }
.lr-i.d0 .sn { max-height: 7.2em; opacity: 1; margin-top: 3px; color: var(--fg2) } .lr-pill { will-change: transform, height } .lr-i .sn mark { background: none; color: var(--c-z); font-weight: 700 }