/* 過關 — the mastery path (see assets/js/pathdemo.js). Every length is N design units × --pz-path2-u, which the module
   sets from the container width, so the picture keeps its proportions at any size and the text is real text. */

/* optional helper for the host: a layer that fills the tablet screen, above the app and below the coin effects */
.pz-path2-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .5s cubic-bezier(.16, 1, .3, 1), visibility 0s .5s; }
.pz-path2-layer.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }

.pz-path2-root {
  --pz-path2-u: 1px; --pz-path2-r: 46; --pz-path2-head: 96;
  --pz-path2-teal: #1F8E86; --pz-path2-teal-lit: #81D6D0; --pz-path2-amber: #FFD166; --pz-path2-ground: #030606;
  position: absolute; inset: 0; overflow: hidden; contain: strict; isolation: isolate;
  background: var(--pz-path2-ground); color: #fff; line-height: 1; text-align: left; letter-spacing: 0;
  font-family: var(--pz-f-sans, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  -webkit-user-select: none; user-select: none; pointer-events: none;
}
.pz-path2-root:not([data-layout]) { visibility: hidden; }
.pz-path2-root *, .pz-path2-root *::before, .pz-path2-root *::after { box-sizing: border-box; }
.pz-path2-root i, .pz-path2-root b { font-style: normal; font-weight: inherit; }

/* the room: black, two faint pools of brand light, a little grain so the pools do not band, a vignette on top */
.pz-path2-bg { position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 30% 35%, rgba(31, 142, 134, .13) 0%, rgba(31, 142, 134, 0) 70%),
    radial-gradient(ellipse 50% 45% at 78% 72%, rgba(129, 214, 208, .056) 0%, rgba(129, 214, 208, 0) 70%); }
.pz-path2-bg::after { content: ""; position: absolute; inset: 0; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.pz-path2-vig { position: absolute; inset: 0; background: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .4) 100%); }

.pz-path2-stage { position: absolute; inset: 0; transform-origin: 50% 50%; }
.pz-path2-view { position: absolute; inset: 0; }
.pz-path2-track { position: absolute; left: 0; top: 0; width: 100%; height: 0; will-change: transform; }

/* the trail: dots all the way down, a solid line over the part already walked */
.pz-path2-dots { position: absolute; left: 0; top: 0; overflow: visible; }
.pz-path2-dots line { stroke: rgba(255, 255, 255, .28); stroke-width: 3.7; stroke-dasharray: 3 10.4; stroke-linecap: round; }
.pz-path2-seg { position: absolute; left: calc(var(--pz-path2-u) * var(--x)); top: calc(var(--pz-path2-u) * var(--y)); width: calc(var(--pz-path2-u) * var(--len)); height: calc(var(--pz-path2-u) * 5.2);
  margin-top: calc(var(--pz-path2-u) * -2.6); transform-origin: 0 50%; transform: rotate(var(--rot)); overflow: hidden; }
.pz-path2-fill { position: absolute; inset: 0; border-radius: 99px; background: var(--pz-path2-teal-lit); transform: translateX(-101%); }
.pz-path2-seg.is-lit .pz-path2-fill { transform: none; }

/* a set: a zero-size anchor at the disc centre */
.pz-path2-node { position: absolute; left: calc(var(--pz-path2-u) * var(--x)); top: calc(var(--pz-path2-u) * var(--y)); width: 0; height: 0; }
.pz-path2-disc, .pz-path2-ring { position: absolute; border-radius: 50%; }
.pz-path2-disc { left: calc(var(--pz-path2-u) * var(--pz-path2-r) * -1); top: calc(var(--pz-path2-u) * var(--pz-path2-r) * -1);
  width: calc(var(--pz-path2-u) * var(--pz-path2-r) * 2); height: calc(var(--pz-path2-u) * var(--pz-path2-r) * 2); }
/* drawn at its largest (2.6 × the disc) and scaled down, so growing never blurs it */
.pz-path2-ring { left: calc(var(--pz-path2-u) * var(--pz-path2-r) * -2.6); top: calc(var(--pz-path2-u) * var(--pz-path2-r) * -2.6);
  width: calc(var(--pz-path2-u) * var(--pz-path2-r) * 5.2); height: calc(var(--pz-path2-u) * var(--pz-path2-r) * 5.2);
  border: calc(var(--pz-path2-u) * 4.4) solid var(--pz-path2-teal-lit); opacity: 0; transform: scale(.3846); }

