/* Seitopsy: "Learn by cards" section (hub /learn/ and course pages). Loaded only on these pages.
   Idea: an espresso-coloured deck of thought cards that flips to warm paper; chapters as a path of state rings. */
.lx,.lx-hub{
  --ink:#3a211a; --ink2:#4e2f24; --ink3:#5f3d30; --cream:#f2e9dd; --cream2:rgba(242,233,221,.74);
  --paper:#fbf7f1; --pline:#e2d4c1; --clay:#94402f; --claybg:#f5e3dc; --ring:#c9b49b;
  --sh:0 1px 0 rgba(255,255,255,.5) inset,0 26px 44px -30px rgba(58,33,26,.6),0 6px 14px -10px rgba(58,33,26,.35);
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.45,.5,1);
}
.lx{padding-block:clamp(16px,4vw,40px) 0;overflow-x:clip}
.lx .crumbs{margin-bottom:6px}
.lx-top h1{font-size:clamp(1.85rem,5vw,2.9rem);margin:.1em 0 .25em}
.lx-intro{max-width:var(--read);color:var(--muted);font-size:.98rem;margin:0}
.lx-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:22px}
@media(min-width:56.01rem){.lx-grid{grid-template-columns:17.5rem minmax(0,1fr);gap:clamp(32px,4vw,56px);margin-top:36px;align-items:start}}
.lx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lx-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0}

/* ---------- chapter path ---------- */
.lx-side{min-width:0}
.lx-pathbar{position:relative}
.lx-path{list-style:none;margin:0;padding:0;position:relative;--fill:0}
.lx-node{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;color:var(--text);cursor:pointer;text-align:left;font:inherit;padding:0;-webkit-tap-highlight-color:transparent}
.lx-ic{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--bg)}
.lx-ic svg{display:block}
.lx-ic .t{fill:none;stroke:var(--ring);stroke-width:2}
.lx-ic .a{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round}
.lx-ic .f{fill:var(--ok)}
.lx-ic .c{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lx-psi{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px dashed var(--ring);color:var(--muted);font:400 1rem/1 Neohellenic,"Palatino Linotype",Georgia,serif}
.lx-node.ok .lx-psi{border:0;background:var(--ink);color:var(--cream)}
.lx-node.on .lx-ic{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink)}
.lx-nt{display:grid;min-width:0}
.lx-nn{font:600 .93rem/1.3 var(--body)}
.lx-nt small{font-size:.78rem;color:var(--muted);line-height:1.3}
.lx-node.on .lx-nn{font-family:var(--head);font-weight:700}
.lx-pathbtn{display:none}

