.lesson-heading{text-align:center}.lesson-heading h1{overflow-wrap:anywhere;margin:18px 0}.lesson-description{white-space:pre-line;overflow-wrap:anywhere;max-width:780px;margin:0 auto 22px}.lesson-like{direction:ltr;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:10px;display:flex}.lesson-like-count{border:1px solid var(--line);border-radius:10px;place-items:center;min-width:46px;padding:9px 12px;font-weight:700;display:grid}.lesson-like form{margin:0}.lesson-like .lesson-youtube-button{color:#fff;background:red;margin-left:auto}.lesson-like .lesson-youtube-button:hover{color:#fff;background:#d90000}.lesson-youtube-button .fa-youtube{font-size:1.2em}.lesson-like-button[aria-pressed=true]{background:var(--tint);color:var(--accent-readable);box-shadow:inset 0 0 0 1px var(--accent-readable)}.lesson-content pre{color:#f8f8f2;tab-size:4;border-left:5px solid var(--code-accent,#528bd9);background:#000;border-radius:4px;padding:44px 20px 16px;font-size:14px;line-height:1.6;position:relative}.lesson-content pre:before{content:attr(data-language);background:var(--code-accent,#528bd9);text-transform:uppercase;color:#fff;padding:6px 16px;font:700 12px/1.8 system-ui,sans-serif;position:absolute;top:0;left:0}.lesson-content pre[data-language=markup]:before{content:"HTML"}.lesson-content pre code{color:inherit;font-size:inherit;white-space:pre;background:0 0;padding:0}:is(.lesson-content,.block-code-highlight) .token.comment,:is(.lesson-content,.block-code-highlight) .token.prolog,:is(.lesson-content,.block-code-highlight) .token.doctype{color:#9aaec7}:is(.lesson-content,.block-code-highlight) .token.punctuation{color:#d5e1ef}:is(.lesson-content,.block-code-highlight) .token.property,:is(.lesson-content,.block-code-highlight) .token.tag,:is(.lesson-content,.block-code-highlight) .token.constant,:is(.lesson-content,.block-code-highlight) .token.symbol{color:#ff90ad}:is(.lesson-content,.block-code-highlight) .token.boolean,:is(.lesson-content,.block-code-highlight) .token.number{color:#d9a0ff}:is(.lesson-content,.block-code-highlight) .token.selector,:is(.lesson-content,.block-code-highlight) .token.attr-name,:is(.lesson-content,.block-code-highlight) .token.string,:is(.lesson-content,.block-code-highlight) .token.char,:is(.lesson-content,.block-code-highlight) .token.builtin{color:#a6e39a}:is(.lesson-content,.block-code-highlight) .token.operator,:is(.lesson-content,.block-code-highlight) .token.entity,:is(.lesson-content,.block-code-highlight) .token.url{color:#8edbea}:is(.lesson-content,.block-code-highlight) .token.atrule,:is(.lesson-content,.block-code-highlight) .token.attr-value,:is(.lesson-content,.block-code-highlight) .token.keyword{color:#86bdff}:is(.lesson-content,.block-code-highlight) .token.function,:is(.lesson-content,.block-code-highlight) .token.class-name{color:#f5d58a}:is(.lesson-content,.block-code-highlight) .token.regex,:is(.lesson-content,.block-code-highlight) .token.variable,:is(.lesson-content,.block-code-highlight) .token.important{color:#ffbe87}.lesson-block .block-body[hidden]{display:none}.lesson-block.is-collapsed .block-heading{border-bottom:0;border-radius:16px;margin-bottom:-20px}:is(.block-code-editor,.lesson-content pre)[data-language=scss],:is(.block-code-editor,.lesson-content pre)[data-language=sass]{--code-accent:#c85d96}:is(.block-code-editor,.lesson-content pre)[data-language=javascript],:is(.block-code-editor,.lesson-content pre)[data-language=json]{--code-accent:#947400}:is(.block-code-editor,.lesson-content pre)[data-language=css],:is(.block-code-editor,.lesson-content pre)[data-language=typescript]{--code-accent:#2876ba}:is(.block-code-editor,.lesson-content pre)[data-language=markup]{--code-accent:#c85635}:is(.block-code-editor,.lesson-content pre)[data-language=php]{--code-accent:#7973b8}:is(.block-code-editor,.lesson-content pre)[data-language=python]{--code-accent:#367eaa}:is(.block-code-editor,.lesson-content pre)[data-language=bash]{--code-accent:#478143}.block-code-editor{border-left:5px solid var(--code-accent,#528bd9);direction:ltr;background:#000;border-radius:4px;margin-bottom:20px;overflow:hidden}.code-language-label{background:var(--code-accent,#528bd9);color:#fff;text-transform:uppercase;padding:6px 16px;font:700 12px/1.8 system-ui,sans-serif;display:table}.block-code-viewport{position:relative}.lesson-editor .block-code-viewport :is(.block-code-input,.block-code-highlight){box-sizing:border-box;letter-spacing:normal;tab-size:4;white-space:pre;word-break:normal;overflow-wrap:normal;text-align:left;color:#f8f8f2;direction:ltr;background:0 0;border:0;border-radius:0;width:100%;height:280px;min-height:280px;margin:0;padding:18px 22px;font:14px/1.8 Consolas,monospace;overflow:auto}.lesson-editor .block-code-viewport .block-code-highlight{pointer-events:none;position:absolute;inset:0;overflow:hidden}.lesson-editor .block-code-highlight code{font:inherit;white-space:inherit;color:inherit;background:0 0;border:0;padding:0}.lesson-editor .block-code-viewport .block-code-input{resize:none;caret-color:#fff;box-shadow:none;display:block;position:relative}.lesson-editor .is-highlighted .block-code-input{color:#0000;-webkit-text-fill-color:transparent}.lesson-editor .block-code-input::selection{background:#4976a780}.block-code-editor:focus-within{outline:2px solid var(--primary);outline-offset:3px}.lesson-path-icon{margin-right:12px;font-size:.95em}.public-site .lesson-content a,.public-site .lesson-content a:hover{color:var(--accent-readable,var(--primary));overflow-wrap:anywhere;background:0 0;text-decoration:none}.tutorial-heading{background:var(--tint);border:1px solid var(--line);border-top:4px solid var(--primary);border-radius:16px;margin-bottom:32px;padding:32px 24px}.tutorial-heading h1{color:var(--accent-readable,var(--primary));margin:16px 0 0;font-size:clamp(22px,2.5vw,30px);line-height:1.7}.tutorial-heading .pill{background:var(--surface);border:1px solid var(--line)}@media (width<=600px){.tutorial-heading{margin-bottom:24px;padding:24px 16px}}