/* Learn's hub (/learn/ without a build, web/learn/hub.js): a page like Explore but for the lessons, with a technique
   viewer at the top (our biggest builds in 3D, each technique lit in turn), a path with a rank and badges, and every
   lesson with its progress. Same colours as the site (site.css variables). */
.lhubmode .lstage{display:none}                       /* the hub takes the whole page, not the 3D stage */
.lhub{display:block}
.lhub h1,.lhub h2,.lhub h3{margin:0}
.lhbtn{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 Inter,sans-serif;color:#fff;background:var(--red);border:1px solid var(--red);border-radius:999px;padding:12px 20px;cursor:pointer}
.lhbtn:hover{filter:brightness(1.08);text-decoration:none}
.lhbtn small{font-weight:400;opacity:.82;font-size:12px}
.lhbtn.ghost{background:var(--panel);border-color:var(--line);color:var(--text)}.lhbtn.ghost:hover{border-color:var(--edge);filter:none}
.lhbtn svg{width:15px;height:15px}

/* ---------------------------------------------------------------- the hero: text + the technique viewer */
.lhhero{display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);gap:30px;align-items:center;margin:4px 0 18px}
.lhtxt h1{font:500 56px/1 var(--px);margin:14px 0 14px}.lhtxt h1 span{color:var(--red2)}
.lhtxt>p{color:var(--soft);font-size:16px;line-height:1.55;max-width:560px;margin:0 0 20px}
.lhchips{display:flex;gap:8px;flex-wrap:wrap}
.lhchip{font:700 10px/1 Inter,sans-serif;letter-spacing:.16em;color:var(--soft);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 11px}
.lhchip.red{color:#fff;background:var(--red);border-color:var(--red)}
.lhcta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.lhnums{display:flex;gap:26px;margin:0;padding:18px 0 0;border-top:1px solid var(--line)}
.lhnums div{display:grid;gap:3px}.lhnums dt{font:700 10px/1 Inter,sans-serif;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.lhnums dd{margin:0;font:500 24px var(--px);color:var(--text)}

.lhart{position:relative;aspect-ratio:16/10;border:1px solid var(--edge);border-radius:16px;overflow:hidden;
	background:radial-gradient(ellipse 85% 75% at 50% 42%,#3a3a42 0,#1c1c20 58%,#111114 100%)}
.lhposter{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.5;filter:saturate(.7);transition:opacity .6s}
.lhart.live .lhposter{opacity:0}
.lhcv,.lhcv canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.lhcv canvas{opacity:0;transition:opacity .5s}.lhcv canvas.on{opacity:1}
.lhhud{position:absolute;inset:0;pointer-events:none}
.lhpanel{position:absolute;left:14px;top:14px;max-width:62%;background:#141418d9;border:1px solid #ffffff1f;border-radius:14px;padding:12px 14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lhpanel small{display:flex;align-items:center;gap:7px;font:700 9.5px/1 Inter,sans-serif;letter-spacing:.18em;color:#ff938c}
.lhpanel small span{color:#8c8b92}
.lhpanel small i{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);animation:lhblink 1.4s ease-in-out infinite}
@keyframes lhblink{50%{opacity:.35}}
.lhpanel b{display:block;font:500 21px/1.15 var(--px);color:#fff;margin:7px 0 9px}
.lhpanel ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.lhpanel li{position:relative;padding-left:24px;font-size:12.5px;color:#9b9aa1;transition:color .25s}
.lhpanel li::before{content:attr(data-n);position:absolute;left:0;top:-1px;width:17px;height:17px;border-radius:50%;background:#ffffff14;color:#c9c8cc;font:700 9px/17px Inter,sans-serif;text-align:center}
.lhpanel li.on{color:#fff}.lhpanel li.on::before{background:var(--red);color:#fff}
.lhpanel li.done{color:#cfcfd3}.lhpanel li.done::before{content:"✓";background:#ffffff26;color:#fff;font-size:10px}
.lhopen{position:absolute;right:14px;bottom:30px;pointer-events:auto;display:inline-flex;align-items:center;gap:6px;font:600 13px/1 Inter,sans-serif;color:#fff;background:var(--red);border:1px solid var(--red);border-radius:999px;padding:11px 16px}
.lhopen:hover{filter:brightness(1.1);text-decoration:none}.lhopen svg{width:14px;height:14px}
.lhcount{position:absolute;right:16px;top:14px;font:600 12px var(--px);color:#c9c8cc;background:#141418b3;border:1px solid #ffffff1f;border-radius:999px;padding:5px 10px}
.lhbar{position:absolute;left:14px;right:14px;bottom:14px;display:flex;gap:4px}
.lhbar i{flex:1;height:3px;border-radius:2px;background:#ffffff26}.lhbar i.on{background:var(--red)}

/* ---------------------------------------------------------------- sections */
.lhsec{margin:34px 0}
.lhhead{margin:0 0 16px}.lhhead h2{font:500 30px var(--px)}.lhhead p{color:var(--muted);font-size:14px;margin:6px 0 0;max-width:62ch}
.lhhead p b{color:var(--soft)}
.lhrow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:16px;overflow-x:auto;scrollbar-width:thin;padding-bottom:6px}
.lhgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:16px}

/* ---------------------------------------------------------------- your path */
.lhpathbox{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 24px}
.lhrank{display:flex;align-items:center;gap:14px}
.lhcrest{width:84px;height:84px;flex:none;image-rendering:pixelated;filter:drop-shadow(0 8px 16px #0009)}
.lhrank small{font:700 10px/1 Inter,sans-serif;letter-spacing:.14em;color:var(--dim)}
.lhrank b{display:block;font:500 22px var(--px);margin-top:4px}
.lhtrack{position:relative;height:80px;margin:10px 18px 0}
.lhline{position:absolute;left:0;right:0;top:16px;height:4px;border-radius:2px;background:var(--line)}
.lhline i{display:block;height:100%;border-radius:2px;background:var(--red);transition:width .5s}
.lhnode{position:absolute;top:0;transform:translateX(-50%);text-align:center;width:88px}
.lhnode img{display:block;width:36px;height:36px;margin:0 auto;image-rendering:pixelated;filter:grayscale(1) brightness(.55);opacity:.7;transition:transform .2s}
.lhnode.on img{filter:drop-shadow(0 3px 6px #0008);opacity:1}
.lhnode.now img{transform:scale(1.3)}
.lhnode b{display:block;font:600 11px/1.2 Inter,sans-serif;color:var(--soft);margin:6px 0 2px}
.lhnode small{font-size:9.5px;color:var(--dim)}
.lhnode.on b{color:var(--text)}
.lhstats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}
.lhstats div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;gap:4px}
.lhstats dt{font:700 10px/1 Inter,sans-serif;letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
.lhstats dd{margin:0;font:500 26px var(--px);color:var(--text)}
.lhbadges h3{font:500 18px var(--px);margin:4px 0 12px}
.lhbadgerow{display:flex;flex-wrap:wrap;gap:12px}
.lhbadge{display:grid;justify-items:center;gap:6px;width:92px;text-align:center}
.lhbadge>span{position:relative;width:64px;height:64px;border-radius:50%;overflow:hidden;border:2px solid var(--red);box-shadow:0 0 0 3px var(--panel),0 6px 18px #0007;display:grid;place-items:center;background:var(--panel2)}
.lhbadge img{width:100%;height:100%;object-fit:cover}
.lhbadge b{font:600 11px/1.25 Inter,sans-serif;color:var(--soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lhbadge.more>span,.lhbadge.ghost>span{border-color:var(--line);color:var(--muted);font:500 18px var(--px)}
.lhbadge.ghost{opacity:.5}.lhbadge.ghost>span{border-style:dashed}
a.lhbadge:hover{text-decoration:none}a.lhbadge:hover b{color:var(--text)}
.lhjoin{display:flex;align-items:center;gap:16px;margin-top:18px;padding:16px 18px;background:var(--panel);border:1px solid var(--edge);border-radius:14px}
.lhjoin svg{width:26px;height:26px;color:var(--red2);flex:none}
.lhjoin p{margin:0;font-size:13.5px;color:var(--soft);line-height:1.5}.lhjoin p b{display:block;color:var(--text);font-size:14.5px;margin-bottom:2px}
.lhjoin .lhbtn{margin-left:auto;flex:none}

/* ---------------------------------------------------------------- search, filters, cards */
.lhsearch{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:0 18px;background:var(--panel);border:1px solid var(--line);border-radius:14px;transition:border-color .15s,box-shadow .15s}
.lhsearch:focus-within{border-color:var(--red);box-shadow:0 0 0 3px var(--glow)}
.lhsearch svg{width:20px;height:20px;color:var(--muted);flex:none}
.lhsearch input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);padding:15px 0;font:16px Inter,sans-serif}
.lhfilters{display:none;flex-direction:column;gap:9px;margin:0 0 18px}
#lhall.searching .lhfilters{display:flex;animation:lhfin .18s ease-out}       /* shown once the search bar is used (hub.js) */
@keyframes lhfin{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){#lhall.searching .lhfilters{animation:none}}
.lhfrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.lhfrow .lbl{font:700 10px Inter,sans-serif;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;margin-right:4px;min-width:70px}
.lhfrow button{font:600 12px/1 Inter,sans-serif;letter-spacing:.05em;color:var(--soft);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 13px;cursor:pointer}
.lhfrow button.on{background:var(--red);border-color:var(--red);color:#fff}
.lhnone{color:var(--muted)}.lhnone a{color:var(--red2)}

.lhcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;color:var(--text);transition:transform .15s,border-color .15s}
.lhcard:hover{transform:translateY(-3px);border-color:var(--edge);text-decoration:none}
.lhcard.done{border-color:#2f8f6b55}
.lhthumb{position:relative;aspect-ratio:16/11;background:#2a2a2d}.lhthumb img{width:100%;height:100%;object-fit:cover;display:block}
.lhtype{position:absolute;left:10px;top:10px;font:700 10px/1 Inter,sans-serif;letter-spacing:.12em;padding:6px 8px;border-radius:7px;background:#000a;color:#fff}
.lhfree{position:absolute;right:10px;top:10px;font:700 10px/1 Inter,sans-serif;letter-spacing:.1em;padding:6px 8px;border-radius:7px;background:var(--red);color:#fff}
.lhdone{position:absolute;right:10px;top:10px;display:inline-flex;align-items:center;gap:4px;font:700 10px/1 Inter,sans-serif;letter-spacing:.08em;padding:6px 8px;border-radius:7px;background:#1f8a5f;color:#fff}
.lhdone svg{width:12px;height:12px}
.lhprog{position:absolute;left:0;right:0;bottom:0;height:4px;background:#00000066}.lhprog i{display:block;height:100%;background:var(--red)}
.lhbody{padding:12px 14px 14px;display:flex;flex-direction:column;gap:9px;flex:1}
.lhbody h3{font-size:19px}
.lhtechs{display:flex;flex-wrap:wrap;gap:5px}
.lhtechs span{font:500 11px/1 Inter,sans-serif;color:var(--soft);background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:5px 8px}
.lhtechs .more{color:var(--muted)}
.lhmeta{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.lhmeta span{font-size:11.5px;color:var(--soft);background:var(--panel2);border:1px solid var(--line);padding:4px 8px;border-radius:6px}
.lhmeta .d.easy{color:#6fdc6f}.lhmeta .d.medium{color:#ffc23d}.lhmeta .d.hard{color:#ff8a3d}.lhmeta .d.expert{color:var(--red2)}
.lhstate{display:flex;align-items:center;gap:6px;font:600 12px Inter,sans-serif;color:var(--muted);padding-top:9px;border-top:1px solid var(--line)}
.lhcard.done .lhstate{color:#4bbf87}.lhstate svg{width:14px;height:14px}

@media (max-width:860px){
	.lhhero{grid-template-columns:1fr;gap:18px}.lhtxt h1{font-size:44px}
	.lhstats{grid-template-columns:repeat(2,1fr)}
	.lhpathbox{grid-template-columns:1fr;gap:18px}
	.lhtrack{height:92px;margin-top:4px}.lhnode{width:64px}.lhnode small{display:none}.lhnode img{width:30px;height:30px}
	.lhjoin{flex-wrap:wrap}.lhjoin .lhbtn{margin-left:0}
	.lhpanel{max-width:70%}
}
/* phones: a taller viewer and a compact panel (the build's name and the technique being shown) so the build stays in view */
@media (max-width:600px){
	.lhart{aspect-ratio:4/5}
	.lhpanel{left:12px;top:12px;max-width:calc(100% - 96px);padding:9px 12px}
	.lhpanel b{font-size:17px;margin:6px 0 5px}
	.lhpanel ol{gap:0}.lhpanel li:not(.on){display:none}
	.lhcount{right:12px;top:12px}.lhopen{right:12px;bottom:28px;padding:10px 14px}
}
@media (max-width:480px){.lhtxt h1{font-size:38px}.lhnums{gap:18px}.lhtrack{height:96px;margin:6px 12px 0}.lhnode{width:56px}.lhnode b{font-size:10px}.lhnode img{width:26px;height:26px}}