/* desktop: vertical path in a sticky rail */
@media(min-width:56.01rem){
  .lx-side{position:sticky;top:calc(var(--hdr) + 24px)}
  .lx-path{display:grid;gap:4px}
  .lx-path li{position:relative}
  .lx-path li:not(:last-child)::after{content:"";position:absolute;left:16px;top:calc(50% + 19px);height:calc(100% - 34px);width:2px;border-radius:2px;background:var(--pline)}
  .lx-path li:has(>.lx-node[data-st="2"])::after{background:var(--ok)}
  .lx-node{padding:9px 10px 9px 0;border-radius:14px;min-height:52px}
  .lx-node:hover .lx-nn{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
  .lx-node:focus-visible{outline-offset:2px}
  .lx-fin{margin-top:6px}
}
/* phones: a compact strip of rings that opens into the full list */
@media(max-width:56rem){
  .lx-pathbar{background:var(--surface);border-radius:18px;padding:10px 12px}
  .lx-side:not(.open) .lx-path{display:flex;align-items:center;margin-right:30px}
  .lx-side:not(.open) .lx-path li{flex:1;display:flex;align-items:center}
  .lx-side:not(.open) .lx-path li:last-child{flex:none}
  .lx-side:not(.open) .lx-path li:not(:last-child)::after{content:"";flex:1;height:2px;margin:0 2px;border-radius:2px;background:var(--pline)}
  .lx-side:not(.open) .lx-path li:has(>.lx-node[data-st="2"])::after{background:var(--ok)}
  .lx-side:not(.open) .lx-node{width:auto}
  .lx-side:not(.open) .lx-nt{display:none}
  .lx-side:not(.open) .lx-ic{width:26px;height:26px;background:var(--surface)}
  .lx-side:not(.open) .lx-ic svg{width:24px;height:24px}
  .lx-side:not(.open) .lx-psi{width:22px;height:22px;font-size:.8rem}
  .lx-side:not(.open) .lx-node.on .lx-ic{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--ink)}
  .lx-pathbtn{display:flex;align-items:center;justify-content:flex-end;gap:6px;position:absolute;inset:0;width:100%;border:0;background:none;border-radius:18px;padding:0 8px;color:var(--text);cursor:pointer;font:600 .85rem/1 var(--body)}
  .lx-pathbtn .lx-pbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .lx-pathbtn svg{transition:transform .3s var(--ease)}
  .lx-side.open .lx-path{display:grid;gap:2px;padding:4px 0 6px}
  .lx-side.open .lx-path li{position:relative}
  .lx-side.open .lx-path li:not(:last-child)::after{content:"";position:absolute;left:16px;top:calc(50% + 19px);height:calc(100% - 36px);width:2px;background:var(--pline)}
  .lx-side.open .lx-path li:has(>.lx-node[data-st="2"])::after{background:var(--ok)}
  .lx-side.open .lx-ic{background:var(--surface)}
  .lx-side.open .lx-node{min-height:52px;padding:8px 0}
  .lx-side.open .lx-pathbtn{position:static;height:44px;justify-content:center;margin-top:4px;background:var(--surface2)}
  .lx-side.open .lx-pathbtn svg{transform:rotate(180deg)}
}

/* ---------- stage ---------- */
.lx-stage{min-width:0;max-width:40rem}
.lx-stage.enter{animation:lxIn .42s var(--ease)}
@keyframes lxIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lx-chead h2{font-size:clamp(1.45rem,3.6vw,2rem);margin:0 0 .3em;outline:none}
.lx-chead h2:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.lx-chead p{margin:0;color:var(--muted);font-size:.95rem;max-width:36rem}

