/* Fit Factory HQ · Learning Center. Uses HQ's tokens (--bg, --surface, --fg, --accent, fonts).
   Game feel from a few touches only: chamfered corners, corner brackets, small HUD labels, one accent glow. */
.lc{--chamf:14px;--t-found:#ff6907;--t-studio:#7fb6ff;--t-member:#3dbe7a;--t-sales:#ffb020;--t-coach:#a597ff;--t-mkt:#ff8fb1;--t-people:#f0524f;--gold:#e8b04a}
.lc,.lc-stage{--hud:10.5px}
.lc-hud{font-size:var(--hud);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.lc .tnum,.lc-stage .tnum{font-variant-numeric:tabular-nums}
.lc-chamf{clip-path:polygon(0 0,calc(100% - var(--chamf)) 0,100% var(--chamf),100% 100%,var(--chamf) 100%,0 calc(100% - var(--chamf)))}
.lc-chamf1{clip-path:polygon(0 0,calc(100% - var(--chamf)) 0,100% var(--chamf),100% 100%,0 100%)}

/* page header + tabs */
.lc-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-top:-8px;overflow-x:auto;scrollbar-width:none}
.lc-tabs a{padding:10px 14px;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap;display:flex;gap:8px;align-items:center}
.lc-tabs a.on{color:var(--fg);border-bottom-color:var(--accent)}
.lc-tabs a:hover{color:var(--fg)}
.lc-live{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--fg-2)}
.lc-live i{width:7px;height:7px;border-radius:50%;background:var(--st-done);box-shadow:0 0 0 0 rgba(61,190,122,.6);animation:lc-pulse 1.8s infinite}

/* how it works strip */
.lc-how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--line);border:1px solid var(--line)}
.lc-how>div{background:var(--surface);padding:14px 16px;display:flex;gap:12px;align-items:flex-start;animation:lc-rise .5s var(--ease) both;animation-delay:calc(var(--i,0)*90ms)}
.lc-how b{font-family:var(--font-display);font-size:30px;font-weight:300;line-height:.9;color:var(--accent);min-width:22px}
.lc-how strong{display:block;font-size:13.5px;margin-bottom:2px}
.lc-how span{font-size:12.5px;color:var(--fg-2)}
@media (max-width:720px){.lc-how{grid-template-columns:1fr}}

/* level card (always Ink, like the sidebar) */
.lc-level{position:relative;background:#0c0a09;color:#f5f1ec;padding:22px 24px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;--chamf:22px}
.lc-level::before,.lc-level::after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--accent);pointer-events:none}
.lc-level::before{top:10px;left:10px;border-right:0;border-bottom:0}
.lc-level::after{bottom:10px;right:10px;border-left:0;border-top:0}
.lc-level .lc-hud{color:rgba(245,241,236,.55)}
.lc-level h2{font-size:clamp(28px,4vw,40px);line-height:1;margin:4px 0 10px;color:#f5f1ec}
.lc-level .meta{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:rgba(245,241,236,.72)}
.lc-level .meta b{color:#f5f1ec;font-family:var(--font-display);font-size:20px;font-weight:400;margin-right:4px}
.lc-xp{height:8px;background:rgba(245,241,236,.12);margin-top:14px;position:relative;overflow:hidden;--chamf:4px}
.lc-xp i{position:absolute;inset:0 auto 0 0;width:var(--w,0%);background:var(--accent);box-shadow:0 0 14px rgba(255,105,7,.65);animation:lc-fill 1.1s var(--ease) both .2s}
.lc-xp-l{font-size:12.5px;color:rgba(245,241,236,.72);margin-top:8px}
.lc-level .tracks{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.lc-level .side{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
@media (max-width:860px){.lc-level{grid-template-columns:auto minmax(0,1fr)}.lc-level .side{grid-column:1/-1;align-items:stretch}}
@media (max-width:480px){.lc-level{grid-template-columns:auto minmax(0,1fr);gap:16px;padding:22px 18px}.lc-level .lc-badge{--s:62px}.lc-level h2{font-size:28px}}

/* level badge */
.lc-badge{--s:88px;width:var(--s);height:calc(var(--s)*1.08);display:grid;place-items:center;position:relative;flex:none;
  clip-path:polygon(50% 0,100% 22%,100% 78%,50% 100%,0 78%,0 22%);background:var(--lv,#ff6907);color:#0c0a09;animation:lc-pop .7s var(--ease) both}
.lc-badge::after{content:"";position:absolute;inset:4px;clip-path:inherit;background:#0c0a09}
.lc-badge>span{position:relative;z-index:1;text-align:center;line-height:1;color:var(--lv,#ff6907)}
.lc-badge small{display:block;font-size:calc(var(--s)*.11);font-weight:700;letter-spacing:.14em}
.lc-badge b{display:block;font-family:var(--font-display);font-weight:400;font-size:calc(var(--s)*.46)}
.lc-badge.sm{--s:34px;animation:none}
.lc-badge.sm::after{inset:2px}
.lc-badge.sm small{display:none}
.lc-badge.md{--s:52px}

/* track chips + badges */
.lc-tb{--s:26px;width:var(--s);height:var(--s);display:inline-grid;place-items:center;background:rgba(245,241,236,.08);color:rgba(245,241,236,.38);--chamf:6px;flex:none}
.lc-tb.on{background:var(--tc);color:#0c0a09;box-shadow:0 0 12px color-mix(in srgb,var(--tc) 55%,transparent)}
.lc-tb svg{width:15px;height:15px}
.lc-board .lc-tb,.lc-team .lc-tb{background:var(--surface-2);color:var(--fg-3)}
.lc-board .lc-tb.on,.lc-team .lc-tb.on{background:var(--tc);color:#0c0a09;box-shadow:none}
.lc-tchip{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.lc-tchip i{width:10px;height:10px;background:var(--tc);flex:none}

/* course grid */
.lc-filter{display:flex;gap:6px;flex-wrap:wrap}
.lc-filter button{height:32px;padding:0 12px;border:1px solid var(--line-2);font-size:12px;font-weight:600;color:var(--fg-2);border-radius:var(--radius)}
.lc-filter button.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.lc-track{display:flex;flex-direction:column;gap:12px}
.lc-track-h{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:8px}
.lc-track-h h2{font-size:22px;font-weight:400;display:flex;align-items:center;gap:10px}
.lc-track-h h2 i{width:12px;height:12px;background:var(--tc);display:inline-block}
.lc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.lc-card{position:relative;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px;padding:18px 18px 16px;text-align:left;color:var(--fg);text-decoration:none;min-height:200px;transition:transform .35s var(--ease),border-color .2s var(--ease),box-shadow .35s var(--ease);animation:lc-rise .5s var(--ease) both;animation-delay:calc(var(--i,0)*60ms)}
.lc-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--tc)}
.lc-card:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--shadow)}
.lc-card .ic{width:44px;height:44px;display:grid;place-items:center;background:color-mix(in srgb,var(--tc) 18%,transparent);color:var(--fg);--chamf:10px}
.lc-card .ic svg{width:24px;height:24px}
.lc-card h3{font-size:21px;font-weight:400;line-height:1.05}
.lc-card p{margin:0;color:var(--fg-2);font-size:13px;line-height:1.45}
.lc-card .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--fg-3)}
.lc-card .tags{display:flex;gap:6px;flex-wrap:wrap}
.lc-tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--surface-2);color:var(--fg-2);border-radius:var(--radius)}
.lc-tag.new{background:var(--fg);color:var(--bg)}
.lc-mini{height:4px;background:var(--surface-3);position:relative;margin-top:2px}
.lc-mini i{position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--tc);animation:lc-fill .9s var(--ease) both}
.lc-stamp{position:absolute;top:14px;right:14px;width:54px;height:54px;border-radius:50%;border:2px solid var(--gold);color:var(--gold);display:grid;place-items:center;transform:rotate(-12deg);font-size:8.5px;font-weight:800;letter-spacing:.1em;text-align:center;line-height:1.1;animation:lc-stamp .6s var(--ease) both .3s}
.lc-stamp svg{width:18px;height:18px;display:block;margin:0 auto 1px}

/* course page */
.lc-back{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);text-decoration:none}
.lc-back:hover{color:var(--fg)}
.lc-back svg{width:16px;height:16px}
.lc-hero{position:relative;background:var(--surface);border:1px solid var(--line);padding:28px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center;overflow:hidden}
.lc-hero::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:var(--tc)}
.lc-hero .big{width:96px;height:96px;display:grid;place-items:center;background:color-mix(in srgb,var(--tc) 20%,transparent);--chamf:20px}
.lc-hero .big svg{width:52px;height:52px}
.lc-hero h1{font-size:clamp(30px,4.4vw,48px);line-height:1;margin:6px 0 8px}
.lc-hero p{margin:0;color:var(--fg-2);max-width:62ch}
.lc-hero .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.lc-hero .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
@media (max-width:600px){.lc-hero{grid-template-columns:1fr;padding:22px 18px}.lc-hero .big{width:72px;height:72px}.lc-hero .big svg{width:40px;height:40px}}
.lc-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 20px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--accent);color:var(--on-accent);--chamf:10px;transition:filter .2s,transform .2s var(--ease);text-decoration:none;border:0;cursor:pointer}
.lc-btn:hover{filter:brightness(1.06)}
.lc-btn:active{transform:scale(.98)}
.lc-btn:disabled{opacity:.45;cursor:default;filter:none}
.lc-btn.alt{background:var(--fg);color:var(--bg)}
.lc-btn.line{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-2)}
.lc-btn svg{width:18px;height:18px}
.lc-cols{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:980px){.lc-cols{grid-template-columns:1fr}}
.lc-panel{background:var(--surface);border:1px solid var(--line);padding:20px}
.lc-panel>.lc-hud{margin-bottom:12px;display:block}
.lc-chap{display:flex;flex-direction:column}
.lc-chap a{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 4px;border-top:1px solid var(--line);color:var(--fg);text-decoration:none}
.lc-chap a:first-child{border-top:0}
.lc-chap a:hover{background:var(--surface-2)}
.lc-chap .n{font-family:var(--font-display);font-size:26px;font-weight:300;color:var(--fg-3);text-align:center}
.lc-chap .done .n{color:var(--st-done)}
.lc-chap .t{font-weight:600}
.lc-chap .s{font-size:12px;color:var(--fg-3)}
.lc-chap svg{width:18px;height:18px}
.lc-testcard{display:flex;flex-direction:column;gap:12px}
.lc-testcard .rule{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line)}
.lc-testcard .rule>div{background:var(--surface-2);padding:12px;text-align:center}
.lc-testcard .rule b{display:block;font-family:var(--font-display);font-size:30px;font-weight:400;line-height:1}
.lc-testcard .rule span{font-size:11px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.08em}

