/* QN charts — the shared look of every article graphic (replaces Flourish).
   Tokens = QN Media UI Kit, as in radar/app/globals.css. The rules are in guida.html. */
@font-face{font-family:'QN Shinka Display';src:url(fonts/QNoteDisplay-Medium.otf) format('opentype');font-weight:600;font-display:swap}
@font-face{font-family:'QN Shinka';src:url(fonts/QNote-Regular.otf) format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'QN Shinka';src:url(fonts/QNote-RegularItalic.otf) format('opentype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Zetal';src:url(fonts/QNZetal-Medium.otf) format('opentype');font-weight:500;font-display:swap}

:root[data-theme=dark]{
  --page:#16181b;--fg:#fff;--muted:#9098a1;--faint:#6b737c;
  --surface:#1f2226;--border:#2f343a;--grid:#262a2f;--land:#23272c;--land-line:#16181b;
  --accent:#00bbf2;
  --neutral:#3d434a;
  --c1:#119dd0;--c2:#e0603a;--c3:#9178df;--c4:#b88a1e;
  --up:#e0603a;--down:#119dd0;
  --ink:#f4f1e8;
  --marker:#6b5a12;
  --tip-bg:#fff;--tip-fg:#16181b;
}
*{box-sizing:border-box}
html,body{margin:0}
html{background:var(--page)}   /* = the QN article background, so the frame is seamless */
body{color:var(--fg);font:400 16px/1.5 var(--font-text);-webkit-font-smoothing:antialiased;font-synthesis:none}

/* ---------- anatomy: kicker, title, sub, legend, plot, notes, source + logo ---------- */
.qc{position:relative;isolation:isolate;max-width:728px;margin:0 auto;padding:20px 0 2px}
.qc::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);transform-origin:left;transition:transform calc(1s * var(--tempo)) var(--ease)}
.qc-kicker{display:block;font:500 11px/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.qc-title{font:600 28px/1.12 var(--font-serif);margin:0 0 6px;letter-spacing:-.012em;text-wrap:balance}
.qc-sub{color:var(--muted);font-size:16px;line-height:1.45;margin:0 0 18px;text-wrap:pretty}

.qc-foot a{color:inherit;text-underline-offset:2px}

.qc-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 14px;padding:0;list-style:none;font:500 13px/1.2 var(--font-sans);color:var(--muted)}

.qc-legend li.t{color:var(--fg)}
.qc-legend i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.qc-legend i.sq{border-radius:2px}
.qc-hint{font:500 12px/1.4 var(--font-sans);color:var(--muted);margin:8px 0 0}
/* the table in the page, for screen readers and search engines; readers open it with "Dati" (qn-charts.js sheet) */
.qc-data{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.qc-tip i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}

/* ---------- hand layer: circles, underlines, boxes, arrows, notes, drawn in ink ---------- */
   /* on top, like a pen on paper */
.qc-hand path{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.qc-hand path.hl{fill:var(--marker);stroke:none;opacity:1}
.qc-hand{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible;mix-blend-mode:multiply}   /* the marker tints the words under it instead of hiding them */
:root[data-theme=dark] .qc-hand{mix-blend-mode:screen}
.qc-hand path.d{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset calc(.9s * var(--tempo)) var(--ease) var(--t,0s)}
.qc.in .qc-hand path.d{stroke-dashoffset:0}
.qc-hand path.hl.d{transform-box:fill-box;transform:scaleX(0);transform-origin:left;transition:transform calc(.7s * var(--tempo)) var(--ease) var(--t,0s)}
.qc.in .qc-hand path.hl.d{transform:none}
.qc-note{position:absolute;z-index:1;max-width:190px;font:italic 400 15px/1.3 var(--font-text);color:var(--ink);opacity:0;transform:translateY(4px);transition:opacity calc(.5s * var(--tempo)) var(--ease) var(--t,0s),transform calc(.5s * var(--tempo)) var(--ease) var(--t,0s)}
.qc.in .qc-note{opacity:1;transform:none}

/* ---------- entrance: the figure composes itself once, when it scrolls into view ----------
   rule line draws, header rises, the plot builds, numbers count up, notes draw, then the cue shows how to explore */
.qc:not(.in)::before{transform:scaleX(0)}
.qc :is(.qc-kicker,.qc-title,.qc-sub,.qc-legend,.qc-switch){transition:opacity calc(.7s * var(--tempo)) var(--ease),transform calc(.9s * var(--tempo)) var(--ease)}
.qc .qc-title{transition-delay:.07s}.qc .qc-sub{transition-delay:.14s}.qc :is(.qc-legend,.qc-switch){transition-delay:.2s}
.qc:not(.in) :is(.qc-kicker,.qc-title,.qc-sub,.qc-legend,.qc-switch){opacity:0;transform:translateY(12px)}
.qc .grow{transition:transform calc(.9s * var(--tempo)) var(--ease) calc((var(--i,0) * 40ms) * var(--tempo))}
.qc:not(.in) .grow{transform:scaleX(0)}

.qc:not(.in) .pop{transform:scale(0);opacity:0}
.qc .draw{stroke-dasharray:1;transition:stroke-dashoffset calc(1.4s * var(--tempo)) var(--ease)}
.qc:not(.in) .draw{stroke-dashoffset:1}
.qc .fade{transition:opacity calc(.6s * var(--tempo)) var(--ease) calc(.5s * var(--tempo))}
.qc:not(.in) .fade{opacity:0}
@media (prefers-reduced-motion:reduce){.qc *{transition:none!important}}
/* hand layer measuring: targets at their final size, with no transition (qn-charts.js hand) */
.qc.m0 *{transition:none!important}
.qc.m1 :is(.grow,.pop,.gcol,.sg,.qc-kicker,.qc-title,.qc-sub,.qc-legend,.qc-switch,.qc-cards details,.zero,.ar,.qc-big .n,.dot,.tile,.hc,.st,.pc,.rl){transform:none!important}

/* ---------- bars (QC.bars, QC.diverging) ---------- */
.qc-bars .r{display:grid;grid-template-columns:var(--lab,170px) 1fr;align-items:center;min-height:34px;border-radius:6px;outline:none}
.qc-bars .r:hover,.qc-bars .r:focus-visible{background:var(--surface)}
.qc-bars .r:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.qc-bars .lab{font-size:15px;line-height:1.2;padding:3px 12px 3px 6px}
.qc-bars .tr{position:relative;height:34px;margin-right:64px}

.qc-bars .b.l{transform-origin:right;border-radius:4px 0 0 4px}
.qc-bars .v{position:absolute;top:50%;transform:translateY(-50%);font:500 13px/1 var(--font-sans);white-space:nowrap;color:var(--fg)}
.qc-bars .r.mute .v{color:var(--muted)}

.qc-bars .axis{display:grid;grid-template-columns:var(--lab,170px) 1fr;font:500 11px/1 var(--font-sans);color:var(--faint);margin-top:6px}
.qc-bars .axis .t{position:relative;height:14px;margin-right:64px}
.qc-bars .axis .t span{position:absolute;transform:translateX(-50%)}
@media (max-width:520px){.qc-bars{--lab:118px!important}.qc-bars .lab{font-size:14px}.qc-bars .tr,.qc-bars .axis .t{margin-right:52px}}

/* ---------- big numbers (QC.big) ---------- */
.qc-big{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px 28px}

.qc-big .l{margin-top:8px;font-size:15px;line-height:1.4;color:var(--muted)}
.qc-big .l b{color:var(--fg);font-weight:400}
@media (max-width:520px){.qc-big .n{font-size:46px}}

/* ---------- waffle (QC.waffle) ---------- */
.qc-waffles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px}
.qc-waffle .g{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;max-width:220px}
.qc-waffle .g i{aspect-ratio:1;border-radius:2px;background:var(--neutral);transition:background-color .25s calc((var(--i) * 9ms) * var(--tempo))}
.qc.in .qc-waffle .g i.on{background:var(--c,var(--accent))}
.qc-waffle .n{font:600 30px/1 var(--font-serif);margin:12px 0 4px;color:var(--c,var(--accent))}
.qc-waffle .l{font-size:15px;line-height:1.35;color:var(--muted)}

/* ---------- cards (QC.cards) ---------- */
.qc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:start}