.lx-meta{display:flex;align-items:center;gap:14px;margin:18px 0 14px}
.lx-prog{flex:1;display:flex;gap:4px}
.lx-prog i{flex:1;height:5px;border-radius:5px;background:var(--pline);transition:background .3s}
.lx-prog i.past{background:var(--accent)}
.lx-prog i.on{background:var(--ink)}
.lx-prog i.q{flex:0 0 18px;background:none;border:1.5px dashed var(--ring);height:6px}
.lx-count{flex:none;font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- deck ---------- */
.lx-deck{position:relative;display:grid;grid-template:minmax(19rem,auto)/minmax(0,1fr);padding-bottom:26px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.lx-card{grid-area:1/1;display:grid;position:relative;perspective:1700px;transform-origin:50% 85%;
  transition:transform .48s var(--ease),opacity .32s ease,visibility 0s;will-change:transform;touch-action:pan-y;cursor:grab}
.lx-deck.dragging .lx-card[data-pos="0"]{cursor:grabbing}
.lx-card[data-pos="0"]{z-index:4}
.lx-card[data-pos="1"]{z-index:3;transform:translate3d(0,13px,0) scale(.955)}
.lx-card[data-pos="2"]{z-index:2;transform:translate3d(0,26px,0) scale(.91)}
.lx-card[data-pos="3"]{z-index:1;transform:translate3d(0,26px,0) scale(.91);opacity:0;visibility:hidden;transition:transform .48s var(--ease),opacity .3s,visibility 0s .3s}
.lx-card[data-pos="-1"]{z-index:5;transform:translate3d(-118%,-14px,0) rotate(-11deg);opacity:0;visibility:hidden;
  transition:transform .42s cubic-bezier(.3,.6,.3,1),opacity .42s ease-in,visibility 0s .42s}
.lx-card.drag{transition:none!important}
.lx-card.spring{transition:transform .55s var(--spring)}
.lx-deck.still .lx-card,.lx-deck.still .lx-inner{transition:none!important}
.lx-deck.fit{grid-template-rows:minmax(min(17rem,var(--fit)),auto)}
.lx-deck.fit .lx-card{max-height:var(--fit);grid-template-rows:minmax(0,1fr)}
.lx-deck.fit .lx-inner{grid-template-rows:minmax(0,1fr);min-height:0}
.lx-deck.fit .lx-face{min-height:0}
.lx-deck.fit .lx-claim{flex:0 1 auto;min-height:0;overflow-y:auto}
.lx-deck.fit .lx-choose{flex:none}
.lx-deck.fit .lx-tx{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
.lx-deck.fit .lx-tx.scroll:not(.end){-webkit-mask-image:linear-gradient(#000 calc(100% - 30px),transparent);mask-image:linear-gradient(#000 calc(100% - 30px),transparent)}
.lx-card.instant .lx-inner{transition:none!important}
.lx-card.nudge{animation:lxNudge .4s var(--ease)}
@keyframes lxNudge{30%{transform:translateX(14px) rotate(1deg)}65%{transform:translateX(-5px)}}

.lx-inner{display:grid;position:relative;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.3,.75,.2,1)}
.lx-card.flipped .lx-inner{transform:rotateY(-180deg)}
.lx-face{grid-area:1/1;position:relative;display:flex;flex-direction:column;border-radius:24px;padding:clamp(22px,4.2vw,34px);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.lx-face>*{transition:opacity .25s ease}
.lx-card:not([data-pos="0"]) .lx-face>*{opacity:0}
.lx-front{transform:rotateY(0);background:radial-gradient(130% 100% at 0% 0%,var(--ink3) 0%,var(--ink) 52%,#2e1913 100%);color:var(--cream);box-shadow:var(--sh)}
.lx-front:not(.lx-mf)::before{content:"Ψ";position:absolute;right:-.06em;bottom:-.3em;font:400 clamp(9rem,30vw,13rem)/1 Neohellenic,"Palatino Linotype",Georgia,serif;color:var(--cream);opacity:.05;pointer-events:none}
.lx-card:not([data-pos="0"]) .lx-front::before{opacity:0}
.lx-front::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cream);opacity:0;pointer-events:none;transition:opacity .4s}
.lx-card[data-pos="1"] .lx-front::after{opacity:.1}
.lx-card[data-pos="2"] .lx-front::after,.lx-card[data-pos="3"] .lx-front::after{opacity:.2}
.lx-front h3{margin:0;font:700 clamp(1.42rem,4.6vw,1.95rem)/1.22 var(--head);letter-spacing:-.02em;color:var(--cream);max-width:24ch}
.lx-fh{margin:auto 0 0;padding-top:24px;display:flex;align-items:center;gap:10px;color:var(--cream2);font-size:.86rem;line-height:1.35}
.lx-fh svg{flex:none;opacity:.85}
.lx-back{transform:rotateY(180deg);background:var(--paper);color:var(--text);border:1px solid var(--pline);box-shadow:var(--sh)}
.lx-bt{margin:0 0 10px;font:700 1.02rem/1.3 var(--head);color:var(--muted)}
.lx-tx{margin:0;font-size:1.02rem;line-height:1.66}
.lx-cf{margin-top:auto;padding-top:18px;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.lx-src{font-size:.8rem;color:var(--muted);line-height:1.35}
.lx-back .badge{font-size:.76rem}

/* myth card: guess first, then the reveal */
.lx-mf{background:radial-gradient(130% 100% at 100% 0%,#5a3a3a 0%,#3d2420 55%,#2e1913 100%)}
.lx-mf::before{content:"";position:absolute;inset:10px;border:1.5px dashed rgba(242,233,221,.22);border-radius:17px;pointer-events:none}
.lx-tag{align-self:flex-start;margin:0 0 16px;font:600 .82rem/1 var(--body);padding:.5rem .8rem;border-radius:999px;background:rgba(242,233,221,.14);color:var(--cream)}
.lx-claim{margin:0;font:700 clamp(1.3rem,4.2vw,1.75rem)/1.28 var(--head);letter-spacing:-.015em;max-width:26ch}
.lx-claim.long{font-size:clamp(1.12rem,3.6vw,1.45rem)}
.lx-choose{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative;z-index:1}
.lx-choose button{min-height:52px;border-radius:16px;border:1.5px solid rgba(242,233,221,.45);background:rgba(242,233,221,.06);color:var(--cream);font:600 1rem/1 var(--body);cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.lx-choose button:hover{background:rgba(242,233,221,.16);border-color:var(--cream)}
.lx-choose button:active{transform:scale(.97)}
.lx-choose button:focus-visible{outline:3px solid var(--cream);outline-offset:2px}
.lx-verdict{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:.95rem;line-height:1.35}
.lx-verdict b{color:var(--clay)}
.lx-gs{color:var(--muted)}
.lx-vi{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--clay);color:#fff}
.lx-card.flipped .lx-vi{animation:lxPop .5s .3s var(--spring) both}
.v-true .lx-vi{background:var(--ok)}
.v-true .lx-verdict b{color:var(--ok)}
.lx-back h3{margin:0 0 10px;font:700 clamp(1.15rem,3.4vw,1.35rem)/1.28 var(--head)}
.lx-rl{margin:0 0 4px;font-weight:600;font-size:.86rem;color:var(--ok)}

/* deck controls */
.lx-ctrl{display:grid;grid-template-columns:56px 1fr 56px;gap:10px;margin-top:10px}
.lx-round,.lx-flip{min-height:56px;border:0;border-radius:18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 .98rem/1 var(--body);transition:transform .15s,background .2s,opacity .2s;-webkit-tap-highlight-color:transparent}
.lx-round{background:var(--surface2);color:var(--text)}
.lx-round:disabled{opacity:.4;cursor:default}
.lx-flip{background:var(--surface);color:var(--text);border:1.5px solid var(--tint2)}
.lx-flip[aria-pressed="true"] svg{transform:scaleX(-1)}
.lx-next{background:var(--ink);color:var(--cream)}
.lx-next .lx-nl{display:none}
.lx-next.last{grid-column:3;justify-self:end;width:max-content;padding:0 20px;white-space:nowrap}
.lx-ctrl:has(.lx-next.last){grid-template-columns:56px 1fr auto}
.lx-next.last .lx-nl{display:inline}
.lx-next.last svg{order:2}
.lx-round:not(:disabled):active,.lx-flip:active{transform:scale(.96)}
@media(hover:hover){.lx-round:not(:disabled):hover{background:var(--tint2)}.lx-next:hover{background:var(--ink2)!important}.lx-flip:hover{background:var(--tint)}}
.lx-hint{margin:12px 0 0;font-size:.82rem;color:var(--muted);text-align:center}

/* ---------- quiz ---------- */
.lx-qmeta{display:flex;align-items:center;gap:12px;margin:16px 0 14px;flex-wrap:wrap}
.lx-qk{font:700 .9rem/1 var(--head);color:var(--text)}
.lx-qmeta .lx-count{margin-left:auto}
.lx-pips{display:inline-flex;gap:6px;align-items:center}
.lx-pips i{width:10px;height:10px;border-radius:50%;background:var(--pline);transition:background .3s,transform .3s}
.lx-pips i.cur{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--ink)}
.lx-pips i.ok{background:var(--ok)}
.lx-pips i.no{background:var(--clay)}
.lx-q{background:var(--paper);border:1px solid var(--pline);border-radius:24px;padding:clamp(20px,4vw,30px);box-shadow:var(--sh)}
.lx-q h3{margin:0 0 18px;font:700 clamp(1.18rem,3.4vw,1.4rem)/1.3 var(--head);outline:none}
.lx-q h3:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:4px}
.lx-opts{display:grid;gap:10px}
.lx-opt{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:center;width:100%;min-height:56px;text-align:left;
  border:1.5px solid var(--pline);background:#fff;border-radius:16px;padding:12px 14px;color:var(--text);font:400 .98rem/1.42 var(--body);cursor:pointer;
  transition:border-color .2s,background .25s,opacity .3s,transform .15s;-webkit-tap-highlight-color:transparent}
.lx-om{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--ring);color:#fff;transition:background .25s,border-color .25s}
@media(hover:hover){.lx-opt:not(.done):hover{border-color:var(--accent);background:#fffdf9}.lx-opt:not(.done):hover .lx-om{border-color:var(--accent)}}
.lx-opt:not(.done):active{transform:scale(.985)}
.lx-opt.done{cursor:default}
.lx-opt.right{border-color:var(--ok);background:var(--okbg)}
.lx-opt.right .lx-om{background:var(--ok);border-color:var(--ok)}
.lx-opt.wrong{border-color:var(--clay);background:var(--claybg)}
.lx-opt.wrong .lx-om{background:var(--clay);border-color:var(--clay)}
.lx-opt.dim{opacity:.72}
.lx-opt.pop .lx-om{animation:lxPop .45s var(--spring)}
.lx-opt.pop{animation:lxGlow .7s ease-out}
.lx-opt.shake{animation:lxShake .42s ease-in-out}
@keyframes lxPop{0%{transform:scale(.4)}100%{transform:scale(1)}}
@keyframes lxGlow{0%{box-shadow:0 0 0 0 rgba(79,107,85,.4)}100%{box-shadow:0 0 0 12px rgba(79,107,85,0)}}
@keyframes lxShake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.lx-fb{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.lx-fb.show{grid-template-rows:1fr}
.lx-fbin{overflow:hidden;min-height:0}
.lx-fb.show .lx-fbin{padding-top:18px}
.lx-fbin p{margin:0 0 6px;font-size:.96rem;line-height:1.6}
.lx-fbh{display:flex;align-items:center;gap:10px;font-size:1rem!important}
.lx-fbh .lx-vi{width:26px;height:26px}
.lx-fbh.ok .lx-vi{background:var(--ok)}
.lx-fbh.ok b{color:var(--ok)}
.lx-fbh.no b{color:var(--clay)}
.lx-fbr{font-weight:600}
.lx-qnav,.lx-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;align-items:center}
.lx-qnav{justify-content:space-between}
.lx-primary,.lx-ghost{min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:16px;padding:0 20px;font:600 .96rem/1.2 var(--body);cursor:pointer;text-decoration:none;transition:transform .15s,background .2s,opacity .2s}
.lx-primary{border:0;background:var(--ink);color:var(--cream)}
.lx-primary:disabled{opacity:.35;cursor:default}
.lx-primary:not(:disabled):active,.lx-ghost:active{transform:scale(.97)}
.lx-ghost{border:1.5px solid var(--tint2);background:transparent;color:var(--text)}
@media(hover:hover){.lx-primary:not(:disabled):hover{background:var(--ink2);color:var(--cream)}.lx-ghost:hover{background:var(--surface);color:var(--text)}}
.lx-gol{display:grid;text-align:left;gap:2px}
.lx-gol small{font-weight:400;font-size:.8rem;color:var(--cream2)}
.lx-go{min-height:60px;padding:8px 20px}
@media(max-width:40rem){.lx-qnav .lx-primary{flex:1}.lx-acts>*{flex:1 1 100%}.lx-go{justify-content:space-between}}

/* ---------- chapter result & course result ---------- */
.lx-res,.lx-total{margin:18px 0 6px;background:var(--paper);border:1px solid var(--pline);border-radius:24px;padding:26px clamp(20px,4vw,30px);box-shadow:var(--sh)}
.lx-pips.lg{gap:10px}
.lx-pips.lg i{width:34px;height:34px;display:grid;place-items:center;color:#fff}
.lx-pips.lg i:not(.ok):not(.no){border:2px dashed var(--ring);background:none}
.lx-res .lx-pips i{animation:lxPop .45s var(--spring) both}
.lx-res .lx-pips i:nth-child(2){animation-delay:.08s}.lx-res .lx-pips i:nth-child(3){animation-delay:.16s}.lx-res .lx-pips i:nth-child(4){animation-delay:.24s}.lx-res .lx-pips i:nth-child(5){animation-delay:.32s}
.lx-rs{margin:14px 0 0;font-size:1rem;color:var(--muted)}
.lx-rs b{font:700 1.15rem/1 var(--head);color:var(--text)}
.lx-mosaic{display:flex;flex-wrap:wrap;gap:6px 14px}
.lx-mosaic>span{display:inline-flex;gap:4px}
.lx-mosaic i{width:12px;height:12px;border-radius:3px;background:var(--pline)}
.lx-mosaic i.ok{background:var(--ok)}.lx-mosaic i.no{background:var(--clay)}
.lx-flist{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:2px}
.lx-flist li{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line);margin:0}
.lx-flist .lx-ic{background:none}
.lx-ft{display:grid;min-width:0;font-weight:600;font-size:.95rem;line-height:1.3}
.lx-ft small{font-weight:400;color:var(--muted);font-size:.8rem}
.lx-flist .lx-pips i{width:8px;height:8px}
.lx-flist li.weak .lx-ft small{color:var(--clay)}
.lx-mini-b{min-height:44px;padding:0 14px;border-radius:12px;border:1.5px solid var(--tint2);background:var(--bg);color:var(--text);font:600 .85rem/1 var(--body);cursor:pointer}
.lx-flist li.weak .lx-ic .a{stroke:var(--clay)}
@media(hover:hover){.lx-mini-b:hover{background:var(--surface)}}
.lx-okm{width:1px}
.lx-total+.lx-acts{margin:14px 0 8px}
@media(max-width:30rem){.lx-flist li{grid-template-columns:30px minmax(0,1fr) auto}.lx-flist .lx-pips{display:none}}

.lx-foot{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;margin:40px 0 0;padding-bottom:clamp(32px,6vw,64px)}
.lx-reset{border:0;background:none;color:var(--muted);text-decoration:underline;text-underline-offset:.2em;cursor:pointer;font:inherit;padding:10px 0}

/* ---------- hub ---------- */
.lx-hub{padding-block:clamp(28px,6vw,64px)}
.lx-hub .lead{max-width:var(--read)}
.lx-courses{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:18px}
.lx-courses li{margin:0}
.lx-course{display:grid;grid-template-columns:minmax(0,1fr);border-radius:26px;background:var(--surface);color:var(--text);text-decoration:none;overflow:hidden;transition:box-shadow .3s,transform .3s var(--ease)}
@media(min-width:48rem){.lx-course{grid-template-columns:minmax(0,5fr) minmax(0,6fr);max-width:60rem}}
@media(hover:hover){a.lx-course:hover{color:var(--text);transform:translateY(-2px);box-shadow:0 26px 44px -30px rgba(58,33,26,.55)}
  a.lx-course:hover .lx-mini.m1{transform:rotate(-2deg) translateY(-4px)}a.lx-course:hover .lx-mini.m2{transform:rotate(4deg) translate(10px,-2px)}a.lx-course:hover .lx-mini.m3{transform:rotate(9deg) translate(20px,2px)}}
.lx-cvis{position:relative;display:grid;place-items:center;min-height:220px;padding:30px 30px 34px;background:var(--tint)}
.lx-mini{grid-area:1/1;width:min(100%,270px);aspect-ratio:1.42;border-radius:18px;transition:transform .45s var(--ease)}
.lx-mini.m3{background:var(--ink3);transform:rotate(7deg) translate(14px,4px);opacity:.55}
.lx-mini.m2{background:var(--ink2);transform:rotate(3deg) translate(7px,0)}
.lx-mini.m1{display:flex;align-items:flex-start;padding:20px 22px;background:radial-gradient(130% 100% at 0% 0%,var(--ink3),var(--ink) 55%,#2e1913);color:var(--cream);box-shadow:0 18px 30px -18px rgba(58,33,26,.7);transform:rotate(-1.5deg)}
.lx-mini.m1 span{font:700 1.1rem/1.25 var(--head);letter-spacing:-.01em}
.lx-cbody{display:flex;flex-direction:column;gap:8px;padding:clamp(22px,4vw,34px)}
.lx-cser{font-size:.85rem;color:var(--muted)}
.lx-ctitle{font:700 clamp(1.6rem,4vw,2.1rem)/1.12 var(--head);letter-spacing:-.02em}
.lx-cmeta{font-size:.92rem;color:var(--muted)}
.lx-cdots{display:flex;gap:6px;margin:8px 0 4px}
.lx-cdots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--ring);box-sizing:border-box}
.lx-cdots i.s1{border-color:var(--accent);background:linear-gradient(90deg,var(--accent) 50%,transparent 50%)}
.lx-cdots i.s2{border-color:var(--ok);background:var(--ok)}
.lx-cfoot{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:14px}
.lx-cgo{display:inline-flex;align-items:center;min-height:50px;padding:0 24px;border-radius:16px;background:var(--ink);color:var(--cream);font:600 .98rem/1 var(--body)}
.lx-cpct{font-size:.88rem;color:var(--muted)}
.lx-cbar{display:none;height:5px;border-radius:5px;background:var(--pline);overflow:hidden;margin-top:12px}
.lx-course.has .lx-cbar{display:block}
.lx-cbar span{display:block;height:100%;width:0;background:var(--accent);border-radius:inherit}
.lx-soon{margin-top:48px;max-width:60rem}
.lx-soon h2{font:700 1.2rem/1.3 var(--head);margin:0 0 12px}
.lx-soon ol{list-style:none;margin:0;padding:0;column-gap:32px}
@media(min-width:48rem){.lx-soon ol{columns:2}}
.lx-soon li{break-inside:avoid;display:flex;gap:12px;align-items:center;margin:0;padding:11px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:.93rem;line-height:1.35}
.lx-sdot{flex:none;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ring)}
.lx-soon li.nx{color:var(--text);font-weight:600}
.lx-soon li.nx .lx-sdot{border-color:var(--accent);background:var(--accent)}
.lx-soon em{margin-left:auto;flex:none;font-style:normal;font-size:.76rem;font-weight:600;padding:.3rem .6rem;border-radius:999px;background:var(--tint);color:var(--text)}

/* ---------- reduced motion: no flight, no 3D turn; faces cross-fade ---------- */
@media(prefers-reduced-motion:reduce){
  .lx-stage.enter,.lx-card.nudge,.lx-opt.pop,.lx-opt.shake,.lx-opt.pop .lx-om,.lx-res .lx-pips i,.lx-card.flipped .lx-vi{animation:none!important}
  .lx-card,.lx-inner,.lx-path::after,.lx-fb,.lx-mini,.lx-course{transition:none!important}
  .lx-card.flipped .lx-inner{transform:none}
  .lx-back{transform:none}
  .lx-card.flipped .lx-front,.lx-card:not(.flipped) .lx-back{visibility:hidden}
}

/* ---------- phones: keep card and controls within one screen under the sticky header ---------- */
@media(max-width:40rem){
  .lx-chead h2{font-size:1.38rem;margin-bottom:.2em}
  .lx-chead p{font-size:.88rem;line-height:1.5}
  .lx-meta{margin:12px 0 10px}
  .lx-deck{padding-bottom:20px;grid-template-rows:minmax(17rem,auto)}
  .lx-card[data-pos="1"]{transform:translate3d(0,10px,0) scale(.955)}
  .lx-card[data-pos="2"],.lx-card[data-pos="3"]{transform:translate3d(0,20px,0) scale(.91)}
  .lx-face{padding:20px 20px 18px;border-radius:22px}
  .lx-tx{font-size:.97rem;line-height:1.58}
  .lx-cf{padding-top:14px}
  .lx-fh{padding-top:16px;font-size:.82rem}
  .lx-choose{margin-top:20px}
  .lx-tag{margin-bottom:12px}
  .lx-ctrl{margin-top:6px}
  .lx-hint{margin-top:8px}
  .lx-q{padding:18px 16px;border-radius:22px}
  .lx-q h3{margin-bottom:14px}
  .lx-opt{padding:10px 12px;gap:10px;font-size:.95rem;min-height:52px}
  .lx-intro{font-size:.9rem;line-height:1.55}
  .lx-top h1{font-size:1.9rem}
  .lx-cvis{min-height:0;padding:26px 34px 30px}
  .lx-mini{width:min(100%,230px)}
  .lx-mini.m1 span{font-size:1rem}
}
[tabindex="-1"]:focus{outline:none}