/* leaderboard */
.lc-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end;max-width:760px;margin:0 auto;width:100%}
.lc-pod{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-width:0}
.lc-pod .lwho{display:flex;flex-direction:column;align-items:center;gap:6px;animation:lc-rise .6s var(--ease) both;animation-delay:calc(var(--i)*120ms + .4s);min-width:0;max-width:100%}
.lc-pod .nm{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.lc-pod .blk{width:100%;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--pc);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:12px;height:var(--h);transform-origin:bottom;animation:lc-grow .8s var(--ease) both;animation-delay:calc(var(--i)*120ms);--chamf:12px}
.lc-pod .blk b{font-family:var(--font-display);font-size:44px;font-weight:300;line-height:1;color:var(--fg)}
.lc-pod .blk span{font-size:11px;color:var(--fg-3);letter-spacing:.1em;text-transform:uppercase}
.lc-av{--s:44px;width:var(--s);height:var(--s);border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:calc(var(--s)*.34);color:#0c0a09;background:var(--ac,#d8d1c7);flex:none;letter-spacing:.02em}
.lc-av.lg{--s:64px;box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--pc,transparent)}
.lc-rows{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line)}
.lc-row{display:grid;grid-template-columns:44px 44px minmax(0,1.3fr) minmax(0,1fr) 120px minmax(0,1fr);gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--line);animation:lc-slide .45s var(--ease) both;animation-delay:calc(var(--i,0)*45ms)}
.lc-row:first-child{border-top:0}
.lc-row.me{background:color-mix(in srgb,var(--accent) 9%,var(--surface));box-shadow:inset 3px 0 0 var(--accent)}
.lc-row .rk{font-family:var(--font-display);font-size:26px;font-weight:300;color:var(--fg-3);text-align:center}
.lc-row .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-row .nm small{display:block;font-weight:500;color:var(--fg-3);font-size:12px}
.lc-row .lv{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;min-width:0}
.lc-row .lv span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-row .ct{font-size:12px;color:var(--fg-3)}
.lc-row .ct b{font-family:var(--font-display);font-size:22px;font-weight:400;color:var(--fg);margin-right:4px}
.lc-row .tb{display:flex;gap:4px;flex-wrap:wrap}
.lc-row .tb .lc-tb{--s:22px}
.lc-row .tb .lc-tb svg{width:13px;height:13px}
.lc-you{display:inline-block;margin-left:6px;font-size:9.5px;font-weight:800;letter-spacing:.12em;background:var(--accent);color:#0c0a09;padding:2px 5px;vertical-align:middle}
.lc-rows{container-type:inline-size}
@container (max-width:640px){.lc-row{grid-template-columns:34px 40px minmax(0,1fr) auto;row-gap:6px}.lc-row .lv{grid-column:3/-1;grid-row:2}.lc-row .ct{grid-column:4;grid-row:1;text-align:right}.lc-row .tb{grid-column:3/-1;grid-row:3}.lc-row>.lc-av{--s:36px}.lc-row .lc-bar{display:none}}
@media (max-width:1280px){.lc-board .lc-cols{grid-template-columns:1fr}}
.lc-feed{display:flex;flex-direction:column;gap:0}
.lc-feed>div{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:13px}
.lc-feed>div:first-child{border-top:0}
.lc-feed .lc-av{--s:30px}
.lc-feed .when{font-size:12px;color:var(--fg-3);white-space:nowrap}
.lc-empty{padding:40px 20px;text-align:center;color:var(--fg-2);display:flex;flex-direction:column;align-items:center;gap:12px}
.lc-empty svg{width:48px;height:48px;color:var(--fg-3)}

/* team matrix */
.lc-matrix{overflow-x:auto;background:var(--surface);border:1px solid var(--line)}
.lc-matrix table{border-collapse:collapse;min-width:100%;font-size:12.5px}
.lc-matrix th,.lc-matrix td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:center;white-space:nowrap}
.lc-matrix th:first-child,.lc-matrix td:first-child{text-align:left;position:sticky;left:0;background:var(--surface);z-index:1;padding-left:14px;min-width:170px}
.lc-matrix thead th{vertical-align:bottom;font-weight:600;color:var(--fg-2)}
.lc-matrix thead th .ch{display:flex;flex-direction:column;align-items:center;gap:6px;width:46px;margin:0 auto}
.lc-matrix thead th .ch i{width:100%;height:4px;background:var(--tc)}
.lc-matrix thead th .ch svg{width:18px;height:18px}
.lc-cell{width:30px;height:30px;display:inline-grid;place-items:center;font-size:11px;font-weight:700;--chamf:6px}
.lc-cell.c{background:var(--st-done);color:#0c0a09}
.lc-cell.p{background:var(--surface-2);color:var(--fg-2)}
.lc-cell.f{background:color-mix(in srgb,var(--st-stuck) 20%,transparent);color:var(--fg)}
.lc-cell svg{width:15px;height:15px}
.lc-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--fg-2);align-items:center}
.lc-legend span{display:inline-flex;gap:6px;align-items:center}
.lc-legend .lc-cell{width:20px;height:20px;font-size:9px}

