.learning-paths{--path-ink:#171b18;--path-canvas:var(--background);isolation:isolate;margin-block:16px 64px;padding-block:24px 12px}.learning-paths-heading{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);align-items:end;gap:40px;margin-bottom:42px;display:grid}.learning-paths-heading h2{color:var(--foreground);font-family:var(--font-display),var(--font-thai),sans-serif;letter-spacing:0;margin:0;font-size:clamp(30px,3.25vw,44px);font-weight:700;line-height:1.5}.learning-paths-emphasis{padding-bottom:4px;display:inline-block;position:relative}.learning-paths-emphasis:after{content:"";background:#284ce7;border-radius:60% 45% 40% 70%;height:5px;position:absolute;inset:auto 0 0;transform:rotate(-1deg)}.learning-paths-heading>p{border-left:1px solid var(--pdf-line);color:var(--pdf-muted);margin:0 0 12px;padding-left:26px;font-size:1rem;line-height:1.85}.learning-paths-shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none;display:grid}.learning-path{--path-paper:#f1eddf;--path-fold:#fffdf4;--path-text:var(--path-ink);--path-muted:#51564f;--path-rule:#1b261824;--path-action:#2343d2;--path-shadow:#26302121;--path-delay:0s;min-width:0}.learning-path--tcas{--path-paper:#284ce7;--path-fold:#aebdff;--path-text:#fffdf4;--path-muted:#eeefff;--path-rule:#ffffff38;--path-action:#fffdf4;--path-shadow:#142ba92c;--path-delay:90ms}.learning-path--toeic{--path-paper:#dfe9e0;--path-fold:#f2f8ef;--path-delay:.18s}.learning-path-link{height:100%;min-height:470px;color:var(--path-text);-webkit-tap-highlight-color:transparent;touch-action:manipulation;isolation:isolate;border-radius:15px;flex-direction:column;padding-top:22px;text-decoration:none;display:flex;position:relative}.learning-path-paper{z-index:-1;border:1px solid var(--path-rule);background:var(--path-paper);box-shadow:0 18px 22px -19px var(--path-shadow),0 3px 4px -4px var(--path-shadow);border-radius:0 14px 14px;position:absolute;inset:22px 0 0}.learning-path-paper:before{border:1px solid var(--path-rule);background:var(--path-paper);content:"";border-bottom:0;border-radius:14px 18px 0 0;width:112px;height:24px;position:absolute;inset:-23px auto auto -1px}.learning-path-fold{background:linear-gradient(45deg,var(--path-fold)49.5%,var(--path-canvas)50%);transform-origin:0 100%;border-bottom-left-radius:12px;width:47px;height:47px;position:absolute;top:22px;right:0;box-shadow:-6px 7px 9px -7px #101e3540}.learning-path-fold:before{border-bottom-left-radius:inherit;background:var(--path-fold);clip-path:polygon(0 0,0 100%,100% 100%);transform-origin:0 100%;content:"";position:absolute;inset:0}.learning-path-number{align-items:center;gap:22px;margin:-8px 28px 0;font:italic 34px/1.25 Georgia,Times New Roman,serif;display:flex;position:relative}.learning-path-number:after{opacity:.3;content:"";background:currentColor;width:70px;height:1px}.learning-path-art{align-items:center;gap:12px;height:206px;margin:0 26px;display:flex;position:relative;overflow:hidden}.learning-path-orbit{width:100%;height:100%;color:var(--path-text);opacity:.36;stroke:currentColor;stroke-width:.7px;pointer-events:none;position:absolute;inset:0}.learning-path-display{font-family:var(--font-display),sans-serif;letter-spacing:-.075em;flex-shrink:0;font-size:clamp(72px,7vw,100px);font-weight:700;line-height:1.05;position:relative}.learning-path--vocabulary .learning-path-display{letter-spacing:-.09em;font-family:Georgia,Times New Roman,serif;font-size:166px;font-style:italic;font-weight:400}.learning-path--toeic .learning-path-display{font-size:clamp(66px,6vw,86px)}.learning-path-detail{font-family:var(--font-sora),sans-serif;letter-spacing:.17em;gap:4px;font-size:9px;font-weight:600;line-height:1.5;display:grid;position:absolute;bottom:20px;right:0}.learning-path--vocabulary .learning-path-detail{bottom:52px}.learning-path-copy{border-top:1px solid var(--path-rule);flex-direction:column;flex:1;padding:24px 26px 23px;display:flex}.learning-path-copy h3{color:var(--path-text);letter-spacing:0;margin:0;font-size:clamp(21px,1.8vw,25px);font-weight:700;line-height:1.5}.learning-path-copy>p{color:var(--path-muted);margin:12px 0 24px;font-size:1rem;line-height:1.85}.learning-path-action{color:var(--path-action);justify-content:space-between;align-items:center;gap:12px;margin-top:auto;font-size:1rem;font-weight:600;line-height:1.65;display:flex}.learning-path-arrow{border:1px solid;border-radius:50%;flex:0 0 48px;place-items:center;width:48px;height:48px;display:grid;overflow:hidden}.learning-path-arrow svg{width:25px;height:25px}.learning-path-link:focus-visible{outline:3px solid var(--pdf-accent);outline-offset:6px}.learning-path-link:is(:focus-visible,:active) .learning-path-arrow{color:var(--path-paper);background:var(--path-action)}.learning-path-link:focus-visible .learning-path-action>span:first-child{text-underline-offset:5px;text-decoration:underline}.dark .learning-paths-emphasis:after{background:#a8bdff}.dark .learning-path--vocabulary{--path-paper:#272920;--path-fold:#555745;--path-text:#f5f2e7;--path-muted:#cdcec3;--path-rule:#f5f2e729;--path-action:#b9c8ff;--path-shadow:#0005}.dark .learning-path--tcas{--path-paper:#2446bd;--path-fold:#829ade;--path-shadow:#0005}.dark .learning-path--toeic{--path-paper:#22392e;--path-fold:#4e6c5b;--path-text:#eef7ef;--path-muted:#c3d5c7;--path-rule:#e7f5e829;--path-action:#c4dfcc;--path-shadow:#0005}@media (hover:hover) and (pointer:fine){.learning-path-link:hover .learning-path-arrow{color:var(--path-paper);background:var(--path-action)}.learning-path-link:hover .learning-path-action>span:first-child{text-underline-offset:5px;text-decoration:underline}}@media (prefers-reduced-motion:no-preference){.learning-path-link{transition:transform .32s cubic-bezier(.2,.8,.2,1)}.learning-path-paper{transition:box-shadow .32s}.learning-path-fold:before,.learning-path-display{transition:transform .42s cubic-bezier(.2,.8,.2,1)}.learning-path-arrow{transition:color .18s,background-color .18s}.learning-path{transition:opacity .65s ease var(--path-delay),transform .65s cubic-bezier(.2,.8,.2,1)var(--path-delay)}.learning-paths-shelf[data-site-reveal-state=pending] .learning-path{opacity:0;transform:translateY(26px)rotate(-1.2deg)}.learning-paths-shelf:focus-within .learning-path{opacity:1;transition:none;transform:none}.learning-path-link:focus-visible{transform:translateY(-6px)}.learning-path-link:focus-visible .learning-path-fold:before{transform:rotate(-7deg)translate(-2px,2px)}.learning-path-link:focus-visible .learning-path-display{transform:translateY(-4px)}.learning-path-link:focus-visible .learning-path-arrow svg{animation:.42s both learning-path-arrow}.learning-path-link:focus-visible .learning-path-orbit-line{animation:.7s both learning-path-orbit}.learning-path-link:active{transform:translateY(-2px)}}@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.learning-path-link:hover{transform:translateY(-6px)}.learning-path-link:hover .learning-path-paper{box-shadow:0 24px 25px -17px var(--path-shadow),0 6px 12px -8px var(--path-shadow)}.learning-path-link:hover .learning-path-fold:before{transform:rotate(-7deg)translate(-2px,2px)}.learning-path-link:hover .learning-path-display{transform:translateY(-4px)}.learning-path-link:hover .learning-path-arrow svg{animation:.42s both learning-path-arrow}.learning-path-link:hover .learning-path-orbit-line{animation:.7s both learning-path-orbit}}@keyframes learning-path-arrow{0%{transform:translate(0)}45%{opacity:0;transform:translate(22px,-22px)}46%{opacity:0;transform:translate(-22px,22px)}to{opacity:1;transform:translate(0)}}@keyframes learning-path-orbit{0%{stroke-dasharray:1;stroke-dashoffset:1px}to{stroke-dasharray:1;stroke-dashoffset:0}}@media (max-width:1099px) and (min-width:800px){.learning-paths-heading{grid-template-columns:1fr;gap:20px}.learning-paths-heading>p{max-width:580px;margin-bottom:0}.learning-paths-shelf{gap:14px}.learning-path-copy{padding-inline:19px}.learning-path-art{height:180px;margin-inline:19px}.learning-path-display{font-size:68px}.learning-path--vocabulary .learning-path-display{font-size:128px}.learning-path--toeic .learning-path-display{font-size:61px}.learning-path-detail{font-size:8px}.learning-path--vocabulary .learning-path-detail{bottom:22px}.learning-path-action{font-size:.9375rem}.learning-path-arrow{flex-basis:40px;width:40px;height:40px}}@media (max-width:799px){.learning-paths{margin-bottom:48px;padding-top:8px}.learning-paths-heading{grid-template-columns:1fr;gap:20px;margin-bottom:32px}.learning-paths-heading h2{font-size:clamp(27px,5.8vw,38px);line-height:1.5}.learning-paths-emphasis{padding-bottom:0;display:inline}.learning-paths-emphasis:after{display:none}.learning-paths-heading>p{margin:0;padding-left:17px}.learning-paths-shelf{grid-template-columns:1fr;gap:26px}.learning-path-link{min-height:0}.learning-path-number{margin-inline:23px;font-size:29px}.learning-path-art{height:150px;margin-inline:23px}.learning-path-display{font-size:clamp(82px,20vw,104px)}.learning-path--vocabulary .learning-path-display{font-size:142px}.learning-path--toeic .learning-path-display{font-size:clamp(70px,18vw,90px)}.learning-path--vocabulary .learning-path-detail{bottom:38px}.learning-path-copy{padding:20px 23px}.learning-path-copy h3{font-size:23px}.learning-path-copy>p{margin:9px 0 20px}.learning-path-arrow{flex-basis:44px;width:44px;height:44px}}@media (max-width:359px){.learning-path-number,.learning-path-art{margin-inline:20px}.learning-path-copy{padding-inline:20px}.learning-path-copy h3{font-size:21px}.learning-path-action{font-size:.9375rem}}@media (prefers-reduced-motion:reduce){.learning-paths-shelf,.learning-paths .learning-path-fold:before,.learning-paths :is(.learning-path,.learning-path-link,.learning-path-paper,.learning-path-fold,.learning-path-display,.learning-path-arrow,.learning-path-arrow svg,.learning-path-orbit-line){opacity:1;transition:none;animation:none;transform:none}}