/* Learn library (/learn) and the Beginner Guide (/learn/beginner-guide) */
@font-face{font-family:'SL Inter';src:url('/assets/fonts/PlusJakartaSans-latin-ext.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02D9,U+02DB,U+02DD-02FF,U+0309-0328,U+032A-1FFF,U+2070-20AB,U+20AD-2115,U+2117-2121,U+2123-2152,U+215F-218F,U+219A-21BA,U+21BC-2211,U+2213-2214,U+2216-2247,U+2249-225F,U+2261-2263,U+2266-25B1,U+25B3,U+25B5,U+25B7,U+25B9-25BB,U+25BD,U+25BF,U+25C1,U+25C3-25CA,U+25CC-25CE,U+25D0-2604,U+2607-2712,U+2714,U+2716,U+2718-FEFE,U+FF00-FFFC,U+FFFE-10FFFF}@font-face{font-family:'SL Inter';src:url('/assets/fonts/PlusJakartaSans-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+21BB,U+2212,U+2215,U+2248,U+2260,U+2264,U+2265,U+2022,U+2026,U+2116,U+2153-215E,U+2713,U+2715,U+2717,U+2605,U+2606,U+25B2,U+25B4,U+25B6,U+25B8,U+25BC,U+25BE,U+25C0,U+25C2,U+25CF,U+25CB,U+FEFF,U+FFFD}
:root {color-scheme:dark}
* {box-sizing:border-box}
body.learn-page {margin:0;background:#0B0A10;color:#f4f4f5;font:16px/1.6 'SL Inter',Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}
.sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.learn-main {width:min(100% - 48px,1240px);margin:0 auto;padding:52px 0 96px}
.learn-hero {max-width:760px;margin-bottom:38px}
.learn-kicker {display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border:1px solid rgb(255 255 255/.08);border-radius:999px;color:#bbbbc1;font-size:12px;font-weight:650;letter-spacing:.09em;text-transform:uppercase}
.learn-kicker::before {content:'';width:6px;height:6px;border-radius:50%;background:#7B5CFF}
.learn-hero h1 {margin:18px 0 12px;font-size:clamp(34px,5vw,56px);line-height:1.04;letter-spacing:-.035em}
.learn-hero p {margin:0;color:#bbbbc1;font-size:18px}
.learn-controls {display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,380px);align-items:center;gap:14px 16px;margin-bottom:16px;scroll-margin-top:96px}
.learn-tabs {display:flex;flex-wrap:wrap;gap:6px}
.learn-tabs button {display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border:1px solid rgb(255 255 255/.1);border-radius:999px;background:transparent;color:#bbbbc1;font-family:inherit;font-size:14px;font-weight:600;line-height:1;cursor:pointer}
.learn-tabs button span {color:#757582;font-weight:600;font-size:12px}
.learn-tabs button:hover {border-color:rgb(255 255 255/.2);color:#f4f4f5}
.learn-tabs button[aria-pressed=true] {border-color:#7B5CFF;background:#7B5CFF;color:#ffffff}
.learn-tabs button[aria-pressed=true] span {color:rgb(255 255 255/.7)}
.learn-search {display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border:1px solid rgb(255 255 255/.1);border-radius:12px;background:#101013}
.learn-search:focus-within {border-color:rgb(124 77 255/.5)}
.learn-search svg {flex:none;width:17px;height:17px;fill:none;stroke:#7e7e8a;stroke-width:2;stroke-linecap:round}
.learn-search input {flex:1;min-width:0;height:100%;border:0;background:none;color:#f4f4f5;font-family:inherit;font-size:15px;font-weight:500;outline:none}
.learn-search input::placeholder {color:#757582}
.learn-count {margin:0 0 20px;color:#7e7e8a;font-size:13.5px}
.learn-empty {padding:26px;border:1px dashed rgb(255 255 255/.12);border-radius:16px;color:#7e7e8a;text-align:center}
:where(button, input, a):focus-visible {outline:2px solid #7B5CFF;outline-offset:2px}
@media (max-width:760px) {.learn-controls {grid-template-columns:1fr}.learn-main {width:calc(100% - 32px)}}

/* Library cards: illustration, then copy with room to breathe */
.learn-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px;margin:0;padding:0;list-style:none}
.learn-card[hidden] {display:none}
.learn-card a {display:flex;flex-direction:column;height:100%;overflow:hidden;border:1px solid rgb(255 255 255/.08);border-radius:20px;background:#101013;color:inherit;text-decoration:none;transition:border-color .2s,transform .25s,box-shadow .25s}
.learn-card a:hover {border-color:rgb(124 77 255/.525);transform:translateY(-3px);box-shadow:0 18px 40px -22px rgb(0 0 0/.8),0 0 0 1px rgb(124 77 255/.09)}
.learn-card a:focus-visible {outline-offset:3px}
.learn-card-art {display:block;flex:none;aspect-ratio:1.9;border-bottom:1px solid rgb(255 255 255/.06);transition:filter .25s}
.learn-card a:hover .learn-card-art {filter:brightness(1.12) saturate(1.05)}
.learn-card-body {display:flex;flex:1;flex-direction:column;gap:10px;padding:22px 24px}
.learn-card-type {display:flex;align-items:center;gap:8px;color:#bfb0ff;font-size:11.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase}
.learn-card-type svg {flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.learn-card strong {font-size:19px;line-height:1.3;letter-spacing:-.015em}
.learn-card small {display:-webkit-box;overflow:hidden;color:#bbbbc1;font-size:15px;line-height:1.6;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.learn-card-foot {display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px;color:#f4f4f5;font-size:14px;font-weight:650}
.learn-arrow {width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.learn-card-foot .learn-arrow {color:#bfb0ff}
.learn-card a:hover .learn-card-foot .learn-arrow {transform:translateX(3px)}

/* Numbered pages */
.learn-pager {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:44px;padding-top:24px;border-top:1px solid rgb(255 255 255/.07)}
.learn-pager[hidden] {display:none}
.learn-pager-pages {display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.learn-pager button {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:42px;height:42px;padding:0 12px;border:1px solid rgb(255 255 255/.1);border-radius:12px;background:transparent;color:#bbbbc1;font-family:inherit;font-size:14px;font-weight:650;cursor:pointer;transition:border-color .15s,color .15s,background-color .15s}
.learn-pager button:hover:not(:disabled) {border-color:rgb(124 77 255/.4);color:#f4f4f5}
.learn-pager button[aria-current=page] {border-color:#7B5CFF;background:#7B5CFF;color:#ffffff}
.learn-pager button:disabled {opacity:.35;cursor:default}
.learn-pager .learn-pager-step {padding:0 16px}
.learn-pager svg {width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.learn-pager-gap {display:inline-grid;place-items:center;min-width:24px;color:#757582}
@media (max-width:620px) {.learn-pager-step span {display:none}.learn-pager button {min-width:38px;height:38px;padding:0 8px}.learn-grid {grid-template-columns:1fr;gap:18px}}

/* Beginner Guide banner on /learn */
.learn-beginner {margin:0 0 52px}
.learn-beginner > a {position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:32px;overflow:hidden;padding:36px 38px;border:1px solid rgb(124 77 255/.33);border-radius:26px;background:radial-gradient(560px 260px at 0% 0%,rgb(124 77 255/.15),transparent 70%),linear-gradient(180deg,#141418,#0d0d0f);color:inherit;text-decoration:none;transition:border-color .25s,transform .25s}
.learn-beginner > a:hover {border-color:rgb(124 77 255/.45);transform:translateY(-2px)}
.learn-beginner-copy {display:grid;justify-items:start;gap:14px}
.learn-beginner-copy strong {font-size:clamp(24px,2.6vw,32px);line-height:1.15;letter-spacing:-.025em}
.learn-beginner-text {max-width:520px;color:#bbbbc1;font-size:16px;line-height:1.6}
.learn-beginner-foot {display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:4px}
.learn-beginner-cta {display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 22px;border-radius:999px;background:#7B5CFF;color:#ffffff;font-size:15px;font-weight:750}
.learn-beginner > a:hover .learn-beginner-cta .learn-arrow {transform:translateX(3px)}
.learn-beginner-meta {color:#7e7e8a;font-size:14px;font-weight:600}
.learn-beginner-art {position:relative;height:230px}
.learn-beginner-art span {position:absolute;width:62%;aspect-ratio:1.7;border:1px solid rgb(255 255 255/.1);border-radius:16px;box-shadow:0 24px 40px -18px rgb(0 0 0/.85);transition:transform .35s ease}
.learn-beginner-art span:nth-child(1) {left:0;top:30px;transform:rotate(-6deg)}
.learn-beginner-art span:nth-child(2) {left:19%;top:0;z-index:2}
.learn-beginner-art span:nth-child(3) {right:0;top:46px;transform:rotate(6deg)}
.learn-beginner > a:hover .learn-beginner-art span:nth-child(1) {transform:rotate(-9deg) translateX(-8px)}
.learn-beginner > a:hover .learn-beginner-art span:nth-child(3) {transform:rotate(9deg) translateX(8px)}
@media (max-width:860px) {.learn-beginner > a {grid-template-columns:1fr;padding:26px 22px}.learn-beginner-art {height:180px}}

/* Beginner Guide page */
.bg-crumbs {display:flex;gap:10px;margin-bottom:26px;color:#7e7e8a;font-size:14px}
.bg-crumbs a {color:#bbbbc1;text-decoration:none}
.bg-crumbs a:hover {color:#bfb0ff}
.bg-hero {display:grid;grid-template-columns:minmax(0,1fr) 380px;align-items:start;gap:48px;margin-bottom:64px}
.bg-hero-copy h1 {margin:18px 0 16px;font-size:clamp(36px,5vw,60px);line-height:1.03;letter-spacing:-.04em}
.bg-hero-copy > p {max-width:620px;margin:0;color:#bbbbc1;font-size:18px}
.bg-facts {display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0;padding:0;list-style:none}
.bg-facts li {display:grid;gap:2px;min-width:132px;padding:14px 18px;border:1px solid rgb(255 255 255/.08);border-radius:16px;background:#101013}
.bg-facts strong {font-size:22px;letter-spacing:-.02em}
.bg-facts span {color:#7e7e8a;font-size:13px}
.bg-progress {position:sticky;top:96px;display:grid;gap:12px;padding:24px;border:1px solid rgb(255 255 255/.08);border-radius:22px;background:#101013}
.bg-progress-label {margin:0;color:#7e7e8a;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.bg-progress-count {margin:0;color:#bbbbc1;font-size:15px}
.bg-progress-count strong {color:#f4f4f5;font-size:28px;letter-spacing:-.02em}
.bg-progress-bar {height:8px;overflow:hidden;border-radius:999px;background:rgb(255 255 255/.07)}
.bg-progress-bar span {display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6a3df0,#7B5CFF);transition:width .5s ease}
.bg-outline {display:grid;gap:2px;margin:6px 0 0;padding:0;list-style:none}
.bg-outline a {display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;color:#bbbbc1;font-size:13.5px;line-height:1.35;text-decoration:none}
.bg-outline a:hover {background:rgb(255 255 255/.04);color:#f4f4f5}
.bg-outline-num {flex:none;display:grid;place-items:center;width:24px;height:24px;border:1px solid rgb(255 255 255/.14);border-radius:50%;color:#7e7e8a;font:700 11px/1 'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace}
.bg-outline li.is-done .bg-outline-num {border-color:#7B5CFF;background:#7B5CFF;color:#ffffff}
.bg-progress-note {margin:0;color:#757582;font-size:12px}
.bg-button {display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 20px;border:1px solid #7B5CFF;border-radius:999px;background:#7B5CFF;color:#ffffff;font-size:15px;font-weight:750;text-decoration:none;transition:filter .15s,transform .15s}
.bg-button:hover {filter:brightness(1.06);transform:translateY(-1px)}
.bg-button:hover .learn-arrow {transform:translateX(3px)}
.bg-button--ghost {border-color:rgb(255 255 255/.16);background:transparent;color:#f4f4f5}
.bg-lessons {display:grid;gap:28px;margin:0;padding:0;list-style:none}
.bg-lesson {display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:40px;padding:22px;border:1px solid rgb(255 255 255/.08);border-radius:28px;background:#0d0d0f;scroll-margin-top:96px;transition:border-color .3s}
.bg-lesson:nth-child(even) .bg-lesson-art {order:2}
.bg-lesson.is-done {border-color:rgb(124 77 255/.42)}
.bg-lesson-art {position:relative;display:block;aspect-ratio:1.6;overflow:hidden;border:1px solid rgb(255 255 255/.08);border-radius:20px;transition:filter .25s}
.bg-lesson-art:hover {filter:brightness(1.1)}
.bg-lesson-badge {position:absolute;left:16px;top:16px;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgb(9 9 11/.8);color:#bfb0ff;font:800 15px/1 'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;backdrop-filter:blur(6px)}
.bg-lesson-copy {padding:10px 18px 10px 4px}
.bg-lesson:nth-child(even) .bg-lesson-copy {padding:10px 4px 10px 18px}
.bg-lesson-meta {display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 12px;color:#7e7e8a;font-size:13px;font-weight:650;letter-spacing:.02em}
.bg-lesson-meta span:first-child {color:#bfb0ff;letter-spacing:.08em;text-transform:uppercase}
.bg-lesson-done-label {display:none;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:rgb(124 77 255/.18);color:#bfb0ff}
.bg-lesson.is-done .bg-lesson-done-label {display:inline-flex}
.bg-lesson-copy h2 {margin:0 0 10px;font-size:clamp(22px,2.4vw,28px);line-height:1.2;letter-spacing:-.02em}
.bg-lesson-copy h2 a {color:inherit;text-decoration:none}
.bg-lesson-copy h2 a:hover {color:#d4c6ff}
.bg-lesson-summary {margin:0 0 18px;color:#bbbbc1;font-size:16px;line-height:1.6}
.bg-lesson-learn {margin:0 0 8px;color:#7e7e8a;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.bg-lesson-topics {display:grid;gap:8px;margin:0 0 24px;padding:0;list-style:none}
.bg-lesson-topics li {display:flex;align-items:flex-start;gap:10px;color:#e1e1e4;font-size:15px;line-height:1.45}
.bg-lesson-topics svg, .bg-lesson-done-label svg, .bg-mark svg {flex:none;width:16px;height:16px;fill:none;stroke:#7B5CFF;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bg-lesson-topics svg {margin-top:2px}
.bg-lesson-done-label svg {width:13px;height:13px}
.bg-lesson-actions {display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.bg-mark {display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;border:1px solid rgb(255 255 255/.14);border-radius:999px;background:transparent;color:#bbbbc1;font-family:inherit;font-size:14.5px;font-weight:650;cursor:pointer;transition:border-color .15s,color .15s,background-color .15s}
.bg-mark svg {stroke:currentColor;opacity:.5}
.bg-mark:hover {border-color:rgb(124 77 255/.4);color:#f4f4f5}
.bg-mark[aria-pressed=true] {border-color:rgb(124 77 255/.4);background:rgb(124 77 255/.15);color:#bfb0ff}
.bg-mark[aria-pressed=true] svg {opacity:1}
.bg-finish {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;margin-top:56px;padding:34px 36px;border:1px solid rgb(124 77 255/.33);border-radius:26px;background:radial-gradient(520px 240px at 100% 0%,rgb(124 77 255/.135),transparent 70%),#101013}
.bg-finish h2 {margin:12px 0 8px;font-size:30px;letter-spacing:-.025em}
.bg-finish p {max-width:560px;margin:0;color:#bbbbc1}
.bg-finish-actions {display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:980px) {.bg-hero {grid-template-columns:1fr}.bg-progress {position:static}.bg-lesson {grid-template-columns:1fr;gap:20px}.bg-lesson:nth-child(even) .bg-lesson-art {order:0}.bg-lesson-copy, .bg-lesson:nth-child(even) .bg-lesson-copy {padding:0 6px 8px}}
@media (prefers-reduced-motion:reduce) {.learn-page *, .learn-page *::before {transition:none !important}}