/* certificate */
.lc-certwrap{display:flex;flex-direction:column;gap:16px;align-items:center}
.lc-cert{width:min(900px,100%);aspect-ratio:1.414;background:#f5f1ec;color:#0c0a09;position:relative;display:flex;flex-direction:column;box-shadow:var(--shadow-pop);animation:lc-certin .9s var(--ease) both;container-type:inline-size}
.lc-cert .band{background:#0c0a09;padding:4.5cqw 6cqw;display:flex;justify-content:space-between;align-items:center}
.lc-cert .band img{height:5cqw;width:auto}
.lc-cert .band span{color:rgba(245,241,236,.66);font-size:1.5cqw;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.lc-cert .body{flex:1;padding:4cqw 6cqw;display:flex;flex-direction:column;justify-content:center;gap:1.4cqw;position:relative}
.lc-cert .body::before,.lc-cert .body::after{content:"";position:absolute;width:5cqw;height:5cqw;border:.35cqw solid #ff6907}
.lc-cert .body::before{top:3cqw;right:4cqw;border-left:0;border-bottom:0}
.lc-cert .body::after{bottom:3cqw;left:4cqw;border-right:0;border-top:0}
.lc-cert .k{font-size:1.6cqw;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(12,10,9,.56)}
.lc-cert .nm{font-family:var(--font-display);font-weight:300;font-size:7.4cqw;line-height:.95;text-transform:uppercase;letter-spacing:.01em}
.lc-cert .rule{width:12cqw;height:.5cqw;background:#ff6907}
.lc-cert .course{font-family:var(--font-display);font-weight:400;font-size:4.2cqw;line-height:1;text-transform:uppercase}
.lc-cert .p{font-size:1.8cqw;color:rgba(12,10,9,.72)}
.lc-cert .foot{display:flex;justify-content:space-between;gap:3cqw;padding:0 6cqw 4cqw;font-size:1.5cqw;color:rgba(12,10,9,.64)}
.lc-cert .foot b{display:block;color:#0c0a09;font-size:1.9cqw}
.lc-cert .seal{position:absolute;right:7cqw;bottom:13cqw;width:15cqw;height:15cqw;border-radius:50%;border:.4cqw solid var(--tc,#ff6907);display:grid;place-items:center;text-align:center;transform:rotate(-10deg);color:#0c0a09;font-size:1.3cqw;font-weight:800;letter-spacing:.12em;line-height:1.2;background:color-mix(in srgb,var(--tc,#ff6907) 12%,transparent)}
.lc-cert .seal svg{width:5cqw;height:5cqw;display:block;margin:0 auto .4cqw}
.lc-certacts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ---------- full-screen stage (lessons and tests) ---------- */
.lc-stage{position:fixed;inset:0;z-index:45;background:var(--bg);color:var(--fg);display:flex;flex-direction:column;animation:lc-fade .25s var(--ease);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.lc-st-top{display:flex;align-items:center;gap:14px;padding:12px clamp(14px,3vw,28px);border-bottom:1px solid var(--line)}
.lc-x{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius);flex:none}
.lc-x:hover{background:var(--surface-2)}
.lc-x svg{width:20px;height:20px}
.lc-st-title{min-width:0;flex:1}
.lc-st-title .lc-hud{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-st-title b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-segs{display:flex;gap:3px;flex:2;max-width:560px}
.lc-segs .g{flex:var(--n);display:flex;gap:2px}
.lc-segs i{flex:1;height:6px;background:var(--surface-3);position:relative;overflow:hidden}
.lc-segs i.d{background:var(--tc)}
.lc-segs i.c{background:var(--surface-3)}
.lc-segs i.c::after{content:"";position:absolute;inset:0;background:var(--tc);animation:lc-fill .5s var(--ease) both;--w:100%}
@media (max-width:640px){.lc-segs{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 64px);padding:0 14px;max-width:none}.lc-st-top{padding-bottom:22px}}
.lc-st-body{flex:1;overflow-y:auto;padding:clamp(24px,5vh,56px) clamp(16px,4vw,40px) 40px}
.lc-screen{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.lc-screen>*{animation:lc-rise .55s var(--ease) both;animation-delay:calc(var(--i,0)*110ms)}
.lc-screen h2.st{font-size:clamp(28px,4.4vw,44px);line-height:1}
.lc-st-bot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px clamp(14px,3vw,28px);border-top:1px solid var(--line);background:var(--bg)}
.lc-st-bot .hint{font-size:12.5px;color:var(--fg-3);text-align:center;flex:1}
.lc-st-bot .lc-btn{min-width:150px}
@media (max-width:480px){.lc-st-bot .lc-btn{min-width:0;padding:0 16px}.lc-st-bot .hint{font-size:11.5px}}

/* blocks */
.lc-txt{font-size:17px;line-height:1.6;color:var(--fg-2);margin:0;max-width:64ch}
.lc-txt b{color:var(--fg)}
.lc-intro{display:flex;flex-direction:column;gap:14px;align-items:flex-start;padding:10px 0}
.lc-intro .art{width:120px;height:120px;display:grid;place-items:center;background:color-mix(in srgb,var(--tc) 16%,transparent);position:relative;--chamf:24px}
.lc-intro .art::after{content:"";position:absolute;inset:-10px;border:1px solid color-mix(in srgb,var(--tc) 50%,transparent);clip-path:polygon(0 0,30% 0,30% 2px,2px 2px,2px 30%,0 30%,0 0,100% 70%,100% 100%,70% 100%,70% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 70%,100% 70%)}
.lc-intro .art svg{width:64px;height:64px}
.lc-intro h2{font-size:clamp(36px,6vw,64px);line-height:.95}
.lc-intro p{font-size:18px;line-height:1.55;color:var(--fg-2);margin:0;max-width:56ch}
.lc-draw path,.lc-draw circle,.lc-draw rect,.lc-draw line,.lc-draw polyline,.lc-draw ellipse{stroke-dasharray:1;stroke-dashoffset:1;animation:lc-draw 1.2s var(--ease) forwards .15s}
.lc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;background:var(--line);border:1px solid var(--line)}
.lc-stat{background:var(--surface);padding:18px 18px 16px;display:flex;flex-direction:column;gap:4px;animation:lc-rise .5s var(--ease) both;animation-delay:calc(var(--i)*120ms + .1s);position:relative}
.lc-stat::before{content:"";position:absolute;left:0;top:0;width:28px;height:3px;background:var(--tc)}
.lc-stat b{font-family:var(--font-display);font-size:clamp(34px,5vw,48px);font-weight:400;line-height:1}
.lc-stat span{font-weight:600;font-size:14px}
.lc-stat small{color:var(--fg-3);font-size:12.5px;line-height:1.4}
.lc-flow{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:0;counter-reset:f}
.lc-flow>div{position:relative;padding:0 12px 0 0;animation:lc-rise .5s var(--ease) both;animation-delay:calc(var(--i)*180ms + .1s)}
.lc-flow .dot{width:44px;height:44px;display:grid;place-items:center;background:var(--tc);color:#0c0a09;font-family:var(--font-display);font-size:22px;font-weight:500;position:relative;z-index:1;--chamf:10px}
.lc-flow>div::before{content:"";position:absolute;left:44px;right:0;top:21px;height:2px;background:var(--line-2);transform-origin:left;animation:lc-line .5s var(--ease) both;animation-delay:calc(var(--i)*180ms + .3s)}
.lc-flow>div:last-child::before{display:none}
.lc-flow h4{margin:12px 0 4px;font-size:15px}
.lc-flow p{margin:0;font-size:13px;color:var(--fg-2);line-height:1.45}
@media (max-width:720px){.lc-flow{grid-template-columns:1fr;gap:14px}.lc-flow>div{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;padding:0}.lc-flow>div::before{left:21px;top:44px;bottom:-14px;right:auto;width:2px;height:auto;transform-origin:top}.lc-flow h4{margin:2px 0 2px}.lc-flow .dot{grid-row:1/3}}
.lc-flips{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.lc-flip{perspective:900px;min-height:150px;text-align:left;animation:lc-rise .5s var(--ease) both;animation-delay:calc(var(--i)*90ms)}
.lc-flip .in{position:relative;width:100%;height:100%;min-height:150px;transition:transform .6s var(--ease);transform-style:preserve-3d}
.lc-flip.on .in{transform:rotateY(180deg)}
.lc-flip .f,.lc-flip .b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:16px;display:flex;flex-direction:column;gap:8px;--chamf:12px}
.lc-flip .f{background:var(--surface);border:1px solid var(--line-2);justify-content:space-between}
.lc-flip .f strong{font-family:var(--font-display);font-size:24px;font-weight:400;text-transform:uppercase;line-height:1.05}
.lc-flip .f .lc-hud{display:flex;gap:6px;align-items:center}
.lc-flip .f .lc-hud svg{width:14px;height:14px}
.lc-flip .b{background:var(--tc);color:#0c0a09;transform:rotateY(180deg);font-size:14.5px;line-height:1.45;justify-content:center}
.lc-flip .b b{font-weight:700}
.lc-reveal{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.lc-rv{background:var(--surface);border:1px solid var(--line-2);padding:14px;text-align:left;display:flex;flex-direction:column;gap:6px;min-height:84px;transition:background .25s,border-color .25s;animation:lc-rise .5s var(--ease) both;animation-delay:calc(var(--i)*70ms)}
.lc-rv:hover{border-color:var(--fg-3)}
.lc-rv .h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:700;font-size:14px}
.lc-rv .h svg{width:18px;height:18px;flex:none;color:var(--fg-3);transition:transform .3s var(--ease)}
.lc-rv.seen{border-color:color-mix(in srgb,var(--tc) 70%,transparent);background:color-mix(in srgb,var(--tc) 9%,var(--surface))}
.lc-rv.on .h svg{transform:rotate(45deg)}
.lc-rvd{background:var(--surface-2);border-left:4px solid var(--tc);padding:16px 18px;animation:lc-rise .35s var(--ease) both}
.lc-rvd h4{margin:0 0 8px;font-family:var(--font-display);font-size:22px;font-weight:400;text-transform:uppercase}
.lc-rvd ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px;font-size:14.5px;line-height:1.5;color:var(--fg-2)}
.lc-rvd p{margin:0;font-size:14.5px;line-height:1.5;color:var(--fg-2)}
.lc-cl{display:flex;flex-direction:column;gap:0;background:var(--surface);border:1px solid var(--line)}
.lc-cl-h{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line)}
.lc-cl-h strong{font-family:var(--font-display);font-size:22px;font-weight:400;text-transform:uppercase;flex:1}
.lc-ring{--p:0;width:44px;height:44px;border-radius:50%;background:conic-gradient(var(--tc) calc(var(--p)*1%),var(--surface-3) 0);display:grid;place-items:center;transition:--p .4s;flex:none}
.lc-ring span{width:34px;height:34px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-size:11px;font-weight:700}
.lc-cl button{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:center;text-align:left;padding:12px 16px;border-top:1px solid var(--line);font-size:15px;line-height:1.4;animation:lc-rise .4s var(--ease) both;animation-delay:calc(var(--i)*60ms)}
.lc-cl button:first-of-type{border-top:0}
.lc-cl button:hover{background:var(--surface-2)}
.lc-cl .bx{width:26px;height:26px;border:2px solid var(--line-2);display:grid;place-items:center;transition:background .2s,border-color .2s;--chamf:5px}
.lc-cl .bx svg{width:16px;height:16px;opacity:0;transform:scale(.4);transition:opacity .2s,transform .3s var(--ease)}
.lc-cl button.on .bx{background:var(--tc);border-color:var(--tc);color:#0c0a09}
.lc-cl button.on .bx svg{opacity:1;transform:none}
.lc-cl button.on span:last-child{color:var(--fg-2)}
.lc-dd{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lc-dd>div{background:var(--surface);border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:10px}
.lc-dd h4{margin:0;display:flex;gap:8px;align-items:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.lc-dd h4 i{width:24px;height:24px;display:grid;place-items:center;color:#0c0a09;--chamf:5px}
.lc-dd h4 i svg{width:15px;height:15px}
.lc-dd .y h4 i{background:var(--st-done)}
.lc-dd .n h4 i{background:var(--st-stuck)}
.lc-dd .y{border-top:3px solid var(--st-done)}
.lc-dd .n{border-top:3px solid var(--st-stuck)}
.lc-dd li{font-size:14.5px;line-height:1.45;animation:lc-slide .4s var(--ease) both;animation-delay:calc(var(--i)*80ms + .2s)}
.lc-dd ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
@media (max-width:640px){.lc-dd{grid-template-columns:1fr}}
.lc-tl{display:flex;flex-direction:column;position:relative;padding-left:28px}
.lc-tl::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line-2);transform-origin:top;animation:lc-vline .9s var(--ease) both}
.lc-tl>div{position:relative;padding:0 0 18px;animation:lc-slide .45s var(--ease) both;animation-delay:calc(var(--i)*150ms + .2s)}
.lc-tl>div::before{content:"";position:absolute;left:-25px;top:4px;width:12px;height:12px;background:var(--tc);transform:rotate(45deg)}
.lc-tl .w{font-family:var(--font-display);font-size:20px;font-weight:500;text-transform:uppercase;line-height:1}
.lc-tl h4{margin:4px 0 2px;font-size:15px}
.lc-tl p{margin:0;font-size:14px;color:var(--fg-2);line-height:1.45}
.lc-ladder{display:flex;flex-direction:column;gap:8px}
.lc-ladder>div{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);padding:12px 14px;margin-left:calc(var(--i)*18px);animation:lc-slide .45s var(--ease) both;animation-delay:calc(var(--i)*170ms + .15s)}
.lc-ladder .st{font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:var(--tc);color:#0c0a09;height:44px;display:grid;place-items:center;text-align:center;line-height:1;--chamf:8px}
.lc-ladder p{margin:0;font-size:14.5px;line-height:1.45}
.lc-ladder .lwho{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--surface-2);padding:5px 8px;white-space:nowrap}
@media (max-width:560px){.lc-ladder>div{grid-template-columns:44px minmax(0,1fr);margin-left:calc(var(--i)*8px)}.lc-ladder .lwho{grid-column:2;justify-self:start}}
.lc-chat{display:flex;flex-direction:column;gap:10px;background:var(--surface-2);padding:18px;border:1px solid var(--line)}
.lc-bub{max-width:min(520px,86%);padding:11px 14px;font-size:14.5px;line-height:1.45;animation:lc-bub .45s var(--ease) both;animation-delay:calc(var(--i)*700ms + .2s);position:relative}
.lc-bub small{display:block;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:3px;opacity:.7}
.lc-bub.them{background:var(--surface);border:1px solid var(--line);align-self:flex-start;border-radius:2px 12px 12px 12px}
.lc-bub.us{background:var(--fg);color:var(--bg);align-self:flex-end;border-radius:12px 2px 12px 12px}
.lc-script{position:relative;background:var(--surface);border:1px solid var(--line);padding:18px 20px 18px 56px;font-size:16.5px;line-height:1.55}
.lc-script::before{content:"\201C";position:absolute;left:16px;top:6px;font-family:var(--font-display);font-size:64px;line-height:1;color:var(--tc)}
.lc-script .lc-hud{display:block;margin-bottom:6px}
.lc-call{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;padding:16px 18px;background:color-mix(in srgb,var(--tc) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--tc) 40%,transparent)}
.lc-call.warn{background:color-mix(in srgb,var(--st-stuck) 10%,var(--surface));border-color:color-mix(in srgb,var(--st-stuck) 40%,transparent)}
.lc-call .i{width:34px;height:34px;display:grid;place-items:center;background:var(--tc);color:#0c0a09;--chamf:7px}
.lc-call.warn .i{background:var(--st-stuck)}
.lc-call .i svg{width:18px;height:18px}
.lc-call strong{display:block;margin-bottom:2px;font-size:15px}
.lc-call p{margin:0;font-size:14.5px;line-height:1.5;color:var(--fg-2)}
.lc-tbl{overflow-x:auto;border:1px solid var(--line);background:var(--surface)}
.lc-tbl table{width:100%;border-collapse:collapse;font-size:14px}
.lc-tbl th{text-align:left;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);padding:10px 14px;border-bottom:1px solid var(--line-2);background:var(--surface-2)}
.lc-tbl td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45}
.lc-tbl tr:last-child td{border-bottom:0}
.lc-tbl td:first-child{font-weight:600}
.lc-tbl tbody tr{animation:lc-rise .4s var(--ease) both;animation-delay:calc(var(--i)*60ms)}
/* practice */
.lc-prac{background:var(--surface);border:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:14px;position:relative}
.lc-prac::before{content:"";position:absolute;top:-1px;left:-1px;width:18px;height:18px;border-top:2px solid var(--accent);border-left:2px solid var(--accent)}
.lc-prac>.lc-hud{display:flex;gap:8px;align-items:center;color:var(--fg-2)}
.lc-prac>.lc-hud svg{width:14px;height:14px;color:var(--accent)}
.lc-prac .q{font-size:18px;font-weight:600;line-height:1.4;margin:0}
.lc-opts{display:flex;flex-direction:column;gap:8px}
.lc-opt{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:center;text-align:left;padding:12px 14px;border:1px solid var(--line-2);background:var(--bg);font-size:15px;line-height:1.4;transition:border-color .2s,background .2s,transform .2s var(--ease);min-height:52px}
.lc-opt:hover:not(:disabled){border-color:var(--fg-3)}
.lc-opt .k{width:30px;height:30px;display:grid;place-items:center;background:var(--surface-2);font-weight:800;font-size:12px;--chamf:6px}
.lc-opt.sel{border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.lc-opt.sel .k{background:var(--fg);color:var(--bg)}
.lc-opt.ok{border-color:var(--st-done);background:color-mix(in srgb,var(--st-done) 12%,var(--bg))}
.lc-opt.ok .k{background:var(--st-done);color:#0c0a09}
.lc-opt.no{border-color:var(--st-stuck);background:color-mix(in srgb,var(--st-stuck) 9%,var(--bg));animation:lc-shake .4s}
.lc-opt.no .k{background:var(--st-stuck);color:#0c0a09}
.lc-opt:disabled{cursor:default}
.lc-why{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;font-size:14.5px;line-height:1.5;padding:12px 14px;animation:lc-rise .35s var(--ease) both}
.lc-why.ok{background:color-mix(in srgb,var(--st-done) 12%,transparent)}
.lc-why.no{background:color-mix(in srgb,var(--st-stuck) 10%,transparent)}
.lc-why svg{width:20px;height:20px}
.lc-ord{display:flex;flex-direction:column;gap:8px}
.lc-ord .done{display:flex;flex-direction:column;gap:6px}
.lc-ord .done>div{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:center;padding:10px 14px;background:color-mix(in srgb,var(--tc) 14%,var(--bg));font-size:15px;animation:lc-pop .4s var(--ease) both}
.lc-ord .done b{width:30px;height:30px;display:grid;place-items:center;background:var(--tc);color:#0c0a09;font-family:var(--font-display);font-size:18px;--chamf:6px}
.lc-ord .left{display:flex;flex-direction:column;gap:8px}
.lc-ord .left button{text-align:left;padding:12px 14px;border:1px dashed var(--line-2);font-size:15px;background:var(--bg);transition:border-color .2s}
.lc-ord .left button:hover{border-color:var(--fg-3);border-style:solid}
.lc-ord .left button.no{animation:lc-shake .4s;border-color:var(--st-stuck)}
.lc-match{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lc-match .col{display:flex;flex-direction:column;gap:8px}
.lc-match button{text-align:left;padding:12px 14px;border:1px solid var(--line-2);background:var(--bg);font-size:14.5px;line-height:1.35;min-height:52px;transition:border-color .2s,background .2s,opacity .3s}
.lc-match button.sel{border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.lc-match button.ok{background:color-mix(in srgb,var(--st-done) 14%,var(--bg));border-color:var(--st-done);cursor:default}
.lc-match button.no{animation:lc-shake .4s;border-color:var(--st-stuck)}
.lc-match button .pn{display:inline-grid;place-items:center;width:20px;height:20px;background:var(--st-done);color:#0c0a09;font-size:11px;font-weight:800;margin-right:8px;vertical-align:-4px}
@media (max-width:560px){.lc-match button{font-size:13.5px;padding:10px}}
.lc-scn .says{display:flex;gap:10px;align-items:flex-start}
.lc-scn .says .lc-av{--s:36px}
.lc-gauge{display:grid;grid-template-columns:120px minmax(0,1fr);gap:22px;align-items:center;background:var(--surface);border:1px solid var(--line);padding:20px}
.lc-gauge .bin{width:110px;height:150px;border:3px solid var(--fg);border-top:0;position:relative;overflow:hidden;--chamf:10px;clip-path:polygon(0 0,100% 0,96% 100%,4% 100%)}
.lc-gauge .bin i{position:absolute;left:0;right:0;bottom:0;height:var(--v);background:var(--tc);animation:lc-up 1.6s var(--ease) both .3s;transform-origin:bottom}
.lc-gauge .bin u{position:absolute;left:-3px;right:-3px;bottom:var(--m);border-top:2px dashed var(--fg);text-decoration:none}
.lc-gauge .bin u span{position:absolute;right:4px;bottom:3px;font-size:10px;font-weight:800;letter-spacing:.08em;background:var(--fg);color:var(--bg);padding:1px 4px}
.lc-gauge strong{font-family:var(--font-display);font-size:30px;font-weight:400;text-transform:uppercase;line-height:1;display:block;margin-bottom:6px}
.lc-gauge p{margin:0;color:var(--fg-2);font-size:14.5px;line-height:1.5}
.lc-day{background:var(--surface);border:1px solid var(--line);padding:18px 18px 12px}
.lc-day .track{position:relative;height:46px;background:var(--surface-2);margin:26px 0 8px}
.lc-day .win{position:absolute;top:0;bottom:0;left:var(--l);width:var(--w);background:var(--tc);display:grid;place-items:center;font-size:11px;font-weight:800;color:#0c0a09;letter-spacing:.04em;text-align:center;line-height:1.1;transform-origin:left;animation:lc-grow-x .7s var(--ease) both;animation-delay:calc(var(--i)*200ms + .2s);overflow:hidden;padding:0 4px}
.lc-day .win em{position:absolute;bottom:calc(100% + 6px);left:0;font-style:normal;font-size:11px;font-weight:700;color:var(--fg);white-space:nowrap}
.lc-day .ticks{position:relative;height:18px;font-size:10.5px;color:var(--fg-3)}
.lc-day .ticks span{position:absolute;transform:translateX(-50%);left:var(--l)}
.lc-day .dnote{font-size:13.5px;color:var(--fg-2);margin-top:8px}
.lc-sizes{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;background:var(--surface);border:1px solid var(--line);padding:20px}
.lc-sz{display:flex;flex-direction:column;gap:8px;align-items:flex-start;animation:lc-rise .5s var(--ease) both;animation-delay:calc(var(--i)*100ms)}
.lc-sz .fr{width:calc(var(--w)*1px);height:calc(var(--h)*1px);border:2px solid var(--fg);background:color-mix(in srgb,var(--tc) 18%,transparent);display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--fg-2);position:relative}
.lc-sz .fr::after{content:"";position:absolute;inset:6px;border:1px dashed color-mix(in srgb,var(--fg) 25%,transparent)}
.lc-sz b{font-size:13px}
.lc-sz small{font-size:12px;color:var(--fg-3);max-width:170px;line-height:1.35}
.lc-org{display:flex;flex-direction:column;align-items:center;gap:0}
.lc-org .node{background:var(--surface);border:1px solid var(--line-2);border-top:4px solid var(--tc);padding:12px 14px;text-align:center;min-width:150px;animation:lc-pop .5s var(--ease) both;animation-delay:calc(var(--i,0)*120ms)}
.lc-org .node b{display:block;font-family:var(--font-display);font-size:19px;font-weight:400;text-transform:uppercase;line-height:1.05}
.lc-org .node span{font-size:12.5px;color:var(--fg-2);display:block;margin-top:3px}
.lc-org .node small{display:block;font-size:11.5px;color:var(--fg-3);margin-top:4px;line-height:1.35}
.lc-org .root{background:#0c0a09;color:#f5f1ec;border-color:#0c0a09;border-top-color:var(--accent)}
.lc-org .root span{color:rgba(245,241,236,.72)}
.lc-org .stem{width:2px;height:22px;background:var(--line-2)}
.lc-org .kids{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:12px;width:100%;position:relative;padding-top:22px}
.lc-org .kids::before{content:"";position:absolute;top:0;left:calc(100%/var(--n)/2);right:calc(100%/var(--n)/2);height:2px;background:var(--line-2)}
.lc-org .kid{display:flex;flex-direction:column;align-items:center;position:relative}
.lc-org .kid::before{content:"";position:absolute;top:-22px;width:2px;height:22px;background:var(--line-2)}
.lc-org .kid .node{width:100%}
.lc-org .kid .sub{margin-top:10px;font-size:12px;color:var(--fg-2);text-align:center;background:var(--surface-2);padding:8px 10px;width:100%}
@media (max-width:640px){.lc-org .kids{grid-template-columns:1fr;padding-top:10px}.lc-org .kids::before,.lc-org .kid::before{display:none}.lc-org .stem{height:10px}}
/* towel */
.lc-towel{background:var(--surface);border:1px solid var(--line);padding:18px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;align-items:center}
.lc-towel>svg{width:100%;height:auto;display:block}
.lc-towel .ctl svg{width:18px;height:18px}
.lc-towel .ctl .lc-btn{padding:0 14px}
.lc-towel .fr{transition:opacity .45s var(--ease),transform .6s var(--ease);opacity:0;transform:translateY(8px) scale(.98);transform-origin:center}
.lc-towel .fr.on{opacity:1;transform:none}
.lc-towel .steps{display:flex;flex-direction:column;gap:6px;counter-reset:t}
.lc-towel .steps div{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:center;font-size:14px;color:var(--fg-3);padding:6px 0;transition:color .3s}
.lc-towel .steps div b{width:26px;height:26px;display:grid;place-items:center;background:var(--surface-2);font-size:12px;--chamf:5px;transition:background .3s}
.lc-towel .steps div.on{color:var(--fg);font-weight:600}
.lc-towel .steps div.on b,.lc-towel .steps div.past b{background:var(--tc);color:#0c0a09}
.lc-towel .steps div.past{color:var(--fg-2)}
.lc-towel .ctl{display:flex;gap:8px;margin-top:10px}
@media (max-width:640px){.lc-towel{grid-template-columns:1fr}}

/* test */
.lc-q{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.lc-q .num{font-family:var(--font-display);font-size:64px;font-weight:300;line-height:.9;color:var(--tc)}
.lc-q h2{font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:clamp(20px,2.6vw,26px);font-weight:600;line-height:1.35}
.lc-q .lc-opt{font-size:16px;min-height:60px}
.lc-dots{display:flex;gap:5px;flex-wrap:wrap}
.lc-dots button{width:26px;height:26px;font-size:11px;font-weight:700;background:var(--surface-2);color:var(--fg-3);--chamf:5px}
.lc-dots button.a{background:var(--fg-3);color:var(--bg)}
.lc-dots button.cur{background:var(--tc);color:#0c0a09}
.lc-result{max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.lc-score{--p:0;width:170px;height:170px;border-radius:50%;background:conic-gradient(var(--sc) calc(var(--p)*1%),var(--surface-3) 0);display:grid;place-items:center;animation:lc-pop .6s var(--ease) both}
.lc-score>div{width:138px;height:138px;border-radius:50%;background:var(--bg);display:grid;place-items:center;align-content:center}
.lc-score b{font-family:var(--font-display);font-size:56px;font-weight:300;line-height:1}
.lc-score span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.lc-result h2{font-size:clamp(34px,5vw,56px);line-height:1}
.lc-result p{margin:0;color:var(--fg-2);font-size:16px;max-width:52ch;line-height:1.5}
.lc-miss{width:100%;text-align:left;display:flex;flex-direction:column;gap:8px}
.lc-miss a{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;background:var(--surface);border:1px solid var(--line);color:var(--fg);text-decoration:none;font-size:14.5px}
.lc-miss a:hover{border-color:var(--fg-3)}
.lc-miss a i{width:34px;height:34px;display:grid;place-items:center;background:color-mix(in srgb,var(--st-stuck) 18%,transparent);--chamf:6px;font-style:normal;font-weight:800}
.lc-miss svg{width:16px;height:16px}
.lc-levelup{background:#0c0a09;color:#f5f1ec;padding:18px 22px;display:flex;align-items:center;gap:18px;text-align:left;width:100%;position:relative;animation:lc-pop .7s var(--ease) both 1.2s;--chamf:16px}
.lc-levelup .lc-hud{color:var(--accent)}
.lc-levelup h3{font-size:30px;font-weight:400;line-height:1;margin:2px 0}
.lc-levelup p{color:rgba(245,241,236,.72);font-size:14px;margin:0}
.lc-confetti{position:fixed;inset:0;pointer-events:none;z-index:46;overflow:hidden}
.lc-confetti i{position:absolute;top:-20px;width:9px;height:14px;background:var(--c);left:var(--x);animation:lc-fall var(--d) cubic-bezier(.25,.6,.4,1) both;animation-delay:var(--dl);transform:rotate(var(--r))}
.lc-center{display:grid;place-items:center;min-height:50vh;text-align:center;gap:12px;color:var(--fg-2)}
.lc-spin{width:30px;height:30px;border:2px solid var(--line-2);border-top-color:var(--accent);border-radius:50%;animation:sp 1s linear infinite}

/* chapter complete */
.lc-cc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:6vh 0}
.lc-cc .ok{width:110px;height:110px;display:grid;place-items:center;background:var(--tc);color:#0c0a09;--chamf:24px;animation:lc-pop .6s var(--ease) both}
.lc-cc .ok svg{width:56px;height:56px}
.lc-cc h2{font-size:clamp(34px,5vw,54px);line-height:1}
.lc-cc p{margin:0;color:var(--fg-2);font-size:16px;max-width:48ch}

@keyframes lc-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes lc-slide{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes lc-fade{from{opacity:0}to{opacity:1}}
@keyframes lc-pop{0%{opacity:0;transform:scale(.86)}60%{opacity:1;transform:scale(1.04)}100%{transform:none}}
@keyframes lc-fill{from{width:0}to{width:var(--w)}}
@keyframes lc-grow{from{transform:scaleY(0)}to{transform:none}}
@keyframes lc-grow-x{from{transform:scaleX(0)}to{transform:none}}
@keyframes lc-up{from{transform:scaleY(0)}to{transform:none}}
@keyframes lc-line{from{transform:scaleX(0)}to{transform:none}}
@keyframes lc-vline{from{transform:scaleY(0)}to{transform:none}}
@keyframes lc-draw{to{stroke-dashoffset:0}}
@keyframes lc-bub{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes lc-shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes lc-stamp{0%{opacity:0;transform:rotate(-12deg) scale(1.8)}100%{opacity:1;transform:rotate(-12deg) scale(1)}}
@keyframes lc-certin{from{opacity:0;transform:perspective(1200px) rotateX(18deg) translateY(30px)}to{opacity:1;transform:none}}
@keyframes lc-fall{0%{transform:translateY(0) rotate(var(--r));opacity:1}100%{transform:translateY(110vh) rotate(calc(var(--r) + 720deg));opacity:.9}}
@keyframes lc-pulse{0%{box-shadow:0 0 0 0 rgba(61,190,122,.55)}70%{box-shadow:0 0 0 8px rgba(61,190,122,0)}100%{box-shadow:0 0 0 0 rgba(61,190,122,0)}}
@media (prefers-reduced-motion:reduce){.lc *,.lc-stage *,.lc-stage,.lc-confetti{animation:none!important;transition:none!important}.lc-draw path,.lc-draw circle,.lc-draw rect,.lc-draw line,.lc-draw polyline,.lc-draw ellipse{stroke-dashoffset:0}.lc-confetti{display:none}}

/* print: only the certificate */
@media print{
  @page{size:landscape;margin:0}
  body.lc-printing>*:not(.lc-printarea){display:none!important}
  .lc-printarea{display:block!important;position:static}
  .lc-printarea .lc-cert{width:100%;box-shadow:none;animation:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.lc-printarea{display:none}

/* small fixes */
.lc .chip svg,.lc-stage .chip svg{width:13px;height:13px;flex:none}
.lc-tag svg{width:12px;height:12px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lc-level{background:linear-gradient(135deg,#221f1c,#151311)}}
:root[data-theme="dark"] .lc-level{background:linear-gradient(135deg,#221f1c,#151311)}
.lc-st-body{display:flex;flex-direction:column}
.lc-screen{width:100%}
.lc-screen.solo,.lc-st-body>.lc-cc,.lc-st-body>.lc-center{margin-block:auto}
.lc-cert{text-align:left}
.lc-cert .body>*{max-width:72%}
.lc-cert .body>.nm{max-width:80%}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lc-levelup{background:linear-gradient(135deg,#221f1c,#151311)}}
:root[data-theme="dark"] .lc-levelup{background:linear-gradient(135deg,#221f1c,#151311)}
.lc-day .win{overflow:visible;white-space:nowrap}
.lc-day .track{margin-top:30px}

.lc-btn.line{clip-path:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lc-org .root{background:#2a2622;border-color:#2a2622}}
:root[data-theme="dark"] .lc-org .root{background:#2a2622;border-color:#2a2622}

/* flip cards: both faces share one grid cell, so the card sizes to its longest face (absolute faces gave the button no width) */
.lc-flip{display:block;width:100%;min-height:0}
.lc-flip .in{display:grid;height:auto;min-height:150px}
.lc-flip .f,.lc-flip .b{position:relative;inset:auto;grid-area:1/1;min-height:150px}
/* every tappable tile fills its column */
.lc-rv,.lc-opt,.lc-cl button,.lc-match button,.lc-ord .left button{width:100%}

/* ---------- ranks (sprite in lc.js; works anywhere in HQ, including the top bar) ----------
   Performance: badges are <use> references to one inline sprite; static drop-shadows only on ranks 6–8;
   the Legend aura animates opacity/transform only (compositor), and only on medium and large badges. */
.lc-rank{--w:30px;width:var(--w);height:calc(var(--w) * .9167);display:inline-block;position:relative;flex:none;vertical-align:middle;line-height:0}
.lc-rank svg{width:100%;height:100%;display:block;position:relative;overflow:visible}
.lc-rank.xs{--w:22px}.lc-rank.sm{--w:32px}.lc-rank.md{--w:58px}.lc-rank.lg{--w:124px}
.lc-rank.r6 svg{filter:drop-shadow(0 0 3px rgba(77,139,255,.5))}
.lc-rank.r7 svg{filter:drop-shadow(0 0 4px rgba(168,85,247,.6))}
.lc-rank.r8 svg{filter:drop-shadow(0 0 4px rgba(255,150,40,.9))}
.lc-rank.r8.md::before,.lc-rank.r8.lg::before{content:"";position:absolute;inset:-26%;border-radius:50%;background:radial-gradient(circle,rgba(255,180,60,.6) 0%,rgba(255,90,0,.25) 42%,transparent 70%);animation:lc-aura 2.4s ease-in-out infinite alternate}
@keyframes lc-aura{from{opacity:.5;transform:scale(.9)}to{opacity:1;transform:scale(1.06)}}
.lc-rank.locked{filter:grayscale(1);opacity:.32}
.lc-rank.locked svg{filter:none}

@media (prefers-reduced-motion:reduce){.lc-rank::before{animation:none!important;opacity:.85}}
/* level card */
.lc-level .lc-rank.lg{margin:-6px 4px -6px -2px}
.lc-next{display:inline-flex;align-items:center;gap:8px}
@media (max-width:480px){.lc-level .lc-rank.lg{--w:78px;margin:0}}
/* leaderboard */
.lc-row .nmline{display:flex;align-items:center;gap:6px;min-width:0}
.lc-row .nmline>:first-child{overflow:hidden;text-overflow:ellipsis}
.lc-row .lv{flex-direction:column;align-items:flex-start;gap:0;font-family:var(--font-display);font-size:18px;font-weight:400;text-transform:uppercase;letter-spacing:.03em;line-height:1.05}
.lc-row .lv small{font-family:var(--font-body);font-size:10.5px;letter-spacing:.12em;color:var(--fg-3)}
.lc-pod .pod-lv{font-family:var(--font-display);font-size:15px;text-transform:uppercase;letter-spacing:.04em}
.lc-ladderx{display:flex;flex-direction:column;gap:2px}
.lc-ladderx>div{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 8px;font-size:13px}
.lc-ladderx>div.mine{background:color-mix(in srgb,var(--accent) 10%,transparent);box-shadow:inset 3px 0 0 var(--accent)}
.lc-ladderx>div.locked{color:var(--fg-3)}
.lc-ladderx b{font-family:var(--font-display);font-size:17px;font-weight:400;text-transform:uppercase;letter-spacing:.03em;display:block;line-height:1}
.lc-ladderx small{font-size:10.5px;color:var(--fg-3);letter-spacing:.06em}
.lc-rank.inbar{--w:26px;margin-left:4px}
#meChip .lc-rank,.who .lc-rank{overflow:visible}
/* rank names: tier colour on dark only (silver/gold/orange text fails contrast on light, and orange is never text on light) */
.lc-row .lv,.lc-pod .pod-lv,.lc-ladderx b{color:var(--fg)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lc-row .lv,:root:not([data-theme="light"]) .lc-pod .pod-lv,:root:not([data-theme="light"]) .lc-ladderx b{color:var(--rc,var(--fg))}}
:root[data-theme="dark"] .lc-row .lv,:root[data-theme="dark"] .lc-pod .pod-lv,:root[data-theme="dark"] .lc-ladderx b{color:var(--rc,var(--fg))}