.kf-chip{align-items:center;gap:var(--kf-space-1);box-sizing:border-box;max-inline-size:100%;padding-block:var(--kf-space-1);padding-inline:var(--kf-space-3);border-radius:var(--kf-radius-pill);font-family:var(--kf-font-sans);font-size:var(--kf-type-label-size);font-weight:var(--kf-weight-medium);line-height:var(--kf-type-label-leading);overflow-wrap:anywhere;border:1px solid;display:inline-flex}.kf-chip__icon{flex:none;display:inline-flex}.kf-chip--neutral{background:var(--kf-surface-sunken);color:var(--kf-text-muted)}.kf-chip--info{background:var(--kf-info-surface);color:var(--kf-info-text)}.kf-chip--success{background:var(--kf-success-surface);color:var(--kf-success-text)}.kf-chip--warning{background:var(--kf-warning-surface);color:var(--kf-warning-text)}.kf-chip--danger{background:var(--kf-danger-surface);color:var(--kf-danger-text)}.kf-chip.kf-chip--themed{border-radius:var(--kf-template-radius-pill,var(--kf-radius-pill))}.kf-progress-segments{gap:var(--kf-space-2);background:var(--kf-progress-surface,var(--kf-surface));inline-size:100%;min-inline-size:0;max-inline-size:100%;color:var(--kf-progress-on-surface,var(--kf-text));overflow-wrap:anywhere;flex-direction:column;display:inline-flex}.kf-progress__part{unicode-bidi:isolate}.kf-progress__readout{gap:var(--kf-space-2);flex-wrap:wrap;min-inline-size:0;display:flex}.kf-progress__graphic{gap:var(--kf-space-1);grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;min-inline-size:0;display:grid;container-type:inline-size}.kf-progress__unit,.kf-progress__track{box-sizing:border-box;min-inline-size:0;block-size:var(--kf-space-3);border-style:solid;border-color:var(--kf-progress-boundary,var(--kf-text));background:var(--kf-progress-track,var(--kf-surface-sunken))}.kf-progress__unit{justify-self:stretch}.kf-progress__unit[data-unit=completed],.kf-progress__fill{background:var(--kf-progress-fill,var(--kf-text))}.kf-progress__unit[data-unit=current]{background:var(--kf-progress-current,var(--kf-text));border-style:double;border-width:min(var(--kf-space-1), calc((100cqi - 19 * var(--kf-space-1)) / 40))!important;background-clip:padding-box!important}.kf-progress__track{inline-size:100%}.kf-progress__fill{block-size:100%;display:block}.kf-progress__runway{block-size:100%;margin-inline-end:var(--kf-space-2);display:block;position:relative}.kf-progress__current{inline-size:var(--kf-space-2);background:var(--kf-progress-current,var(--kf-text));block-size:100%;position:absolute}.kf-progress__alternative{inline-size:calc(var(--kf-button-primary-border-width) / 2);block-size:calc(var(--kf-button-primary-border-width) / 2);margin:calc(var(--kf-button-primary-border-width) / -2);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0;overflow:hidden}:root[data-kf-contrast=more] .kf-progress-segments{background:var(--kf-surface);color:var(--kf-text)}:root[data-kf-contrast=more] .kf-progress-segments :is(.kf-progress__unit,.kf-progress__track){border-color:var(--kf-text);background:var(--kf-surface)}:root[data-kf-contrast=more] .kf-progress-segments :is([data-unit=current],[data-unit=completed],.kf-progress__current,.kf-progress__fill){background:var(--kf-text)}@media (prefers-contrast:more){:root:not([data-kf-contrast=standard]) .kf-progress-segments{background:var(--kf-surface);color:var(--kf-text)}:root:not([data-kf-contrast=standard]) .kf-progress-segments :is(.kf-progress__unit,.kf-progress__track){border-color:var(--kf-text);background:var(--kf-surface)}:root:not([data-kf-contrast=standard]) .kf-progress-segments :is([data-unit=current],[data-unit=completed],.kf-progress__current,.kf-progress__fill){background:var(--kf-text)}}@media (forced-colors:active){.kf-progress-segments{color:canvastext!important;background:canvas!important}.kf-progress-segments :is(.kf-progress__unit,.kf-progress__track){forced-color-adjust:none;background-color:canvas!important;border-color:canvastext!important}.kf-progress-segments :is([data-unit=current],[data-unit=completed],.kf-progress__current,.kf-progress__fill){forced-color-adjust:none;background-color:canvastext!important}}.kf-progress__graphic{position:relative}.kf-progress__marker{pointer-events:none;transition:none;animation:none;position:absolute;inset-block-start:var(--kf-space-0)}.kf-progress__marker img{display:block}@media (forced-colors:active){.kf-progress__marker{display:none}}.subject-path{gap:14px;display:grid}.subject-path-region{min-width:0}.subject-path-signpost{z-index:2;background:var(--kafa-surface-paper);width:100%;min-height:48px;box-shadow:0 2px 8px var(--kafa-shadow-blue-06);color:var(--kafa-evergreen);font:inherit;text-align:left;border:0;border-radius:12px;justify-content:space-between;align-items:center;gap:8px;padding:8px 14px;font-weight:900;display:flex;position:relative}button.subject-path-signpost{cursor:pointer}div.subject-path-signpost{min-height:0;box-shadow:none;background:0 0;padding:4px 4px 2px}.subject-path-signpost small{color:var(--kafa-navy);font-size:.88em}.subject-path-signpost:focus-visible,.subject-path-stop a:focus-visible{outline:3px solid var(--kafa-navy);outline-offset:3px;box-shadow:0 0 0 6px var(--kafa-cream)}.subject-path-track{max-width:760px;margin:8px auto 0;container-type:inline-size}.subject-path-stage{--zoom:2.2;--node:60px;--scene-w:calc(100cqw * var(--zoom));--scene-h:calc(150cqw * var(--zoom));height:calc(var(--path-end) * var(--scene-h) + var(--node) + 28px);-webkit-mask-image:linear-gradient(180deg, var(--kafa-navy) calc(100% - 44px), transparent);-webkit-mask-image:linear-gradient(180deg, var(--kafa-navy) calc(100% - 44px), transparent);mask-image:linear-gradient(180deg, var(--kafa-navy) calc(100% - 44px), transparent);border-radius:22px;position:relative;overflow:hidden}@container (width>=520px){.subject-path-stage{--zoom:1.6;--node:64px}}@container (width>=640px){.subject-path-stage{--zoom:1;--node:68px}}.subject-path-scene{left:calc(50cqw - var(--scene-w) / 2);top:calc(var(--scene-copy) * var(--scene-h) * var(--scene-step));width:var(--scene-w);height:var(--scene-h);object-fit:cover;pointer-events:none;-webkit-user-select:none;user-select:none;max-width:none;position:absolute}.subject-path-scene+.subject-path-scene{-webkit-mask-image:linear-gradient(180deg, transparent, var(--kf-text) calc(var(--scene-h) * (1 - var(--scene-step))));-webkit-mask-image:linear-gradient(180deg, transparent, var(--kf-text) calc(var(--scene-h) * (1 - var(--scene-step))));mask-image:linear-gradient(180deg, transparent, var(--kf-text) calc(var(--scene-h) * (1 - var(--scene-step))))}.subject-path ol{margin:0;padding:0;list-style:none}.subject-path-stop{width:0;height:0;left:calc(50cqw + (var(--stop-x) - .5) * var(--scene-w));top:calc(var(--stop-y) * var(--scene-h));position:absolute}.subject-path-stop a{left:calc(var(--node) / -2);top:calc(var(--node) / -2);width:var(--node);height:var(--node);color:var(--kafa-navy);text-decoration:none;display:block;position:absolute}.subject-path-lantern{pointer-events:none;inline-size:var(--kf-space-16);block-size:var(--kf-space-16);background-image:url(/art/path/lesson-beacon-pair-v3-painted.webp);background-position:0 0;background-repeat:no-repeat;background-size:200% 100%;position:absolute;inset-block-end:calc(var(--node) / 2 - var(--kf-space-5));inset-inline-start:calc((var(--node) - var(--kf-space-16)) / 2)}.subject-path-stop.is-done .subject-path-lantern{background-position:100% 0}.subject-path-number{box-sizing:border-box;inline-size:var(--kf-space-5);block-size:var(--kf-space-5);border:calc(var(--kf-space-1) / 4) solid var(--kf-line-strong);border-radius:calc(var(--kf-radius-sm) / 2);background:var(--kf-surface);color:var(--kf-text);font-size:var(--kf-size-xs);font-weight:var(--kf-weight-bold);box-shadow:none;place-items:center;display:grid;position:absolute;inset-block-end:var(--kf-space-3);inset-inline-start:50%;transform:translate(-50%)}.subject-path-stop.is-current .subject-path-number{background:var(--kf-accent);border-color:var(--kf-surface);color:var(--kf-text-on-accent);outline:calc(var(--kf-space-1) / 4) solid var(--kf-accent)}.subject-path-stop.is-done .subject-path-number{background:var(--kf-warning-surface);border-color:var(--kf-warning);color:var(--kf-text)}.subject-path-ring{background:conic-gradient(var(--kafa-evergreen) var(--read-fraction), var(--kafa-cream) 0);-webkit-mask:radial-gradient(transparent calc(50% - 4px), var(--kafa-navy) calc(50% - 3px));-webkit-mask:radial-gradient(transparent calc(50% - 4px), var(--kafa-navy) calc(50% - 3px));mask:radial-gradient(transparent calc(50% - 4px), var(--kafa-navy) calc(50% - 3px));border-radius:50%;position:absolute;inset:-6px}.subject-path-stop a:active .subject-path-lantern{transform:translateY(calc(var(--kf-space-1) / 2))}.subject-path-copy{width:max-content;max-width:min(calc(var(--kf-space-24) * 2 + var(--kf-space-4)), var(--label-room));position:absolute;top:50%;transform:translateY(-50%)}.subject-path-stop.title-right .subject-path-copy{left:calc(100% + var(--kf-space-3));--label-room:calc(50cqw - (var(--stop-x) - .5) * var(--scene-w) - var(--node) / 2 - var(--kf-space-6))}.subject-path-stop.title-left .subject-path-copy{right:calc(100% + var(--kf-space-3));--label-room:calc(50cqw + (var(--stop-x) - .5) * var(--scene-w) - var(--node) / 2 - var(--kf-space-6));text-align:right}.subject-path-board{gap:var(--kf-space-1);padding:calc(var(--kf-space-3) / 2) var(--kf-space-2);border-radius:var(--kf-radius-sm);background:color-mix(in srgb, var(--kafa-cream) 94%, transparent);box-shadow:var(--kf-shadow-raised);display:inline-grid}.subject-path-board strong{-webkit-line-clamp:3;overflow-wrap:anywhere;font-size:var(--kf-size-sm);line-height:var(--kf-leading-tight);font-weight:var(--kf-weight-bold);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.subject-path-board .kf-chip{border:var(--kf-space-0);font-family:inherit;line-height:inherit;margin-block-start:calc(var(--kf-space-3) / 2)}.subject-path-board small,.subject-path-board .kf-chip{width:fit-content;padding:var(--kf-space-0);border-radius:var(--kf-radius-sm);color:var(--kf-text);font-size:var(--kf-size-xs);font-weight:var(--kf-weight-bold);background:0 0}.subject-path-stop.is-current .subject-path-board>small:not(.subject-path-completed){padding:calc(var(--kf-space-1) / 2) var(--kf-space-2);background:var(--kafa-honey);color:var(--kf-text)}.subject-path-board .subject-path-bahagian{color:var(--kafa-evergreen);font-variant-numeric:tabular-nums;font-size:.76rem;font-weight:900}.subject-path-stop.title-left .subject-path-board small,.subject-path-stop.title-left .subject-path-board .kf-chip{justify-self:end}.subject-path-companion{object-fit:cover;pointer-events:none;width:46px;max-width:none;height:46px;left:calc(var(--node) / 2 - 12px);top:calc(var(--node) / -2 - 22px);z-index:2;border:2px solid var(--kafa-cream);box-shadow:0 4px 10px var(--kafa-shadow-blue-06);border-radius:50%;position:absolute}.subject-path-stop.title-right .subject-path-companion{left:auto;right:calc(var(--node) / 2 - 12px)}.subject-path-companion.is-hopping{animation:.6s ease-out both subject-companion-hop}@keyframes subject-companion-hop{0%{transform:translate(calc(var(--hop-dx) * var(--scene-w)), calc(var(--hop-dy) * var(--scene-h))) scale(.9)}to{transform:translate(0)scale(1)}}.subject-path-skeleton{background:var(--kafa-surface-paper);color:var(--kafa-navy);border-radius:20px;padding:12px 16px}.subject-path-skeleton p{margin:0 0 8px}.subject-path-placeholder{align-items:center;gap:18px;height:92px;margin-left:24%;display:flex}.subject-path-placeholder:nth-of-type(2n){margin-left:48%}.subject-path-placeholder span{background:var(--kafa-surface-honey-07);border-radius:50%;width:64px;height:64px}.subject-path-placeholder i{background:var(--kafa-surface-honey-07);border-radius:12px;width:28%;height:16px}@media (prefers-reduced-motion:reduce){.subject-path-companion.is-hopping,.subject-path-stop.is-current .subject-path-number{animation:none}}.subject-page .reading-library{margin-top:.5rem}.subject-page .reading-section-heading{margin-bottom:.45rem}.subject-page .reading-section-heading h2{margin:0;font-size:1.1rem}.subject-path-board .subject-path-completed{color:var(--kf-accent-text)}