/* Duolingo-style micro lessons: path (.lp) + full-screen player (.ln). Uses design tokens with safe fallbacks. */
.lp{--lpa:var(--acc,#19a35a);--lpa2:var(--acc-2,#4fd88e);margin:8px 0 28px}
.lp--skel{display:grid;gap:10px}.lp--skel span{height:64px;border-radius:16px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.09),rgba(255,255,255,.04));background-size:200% 100%;animation:lpSk 1.2s infinite}
@keyframes lpSk{to{background-position:-200% 0}}
.lp__top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}.lp__top b{display:block;font-size:18px}
.lp__k{font-size:13px;letter-spacing:0;text-transform:none;color:var(--gm,#a9ad9e);font-weight:700}
.lp__meter{flex:0 0 160px;height:10px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}.lp__meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--lpa),var(--lpa2));transition:width .8s cubic-bezier(.2,.8,.2,1)}
.lp__place{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;margin:0 0 16px;padding:16px 18px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg,rgba(25,163,90,.22),rgba(25,163,90,.06));color:inherit;font:inherit;cursor:pointer;text-align:left;transition:transform .15s}
.lp__place:hover{transform:translateY(-2px)}.lp__place b{font-size:17px}.lp__place span{color:var(--gm,#a9ad9e);font-size:15px}
.lp__unit{margin:26px 0 8px}.lp__unit.is-lock{opacity:.7}
.lp__head{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:20px;color:#fff;background:linear-gradient(135deg,hsl(calc(78 + var(--h) * .1) 28% 34%),hsl(calc(90 + var(--h) * .1) 26% 20%));box-shadow:0 14px 34px -18px rgba(0,0,0,.7)}
.lp__head small{font-size:13px;letter-spacing:0;text-transform:none;opacity:.8;font-weight:700}.lp__head b{display:block;font-size:20px;line-height:1.2}.lp__head p{margin:2px 0 0;opacity:.85;font-size:15px}
.lp__ico{flex:0 0 52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:26px;background:rgba(255,255,255,.14)}
.lp__nodes{list-style:none;margin:0;padding:22px 0 4px;display:flex;flex-direction:column;align-items:center;gap:18px}
.lp__node{position:relative;transform:translateX(var(--x));display:flex;flex-direction:column;align-items:center;text-align:center}
.lp__node>button{width:72px;height:72px;border-radius:50%;border:0;cursor:pointer;font:800 22px var(--sans,system-ui);color:#fff;background:radial-gradient(circle at 35% 30%,#5b6152,#2b2f28);box-shadow:0 7px 0 #141514,0 14px 26px -10px rgba(0,0,0,.7);transition:transform .12s,box-shadow .12s}
.lp__node>button:active{transform:translateY(5px);box-shadow:0 2px 0 #141514}
.lp__node.is-done>button{background:radial-gradient(circle at 35% 30%,#2fc874,#0e7a41);box-shadow:0 7px 0 #3d4a21,0 14px 26px -10px rgba(14,122,65,.7)}
.lp__node.is-cur>button{background:radial-gradient(circle at 35% 30%,#7ee2a8,#19a35a);color:#0b0c0b;box-shadow:0 7px 0 #0a5c30,0 0 0 9px rgba(25,163,90,.25),0 18px 34px -10px rgba(25,163,90,.8);animation:lpBob 1.8s ease-in-out infinite}
.lp__node.is-lock>button{opacity:.55;cursor:not-allowed}
@keyframes lpBob{50%{transform:translateY(-6px)}}
.lp__node>span{margin-top:9px;font-size:14.5px;font-weight:650;max-width:200px;line-height:1.3}.lp__node em{display:block;font-style:normal;font-weight:500;font-size:12.5px;color:var(--gm,#a9ad9e)}
.lp__here{position:absolute;top:-30px;background:#f2f3ee;color:#1b1f17;font:800 12px var(--sans,system-ui);font-style:normal;padding:5px 10px;border-radius:9px;animation:lpBob 1.8s infinite;white-space:nowrap}
.lp__src{margin:8px 0 0;font-size:13px;color:var(--gm,#a9ad9e)}.lp__src a{display:block;color:inherit;margin:3px 0}
.pg__h2{font-size:22px;margin:30px 0 4px}
/* player */
.ln-open{overflow:hidden}
.ln{position:fixed;inset:0;z-index:300;background:#0d0f0c;color:#f2f3ee;opacity:0;transition:opacity .25s;display:flex;justify-content:center}.ln.is-on{opacity:1}
[data-theme="light"] .ln{background:#f6f7f4;color:#141514}
.ln__wrap{width:min(720px,100%);display:flex;flex-direction:column;height:100%;padding:max(14px,env(safe-area-inset-top)) 18px 0}
.ln__wrap.is-shake{animation:lnShake .38s}@keyframes lnShake{25%{transform:translateX(-7px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}
.ln__top{display:flex;align-items:center;gap:14px}.ln__x{width:44px;height:44px;border-radius:50%;border:0;background:rgba(127,127,127,.16);color:inherit;font-size:18px;cursor:pointer}
.ln__bar{flex:1;height:14px;border-radius:99px;background:rgba(127,127,127,.2);overflow:hidden}.ln__bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#19a35a,#4fd88e);transition:width .45s cubic-bezier(.2,.8,.2,1);box-shadow:inset 0 -3px 0 rgba(0,0,0,.15)}
.ln__hearts{font-weight:800;font-size:18px;color:#e5544a;white-space:nowrap}
.ln__body{flex:1;overflow:auto;padding:26px 0 18px}.ln__kick{display:block;font-size:14px;letter-spacing:0;text-transform:none;font-weight:600;opacity:.65;margin-bottom:10px}
.ln__ex.is-in{animation:lnIn .32s cubic-bezier(.2,.8,.2,1)}@keyframes lnIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.ln__q,.ln__fill{font-size:clamp(21px,3.4vw,27px);font-weight:700;line-height:1.35;letter-spacing:-.015em;margin:0 0 22px}
.ln__blank{display:inline-block;min-width:90px;border-bottom:3px solid #19a35a;padding:0 6px;color:#4fd88e}
.ln__retry{display:inline-block;font-size:13px;font-weight:700;color:#e5a54a;margin-bottom:8px}
.ln__opts{display:grid;gap:10px}.ln__opts button,.ln__tf button,.ln__match button,.ln__chip{font:600 17px/1.35 var(--sans,system-ui);color:inherit;cursor:pointer;border-radius:16px;border:2px solid rgba(127,127,127,.28);background:rgba(127,127,127,.07);box-shadow:0 4px 0 rgba(127,127,127,.25);transition:transform .1s,border-color .15s,background .15s}
.ln__opts button{display:flex;gap:14px;align-items:center;text-align:left;padding:16px 18px;min-height:60px}
.ln__opts kbd{flex:0 0 30px;height:30px;border-radius:9px;display:grid;place-items:center;border:2px solid rgba(127,127,127,.3);font:700 14px var(--sans,system-ui)}
.ln__opts button:active,.ln__tf button:active,.ln__chip:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(127,127,127,.25)}
.ln__opts button.is-sel,.ln__tf button.is-sel,.ln__match button.is-sel{border-color:#19a35a;background:rgba(25,163,90,.16);box-shadow:0 4px 0 #0a5c30}
.ln__tf{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ln__tf button{padding:26px 10px;font-size:20px;font-weight:800}
.ln__slots{min-height:64px;display:flex;flex-wrap:wrap;gap:8px;padding:10px;border-radius:16px;border:2px dashed rgba(127,127,127,.3);margin-bottom:16px}.ln__ph{opacity:.55;align-self:center;padding:0 6px}
.ln__bank{display:flex;flex-wrap:wrap;gap:8px}.ln__chip{padding:11px 14px;text-align:left}.ln__chip b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;background:#19a35a;color:#0b0c0b;font-size:12px;margin-right:8px}
.ln__chip.is-used{opacity:.25}.ln__chip.is-in{border-color:#19a35a}
.ln__match{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ln__match>div{display:grid;gap:10px;align-content:start}.ln__match button{padding:15px 12px;min-height:58px;text-align:center}
.ln__match button.is-ok{border-color:#19a35a;background:rgba(25,163,90,.16);opacity:.55;box-shadow:none}.ln__match button.is-bad{border-color:#e5544a;background:rgba(229,84,74,.14)}
.ln__foot{position:relative;padding:14px 0 max(16px,env(safe-area-inset-bottom));border-top:1px solid rgba(127,127,127,.18)}
.ln__fb{margin:-14px -18px 14px;padding:16px 18px;animation:lnUp .25s ease both}@keyframes lnUp{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.ln__fb.is-ok{background:rgba(25,163,90,.16);color:#4fd88e}.ln__fb.is-bad{background:rgba(229,84,74,.13);color:#ff8a7e}
[data-theme="light"] .ln__fb.is-ok{color:#2f6b22}[data-theme="light"] .ln__fb.is-bad{color:#a12a20}
.ln__fb b{display:block;font-size:20px}.ln__fb span{display:block;margin-top:4px;font-weight:600}.ln__fb em{font-style:normal;font-weight:800}.ln__fb p{margin:6px 0 0;color:inherit;opacity:.9;font-size:16px;line-height:1.5}
.ln__go{width:100%;min-height:56px;border:0;border-radius:16px;font:700 17px var(--sans,system-ui);letter-spacing:0;color:#0b0c0b;cursor:pointer;background:linear-gradient(180deg,#22b366,#19a35a);box-shadow:0 5px 0 #0a5c30;transition:transform .1s,filter .15s}
.ln__go:active{transform:translateY(4px);box-shadow:0 1px 0 #0a5c30}.ln__go:disabled{filter:grayscale(1);opacity:.45;cursor:default}
.ln__end{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:4vh}.ln__end h2{font-size:clamp(30px,5vw,44px);margin:0}.ln__big{font-size:64px}
.ln__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:440px;margin:14px 0}.ln__stats>div{padding:14px 8px;border-radius:16px;border:2px solid rgba(127,127,127,.22)}.ln__stats small{display:block;font-size:13px;text-transform:none;letter-spacing:0;opacity:.7;font-weight:700}.ln__stats b{font-size:26px}
@media (max-width:520px){.ln__match{gap:8px}.ln__match button{font-size:15px;padding:12px 8px}.ln__tf button{padding:20px 8px}}
@media (prefers-reduced-motion:reduce){.lp__node.is-cur>button,.lp__here,.ln__ex.is-in,.ln__fb,.ln__wrap.is-shake{animation:none}}