@font-face{font-family:Inter;src:url('/assets/fonts/Inter-Regular.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Inter;src:url('/assets/fonts/Inter-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
:root{--ink:#1b2033;--muted:#727a8d;--purple:#6c55e5;--line:#e7e9f1;--nav:#131725;--header:88px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f7f8fc;color:var(--ink);font:15px/1.7 Inter,system-ui,sans-serif}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:var(--purple)}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #a698ff;outline-offset:4px}[hidden]{display:none!important}.topbar{height:var(--header);position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:#fff;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);font-weight:700;font-size:27px;line-height:1;letter-spacing:-1px}.brand small{display:block;color:#8790a3;font-size:10px;letter-spacing:1px;font-weight:400;margin-top:8px}.brand-dot{color:var(--purple)}.brand-icon{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#8c79ff,#6950dc);width:43px;height:44px;border-radius:12px;color:#fff;font-size:39px;line-height:1;position:relative;padding-bottom:5px}.brand-icon span{font-size:15px;position:absolute;right:3px;top:3px}.top-right{display:flex;align-items:center;gap:28px;font-size:12px}.top-right a{text-decoration:none;color:#51586c}.top-right .platform{background:#171c30;color:#fff;border-radius:8px;padding:11px 18px}.academy-label{color:#9298a9}.academy-label i{display:inline-block;background:#65ba9d;width:6px;height:6px;border-radius:50%;margin-right:8px}.layout{display:grid;grid-template-columns:312px minmax(0,1fr)}#sidebar{background:var(--nav);color:#fff;padding:30px 20px 22px;position:sticky;top:var(--header);height:calc(100dvh - var(--header));overflow:auto;scrollbar-width:thin;scrollbar-color:#394059 var(--nav)}.course-label{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#b4abf5}.course-label span{margin-left:7px;color:#8a91a8;font-size:8px}#sidebar h2{font-size:24px;letter-spacing:-.7px;line-height:1.3;margin:17px 0 12px}.sidebar-intro{color:#8d95aa;font-size:12px;line-height:1.7;margin:0 0 22px}.searchbox{display:flex;align-items:center;gap:9px;border:1px solid #333849;background:#1c2132;border-radius:8px;padding:7px 12px;color:#8c92a7}.searchbox span{font-size:24px;line-height:1}.searchbox input{background:transparent;border:0;color:#fff;width:100%;font-size:11px;padding:3px 0;min-width:0}.searchbox input::placeholder{color:#969db1}.index-heading{display:flex;justify-content:space-between;gap:8px;color:#777f95;font-size:8px;letter-spacing:.6px;margin:27px 0 13px}.index-heading span:last-child{letter-spacing:0;white-space:nowrap}details{border-bottom:1px solid #262c3e}summary{list-style:none;cursor:pointer;display:flex;gap:10px;align-items:center;padding:15px 3px;font-size:12px;font-weight:700;line-height:1.4}summary::-webkit-details-marker{display:none}summary .module-no{display:grid;place-items:center;flex:0 0 25px;height:25px;font-size:10px;color:#a1a8c0;background:#242a3f;border-radius:7px}summary .module-title{flex:1}summary .chevron{color:#81899f;transition:transform .15s}details[open] summary .chevron{transform:rotate(90deg)}details[open] summary .module-no{background:#302846;color:#c1b5ff}.lessons{padding:0 0 12px 9px}.lesson-link{display:flex;align-items:flex-start;gap:10px;text-decoration:none;color:#a5acc0;font-size:11px;line-height:1.55;padding:10px 10px;border-radius:7px;margin:2px 0}.lesson-link .lesson-icon{flex:0 0 14px;color:#7e879e;font-size:12px}.lesson-link.active{background:#2a2444;color:#dfd7ff;box-shadow:inset 2px 0 #a68cff}.lesson-link.active .lesson-icon{color:#beacff}.lesson-link.done .lesson-icon{color:#7bd4b0}.lesson-link:hover{background:#252b3f;color:#fff}.lesson-link.pending .lesson-icon{font-size:11px}.empty-search{font-size:12px;color:#a5acc0}.course-progress{border:1px solid #34394c;border-radius:10px;padding:15px;margin-top:25px;background:#1b2031}.course-progress>div{display:flex;justify-content:space-between;font-size:11px}.course-progress strong{font-weight:400;color:#c2c7d5}.course-progress span{color:#b7a8ff}.course-progress progress{width:100%;height:5px;border:0;border-radius:10px;margin:12px 0 3px;display:block;overflow:hidden;background:#32384c}.course-progress progress::-webkit-progress-bar{background:#32384c}.course-progress progress::-webkit-progress-value{background:#9c83fc}.course-progress progress::-moz-progress-bar{background:#9c83fc}.course-progress small{font-size:9px;color:#8991a5}.sidebar-help{display:block;text-decoration:none;margin:24px 7px 0;font-size:11px;line-height:1.8}.sidebar-help span{display:block;color:#9098af}.sidebar-help strong{font-weight:400;color:#d5cafe}main{min-width:0;max-width:1220px;padding:30px clamp(24px,4.2vw,72px) 24px;margin:0 auto;width:100%}.main-top{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:36px;font-size:11px;color:#858c9d}#breadcrumb span{margin:0 9px;color:#bcc0ca}#resume{font-size:10px;border:0;background:none;color:var(--purple);white-space:nowrap}.lesson-meta{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:15px}.eyebrow{text-transform:uppercase;font-weight:700;font-size:10px;letter-spacing:1.5px;color:var(--purple)}#lesson-position{color:#9198a9;font-size:10px}article{outline:none}article h1{font-size:clamp(30px,3.3vw,45px);line-height:1.17;letter-spacing:-1.8px;margin:0 0 22px;font-weight:700;max-width:850px}article .lead{color:#737c90;max-width:680px;margin-bottom:27px;font-size:15px}article .body{background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(20px,3vw,40px);box-shadow:0 4px 20px #18264a03;overflow-wrap:anywhere}article p{margin:0 0 19px}article p:last-child{margin-bottom:0}article h2{font-size:24px;line-height:1.4;letter-spacing:-.6px;margin:26px 0 16px}article h3{font-size:19px;line-height:1.4}article h2:first-child{margin-top:0}article li{margin-bottom:9px}article ul,article ol{padding-left:25px}article img{max-width:100%!important;height:auto!important;border-radius:8px}article figure{margin:24px 0}article figcaption{font-size:12px;color:var(--muted)}article video{width:100%;max-width:100%;height:auto;aspect-ratio:16/9;background:#111522;border-radius:10px;display:block;margin:25px 0 4px}article table{display:block;overflow-x:auto;max-width:100%;border-collapse:collapse}article td,article th{border:1px solid var(--line);padding:12px}article blockquote{margin:20px 0;border-left:3px solid #a98efb;padding:14px 22px;background:#f9f7ff}article audio{max-width:100%}.notice{display:flex;gap:13px;align-items:flex-start;border:1px solid #e2def4;border-radius:10px;background:#f3f0fb;color:#6c6287;padding:18px 20px;margin:20px 0;font-size:12px}.notice b{font-size:16px;font-weight:400;line-height:1.6}.media-consent{width:100%;aspect-ratio:16/9;background:radial-gradient(ellipse at 78% 20%,#514384,transparent 64%),linear-gradient(120deg,#151b30,#25283e);border:0;border-radius:12px;color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;margin-top:24px;padding:20px;text-align:center}.media-consent .play{width:60px;height:60px;border-radius:50%;background:#ffffff20;display:grid;place-items:center;border:1px solid #ffffff40;font-size:22px;padding-left:3px}.media-consent strong{font-size:17px}.media-consent small{font-size:11px;font-weight:400;color:#c3c1d1;max-width:430px}.youtube-frame{width:100%;aspect-ratio:16/9;border:0;border-radius:12px;display:block;margin-top:24px}.lesson-actions{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:23px 0 35px;min-height:45px}.guide{font-size:12px;text-decoration:none}.complete{margin-left:auto;background:var(--purple);border:1px solid var(--purple);border-radius:8px;color:#fff;font-size:12px;padding:11px 17px;display:flex;gap:20px;align-items:center}.complete[aria-pressed=true]{background:#edf7f2;color:#29765e;border-color:#bddbcc}.complete:disabled{background:#e9ebf1;border-color:#e9ebf1;color:#8b92a2;cursor:default}.pager{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:30px 0}.pager a{border:1px solid var(--line);background:#fff;text-decoration:none;border-radius:10px;padding:17px 20px;display:flex;flex-direction:column;gap:5px}.pager a:hover{border-color:#b7aaf0}.pager span{font-size:9px;color:#9198a9;letter-spacing:1px}.pager strong{font-size:12px;font-weight:400;color:#374059}.pager a:last-child{text-align:right}.pager a[aria-disabled=true]{opacity:.35;pointer-events:none}footer{display:flex;justify-content:space-between;gap:18px;border-top:1px solid var(--line);padding:24px 0 0;font-size:10px;color:#959cab}footer div{display:flex;gap:10px}footer a{color:#7e8699;text-decoration:none}#mobile-menu{display:none}.skip{position:fixed;top:-70px;background:white;padding:10px;z-index:50}.skip:focus{top:0}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#172437;color:#fff;font-size:12px;padding:12px 20px;border-radius:9px;box-shadow:0 6px 25px #0002;z-index:30;opacity:0;pointer-events:none;transition:opacity .2s}#toast.visible{opacity:1}.noscript{padding:30px;background:#fff7df}.error-state{padding:30px;background:#fff;border:1px solid var(--line);border-radius:12px}
@media(min-width:1600px){main{padding-top:40px}.main-top{margin-bottom:45px}}@media(max-width:1100px){.academy-label{display:none}.layout{grid-template-columns:280px minmax(0,1fr)}.topbar{padding:0 24px}.top-right{gap:18px}main{padding:26px 28px}.main-top{margin-bottom:27px}}
@media(max-width:800px){:root{--header:115px}.topbar{height:115px;display:flex;flex-wrap:wrap;padding:15px 18px 0;gap:0}.brand{font-size:22px}.brand-icon{width:35px;height:36px;font-size:32px;border-radius:10px}.brand small{font-size:8px;margin-top:6px}.top-right{gap:0}.top-right>a:first-of-type{display:none}.top-right .platform{font-size:10px;padding:9px 12px}.layout{display:block}#mobile-menu{display:flex;align-items:center;gap:10px;width:100%;border:0;border-top:1px solid var(--line);padding:11px 0;margin-top:12px;background:white;color:#646a7e;font-size:12px;text-align:left}#sidebar{display:none;position:fixed;top:115px;left:0;bottom:0;width:min(340px,100%);height:calc(100dvh - 115px);z-index:19;box-shadow:14px 5px 45px #19213435}body.menu-open #sidebar{display:block}main{padding:22px 18px 20px}.main-top{font-size:10px;margin-bottom:28px;align-items:flex-start}#resume{font-size:9px}#breadcrumb{max-width:70%}.lesson-meta{align-items:flex-start}.eyebrow{font-size:9px;letter-spacing:1px}#lesson-position{white-space:nowrap;font-size:9px}article h1{font-size:31px;letter-spacing:-1px;line-height:1.22}article .body{padding:22px 19px;font-size:14px}article h2{font-size:21px}article h3{font-size:18px}.lesson-actions{flex-wrap:wrap;margin-bottom:26px}.complete{font-size:11px}.guide{font-size:11px}.pager{gap:10px}.pager a{padding:13px 12px}.pager strong{font-size:11px}.pager span{font-size:8px}footer{flex-direction:column;font-size:9px;gap:9px}.notice{padding:14px;font-size:11px}.media-consent strong{font-size:14px}.media-consent .play{height:44px;width:44px;font-size:16px}.media-consent small{font-size:9px}.media-consent{gap:9px}.course-label{font-size:9px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}@media print{.topbar,#sidebar,.lesson-actions,.pager,footer,#toast{display:none}.layout{display:block}main{max-width:none;padding:0}article .body{border:0;padding:0}}

/* 2026-10-07: one lesson card, with the video and its real cover inside it. */
.brand-icon{display:block;flex:none;width:44px;height:44px;object-fit:contain;background:none;border-radius:50%;padding:0}
article .body>.media-consent,article .body>.youtube-frame{margin:28px 0 0}
.media-consent{position:relative;isolation:isolate;overflow:hidden;background:#172035;justify-content:center;gap:12px}
.media-consent .video-poster{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;border-radius:0;z-index:-2}
.media-consent .media-shade{position:absolute;inset:0;background:linear-gradient(180deg,#0c11203b,#0c1120aa);z-index:-1}
.media-consent .play{background:#fff;color:#1e2850;border:0;box-shadow:0 6px 22px #0005}
.media-consent strong,.media-consent small{text-shadow:0 2px 10px #000b}
.media-consent small{color:#fff}
@media(max-width:800px){.brand-icon{width:36px;height:36px}article .body>.media-consent,article .body>.youtube-frame{margin-top:22px}}
.searchbox .magnifier{display:block;flex:0 0 12px;width:12px;height:12px;border:1.5px solid #939bb0;border-radius:50%;margin-right:5px;position:relative}.searchbox .magnifier:after{content:'';position:absolute;right:-5px;bottom:-3px;width:6px;height:1.5px;background:#939bb0;transform:rotate(45deg)}.sr-pending{font-size:9px;color:#8991a8}

/* Image lessons: keep reference examples comparable on desktop and mobile. */
article figure.before-after{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
article figure.before-after>div{min-width:0}
article figure.before-after strong{display:block;margin-bottom:8px;font-size:13px}
article figure.before-after a{display:block}
article figure.before-after img{display:block;width:100%;height:auto}
article figure.before-after figcaption{grid-column:1/-1}
@media(max-width:480px){article figure.before-after{gap:9px}article figure.before-after strong{font-size:11px}}