/* 往回找 — knowledge map v2 (assets/js/kg2.js). Everything it draws lives inside .pz-kg2, which the module puts
   first inside the stage (#pz-map); colours fall back to literals so it also works without pz.css. */
.pz-kg2 { position: absolute; inset: 0; overflow: hidden; opacity: 0; contain: strict; color: #fff; -webkit-font-smoothing: antialiased;
  font-family: var(--pz-f-sans, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif);
  background: radial-gradient(110% 85% at 46% 40%, #0b1514 0%, #080c0c 46%, #070909 78%); }
.pz-kg2-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pz-kg2-rule, .pz-kg2-cards { position: absolute; inset: 0; pointer-events: none; }

/* top-left: what this is, then the breadcrumb of the search */
.pz-kg2-hud { position: absolute; left: 22px; top: 18px; pointer-events: none; white-space: nowrap; }
.pz-kg2-hud-a, .pz-kg2-hud-b { transition: opacity .5s, transform .5s cubic-bezier(.16, 1, .3, 1); }
.pz-kg2-hud-b { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(6px); }
.pz-kg2-trace .pz-kg2-hud-a { opacity: 0; transform: translateY(-6px); }
.pz-kg2-trace .pz-kg2-hud-b { opacity: 1; transform: none; }
.pz-kg2-kicker { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 500; letter-spacing: .2em; color: rgba(255, 255, 255, .56); }
.pz-kg2-sum { display: flex; align-items: baseline; font-size: 14px; letter-spacing: .08em; color: rgba(255, 255, 255, .8); }
.pz-kg2-sum em { margin-right: 4px; font: 700 22px/1 var(--pz-f-serif, "Noto Serif TC", serif); font-style: normal; letter-spacing: .02em; color: #fff; font-variant-numeric: tabular-nums; }
.pz-kg2-sum i { width: 3px; height: 3px; margin: 0 10px; border-radius: 50%; background: rgba(255, 255, 255, .45); align-self: center; }
.pz-kg2-crumb { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.pz-kg2-crumb li { position: relative; padding: 4px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .06em; line-height: 1.35;
  color: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); transition: background .4s, color .4s, box-shadow .4s; }
.pz-kg2-crumb li + li { margin-left: 26px; }
.pz-kg2-crumb li + li::before { content: ""; position: absolute; left: -17px; top: 50%; width: 5px; height: 5px; margin-top: -3px;
  border-top: 1.5px solid rgba(255, 255, 255, .34); border-right: 1.5px solid rgba(255, 255, 255, .34); transform: rotate(45deg); transition: border-color .4s; }
.pz-kg2-crumb li.pz-kg2-on { background: var(--pz-brand-border, #81D6D0); color: #04211e; box-shadow: none; }
.pz-kg2-crumb li.pz-kg2-on::before { border-color: var(--pz-brand-border, #81D6D0); }
.pz-kg2-crumb li.pz-kg2-gap { background: var(--pz-warn, #FFD166); color: #2b1e00; }
.pz-kg2-crumb li.pz-kg2-ok { background: #d8fff9; color: #04211e; }

/* left edge: one tick per grade, riding with the camera */
.pz-kg2-floor { position: absolute; left: 20px; top: -9px; display: flex; align-items: baseline; gap: 8px; line-height: 18px; white-space: nowrap;
  font-size: 12px; letter-spacing: .14em; color: rgba(255, 255, 255, .52); opacity: 0; transition: opacity .35s, color .35s; will-change: transform; }
.pz-kg2-floor b { font-weight: 500; }
.pz-kg2-floor i { font-style: normal; font-size: 10.5px; letter-spacing: .04em; color: rgba(255, 255, 255, .3); font-variant-numeric: tabular-nums; }
.pz-kg2-floor.pz-kg2-on { opacity: 1; }
.pz-kg2-floor.pz-kg2-here { color: var(--pz-brand-border, #81D6D0); }
.pz-kg2-floor.pz-kg2-here b { font-weight: 700; }

/* a stop on the chain: grade chip + the knowledge point's real name (+ what is wrong with it) */
.pz-kg2-card { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border-radius: 12px; white-space: nowrap;
  background: rgba(6, 10, 10, .95); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .17); opacity: 0; transition: opacity .32s; will-change: transform, opacity; }
.pz-kg2-card.pz-kg2-on { opacity: 1; }
.pz-kg2-grade { padding: 3px 9px; border-radius: 7px; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; line-height: 1.45; background: var(--pz-brand, #1F8E86); color: #fff; }
.pz-kg2-name { font-size: 16px; font-weight: 700; letter-spacing: .03em; line-height: 1.4; color: #fff; }
.pz-kg2-tag { display: none; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.pz-kg2-card .pz-kg2-tag:empty { display: none; }
.pz-kg2-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pz-kg2-bad { box-shadow: inset 0 0 0 1.5px rgba(255, 138, 122, .8); }
.pz-kg2-bad .pz-kg2-grade { background: #fff; color: #0b0d0d; }
.pz-kg2-bad .pz-kg2-tag { display: inline-flex; color: var(--pz-danger-border, #FF8A7A); }
.pz-kg2-gap { box-shadow: inset 0 0 0 1.5px var(--pz-warn, #FFD166), 0 0 26px rgba(255, 209, 102, .16); }
.pz-kg2-gap .pz-kg2-grade { background: var(--pz-warn, #FFD166); color: #2b1e00; }
.pz-kg2-gap .pz-kg2-tag { display: inline-flex; color: var(--pz-warn, #FFD166); }
.pz-kg2-ok { box-shadow: inset 0 0 0 1.5px rgba(129, 214, 208, .85); }
.pz-kg2-ok .pz-kg2-grade { background: var(--pz-brand-border, #81D6D0); color: #04211e; }
.pz-kg2-ok .pz-kg2-tag { display: inline-flex; color: var(--pz-brand-border, #81D6D0); }
.pz-kg2-chiponly { padding: 0; gap: 0; background: none; box-shadow: none; }
.pz-kg2-chiponly .pz-kg2-name, .pz-kg2-chiponly .pz-kg2-tag { display: none; }

.pz-kg2-tip { position: absolute; left: 0; top: 0; padding: 5px 10px; border-radius: 8px; font-size: 12.5px; letter-spacing: .04em; white-space: nowrap; pointer-events: none;
  background: rgba(5, 9, 9, .9); box-shadow: inset 0 0 0 1px rgba(129, 214, 208, .4); color: rgba(255, 255, 255, .92); opacity: 0; transition: opacity .2s; }
.pz-kg2-tip.pz-kg2-on { opacity: 1; }

/* phone stage (≈350 × 385) */
.pz-kg2-sm .pz-kg2-hud { left: 14px; top: 13px; }
.pz-kg2-sm .pz-kg2-kicker { margin-bottom: 7px; font-size: 11px; }
.pz-kg2-sm .pz-kg2-sum { font-size: 12.5px; }
.pz-kg2-sm .pz-kg2-sum em { font-size: 18px; }
.pz-kg2-sm .pz-kg2-crumb li { padding: 3px 10px; font-size: 12px; }
.pz-kg2-sm .pz-kg2-crumb li + li { margin-left: 22px; }
.pz-kg2-sm .pz-kg2-crumb li + li::before { left: -15px; }
.pz-kg2-sm .pz-kg2-floor { left: 10px; font-size: 10.5px; letter-spacing: .06em; }
.pz-kg2-sm .pz-kg2-floor i { display: none; }
.pz-kg2-sm .pz-kg2-card { gap: 7px; padding: 5px 10px 5px 5px; border-radius: 10px; }
.pz-kg2-sm .pz-kg2-chiponly { padding: 0; gap: 0; }
.pz-kg2-sm .pz-kg2-grade { padding: 2px 7px; border-radius: 6px; font-size: 11px; }
.pz-kg2-sm .pz-kg2-name { font-size: 13px; letter-spacing: .01em; }
.pz-kg2-sm .pz-kg2-tag { gap: 4px; font-size: 11.5px; }
.pz-kg2-sm .pz-kg2-card .pz-kg2-tag:empty { display: none; }
.pz-kg2-tag::before { width: 5px; height: 5px; }

/* phone, while flying: chip above, name below, so the card always fits beside its point */
.pz-kg2-card.pz-kg2-stack { display: grid; grid-template-columns: auto 1fr; gap: 5px 8px; padding: 7px 11px 8px 8px; justify-items: start; }
.pz-kg2-stack .pz-kg2-name { grid-column: 1 / -1; grid-row: 2; }

/* reduced motion: states switch, nothing slides */
.pz-kg2-still .pz-kg2-hud-a, .pz-kg2-still .pz-kg2-hud-b { transform: none !important; transition: opacity .2s; }
.pz-kg2-still .pz-kg2-card, .pz-kg2-still .pz-kg2-floor, .pz-kg2-still .pz-kg2-crumb li { transition: opacity .2s; }