.pz-path2-glow, .pz-path2-face { position: absolute; inset: 0; border-radius: 50%; opacity: 0; }
.pz-path2-glow--done { box-shadow: 0 0 calc(var(--pz-path2-u) * 30) rgba(129, 214, 208, .6); }
.pz-path2-glow--hot { box-shadow: 0 0 calc(var(--pz-path2-u) * 59) rgba(129, 214, 208, .6); }
.pz-path2-glow--cur { box-shadow: 0 0 calc(var(--pz-path2-u) * 37) rgba(255, 209, 102, .55); }
.pz-path2-face { display: grid; place-items: center; }
.pz-path2-face svg { display: block; }
.pz-path2-face--lock { background: #D2D5D8; }
.pz-path2-face--lock svg { width: 35.5%; height: 35.5%; fill: none; stroke: #6B7A78; stroke-width: 2.4; }
.pz-path2-face--cur { background: var(--pz-path2-amber); }
.pz-path2-face--cur svg { width: 40.3%; height: 40.3%; fill: #000; }
.pz-path2-face--done { background: var(--pz-path2-teal); }
.pz-path2-face--done svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
/* the check is drawn left to right: a window slides open while its content stays put */
.pz-path2-wipe { display: block; width: 51.6%; height: 51.6%; overflow: hidden; }
.pz-path2-wipe-in { display: block; width: 100%; height: 100%; }

.pz-path2-node[data-s="lock"] .pz-path2-face--lock,
.pz-path2-node[data-s="cur"] .pz-path2-face--cur, .pz-path2-node[data-s="cur"] .pz-path2-glow--cur,
.pz-path2-node[data-s="done"] .pz-path2-face--done, .pz-path2-node[data-s="done"] .pz-path2-glow--done { opacity: 1; }
.pz-path2-node[data-s="cur"] .pz-path2-glow--cur { animation: pz-path2-breathe 2.6s ease-in-out infinite; }
@keyframes pz-path2-breathe { 50% { opacity: .62; } }

.pz-path2-today { position: absolute; left: calc(var(--pz-path2-u) * (var(--pz-path2-r) - 34)); top: calc(var(--pz-path2-u) * (var(--pz-path2-r) * -1 - 16));
  padding: calc(var(--pz-path2-u) * 3.6) calc(var(--pz-path2-u) * 10); border-radius: 99px; background: var(--pz-path2-amber); color: rgba(0, 0, 0, .86);
  font-size: calc(var(--pz-path2-u) * 18); font-weight: 800; line-height: 1.2; white-space: nowrap; opacity: 0;
  box-shadow: 0 0 0 calc(var(--pz-path2-u) * 1.6) rgba(3, 6, 6, .85); }
.pz-path2-node[data-s="cur"] .pz-path2-today { opacity: 1; }

.pz-path2-label { position: absolute; left: calc(var(--pz-path2-u) * (var(--pz-path2-r) + 25)); top: calc(var(--pz-path2-u) * -37); white-space: nowrap; }
.pz-path2-title { display: flex; align-items: center; height: calc(var(--pz-path2-u) * 40); font-size: calc(var(--pz-path2-u) * 28); font-weight: 800; color: rgba(255, 255, 255, .6); }
.pz-path2-sep { flex: none; width: .24em; height: .24em; margin: 0 .5em; border-radius: 50%; background: currentColor; }
.pz-path2-meta { display: flex; align-items: center; gap: calc(var(--pz-path2-u) * 9); margin-top: calc(var(--pz-path2-u) * 5); height: calc(var(--pz-path2-u) * 29); }
.pz-path2-chip { padding: calc(var(--pz-path2-u) * 3.6) calc(var(--pz-path2-u) * 10); border-radius: 99px; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .75);
  font-size: calc(var(--pz-path2-u) * 18); font-weight: 800; line-height: 1.2; }
.pz-path2-count { font-size: calc(var(--pz-path2-u) * 22); font-weight: 700; color: rgba(255, 255, 255, .6); }
.pz-path2-node[data-s="cur"] .pz-path2-title, .pz-path2-node[data-s="done"] .pz-path2-title { color: #fff; }
.pz-path2-node[data-s="done"] .pz-path2-chip { background: rgba(129, 214, 208, .25); color: var(--pz-path2-teal-lit); }
.pz-path2-node[data-s="done"] .pz-path2-count { color: var(--pz-path2-teal-lit); }

/* header: subject, then mode · whose turn · how many done */
.pz-path2-head { position: absolute; left: calc(var(--pz-path2-u) * 66); top: calc(var(--pz-path2-u) * 58); white-space: nowrap; }
.pz-path2-subject { font-family: var(--pz-f-serif, "Noto Serif TC", "Songti TC", "PMingLiU", serif); font-weight: 900; font-size: calc(var(--pz-path2-u) * 48); line-height: 1.2; }
.pz-path2-status { display: flex; align-items: center; margin-top: calc(var(--pz-path2-u) * 8); height: calc(var(--pz-path2-u) * 32);
  font-size: calc(var(--pz-path2-u) * 23.5); font-weight: 800; color: rgba(255, 255, 255, .9); }
.pz-path2-status .pz-path2-sep { width: .2em; height: .2em; margin: 0 .78em; }
.pz-path2-turn b, .pz-path2-done b { display: inline-block; text-align: center; }
.pz-path2-turn b { min-width: 1.2em; margin: 0 .22em; }
.pz-path2-done { color: var(--pz-path2-teal-lit); }
.pz-path2-done b { margin-left: .2em; font-size: 1.3em; font-weight: 900; line-height: 1; vertical-align: -.04em; }
.pz-path2-done i { margin-left: .22em; }

/* narrow tablets and phones: bigger type, the path under a compact header (sets fade out as they pass beneath it) */
.pz-path2-root[data-layout="stack"] .pz-path2-view {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) calc(var(--pz-path2-u) * (var(--pz-path2-head) - 14)), #000 calc(var(--pz-path2-u) * (var(--pz-path2-head) + 14)));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) calc(var(--pz-path2-u) * (var(--pz-path2-head) - 14)), #000 calc(var(--pz-path2-u) * (var(--pz-path2-head) + 14))); }
.pz-path2-root[data-layout="stack"] .pz-path2-head { left: calc(var(--pz-path2-u) * 28); top: calc(var(--pz-path2-u) * 18); }
.pz-path2-root[data-layout="stack"] .pz-path2-subject { font-size: calc(var(--pz-path2-u) * 37); line-height: 1.16; }
.pz-path2-root[data-layout="stack"] .pz-path2-status { margin-top: calc(var(--pz-path2-u) * 4); height: calc(var(--pz-path2-u) * 28); font-size: calc(var(--pz-path2-u) * 20); }
.pz-path2-root[data-layout="stack"] .pz-path2-status .pz-path2-sep { margin: 0 .6em; }
.pz-path2-root[data-layout="stack"] .pz-path2-label { left: calc(var(--pz-path2-u) * (var(--pz-path2-r) + 20)); top: calc(var(--pz-path2-u) * -35); }
.pz-path2-root[data-layout="stack"] .pz-path2-title { height: calc(var(--pz-path2-u) * 36); font-size: calc(var(--pz-path2-u) * 25.5); }
.pz-path2-root[data-layout="stack"] .pz-path2-count { font-size: calc(var(--pz-path2-u) * 21.5); }
.pz-path2-root[data-layout="stack"] .pz-path2-today { left: calc(var(--pz-path2-u) * (var(--pz-path2-r) - 38)); top: calc(var(--pz-path2-u) * (var(--pz-path2-r) * -1 - 16)); }

.pz-path2-root.is-reduced .pz-path2-glow--cur { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .pz-path2-node[data-s="cur"] .pz-path2-glow--cur { animation: none; }
  .pz-path2-layer { transition: none; }
}

/* ---------- as the product shows it: tapping 看路徑 on the maths card opens a light dialog over the dimmed home screen,
   the product's watercolour hills and winding trail behind the sets (its path-trail art), the same colours as its
   path nodes. The dialog grows out of the button that was tapped (--pz-path2-o, set by main.js). ---------- */
.pz-path2-layer { background: rgba(18, 48, 45, .32); transition: opacity .45s cubic-bezier(.16, 1, .3, 1), visibility 0s .6s; }
.pz-path2-layer .pz-path2-root { inset: 5% 4.5%; border-radius: 22px; color: #22403d; transform-origin: var(--pz-path2-o, 30% 60%);
  transform: scale(.18); opacity: 0; transition: transform .6s cubic-bezier(.16, 1, .3, 1), opacity .35s ease-out;
  background:
    radial-gradient(70% 52% at 10% -6%, rgba(129, 214, 208, .55), transparent 62%),
    radial-gradient(58% 44% at 94% 4%, rgba(255, 209, 102, .40), transparent 66%),
    radial-gradient(86% 62% at 52% 112%, rgba(158, 217, 242, .42), transparent 70%), #fbfaf4;
  box-shadow: 0 24px 60px -24px rgba(12, 44, 41, .55), 0 0 0 1px rgba(255, 255, 255, .75); }
.pz-path2-layer.is-on .pz-path2-root { transform: none; opacity: 1; }
.pz-path2-layer .pz-path2-bg { background: url(https://www.edubaania.com/philosophy-assets/m-33bc470a86/assets/img/path-trail.webp) center / cover no-repeat; opacity: .9; }
.pz-path2-layer .pz-path2-bg::after { opacity: .03; }
.pz-path2-layer .pz-path2-vig { display: none; }
/* the tap itself: a ring where the finger was, just before the dialog grows */
.pz-path2-layer::before { content: ""; position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  translate: var(--pz-path2-o, 30% 60%); border: 3px solid rgba(255, 255, 255, .9); opacity: 0; pointer-events: none; }
.pz-path2-layer.is-on::before { animation: pz-path2-tap .55s ease-out; }
@keyframes pz-path2-tap { 0% { opacity: 1; scale: .4; } 100% { opacity: 0; scale: 1.6; } }

.pz-path2-layer .pz-path2-dots line { stroke: rgba(34, 64, 61, .3); }
.pz-path2-layer .pz-path2-fill { background: #5fc4bb; }
.pz-path2-layer .pz-path2-face--lock { background: #dfe8e6; }
.pz-path2-layer .pz-path2-face--lock svg { stroke: #a7bab7; }
.pz-path2-layer .pz-path2-face--cur { background: linear-gradient(#ffd979, #f5a24b); }
.pz-path2-layer .pz-path2-face--cur svg { fill: #6a4a00; }
.pz-path2-layer .pz-path2-glow--done { box-shadow: 0 0 calc(var(--pz-path2-u) * 22) rgba(31, 142, 134, .35); }
.pz-path2-layer .pz-path2-glow--hot { box-shadow: 0 0 calc(var(--pz-path2-u) * 40) rgba(31, 142, 134, .45); }
.pz-path2-layer .pz-path2-glow--cur { box-shadow: 0 0 0 calc(var(--pz-path2-u) * 5) rgba(255, 209, 102, .32), 0 0 calc(var(--pz-path2-u) * 26) rgba(245, 162, 75, .35); }
.pz-path2-layer .pz-path2-ring { border-color: #1f8e86; }
.pz-path2-layer .pz-path2-today { color: #5a3d00; box-shadow: 0 0 0 calc(var(--pz-path2-u) * 2) #fff; }
.pz-path2-layer .pz-path2-title { color: rgba(34, 64, 61, .55); }
.pz-path2-layer .pz-path2-node[data-s="cur"] .pz-path2-title, .pz-path2-layer .pz-path2-node[data-s="done"] .pz-path2-title { color: #22403d; }
.pz-path2-layer .pz-path2-chip { background: rgba(255, 255, 255, .85); color: #69807d; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.pz-path2-layer .pz-path2-node[data-s="done"] .pz-path2-chip { background: #e3f6f3; color: #1f8e86; }
.pz-path2-layer .pz-path2-count { color: rgba(34, 64, 61, .55); }
.pz-path2-layer .pz-path2-node[data-s="done"] .pz-path2-count { color: #1f8e86; }
.pz-path2-layer .pz-path2-subject { color: #22403d; }
.pz-path2-layer .pz-path2-status { color: #69807d; }
.pz-path2-layer .pz-path2-done { color: #c98a00; }
@media (prefers-reduced-motion: reduce) { .pz-path2-layer .pz-path2-root { transition: opacity .2s; transform: none; } .pz-path2-layer.is-on::before { animation: none; } }