/* generated by tools/fx.py from design/Fx*.dc.html */
/* FxSummary */
.fxw--summary{position:relative;width:100%;aspect-ratio:5/4;border-radius:28px;background:radial-gradient(120% 90% at 20% 0%,#e9f3ee,#dcebe3);overflow:hidden;display:grid;place-items:center}.fxw--summary .fx-page{width:76%;background:#fff;border-radius:14px;padding:26px 28px 30px;box-shadow:0 30px 60px -30px rgb(14 42 34 / .45),0 2px 6px -2px rgb(14 42 34 / .12);transform:rotate(-1.5deg);animation:fxs-float 9s ease-in-out infinite}.fxw--summary .fx-k{font:600 11px/1 var(--body);letter-spacing:.06em;color:var(--primary)}.fxw--summary .fx-t{margin:10px 0 14px;font:600 20px/1.15 var(--display);letter-spacing:-.015em;color:var(--fg)}.fxw--summary .fx-p{margin:0 0 10px;font-size:13.5px;line-height:1.65;color:#33544a}.fxw--summary /* the marker: one layer per word grows by transform (no repaint),.fxw--summary staggered along the old wipe's ease; it wraps with the words */
.hl i{position:relative;z-index:0;font-style:normal}.fxw--summary .hl i::before{content:"";position:absolute;left:0;right:0;top:58%;bottom:0;z-index:-1;background:#bdffec;transform:scaleX(0);transform-origin:left;animation:fxs-hl 9s ease-out infinite;animation-delay:calc(var(--b,0s) + var(--d))}.fxw--summary .hl2{--b:1.1s}.fxw--summary .gl{position:relative;border-bottom:1.5px dashed var(--primary);color:var(--fg);font-weight:600}.fxw--summary .tip{position:absolute;left:50%;bottom:calc(100% + 10px);width:210px;transform:translate(-50%,6px);opacity:0;background:#0c231b;color:#dff0e7;border-radius:12px;padding:10px 12px;font:400 12px/1.45 var(--body);box-shadow:0 14px 30px -12px rgb(0 0 0 / .5);animation:fxs-tip 9s cubic-bezier(.2,.8,.2,1) infinite;pointer-events:none}.fxw--summary .tip b{display:block;font:600 10.5px/1 var(--body);letter-spacing:.06em;color:#45C495;margin-bottom:5px}.fxw--summary .lines i{display:block;height:7px;border-radius:4px;background:#eef3f0;margin-top:9px}@keyframes fxs-hl{0%,8%{transform:scaleX(0)}11%,88%{transform:scaleX(1)}91%,100%{transform:scaleX(0)}}@keyframes fxs-tip{0%,40%{opacity:0;transform:translate(-50%,6px)}48%,82%{opacity:1;transform:translate(-50%,0)}90%,100%{opacity:0;transform:translate(-50%,6px)}}@keyframes fxs-float{0%,100%{transform:rotate(-1.5deg) translateY(0)}50%{transform:rotate(-1deg) translateY(-6px)}}@media (prefers-reduced-motion:reduce){.fxw--summary .hl i::before{animation:none;transform:none}.fxw--summary .tip,.fxw--summary .fx-page{animation:none}}
/* FxPractice */
.fxw--practice{position:relative;width:100%;aspect-ratio:5/4;border-radius:28px;background:radial-gradient(120% 90% at 80% 0%,#eef1fb,#e2e8f6);overflow:hidden;display:grid;place-items:center}.fxw--practice .q{width:80%;background:#fff;border-radius:18px;padding:22px 22px 18px;box-shadow:0 30px 60px -30px rgb(14 42 34 / .45)}.fxw--practice .q-k{font:600 11px/1 var(--body);letter-spacing:.06em;color:var(--faint)}.fxw--practice .q-t{margin:10px 0 14px;font:500 15px/1.45 var(--body);color:var(--fg)}.fxw--practice .opt{display:flex;gap:10px;align-items:center;padding:11px 12px;border-radius:12px;box-shadow:inset 0 0 0 1.5px #e3ebe7;font-size:13.5px;color:#33544a;margin-top:8px}.fxw--practice .opt b{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#eef3f0;font:700 12px/1 var(--body);color:var(--muted)}.fxw--practice .opt--wrong{animation:fxp-wrong 8s infinite}.fxw--practice .opt--right{animation:fxp-right 8s infinite}.fxw--practice .why{margin-top:12px;border-radius:12px;background:#fbe9e5;padding:0 12px;max-height:0;overflow:hidden;font-size:12.5px;line-height:1.5;color:#7a2a1c;animation:fxp-why 8s cubic-bezier(.2,.8,.2,1) infinite}.fxw--practice .why b{font-weight:700}.fxw--practice .why span{display:inline-block;margin-top:6px;font:600 10.5px/1 var(--body);letter-spacing:.06em;color:#b4351f}@keyframes fxp-wrong{0%,14%{box-shadow:inset 0 0 0 1.5px #e3ebe7;background:#fff}18%,70%{box-shadow:inset 0 0 0 2px #d0533c;background:#fdf3f1}78%,100%{box-shadow:inset 0 0 0 1.5px #e3ebe7;background:#fff}}@keyframes fxp-right{0%,46%{box-shadow:inset 0 0 0 1.5px #e3ebe7;background:#fff}52%,90%{box-shadow:inset 0 0 0 2px #05614b;background:#e2efe9}96%,100%{box-shadow:inset 0 0 0 1.5px #e3ebe7;background:#fff}}@keyframes fxp-why{0%,20%{max-height:0;padding:0 12px}28%,72%{max-height:120px;padding:10px 12px}80%,100%{max-height:0;padding:0 12px}}@media (prefers-reduced-motion:reduce){.fxw--practice .opt--wrong,.fxw--practice .opt--right,.fxw--practice .why{animation:none}.fxw--practice .why{max-height:none;padding:10px 12px}}
/* FxReady */
.fxw--ready{position:relative;width:100%;aspect-ratio:5/4;border-radius:28px;background:radial-gradient(120% 90% at 50% 0%,#0f3a2e,#062a20);overflow:hidden;display:grid;place-items:center;color:#dff0e7}.fxw--ready .rd{width:80%;display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:center}.fxw--ready .ring{position:relative;width:150px;height:150px}.fxw--ready .ring svg{transform:rotate(-90deg)}.fxw--ready .ring circle{fill:none;stroke-width:12}.fxw--ready .ring .bg{stroke:rgb(255 255 255 / .1)}.fxw--ready .ring .fg{stroke:#45C495;stroke-linecap:round;stroke-dasharray:408;stroke-dashoffset:408;animation:fxr-ring 8s cubic-bezier(.2,.8,.2,1) infinite}.fxw--ready .ring p{position:absolute;inset:0;display:grid;place-items:center;margin:0;font:700 36px/1 var(--display);letter-spacing:-.03em}.fxw--ready .ring p small{display:block;font:500 11px/1 var(--body);letter-spacing:.06em;color:#9dbcae;margin-top:6px;text-align:center}.fxw--ready .tp{display:grid;gap:12px}.fxw--ready .tp div{font-size:12.5px;color:#cfe3d8}.fxw--ready .bar{height:8px;border-radius:5px;background:rgb(255 255 255 / .1);margin-top:6px;overflow:hidden}.fxw--ready .bar i{display:block;height:100%;border-radius:5px;background:#45C495;transform-origin:left;transform:scaleX(0);animation:fxr-bar 8s cubic-bezier(.2,.8,.2,1) infinite}.fxw--ready .bar i.weak{background:#f0a35c}.fxw--ready .flag{display:inline-block;margin-left:6px;font:600 10px/1 var(--body);letter-spacing:.05em;padding:3px 6px;border-radius:999px;background:rgb(240 163 92 / .18);color:#f0b47c;opacity:0;animation:fxr-flag 8s infinite}@keyframes fxr-ring{0%,6%{stroke-dashoffset:408}40%,86%{stroke-dashoffset:110}96%,100%{stroke-dashoffset:408}}@keyframes fxr-bar{0%,8%{transform:scaleX(0)}38%,86%{transform:scaleX(var(--v))}96%,100%{transform:scaleX(0)}}@keyframes fxr-flag{0%,40%{opacity:0}48%,86%{opacity:1}94%,100%{opacity:0}}@media (prefers-reduced-motion:reduce){.fxw--ready .ring .fg{animation:none;stroke-dashoffset:110}.fxw--ready .bar i{animation:none;transform:scaleX(var(--v))}.fxw--ready .flag{animation:none;opacity:1}}
/* FxMock */
.fxw--mock{position:relative;width:100%;aspect-ratio:5/4;border-radius:28px;background:radial-gradient(120% 90% at 30% 0%,#f6f1e6,#ece4d3);overflow:hidden;display:grid;place-items:center}.fxw--mock .mk{position:relative;width:78%;background:#fff;border-radius:16px;padding:20px 22px 24px;box-shadow:0 30px 60px -30px rgb(60 40 20 / .45)}.fxw--mock .mk-top{display:flex;justify-content:space-between;align-items:center}.fxw--mock .mk-k{font:600 11px/1 var(--body);letter-spacing:.06em;color:var(--faint)}.fxw--mock .clock{font:700 22px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--fg);letter-spacing:-.01em}.fxw--mock .clock span{display:inline-block;animation:fxm-tick 1s steps(1) infinite}.fxw--mock .mk-t{margin:10px 0 16px;font:600 19px/1.15 var(--display);color:var(--fg)}.fxw--mock .grid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}.fxw--mock .grid i{position:relative;aspect-ratio:1;border-radius:6px;background:#eef3f0}.fxw--mock .grid i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#05614b;opacity:0;animation:fxm-fill 9s infinite;animation-delay:inherit}.fxw--mock .stamp{position:absolute;right:18px;bottom:16px;transform:rotate(-12deg) scale(1.6);opacity:0;border:2.5px solid #05614b;color:#05614b;border-radius:10px;padding:8px 12px;font:700 13px/1.15 var(--body);letter-spacing:.04em;text-align:center;animation:fxm-stamp 9s cubic-bezier(.34,1.56,.64,1) infinite;background:rgb(255 255 255 / .85)}.fxw--mock .stamp b{display:block;font:700 26px/1 var(--display)}@keyframes fxm-fill{0%,2%{opacity:0}6%,72%{opacity:1}80%,100%{opacity:0}}@keyframes fxm-stamp{0%,62%{opacity:0;transform:rotate(-12deg) scale(1.6)}68%,88%{opacity:1;transform:rotate(-12deg) scale(1)}94%,100%{opacity:0;transform:rotate(-12deg) scale(1)}}@keyframes fxm-tick{0%{opacity:1}50%{opacity:.35}}@media (prefers-reduced-motion:reduce){.fxw--mock .grid i::after,.fxw--mock .stamp,.fxw--mock .clock span{animation:none}.fxw--mock .grid i{background:#05614b}.fxw--mock .stamp{opacity:1;transform:rotate(-12deg)}}
/* FxStreak */
.fxw--streak{position:relative;width:100%;aspect-ratio:5/4;border-radius:28px;background:radial-gradient(120% 90% at 50% 0%,#fff3ea,#f6e3d4);overflow:hidden;display:grid;place-items:center}.fxw--streak .st{width:78%;background:#fff;border-radius:18px;padding:24px;box-shadow:0 30px 60px -30px rgb(120 60 20 / .4);text-align:center}.fxw--streak .flame{display:inline-grid;place-items:center;width:72px;height:72px;border-radius:50%;background:#fbe6d8;color:#c4581b;animation:fxk-pop 7s cubic-bezier(.34,1.56,.64,1) infinite}.fxw--streak .st-n{margin:12px 0 2px;font:700 30px/1 var(--display);color:#3a1c0b;letter-spacing:-.02em}.fxw--streak .st-s{margin:0;font-size:13px;color:#8a5a3c}.fxw--streak .days{display:flex;justify-content:center;gap:8px;margin-top:20px}.fxw--streak .day{display:grid;justify-items:center;gap:6px;font:600 11px/1 var(--body);color:#a07a62}.fxw--streak .day i{width:30px;height:30px;border-radius:50%;background:#f4ebe4;position:relative;animation:fxk-day 7s infinite}.fxw--streak .day i::after{content:"";position:absolute;left:11px;top:7px;width:6px;height:11px;border-right:2.4px solid #fff;border-bottom:2.4px solid #fff;transform:rotate(45deg);opacity:0;animation:fxk-tick 7s infinite;animation-delay:inherit}@keyframes fxk-day{0%,4%{background:#f4ebe4}9%,84%{background:#d9662a}92%,100%{background:#f4ebe4}}@keyframes fxk-tick{0%,4%{opacity:0}9%,84%{opacity:1}92%,100%{opacity:0}}@keyframes fxk-pop{0%,62%{transform:scale(1)}68%{transform:scale(1.18)}74%,100%{transform:scale(1)}}@media (prefers-reduced-motion:reduce){.fxw--streak .day i,.fxw--streak .day i::after,.fxw--streak .flame{animation:none}.fxw--streak .day i{background:#d9662a}.fxw--streak .day i::after{opacity:1}}
/* FxUpdated */
.fxw--updated{position:relative;width:100%;aspect-ratio:5/4;border-radius:28px;background:radial-gradient(120% 90% at 70% 0%,#e9f3ee,#d9e9e0);overflow:hidden;display:grid;place-items:center}.fxw--updated .ls{position:relative;width:76%;height:62%}.fxw--updated .lc{position:absolute;left:0;right:0;height:64px;border-radius:14px;background:#fff;box-shadow:0 18px 36px -22px rgb(14 42 34 / .45);display:flex;align-items:center;gap:14px;padding:0 16px;font:500 14px/1.2 var(--body);color:var(--fg)}.fxw--updated .lc b{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#e2efe9;color:#05614b;font:700 13px/1 var(--display)}.fxw--updated .lc--a{top:0}.fxw--updated .lc--b{top:78px;animation:fxu-down 8s cubic-bezier(.2,.8,.2,1) infinite}.fxw--updated .lc--c{top:156px;animation:fxu-up 8s cubic-bezier(.2,.8,.2,1) infinite}.fxw--updated .badge{position:absolute;right:-6px;top:-14px;padding:6px 10px;border-radius:999px;background:#05614b;color:#fff;font:600 11.5px/1 var(--body);box-shadow:0 10px 20px -10px rgb(5 97 75 / .8);opacity:0;transform:translateY(6px);animation:fxu-badge 8s cubic-bezier(.34,1.56,.64,1) infinite}@keyframes fxu-down{0%,22%{transform:translateY(0)}38%,86%{transform:translateY(78px)}96%,100%{transform:translateY(0)}}@keyframes fxu-up{0%,22%{transform:translateY(0)}38%,86%{transform:translateY(-78px)}96%,100%{transform:translateY(0)}}@keyframes fxu-badge{0%,40%{opacity:0;transform:translateY(6px)}48%,86%{opacity:1;transform:translateY(0)}94%,100%{opacity:0;transform:translateY(6px)}}@media (prefers-reduced-motion:reduce){.fxw--updated .lc--b,.fxw--updated .lc--c,.fxw--updated .badge{animation:none}.fxw--updated .badge{opacity:1;transform:none}}