.qc-cards details[open]{border-color:var(--accent)}
.qc-cards summary{list-style:none;cursor:pointer;outline:none}
.qc-cards summary::-webkit-details-marker{display:none}
.qc-cards summary:focus-visible{box-shadow:0 0 0 2px var(--accent);border-radius:4px}
.qc-cards .k{font:500 11px/1.3 var(--font-sans);text-transform:uppercase;letter-spacing:.06em;color:var(--accent);display:flex;justify-content:space-between;gap:8px}
.qc-cards .k::after{content:'+';font-size:16px;line-height:11px;color:var(--muted)}
.qc-cards details[open] .k::after{content:'−'}
.qc-cards h3{font:600 19px/1.2 var(--font-serif);margin:6px 0 8px}
.qc-cards .c{margin:0;font-size:15px;line-height:1.45;color:var(--muted)}
.qc-cards .more{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--border);font-size:15px;line-height:1.45}
@media (max-width:640px){.qc-cards{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.qc-cards{grid-template-columns:1fr}}

/* ---------- svg charts (bubbles, map, line) ---------- */
.qc svg.plot{display:block;width:100%;height:auto;overflow:visible;touch-action:manipulation}
.qc svg text{font-family:var(--font-sans);font-weight:500}
.qc .ax text{fill:var(--faint);font-size:11px}
.qc .ax line{stroke:var(--grid)}
.qc .ax line.base{stroke:var(--muted)}
.qc-bub circle{fill:var(--c);stroke:var(--page);stroke-width:1.5;transition:opacity .15s}
.qc-bub text{fill:#fff;text-anchor:middle;pointer-events:none}
.qc-bub text .v{opacity:.85}
.qc-bub g{cursor:pointer;outline:none}
svg[data-k] .qc-bub g:not(.on) circle{opacity:.2}
svg[data-k] .qc-bub g:not(.on) text{opacity:0}
.qc-bub g.on circle{stroke:var(--fg);stroke-width:2}
.qc .key circle{fill:none;stroke:var(--muted);stroke-width:1}
.qc .key line{stroke:var(--muted);stroke-width:.8;stroke-dasharray:2 2}
.qc .key text{fill:var(--muted)}
.qc-map .land{fill:var(--land);stroke:var(--land-line);stroke-width:.7;stroke-linejoin:round}
.qc-map .city{cursor:pointer;outline:none}
.qc-map .city circle{stroke:var(--page);stroke-width:1.6;transition:opacity .15s}
.qc-map .city .hit{fill:transparent;stroke:none}
.qc-map .city:focus-visible .hit{stroke:var(--accent);stroke-width:2}
.qc-map .city text{font-size:11px;fill:var(--muted);paint-order:stroke;stroke:var(--page);stroke-width:3px;stroke-linejoin:round;pointer-events:none}
svg[data-only] .qc-map circle.dot:not(.on){opacity:.12}

.qc-legend button:focus-visible{box-shadow:0 0 0 2px var(--accent)}

.qc-line path.s{fill:none;stroke:var(--c);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.qc-line path.s.mute{stroke:var(--neutral);stroke-width:2}
.qc-line.many path.s.mute{stroke-width:1.2;opacity:.8;transition:stroke-dashoffset calc(1.4s * var(--tempo)) var(--ease),stroke .15s,opacity .15s}
.qc-line.many path.s.mute.hot{stroke:var(--fg);stroke-width:2;opacity:1}
/* expected and actual (QC.excess): the actual as a pale area, the part above the expected in colour, the expected as a line in ink */
.qc-excess path.s{stroke-width:1.5}
.qc-excess .un{fill:color-mix(in oklab,var(--up) 20%,transparent)}
.qc-excess .ov{fill:color-mix(in oklab,var(--up) 70%,transparent)}
.qc-excess .xp{fill:none;stroke:var(--fg);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.qc-excess .xs{margin:0 0 8px;font:500 13px/1.3 var(--font-sans);color:var(--muted)}
.qc-excess .xs b{font:600 22px/1 var(--font-serif);color:var(--up);margin-right:4px}
.qc-excess .xs b.dn{color:var(--down)}
.qc-line .end text{font-size:13px;fill:var(--fg)}
.qc-line .end text.v{fill:var(--muted)}
.qc-line .cross line{stroke:var(--muted);stroke-dasharray:3 3}
.qc-line .cross circle{fill:var(--c);stroke:var(--page);stroke-width:2}

@media (max-width:520px){.qc-title{font-size:23px}.qc-sub{font-size:15px}}

/* ---------- the cue: a ping where to touch, and a quiet "Esplora i dati" in the footer ---------- */
.qc-ping{position:absolute;z-index:2;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:2px solid var(--accent);pointer-events:none;animation:qc-ping calc(1.8s * var(--tempo)) var(--ease) both}
.qc-ping::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--accent);animation:qc-ping calc(1.8s * var(--tempo)) var(--ease) .35s both}
@keyframes qc-ping{0%{transform:scale(.3);opacity:0}15%{opacity:.9}100%{transform:scale(1.7);opacity:0}}
.qc-foot .qc-live{display:inline-flex;align-items:center;gap:6px;flex:none;margin:0 6px 4px 0;font:500 11px/1 var(--font-sans);color:var(--accent);letter-spacing:.02em}
.qc-live i{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.qc.in .qc-live i{animation:qc-blink calc(1.2s * var(--tempo)) ease-in-out calc(1.6s * var(--tempo)) 3}   /* three beats, then still */
@keyframes qc-blink{50%{transform:scale(1.8);opacity:.35}}

/* ---------- switch (Flourish "controls"): change the dataset, the chart tweens ---------- */
.qc-switch{display:flex;width:max-content;max-width:100%;flex-wrap:nowrap;gap:2px;padding:3px;border-radius:99px;background:var(--surface);margin:0 0 16px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
.qc-switch::-webkit-scrollbar{display:none}
.qc-switch.ovf-r{mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.qc-switch.ovf-l{mask-image:linear-gradient(90deg,transparent,#000 36px)}
.qc-switch.ovf-l.ovf-r{mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}

.qc-switch button[aria-pressed=true]{background:var(--page);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.qc-switch button:focus-visible{outline:2px solid var(--accent)}

/* ---------- cards entrance ---------- */
.qc-cards details{background:var(--surface);border-radius:12px;padding:14px 16px;border:1px solid transparent;transition:border-color .2s,opacity calc(.6s * var(--tempo)) var(--ease) calc((.2s + var(--i,0) * 60ms) * var(--tempo)),transform calc(.7s * var(--tempo)) var(--ease) calc((.2s + var(--i,0) * 60ms) * var(--tempo))}
.qc:not(.in) .qc-cards details{opacity:0;transform:translateY(14px)}

/* ---------- bars: hovering a row quiets the others ---------- */
.qc-bars:has(.r:hover) .r:not(:hover) .b{opacity:.4}

/* ---------- pie / donut (QC.pie) ---------- */
.qc-pie{display:grid;grid-template-columns:minmax(170px,250px) minmax(0,1fr);gap:20px 36px;align-items:center}
.qc-pie svg.plot{max-width:250px;overflow:visible}
.qc-pie .sl{transition:transform .3s var(--ease);cursor:pointer;outline:none}
.qc-pie .sl path{stroke:var(--page);stroke-width:2;transition:opacity .2s}
.qc-pie .sl.dim path{opacity:.3}
.qc-pie .sl text{fill:#fff;font-size:11px;text-anchor:middle;pointer-events:none}
.qc-pie .cn{fill:var(--fg);font:600 27px/1 var(--font-serif);text-anchor:middle}
.qc-pie .cl{fill:var(--muted);font-size:10px;text-anchor:middle}
.qc-pie .pl{list-style:none;margin:0;padding:0}
.qc-pie .pl li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:15px;line-height:1.25;cursor:pointer;transition:opacity .2s}
.qc-pie .pl i{width:12px;height:12px;border-radius:3px;background:var(--c)}
.qc-pie .pl b{font:500 14px var(--font-sans)}
.qc-pie .pl:has(li.on) li:not(.on){opacity:.38}
@media (max-width:560px){.qc-pie{grid-template-columns:1fr}.qc-pie svg.plot{margin:0 auto;max-width:230px}}

/* ---------- columns (QC.columns) ---------- */
.qc .gcol{transform-box:fill-box;transform-origin:50% 100%;transition:transform calc(.9s * var(--tempo)) var(--ease) calc((var(--i,0) * 45ms) * var(--tempo)),opacity .2s}
.qc:not(.in) .gcol{transform:scaleY(0)}

.qc-cols .col.dim .gcol{opacity:.35}
.qc-cols .cv{fill:var(--fg);font-size:11px;text-anchor:middle;transition:opacity calc(.5s * var(--tempo)) calc(.8s * var(--tempo))}
.qc:not(.in) .qc-cols .cv{opacity:0}

/* ---------- 100% stacked bars (QC.stacked) ---------- */
.qc-stack .r{display:grid;grid-template-columns:var(--lab,150px) minmax(0,1fr);align-items:center;min-height:42px}
.qc-stack .lab{font-size:15px;line-height:1.2;padding-right:12px}
.qc-stack .tr{display:flex;height:26px;gap:2px}
.qc-stack .sg{display:flex;align-items:center;justify-content:center;background:var(--c);min-width:2px;transform-origin:left;transition:transform calc(.8s * var(--tempo)) var(--ease) calc((var(--i) * 45ms) * var(--tempo)),opacity .2s;cursor:pointer;outline:none}
.qc-stack .sg:first-child{border-radius:4px 0 0 4px}.qc-stack .sg:last-child{border-radius:0 4px 4px 0}
.qc:not(.in) .qc-stack .sg{transform:scaleX(0)}
.qc-stack .sg span{font:500 11px/1 var(--font-sans);color:#fff}
.qc-stack[data-k="0"] .sg:not([data-k="0"]),.qc-stack[data-k="1"] .sg:not([data-k="1"]),.qc-stack[data-k="2"] .sg:not([data-k="2"]),.qc-stack[data-k="3"] .sg:not([data-k="3"]),.qc-stack[data-k="4"] .sg:not([data-k="4"]){opacity:.3}
@media (max-width:520px){.qc-stack .r{grid-template-columns:1fr}.qc-stack .lab{padding:8px 0 5px}}

/* ---------- arrows, before and after (QC.arrows) ---------- */
.qc-arrows .ln{position:absolute;top:50%;height:3px;margin-top:-1.5px;background:var(--c);border-radius:2px;transform-origin:left}
.qc-arrows .ln.l{transform-origin:right}
.qc-arrows .d0,.qc-arrows .d1{position:absolute;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%}
.qc-arrows .d0{background:var(--page);border:2px solid var(--muted)}
.qc-arrows .d1{background:var(--c);box-shadow:0 0 0 2px var(--page)}
.qc-arrows .r{cursor:default}

/* ---------- scatter (QC.scatter) and line extras ---------- */

.qc-scatter .pt{cursor:pointer;outline:none}
.qc-scatter .pt.on circle{stroke:var(--fg);stroke-width:2}
.qc-scatter :is(.pt,.nm) text{font-size:12px;fill:var(--fg);paint-order:stroke;stroke:var(--page);stroke-width:3px}
.qc-scatter .nm{pointer-events:none}
.qc-line .tgt{fill:var(--c);stroke:var(--page);stroke-width:2}
.qc-line .wipe{transform-box:fill-box;transform-origin:left;transition:transform calc(1.4s * var(--tempo)) var(--ease)}
.qc:not(.in) .qc-line .wipe{transform:scaleX(0)}

/* ---------- parliament (QC.parliament) ---------- */
.qc-parl svg.plot{max-width:560px;margin:0 auto}
.qc-parl .seat{fill:var(--c,var(--neutral));transition:fill calc(.45s * var(--tempo)) var(--ease),opacity .2s,transform calc(.7s * var(--tempo)) var(--ease) calc((var(--i,0) * 18ms) * var(--tempo));cursor:pointer}
.qc-parl svg[data-g="0"] .seat:not([data-g="0"]),.qc-parl svg[data-g="1"] .seat:not([data-g="1"]),.qc-parl svg[data-g="2"] .seat:not([data-g="2"]),.qc-parl svg[data-g="3"] .seat:not([data-g="3"]),.qc-parl svg[data-g="4"] .seat:not([data-g="4"]),.qc-parl svg[data-g="5"] .seat:not([data-g="5"]){opacity:.18}
.qc-parl .maj{stroke:var(--muted);stroke-width:.6;stroke-dasharray:2 2}
.qc-parl .mj{fill:var(--fg);font:600 15px var(--font-serif);text-anchor:middle}
.qc-parl .mjl{fill:var(--muted);font-size:5px;text-anchor:middle;letter-spacing:.08em;text-transform:uppercase}
.qc-parl .pg{justify-content:center;margin:14px 0 0}
.qc-parl .pg li{cursor:pointer}
.qc-parl .pg b{color:var(--fg);font-weight:500}

/* ---------- timeline (QC.timeline) ---------- */
.qc-time{position:relative;padding-left:8px}
.qc-time .rail{position:absolute;left:172px;top:8px;bottom:8px;width:2px;background:var(--border);transform-origin:top;transition:transform calc(1.4s * var(--tempo)) var(--ease)}
.qc:not(.in) .qc-time .rail{transform:scaleY(0)}
.qc-time ol{list-style:none;margin:0;padding:0}

.qc:not(.in) .qc-time li{opacity:0;transform:translateY(16px)}
.qc-time li:hover,.qc-time li:focus-visible{background:var(--surface)}
.qc-time .when{grid-row:span 2;text-align:right;font:500 12px/1.35 var(--font-sans);color:var(--accent);padding-top:4px}
.qc-time .when em{display:block;font-style:normal;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:10px;margin-top:4px}
.qc-time .dot{position:absolute;left:158px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--page);border:2px solid var(--accent)}
.qc-time li:first-child .dot{background:var(--accent)}
.qc-time h4{font:600 19px/1.2 var(--font-serif);margin:0 0 4px}
.qc-time p{margin:0;color:var(--muted);font-size:15px;line-height:1.45}
@media (max-width:560px){.qc-time .rail{left:6px}.qc-time li{grid-template-columns:1fr;padding-left:26px}.qc-time .when{text-align:left;grid-row:auto;padding:0 0 4px}.qc-time .dot{left:1px}}

/* ---------- choropleth (QC.choromap) ---------- */

.qc-choro .pv.on,.qc-choro .pv:focus-visible{stroke:var(--fg);stroke-width:1.6}
.qc-choro .find{position:relative;margin:0 0 12px}
/* the search suggestions, drawn by the chart (qn-charts.js suggest) */
.qc-sugg{position:absolute;left:0;top:calc(100% + 6px);z-index:6;width:min(280px,100%);margin:0;padding:6px;list-style:none;background:var(--page);border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 36px -14px rgba(0,0,0,.35)}
.qc-sugg[hidden]{display:none}
.qc-sugg li{padding:8px 10px;border-radius:8px;font:500 13px/1.3 var(--font-sans);color:var(--fg);cursor:pointer}
.qc-sugg li:hover,.qc-sugg li[aria-selected=true]{background:var(--surface)}
.qc-choro input{font:500 14px var(--font-sans);color:var(--fg);background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:9px 16px;width:min(280px,100%)}
.qc-choro input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
:is(.qc-choro,.qc-tiles) .ck{display:grid;grid-template-columns:repeat(6,minmax(0,44px));gap:2px;margin:0 0 16px;font:500 11px var(--font-sans);color:var(--muted)}
:is(.qc-choro,.qc-tiles) .ck>span{grid-column:1/-1;margin-bottom:5px;color:var(--fg)}
:is(.qc-choro,.qc-tiles) .ck i{height:10px}
:is(.qc-choro,.qc-tiles) .ck i:first-of-type{border-radius:3px 0 0 3px}:is(.qc-choro,.qc-tiles) .ck i:last-of-type{border-radius:0 3px 3px 0}
:is(.qc-choro,.qc-tiles) .ckl{grid-column:1/-1;display:grid;grid-template-columns:22px repeat(5,46px);margin-top:4px}
:is(.qc-choro,.qc-tiles) .ckl b{font-weight:500;text-align:center}

/* ---------- bands behind time charts: who governed (QC.line / QC.columns bands) ---------- */
.qc .band{opacity:.9}
.qc .band.sx{fill:color-mix(in oklab,var(--c1) 16%,transparent)}
.qc .band.dx{fill:color-mix(in oklab,var(--c2) 16%,transparent)}
.qc .band.mix{fill:color-mix(in oklab,var(--neutral) 45%,transparent)}
.qc-legend i.band{border-radius:2px;width:14px}
.qc-legend i.band.sx{background:color-mix(in oklab,var(--c1) 30%,var(--page))}
.qc-legend i.band.dx{background:color-mix(in oklab,var(--c2) 30%,var(--page))}
.qc-legend i.band.mix{background:color-mix(in oklab,var(--neutral) 70%,var(--page))}
.qc-line .pl{font-size:11px;fill:var(--fg);text-anchor:middle;paint-order:stroke;stroke:var(--page);stroke-width:3px}
.qc .rule line{stroke:var(--muted);stroke-dasharray:4 3}
.qc .rule text{font-size:11px;fill:var(--muted)}

/* ---------- timeline extras: portraits and dots in the category colour ---------- */
.qc-time .tx{min-width:0}
.qc-time .pic{float:right;width:76px;height:76px;margin:0 0 6px 14px;border-radius:50%;object-fit:cover;object-position:50% 20%;background:#fff;box-shadow:0 0 0 1px var(--border)}
.qc-time .who{font:500 12px/1.4 var(--font-sans)!important;color:var(--muted);margin:0 0 6px!important}
.qc-time li.tc .dot{border-color:var(--dc);background:var(--dc)}
.qc-time li.tc .when{color:var(--fg)}

/* ---------- points map (QC.points) ---------- */
.qc-pts svg.plot{margin:0 auto}
.qc-pts .land{fill:var(--land);stroke:var(--land-line);stroke-width:.5}
.qc-pts .dot{stroke:var(--page);stroke-width:.8;cursor:pointer;outline:none;transition:opacity .2s,transform calc(.6s * var(--tempo)) var(--ease) calc((var(--i,0) * 18ms) * var(--tempo))}
.qc-pts .dot.on{stroke:var(--fg);stroke-width:1.4}
.qc-pts svg[data-only] .dot:not(.in-only){opacity:.1}

/* ---------- prose for the annotated text form (Data Studio "Testo annotato") ---------- */
.qc-prose{font-size:18px;line-height:1.85;margin:0 0 14px}
.qc-prose [data-hand]{white-space:nowrap}
.qc-err{font:500 13px/1.5 var(--font-sans);color:var(--up);background:var(--surface);padding:12px 14px;border-radius:8px}

/* ---------- maps: framed maps, labels, time slider, proportional dots, tile grids ---------- */
.qc svg.framed{overflow:hidden}
.qc-choro svg.plot{margin:0 auto;max-width:720px}

.qc-choro .ml{font-size:11px;fill:var(--fg);text-anchor:middle;paint-order:stroke;stroke:var(--page);stroke-width:3px;stroke-linejoin:round;pointer-events:none}
.qc-time-ctl{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.qc-time-ctl .play{display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:50%;border:0;background:var(--accent);color:#fff;cursor:pointer;transition:transform .3s var(--spring)}
.qc-time-ctl .play:hover{transform:scale(1.08)}
.qc-time-ctl .play:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.qc .ic{width:16px;height:16px;flex:none}
.qc-time-ctl input{flex:1;max-width:420px;accent-color:var(--accent)}
.qc-time-ctl b{font:600 22px/1 var(--font-serif);min-width:3ch}
.qc-pts .dot.prop{fill-opacity:.78;stroke:var(--page);stroke-width:1}
.qc-bmap .key circle{fill:none;stroke:var(--muted)}
.qc-bmap .key text{fill:var(--muted)}
.qc-tiles .tg{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,56px));grid-template-rows:repeat(var(--rows),auto);gap:4px;justify-content:center}

.qc-tiles .tile b{font:500 12px/1 var(--font-sans);color:var(--fg)}
.qc-tiles .tile span{font:500 10px/1 var(--font-sans);color:var(--fg);opacity:.75}
.qc-tiles .tile.nd b{color:var(--muted)}
.qc-tiles .tile:hover,.qc-tiles .tile:focus-visible{box-shadow:0 0 0 2px var(--fg)}
.qc:not(.in) .qc-tiles .tile{transform:scale(.4);opacity:0}
.qc.m1 .qc-tiles .tile{transform:none!important}
@media (max-width:520px){.qc-tiles .tile b{font-size:10px}.qc-tiles .tile span{display:none}}

/* ---------- classic block: grouped bars, areas, slope, dumbbell, table, heatmap, treemap, pyramid, race ---------- */
.qc-gbars .r{min-height:auto;padding:6px 0}
.qc-gbars .tr{height:auto;display:grid;gap:3px}
.qc-gbars .gb{position:relative;height:12px}
.qc-gbars .gb .b{height:10px;margin-top:-5px}
.qc-gbars .gb .v{font-size:11px}

.qc-areas .al{font-size:12px;fill:var(--fg)}
.qc-slope .hd{font-size:12px;fill:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.qc-slope .ax0{stroke:var(--grid)}
.qc-slope .sl line{stroke:var(--c);stroke-width:2.2}
.qc-slope .sl circle{fill:var(--c);stroke:var(--page);stroke-width:1.5}
.qc-slope .lt{font-size:12px;fill:var(--fg)}
.qc-slope .lt .vv{fill:var(--muted)}
.qc-slope .sl{cursor:pointer;outline:none;transition:opacity .2s}
.qc-slope[data-on] .sl:not(.on){opacity:.18}
.qc-dumb .ln{position:absolute;top:50%;height:3px;margin-top:-1.5px;background:var(--neutral);border-radius:2px;transform-origin:left}
.qc-dumb .dd{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--page)}
/* ranges (QC.ranges): the estimate as a dot, its margin as a bar with end caps */
.qc-range .gl{position:absolute;top:0;bottom:0;width:1px;background:var(--grid)}
.qc-range .rl{position:absolute;top:-2px;bottom:-2px;border-left:1px dashed var(--muted)}
.qc-range .wk{position:absolute;top:50%;height:16px;margin-top:-8px;border-inline:2px solid var(--muted);background:linear-gradient(var(--muted),var(--muted)) center/100% 2px no-repeat;transform-origin:left}
.qc-range .r.mute .wk{opacity:.55}
.qc-range .dd{position:absolute;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--page)}
.qc-range .v{text-shadow:0 0 2px var(--page),0 0 2px var(--page),0 0 3px var(--page)}
.qc-range .r:hover .dd,.qc-range .r:focus-visible .dd{box-shadow:0 0 0 2px var(--page),0 0 0 4px var(--c)}
.qc-range .axis.rf{margin:0 0 2px}
.qc-range .axis.rf span{color:var(--muted);white-space:nowrap}
.qc-table .tw{overflow-x:auto}
.qc-table table{width:100%;border-collapse:collapse;font:500 14px/1.3 var(--font-sans)}
.qc-table th{text-align:left;border-bottom:2px solid var(--fg);padding:0}
.qc-table th.n{text-align:right}
.qc-table th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:8px 8px 8px 0;font-size:12px;color:var(--muted)}
.qc-table th button:focus-visible{outline:2px solid var(--accent)}
.qc-table th button i::after{content:'\2195';opacity:.35}
.qc-table th[aria-sort=ascending] button i::after{content:'\2191';opacity:1;color:var(--accent)}
.qc-table th[aria-sort=descending] button i::after{content:'\2193';opacity:1;color:var(--accent)}
.qc-table td{padding:9px 8px 9px 0;border-bottom:1px solid var(--border);font-family:var(--font-text);font-size:15px}
.qc-table td.n{position:relative;text-align:right;font-family:var(--font-sans);font-size:14px;min-width:90px}
.qc-table td .cb{position:absolute;left:0;top:50%;height:16px;margin-top:-8px;background:color-mix(in oklab,var(--accent) 22%,transparent);border-radius:0 3px 3px 0;transform-origin:left}
.qc-table td span{position:relative}
.qc-table tbody tr{transition:opacity calc(.5s * var(--tempo)) var(--ease) calc((.2s + var(--i) * 40ms) * var(--tempo))}
.qc:not(.in) .qc-table tbody tr{opacity:0}

.qc-table .find{margin:0 0 12px}
.qc-table .find input{font:500 14px var(--font-sans);color:var(--fg);background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:9px 16px;width:min(280px,100%)}
.qc-heat .hg{display:grid;grid-template-columns:auto repeat(var(--cols),minmax(0,1fr));gap:3px;align-items:center}
.qc-heat .ch{font:500 11px/1 var(--font-sans);color:var(--muted);text-align:center;padding-bottom:4px}
.qc-heat .rh{font:500 12px/1.2 var(--font-sans);color:var(--fg);padding-right:8px;white-space:nowrap}

.qc-heat .hc:hover,.qc-heat .hc:focus-visible{box-shadow:0 0 0 2px var(--fg)}
.qc-tree rect{fill:var(--c);stroke:none}

.qc-tree .tm:hover rect,.qc-tree .tm:focus-visible rect{stroke:var(--fg);stroke-width:2}
.qc-tree text{fill:#fff;font-size:12px;pointer-events:none}
.qc-tree .tv{opacity:.85;font-size:11px}
.qc-pyr .ph{display:grid;grid-template-columns:1fr 120px 1fr;margin-bottom:8px;font:500 12px var(--font-sans)}
.qc-pyr .ph b:first-child{text-align:right;color:var(--c)}.qc-pyr .ph b:last-child{color:var(--c)}
.qc-pyr .pr{display:grid;grid-template-columns:1fr 120px 1fr;align-items:center;min-height:28px;border-radius:5px;outline:none}
.qc-pyr .pr:hover,.qc-pyr .pr:focus-visible{background:var(--surface)}
.qc-pyr .pl,.qc-pyr .pr2{display:flex;align-items:center;gap:6px;height:16px}
.qc-pyr .pl{justify-content:flex-end}
.qc-pyr .b{display:block;height:14px;background:var(--c);transform-origin:left;border-radius:0 3px 3px 0}
.qc-pyr .b.l{transform-origin:right;border-radius:3px 0 0 3px}
.qc-pyr .pn{text-align:center;font-size:13px;line-height:1.15;padding:0 6px}
.qc-pyr .v{font:500 11px var(--font-sans);color:var(--muted);white-space:nowrap}
@media (max-width:520px){.qc-pyr .ph,.qc-pyr .pr{grid-template-columns:1fr 84px 1fr}.qc-pyr .pn{font-size:12px}}
.qc-race{--rlab:150px}
.qc-race .rc{position:relative}
.qc-race .rb{position:absolute;left:0;right:0;top:0;height:30px;display:flex;align-items:center;gap:8px;transition:transform .35s linear,opacity .35s;cursor:default}
.qc-race .rl{flex:none;width:var(--rlab);text-align:right;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qc-race .rbar{display:block;height:22px;background:var(--c);border-radius:0 4px 4px 0;transition:width .35s linear;min-width:2px}
.qc-race .rv{font:500 13px var(--font-sans)}
@media (max-width:520px){.qc-race{--rlab:100px}.qc-race .rl{font-size:12px}}

/* ---------- the key datum: a spotlight at the opening (QC.focus) ---------- */
.qc-ping.big{width:64px;height:64px;margin:-32px 0 0 -32px;border-width:3px}
.qc-ping.big::after{border-width:3px}

/* ---------- more motion (2026-10-30): springy pops, tooltips that land, every mark answers the pointer ---------- */
:root{--tempo:1.35;/* entrance pace: 1 = original, higher = slower (hover answers stay quick) */
  --page:#fff;--fg:#16181b;--muted:#5c636c;--faint:#8a919a;--surface:#edeff2;--border:#d9dce1;--grid:#e6e8ec;--land:#e9ecef;--land-line:#fff;--accent:#0092cc;/* the one colour of "the number that matters" */
  --neutral:#c5cad1;/* context: everything that is not the point */
/* categorical order, validated (dataviz validate_palette.js, light on #fff / dark on #16181b) */
  --c1:#0092cc;--c2:#d4572e;--c3:#7a5cc7;--c4:#b08600;--up:#d4572e;--down:#0092cc;/* diverging: increase / decrease */
  --ink:#16181b;/* hand-drawn notes: ink, never a data colour */
  --marker:#ffe066;/* highlighter, blended over the text */
  --tip-bg:#16181b;--tip-fg:#fff;--font-sans:'Zetal',Arial,Helvetica,sans-serif;--font-serif:'QN Shinka Display',Georgia,'Times New Roman',serif;--font-text:'QN Shinka',Georgia,'Times New Roman',serif;--ease:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.56,.64,1);interpolate-size:allow-keywords}
.qc .pop{transform-box:fill-box;transform-origin:center;transition:transform calc(.85s * var(--tempo)) var(--spring) calc((var(--i,0) * 18ms) * var(--tempo)),opacity calc(.4s * var(--tempo)) calc((var(--i,0) * 18ms) * var(--tempo))}

.qc-tip.on{opacity:1;transform:none}
/* bars: the hovered bar thickens, the zero line draws before the bars leave it */
.qc-bars .b{position:absolute;top:50%;height:14px;margin-top:-7px;background:var(--c,var(--neutral));transform-origin:left;border-radius:0 4px 4px 0;transition:transform calc(.9s * var(--tempo)) var(--ease) calc((var(--i,0) * 40ms) * var(--tempo)),opacity .2s,height .25s var(--ease),margin .25s var(--ease)}
.qc-bars .r:hover .b{height:20px;margin-top:-10px}
.qc-bars .zero{position:absolute;top:0;bottom:0;width:1px;background:var(--muted);transform-origin:top;transition:transform calc(.7s * var(--tempo)) var(--ease)}
.qc:not(.in) .qc-bars .zero{transform:scaleY(0)}
/* columns lift under the pointer */
.qc-cols .col{cursor:pointer;outline:none;transition:transform .3s var(--spring)}
.qc-cols .col:hover{transform:translateY(-5px)}
/* lines: dots land one after the other along the line */
.qc-line .lp{fill:var(--c);stroke:var(--page);stroke-width:1.5}
/* stacked areas rise layer by layer from the baseline */
.qc-areas .ar{fill:var(--c);fill-opacity:.88;stroke:var(--page);stroke-width:1;transform-box:fill-box;transform-origin:50% 100%;transition:transform calc(1.1s * var(--tempo)) var(--ease) calc((.15s + var(--k,0) * 160ms) * var(--tempo))}
.qc:not(.in) .qc-areas .ar{transform:scaleY(0)}
/* big numbers pop as they count */
.qc-big .n{font:600 56px/1 var(--font-serif);letter-spacing:-.02em;color:var(--c,var(--accent));display:inline-block;transform-origin:left bottom;transition:transform calc(1s * var(--tempo)) var(--spring) .15s}
.qc:not(.in) .qc-big .n{transform:scale(.5)}
/* points drop onto the map */
.qc:not(.in) .qc-pts .dot{transform:translateY(-18px) scale(0);opacity:0}
.qc-pts .dot:hover{stroke:var(--fg);stroke-width:1.6}
/* choropleth: the borders draw themselves, then the colours flood in north to south */
.qc-choro .pv{fill:var(--f);stroke:var(--page);stroke-width:.6;stroke-linejoin:round;cursor:pointer;outline:none;stroke-dasharray:1;stroke-dashoffset:0;transition:fill calc(.8s * var(--tempo)) var(--ease) calc((.55s + var(--i) * 9ms) * var(--tempo)),stroke-dashoffset calc(1.3s * var(--tempo)) var(--ease)}
.qc:not(.in) .qc-choro .pv{fill:var(--land);stroke-dashoffset:1}
.qc-choro svg.upd .pv{transition:fill calc(.45s * var(--tempo)) var(--ease)}
/* cards open and close by sliding, not by jumping */
.qc-cards details::details-content{block-size:0;overflow:hidden;transition:block-size calc(.45s * var(--tempo)) var(--ease),content-visibility calc(.45s * var(--tempo)) allow-discrete}
.qc-cards details[open]::details-content{block-size:auto}
.qc-cards details:hover{border-color:color-mix(in oklab,var(--accent) 45%,transparent)}
/* tiles, heatmap cells, treemap, scatter: they grow under the pointer */
.qc.in .qc-tiles .tile:hover,.qc.in .qc-tiles .tile:focus-visible{transform:scale(1.1);transition-delay:0s;z-index:1}
.qc-heat .hc{aspect-ratio:1.4;display:grid;place-items:center;border-radius:3px;background:var(--f);font:500 10px/1 var(--font-sans);font-style:normal;color:var(--fg);cursor:pointer;outline:none;transform-box:border-box;transition:transform calc(.75s * var(--tempo)) var(--spring) calc((var(--i,0) * 18ms) * var(--tempo)),opacity calc(.4s * var(--tempo)) calc((var(--i,0) * 18ms) * var(--tempo)),box-shadow .15s}
.qc.in .qc-heat .hc:hover,.qc.in .qc-heat .hc:focus-visible{transform:scale(1.15);transition-delay:0s;position:relative;z-index:1}
.qc-tree .tm{cursor:pointer;outline:none;transition:filter .2s}
.qc-tree .tm:hover{filter:brightness(1.1) saturate(1.1)}
.qc-scatter circle{fill:var(--c);stroke:var(--page);stroke-width:1.5;transition:r .25s var(--spring)}
.qc-scatter:not(.sized) .pt:hover circle,.qc-scatter:not(.sized) .pt.on circle{r:8}
.qc-scatter.sized circle{fill-opacity:.6;stroke:var(--c);stroke-width:1}
.qc-scatter.sized .pt:hover circle,.qc-scatter.sized .pt.on circle{fill-opacity:.9;stroke:var(--fg);stroke-width:2}
.qc-scatter .trend{fill:none;stroke:var(--fg);stroke-width:2;stroke-linecap:round;pointer-events:none}
/* hexbin (QC.hexbin): five steps of the accent, from the page colour to full */
.qc-hex .hx{stroke:var(--page);stroke-width:.6;cursor:pointer}
.qc-hex .hx.on,.qc-hex .hx:focus-visible{stroke:var(--fg);stroke-width:1.5;outline:none}
.qc-hex :is(.hx,.hk i).h1{fill:color-mix(in oklab,var(--accent) 30%,var(--page));background:color-mix(in oklab,var(--accent) 30%,var(--page))}
.qc-hex :is(.hx,.hk i).h2{fill:color-mix(in oklab,var(--accent) 46%,var(--page));background:color-mix(in oklab,var(--accent) 46%,var(--page))}
.qc-hex :is(.hx,.hk i).h3{fill:color-mix(in oklab,var(--accent) 62%,var(--page));background:color-mix(in oklab,var(--accent) 62%,var(--page))}
.qc-hex :is(.hx,.hk i).h4{fill:color-mix(in oklab,var(--accent) 80%,var(--page));background:color-mix(in oklab,var(--accent) 80%,var(--page))}
.qc-hex :is(.hx,.hk i).h5{fill:var(--accent);background:var(--accent)}
.qc-hex .nm circle{fill:var(--fg);stroke:var(--page);stroke-width:1.5}
.qc-hex .hk{display:grid;grid-template-columns:auto repeat(5,18px);grid-template-rows:auto auto;column-gap:2px;align-items:center;justify-content:start;margin:0 0 10px;font:500 12px/1.2 var(--font-sans);color:var(--muted)}
.qc-hex .hk span:first-child{grid-row:1/3;margin-right:10px}
.qc-hex .hk i{height:10px;border-radius:2px}
.qc-hex .hk span:nth-last-child(2){grid-column:2;grid-row:2;font-size:11px;color:var(--faint)}
.qc-hex .hk span:last-child{grid-column:6;grid-row:2;justify-self:end;font-size:11px;color:var(--faint)}
.qc .ax line.mn{stroke-dasharray:2 3}
.qc .ax line.tk{stroke:var(--muted)}
.qc-bmap .dot:hover{fill-opacity:1}
/* timeline and cards: the hovered step leans in */
.qc-time li{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:44px;padding:10px 12px 18px 0;border-radius:8px;outline:none;transition:opacity calc(.6s * var(--tempo)) var(--ease) calc((.25s + var(--i) * 130ms) * var(--tempo)),transform calc(.7s * var(--tempo)) var(--ease) calc((.25s + var(--i) * 130ms) * var(--tempo)),background-color .2s}
.qc.in .qc-time li:hover{transform:translateX(4px);transition-delay:0s}
/* legends answer too */
.qc-legend li{display:flex;align-items:center;gap:7px;transition:opacity .2s}
.qc-legend:hover li:not(:hover){opacity:.55}
@media (prefers-reduced-motion:reduce){.qc *,.qc-tip{transition:none!important;animation:none!important}}
.qc-tiles .tile{all:unset;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:6px;background:var(--f);cursor:pointer;transition:transform calc(.5s * var(--tempo)) var(--ease) calc((var(--i) * 30ms) * var(--tempo)),opacity calc(.5s * var(--tempo)) calc((var(--i) * 30ms) * var(--tempo)),box-shadow .15s;transition-timing-function:var(--spring)}

/* the foot: "Dati" always first, then the source, tiny, and the QN mark; "Ingrandisci" is an icon at the top right */
.qc-foot{display:flex;border-top:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:16px;padding-top:12px;font:500 11px/1.45 var(--font-sans);color:var(--muted)}
.qc-foot>div{flex:1 1 180px}
.qc-foot p{margin:0 0 2px}
.qc-foot::after{content:'';flex:none;width:30px;height:15px;background:var(--fg);opacity:.85;-webkit-mask:url(qn.svg) center/contain no-repeat;mask:url(qn.svg) center/contain no-repeat;margin-bottom:0}
.qc-act{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px 0 8px;border:1px solid var(--border);border-radius:99px;color:var(--fg);font:500 11.5px/1 var(--font-sans);cursor:pointer;transition:background-color .2s,border-color .2s,transform .3s var(--spring)}
.qc-act svg{width:13px;height:13px;flex:none}
.qc-act:hover{background:var(--surface);border-color:color-mix(in oklab,var(--fg) 25%,var(--border))}
.qc-act:active{transform:scale(.95)}
.qc-act:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.qc-act.data{flex:none}
.qc-act.expand{position:absolute;top:12px;right:0;z-index:3;width:30px;height:30px;padding:0;justify-content:center;color:var(--muted)}
.qc-act.expand:hover{color:var(--fg)}
.qc:has(>.qc-act.expand) :is(.qc-kicker,.qc-title){padding-right:40px}

/* the wide page that "Ingrandisci" opens in the host's modal (qn-embed.js) or full screen */
.qc-wide{overflow:auto}

@media (max-width:640px){.qc-wide .qc{padding:60px 16px 8px}}
/* there the foot (source, actions, QN mark) is anchored at the bottom: pushed down when the chart is short, held there while a tall one scrolls */
.qc-wide body{padding:0}
.qc-wide .qc{max-width:1120px;padding:32px 40px 12px;display:flex;flex-direction:column;min-height:100dvh;box-sizing:border-box;padding-bottom:0}
.qc-wide .qc>*{flex:none}
.qc-wide .qc-switch{align-self:flex-start}
.qc-wide .qc-foot{position:sticky;bottom:0;z-index:5;padding:12px 0 14px;background:var(--page)}
/* the chart (with its legend, switch or slider) sits in the middle of the free height: the free space splits above and below it */
.qc-wide .qc>:is(.qc-hand,.qc-kicker,.qc-title,.qc-sub)+:is(.qc-legend,.qc-switch,.qc-time-ctl,.plot){margin-top:auto}
.qc-wide .qc>.plot{margin-bottom:auto}

/* "Dati": a sheet rising from the bottom over the blurred chart */
.qc-sheet{box-sizing:border-box;width:min(680px,calc(100% - 24px));max-width:none;max-height:min(600px,calc(100% - 24px));margin:auto auto 12px;padding:0;border:0;border-radius:16px;background:var(--page);color:var(--fg);overflow:auto;overscroll-behavior:contain;
  box-shadow:0 0 0 1px var(--border),0 30px 70px -20px rgba(0,0,0,.45);
  transition:opacity .3s var(--ease),transform .55s var(--spring),overlay .55s allow-discrete,display .55s allow-discrete}
.qc-sheet:not([open]){opacity:0;transform:translateY(32px)}
@starting-style{.qc-sheet[open]{opacity:0;transform:translateY(48px) scale(.98)}}
.qc-sheet::backdrop{background:rgba(120,126,134,.18);backdrop-filter:blur(7px) saturate(.8);transition:opacity .3s,overlay .55s allow-discrete,display .55s allow-discrete}
.qc-sheet:not([open])::backdrop{opacity:0}
@starting-style{.qc-sheet[open]::backdrop{opacity:0}}
.qc-sheet .qc{max-width:none;margin:0;padding:0 20px 16px}
.qc-sheet .qc::before{display:none}
.qc-sheet header{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;gap:12px;margin:0 -20px;padding:18px 20px 12px;background:var(--page)}
.qc-sheet header>div{flex:1}
.qc-sheet header .qc-kicker{margin-bottom:6px}
.qc-sheet h2{margin:0;font:600 19px/1.2 var(--font-serif);letter-spacing:-.01em;text-wrap:balance}
.qc-sheet .x{all:unset;flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--surface);color:var(--fg);cursor:pointer;transition:transform .3s var(--spring)}
.qc-sheet .x:hover{transform:rotate(90deg)}
.qc-sheet .x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.qc-sheet .x svg{width:16px;height:16px}
.qc-sheet .src{margin:12px 0 0;font:500 11px/1.45 var(--font-sans);color:var(--muted)}
.qc-sheet .src a{color:inherit}
@media (max-width:520px){.qc-sheet{width:100%;margin:auto 0 0;border-radius:16px 16px 0 0;max-height:calc(100% - 16px)}}
@media (prefers-reduced-motion:reduce){.qc-sheet,.qc-sheet::backdrop{transition:none}}

/* small, clean controls everywhere (2026-10-30): one size for search, chips and buttons */
.qc .find input{box-sizing:border-box;height:34px;width:min(280px,100%);padding:0 14px 0 34px;border:1px solid var(--border);border-radius:99px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a919a' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px 50%/14px;color:var(--fg);font:500 13px var(--font-sans);outline:none;transition:border-color .2s,box-shadow .2s,background-color .2s}
.qc .find input::placeholder{color:var(--faint)}
.qc .find input:focus{border-color:var(--accent);background-color:var(--page);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 18%,transparent)}
.qc .find input::-webkit-search-cancel-button{cursor:pointer}
/* filter legends: small chips you can see are pressable */
.qc-legend button{all:unset;display:flex;align-items:center;gap:7px;cursor:pointer;padding:4px 10px 4px 8px;border-radius:99px;border:1px solid var(--border);font-size:12px;transition:opacity .2s,background-color .2s,border-color .2s}
.qc-legend button:hover{background:var(--surface)}
.qc-legend button[aria-pressed=false]{opacity:.45;border-style:dashed}
.qc-legend button[aria-pressed=false] i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--c)}
/* tooltip: a touch more finish */
.qc-tip{position:fixed;z-index:9;pointer-events:none;max-width:260px;background:var(--tip-bg);color:var(--tip-fg);font:500 13px/1.4 var(--font-sans);opacity:0;transform:translateY(6px) scale(.96);transform-origin:50% 100%;transition:opacity .15s,transform .28s var(--spring);padding:9px 12px;border-radius:10px;box-shadow:0 0 0 1px color-mix(in oklab,var(--tip-fg) 10%,transparent),0 10px 28px -6px rgba(0,0,0,.35)}
.qc-tip b{display:block;font:600 15px/1.25 var(--font-serif);margin-bottom:3px;font-size:14px}
.qc-tip .row{display:flex;align-items:center;gap:6px;font-size:12.5px;line-height:1.5}
/* "Mostra tutte le righe": a small button like the foot's */
.qc-table .more{all:unset;cursor:pointer;box-sizing:border-box;display:inline-flex;align-items:center;height:28px;margin-top:12px;padding:0 12px;border:1px solid var(--border);border-radius:99px;font:500 12px/1 var(--font-sans);color:var(--fg);transition:background-color .2s}
.qc-table .more:hover{background:var(--surface)}
.qc-table .more .ic{width:13px;height:13px;margin-left:5px;transition:transform .2s}
.qc-table .more.all .ic{transform:rotate(180deg)}
.qc-table .more[hidden]{display:none}
/* segmented switch: same height as the rest */
.qc-switch button{all:unset;flex:none;white-space:nowrap;scroll-snap-align:start;cursor:pointer;font:500 12px/1 var(--font-sans);border-radius:99px;color:var(--muted);transition:background-color .2s,color .2s;padding:7px 13px}
@media (pointer:coarse){.qc-switch button{padding:9px 14px}}

/* ---------- 2026-10-30, eleven more forms: stripes, bump, small multiples, strip, nested circles, durations, target, pictogram, dots in time, yes/no grid, waterfall ---------- */
.qc-stripes .sr{display:flex;gap:1px;height:150px}
.qc-stripes .st{flex:1;min-width:0;background:var(--f);border-radius:2px;outline:none;transform-origin:50% 100%;transition:transform calc(.9s * var(--tempo)) var(--ease) calc((var(--i,0) * 12ms) * var(--tempo)),box-shadow .15s}
.qc:not(.in) .qc-stripes .st{transform:scaleY(0)}
.qc-stripes .st:hover,.qc-stripes .st:focus-visible{box-shadow:0 0 0 2px var(--fg);position:relative;z-index:1}
.qc-stripes .sx{position:relative;height:16px;margin-top:6px;font:500 11px/1 var(--font-sans);color:var(--faint)}
.qc-stripes .sx span{position:absolute;white-space:nowrap}
@media (max-width:520px){.qc-stripes .sr{height:110px}}

.qc-bump .ax line{stroke:var(--grid)}
.qc-bump .bl{fill:none;stroke:var(--c);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.qc-bump .bi{cursor:pointer;outline:none;transition:opacity .2s}
.qc-bump .bi circle{fill:var(--c);stroke:var(--page);stroke-width:1.5}
.qc-bump .bt{font-size:12px;fill:var(--fg)}
.qc-bump .rn{fill:var(--muted)}
.qc-bump[data-on] .bi:not(.on){opacity:.15}

.qc-multi{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px 18px}
.qc-multi .mc{display:grid;gap:2px;padding:8px 8px 6px;border-radius:8px;outline:none;cursor:default;transition:background-color .2s}
.qc-multi .mc:hover,.qc-multi .mc:focus-visible{background:var(--surface)}
.qc-multi .mc b{font:500 13px/1.25 var(--font-sans);color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qc-multi svg{display:block;width:100%;height:auto;overflow:visible}
.qc-multi .bs{stroke:var(--grid)}
.qc-multi path{fill:none;stroke:var(--c);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.qc-multi circle{fill:var(--c);stroke:var(--page);stroke-width:1.5}
.qc-multi .v{font:600 18px/1 var(--font-serif);color:var(--fg)}
.qc-multi small{font:500 10px/1 var(--font-sans);color:var(--faint)}
@media (max-width:520px){.qc-multi{grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:4px 6px}.qc-multi .mc{padding:6px 4px 4px}.qc-multi .mc b{font-size:12px}.qc-multi .v{font-size:16px}}

.qc-strip .pt{cursor:pointer;outline:none}
.qc-strip circle{fill:var(--c);stroke:var(--page);stroke-width:1.5}
.qc-strip .pt:hover circle,.qc-strip .pt:focus-visible circle{stroke:var(--fg);stroke-width:2}
.qc-strip text.fade{font-size:12px;fill:var(--muted);paint-order:stroke;stroke:var(--page);stroke-width:3px}
.qc-strip .pt.on text{fill:var(--fg)}
.qc-strip .mk line{stroke:var(--muted);stroke-dasharray:3 3}
.qc-strip .mk text{font-size:11px;fill:var(--muted)}
.qc-strip .ax line{stroke:var(--muted)}

.qc-circles .cw{display:grid;grid-template-columns:minmax(180px,300px) minmax(0,1fr);gap:16px 32px;align-items:center}
.qc-circles .ci{cursor:pointer;outline:none}
.qc-circles circle{fill:var(--c);fill-opacity:.92;stroke:var(--page);stroke-width:2}
.qc-circles .ci:hover circle,.qc-circles .ci:focus-visible circle{stroke:var(--fg)}
.qc-circles .ck{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.qc-circles .ck li{display:grid;grid-template-columns:12px 1fr;column-gap:10px;align-items:center}
.qc-circles .ck i{width:12px;height:12px;border-radius:50%;background:var(--c)}
.qc-circles .ck span{font-size:15px;line-height:1.3}
.qc-circles .ck b{grid-column:2;font:600 26px/1.1 var(--font-serif);color:var(--fg)}
.qc-circles .ck small{grid-column:2;font:500 12px/1.2 var(--font-sans);color:var(--muted)}
@media (max-width:520px){.qc-circles .cw{grid-template-columns:1fr;justify-items:center}.qc-circles .ck{width:100%}}

.qc-gantt .axis.top{margin:0 0 6px}
.qc-gantt .tr,.qc-gantt .axis .t{margin-right:96px}
.qc-gantt .gl{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--grid)}
.qc-gantt .b{height:18px;margin-top:-9px;border-radius:4px}
.qc-gantt .b.open{-webkit-mask:linear-gradient(90deg,#000 75%,transparent);mask:linear-gradient(90deg,#000 75%,transparent)}
.qc-gantt .v{font-size:12px;color:var(--muted)}
@media (max-width:520px){.qc-gantt .tr,.qc-gantt .axis .t{margin-right:8px}.qc-gantt .v{display:none}}

.qc-bullet .bg{position:absolute;left:0;right:0;top:50%;height:14px;margin-top:-7px;background:var(--surface);border-radius:0 4px 4px 0;transition:height .25s var(--ease),margin .25s var(--ease)}
.qc-bullet .r:hover .bg{height:20px;margin-top:-10px}
.qc-bullet .tg{position:absolute;top:50%;width:2px;height:26px;margin:-13px 0 0 -1px;background:var(--fg);border-radius:1px}
.qc-bullet .tl{font-size:11px;color:var(--muted);white-space:nowrap}

.qc-picto .g{grid-template-columns:repeat(var(--per,10),1fr);gap:4px;max-width:260px}
.qc-picto .g i{aspect-ratio:auto;background:none;border-radius:0;display:block}
.qc-picto .g svg{display:block;width:100%;height:auto;fill:var(--neutral);transition:fill .3s calc((var(--i) * 40ms) * var(--tempo))}
.qc.in .qc-picto .g i.on{background:none}
.qc.in .qc-picto .g i.on svg{fill:var(--c,var(--accent))}
.qc-picto .n small{font:500 14px var(--font-sans);color:var(--muted)}
.qc-picto .l small{color:var(--faint)}

.qc-dots .ev{cursor:pointer;outline:none}
.qc-dots circle{fill:var(--accent);fill-opacity:.5;stroke:var(--accent);stroke-width:1.2;transition:fill-opacity .2s}
.qc-dots .ev:hover circle,.qc-dots .ev:focus-visible circle{fill-opacity:.9;stroke:var(--fg)}
.qc-dots text.fade{font-size:11.5px;fill:var(--fg);paint-order:stroke;stroke:var(--page);stroke-width:3px}
.qc-dots .ax line{stroke:var(--muted)}

.qc-matrix .hc{--f:var(--surface);aspect-ratio:auto;min-height:40px;font-size:13px;color:var(--faint);padding:4px 6px;text-align:center}
.qc-matrix .hc svg{width:20px;height:20px}
.qc-matrix .hc.yes{--f:color-mix(in oklab,var(--accent) 16%,var(--surface));color:var(--accent)}
.qc-matrix .hc.half{--f:color-mix(in oklab,var(--c4) 16%,var(--surface));color:var(--c4)}
.qc-matrix .hc.text{color:var(--fg)}
.qc-matrix .rh{font-size:14px;white-space:normal}

.qc-wf .cn{stroke:var(--muted);stroke-dasharray:3 3}

/* ---------- 2026-10-30, maps and photos: side-by-side maps, swipe, relief, map + ranking, square cartogram, photo bubbles, duel, people, before/after, annotated photo, gauge, units ---------- */
.qc-choro .mv{font-size:10px;fill:var(--fg);text-anchor:middle;paint-order:stroke;stroke:var(--page);stroke-width:2.5px;pointer-events:none}
.qc-choro .pv.out{opacity:.3}
.qc-multimap .mg{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:10px 16px}
.qc-multimap .mm{margin:0}
.qc-multimap figcaption{font:500 13px/1.3 var(--font-sans);color:var(--fg);text-align:center;margin:0 0 6px}
.qc-multimap .mm svg{margin:0 auto}
@media (max-width:520px){.qc-multimap .mg{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the swipe (maps and photos): the right layer is clipped at the handle */
.qc .sw{position:relative;user-select:none;touch-action:pan-y}
.qc .sw .la,.qc .sw .lb{display:block}
.qc .sw .lb{position:absolute;inset:0}
.qc .sw .hd{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--fg);cursor:ew-resize;outline:none;touch-action:none}
.qc .sw .hd::before{content:'';position:absolute;inset:0 -14px}
.qc .sw .hd::after{content:'\25C0 \25B6';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--fg);color:var(--page);font-size:9px;letter-spacing:1px;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.qc .sw .hd:focus-visible::after{outline:2px solid var(--accent);outline-offset:2px}
.qc .sw .tg{position:absolute;top:10px;z-index:1;padding:3px 9px;border-radius:99px;background:color-mix(in oklab,var(--fg) 80%,transparent);color:var(--page);font:500 11px/1.4 var(--font-sans);pointer-events:none}
.qc .sw .tg.l{left:10px}.qc .sw .tg.r{right:10px}
.qc-swipe .sw svg{margin:0 auto}
.qc-cmp .sw{overflow:hidden;border-radius:8px;max-width:640px;background:var(--surface)}
.qc-cmp .sw img{display:block;width:100%;height:100%;object-fit:cover}
.qc-cmp .sw .la{height:100%}
.qc-relief .rl{cursor:pointer;outline:none;transition:transform calc(1.2s * var(--tempo)) var(--ease) calc((var(--i,0) * 8ms) * var(--tempo))}
.qc:not(.in) .qc-relief .rl{transform:translateY(calc(var(--h,0) * 1px))}
.qc-relief .sd{fill:color-mix(in oklab,var(--f) 60%,#000);stroke:none}
.qc-relief .tp{fill:var(--f);stroke:var(--page);stroke-width:.6;stroke-linejoin:round}
.qc-relief .rl:hover .tp,.qc-relief .rl:focus-visible .tp{stroke:var(--fg);stroke-width:1.2}
.qc-mapbars .mb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 28px;align-items:center}
.qc-mapbars .m svg{margin:0 auto}
.qc-bars .r.on{background:var(--surface)}
@media (max-width:640px){.qc-mapbars .mb{grid-template-columns:1fr}}
.qc-sqmap .land{fill:var(--land);stroke:var(--land-line);stroke-width:.5}
.qc-sqmap .sq{cursor:pointer;outline:none}
.qc-sqmap rect{fill:var(--c);stroke:var(--page);stroke-width:1}
.qc-sqmap .sq:hover rect,.qc-sqmap .sq:focus-visible rect{stroke:var(--fg);stroke-width:1.5}
.qc-sqmap text{fill:#fff;text-anchor:middle;pointer-events:none;font-weight:500}
.qc-pts .ph{cursor:pointer;outline:none}
.qc-pts .ph .ring{stroke:var(--page);stroke-width:1.5}
.qc-pts .ph image{pointer-events:none}
.qc-pts .ph:hover .ring,.qc-pts .ph:focus-visible .ring{stroke:var(--fg);stroke-width:2}
.qc-pbub .pb{cursor:pointer;outline:none}
.qc-pbub .ring{fill:var(--c)}
.qc-pbub .pb:hover .ring,.qc-pbub .pb:focus-visible .ring{stroke:var(--fg);stroke-width:2}
.qc-pbub image{pointer-events:none}
.qc-pbub .cap rect{fill:rgba(10,12,15,.6)}
.qc-pbub .cap text{fill:#fff;text-anchor:middle;font-weight:500;pointer-events:none}
.qc-pbub .cap .cv{fill:rgba(255,255,255,.8)}
.qc-duel .dl{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center}
.qc-duel .dl.n3{grid-template-columns:1fr}
.qc-duel .fcs{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.qc-duel .fc{display:grid;justify-items:center;text-align:center;gap:4px;min-width:86px}
.qc-duel .fc img,.qc-duel .fc i{display:block;width:78px;height:78px;border-radius:50%;object-fit:cover;background:var(--surface);box-shadow:0 0 0 3px var(--c),0 0 0 6px var(--page)}
.qc-duel .fc b{font:600 28px/1 var(--font-serif);color:var(--c);margin-top:6px}
.qc-duel .fc span{font:500 12px/1.3 var(--font-sans);color:var(--muted)}
.qc-duel .bar{position:relative;height:28px;border-radius:6px;background:var(--surface);margin:34px 0 6px}
.qc-duel .sg{position:absolute;top:0;height:100%;background:var(--c);transform-origin:left;outline:none;cursor:pointer;transition:transform calc(1s * var(--tempo)) var(--ease) calc((var(--i,0) * 120ms) * var(--tempo)),filter .15s}
.qc-duel .sg:first-child{border-radius:6px 0 0 6px}
.qc-duel .sg:hover{filter:brightness(1.08)}
.qc-duel .mj{position:absolute;top:-8px;bottom:-8px;width:2px;margin-left:-1px;background:var(--fg)}
.qc-duel .mj b{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:4px;font:500 11px/1 var(--font-sans);color:var(--muted);white-space:nowrap}
@media (max-width:520px){.qc-duel .dl{gap:10px}.qc-duel .fc{min-width:70px}.qc-duel .fc img,.qc-duel .fc i{width:58px;height:58px}.qc-duel .fc b{font-size:22px}}
.qc-people .pp{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:14px 10px}
.qc-people .pc{display:grid;justify-items:center;text-align:center;gap:3px;padding:10px 6px;border-radius:10px;outline:none;cursor:default;transition:background-color .2s,opacity calc(.6s * var(--tempo)) var(--ease) calc((var(--i,0) * 60ms) * var(--tempo)),transform calc(.7s * var(--tempo)) var(--ease) calc((var(--i,0) * 60ms) * var(--tempo))}
.qc:not(.in) .qc-people .pc{opacity:0;transform:translateY(14px)}
.qc-people .pc:hover,.qc-people .pc:focus-visible{background:var(--surface)}
.qc-people .pc img,.qc-people .pc i{display:block;width:84px;height:84px;border-radius:50%;object-fit:cover;background:var(--surface);box-shadow:0 0 0 3px var(--c),0 0 0 5px var(--page);margin-bottom:6px}
.qc-people .pc b{font:600 15px/1.2 var(--font-serif)}
.qc-people .pc small{font:500 11px/1.3 var(--font-sans);color:var(--muted)}
.qc-people .pc em{font:600 22px/1 var(--font-serif);font-style:normal;color:var(--c);margin-top:4px}
@media (max-width:520px){.qc-people .pp{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.qc-people .pc img,.qc-people .pc i{width:64px;height:64px}}
.qc-anno .aw{position:relative;max-width:640px;border-radius:8px;overflow:hidden;background:var(--surface)}
.qc-anno .aw img{display:block;width:100%;height:100%;object-fit:cover}
.qc-anno .pin{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;padding:0;border:2px solid #fff;border-radius:50%;background:var(--accent);color:#fff;font:600 12px/1 var(--font-sans);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35);outline:none}
.qc-anno .pin.on,.qc-anno .pin:focus-visible{background:var(--fg);transform:scale(1.15)}
.qc-anno .al{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.qc-anno .al li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;padding:6px 8px;border-radius:8px;outline:none;transition:background-color .2s}
.qc-anno .al li.on,.qc-anno .al li:focus-visible{background:var(--surface)}
.qc-anno .al b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font:600 12px/1 var(--font-sans)}
.qc-anno .al li.on b{background:var(--fg)}
.qc-anno h4{font:600 15px/1.25 var(--font-serif);margin:2px 0 2px}
.qc-anno p{margin:0;font-size:14px;line-height:1.4;color:var(--muted)}
.qc-gauge .bg{fill:none;stroke:var(--surface);stroke-width:18;stroke-linecap:round}
.qc-gauge .bd{fill:none;stroke:var(--c);stroke-width:18;opacity:.3}
.qc-gauge .val{fill:none;stroke:var(--accent);stroke-width:18;stroke-linecap:round}
.qc-gauge .needle line{stroke:var(--fg);stroke-width:3;stroke-linecap:round}
.qc-gauge .needle circle{fill:var(--fg)}
.qc-gauge .mk line{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:3 3}
.qc-gauge .mk text{font-size:11px;fill:var(--muted)}
.qc-gauge .big{font:600 30px var(--font-serif);fill:var(--fg)}
.qc-gauge .lb{font-size:12px;fill:var(--muted)}
.qc-units .u{fill:var(--c);cursor:pointer;outline:none;transition:opacity .15s}
.qc-units svg[data-g] .u:not(.on){opacity:.2}
.qc-units .mj path{fill:none;stroke:var(--fg);stroke-width:1.5;stroke-dasharray:3 3}
.qc-units .mj text{font-size:10px;fill:var(--muted)}
.qc-units .qc-legend b{color:var(--fg);font-weight:600;margin-left:2px}
.qc-bars .av{width:28px;height:28px;border-radius:50%;object-fit:cover;vertical-align:middle;margin:-4px 8px 0 0;box-shadow:0 0 0 1.5px var(--border)}
.qc-av .r{min-height:40px}