@keyframes toastSlideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes toastSlideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}@keyframes toolResultIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes wizardFadeIn{0%{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}.frontendLessonsPage{background:var(--color-bg-secondary,#f8fafc);color:var(--color-text-primary,#0f172a);min-height:100vh;padding:clamp(32px,4vw,48px) 5% clamp(48px,5vw,64px);transition:background .3s ease,color .3s ease}.frontendLessons{color:#0f172a}.frontendLessons__cta,.frontendLessons__faq,.frontendLessons__features,.frontendLessons__hero,.frontendLessons__intro,.frontendLessons__roadmap{font-feature-settings:"palt"}.frontendLessons__container{margin:0 auto;max-width:980px;padding:0 24px}@media(max-width:600px){.frontendLessons__container{padding:0 16px}}.frontendLessons__hero{background:linear-gradient(135deg,#0f172a,#1e293b 50%,#0f172a);color:#fff;overflow:hidden;padding:80px 24px 64px;position:relative;text-align:center}@media(max-width:600px){.frontendLessons__hero{padding:56px 16px 40px}}.frontendLessons__heroGhost{color:hsla(0,0%,100%,.14);font-feature-settings:"palt";font-size:clamp(9.6rem,19vw,28rem);font-weight:800;letter-spacing:.08em;line-height:1;position:absolute;right:-.2em;top:-.12em;writing-mode:vertical-rl;z-index:0;-webkit-text-stroke:1.5px hsla(0,0%,100%,.38);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.frontendLessons__heroInner{margin:0 auto;max-width:880px;position:relative;z-index:1}.frontendLessons__heroEyebrow{color:#94a3b8;font-size:1.4rem;font-weight:600;letter-spacing:.08em;margin:0 0 16px;text-transform:uppercase}.frontendLessons__heroTitle{font-size:clamp(3.6rem,5vw,4.8rem);font-weight:800;letter-spacing:-.02em;line-height:1.3;margin:0 0 24px;text-wrap:balance}@media(max-width:768px){.frontendLessons__heroTitle{text-align:left}}.frontendLessons__heroTitleTail{display:inline-block}.frontendLessons__heroTitleAccent{background:linear-gradient(135deg,#10b981,#06b6d4);-webkit-background-clip:text;background-clip:text;color:transparent}.frontendLessons__heroLead{color:#cbd5e1;font-size:1.6rem;line-height:1.8;margin:0 auto 40px;max-width:640px;text-align:left}.frontendLessons__heroStats{border-top:1px solid hsla(0,0%,100%,.14);display:flex;margin:0 auto;max-width:640px}@media(max-width:600px){.frontendLessons__heroStats{flex-direction:column}}.frontendLessons__heroStat{flex:1;padding:24px 24px 0 0;text-align:left}.frontendLessons__heroStat:not(:first-child){border-left:1px solid hsla(0,0%,100%,.14);padding-left:24px}.frontendLessons__heroStat:last-child{padding-right:0}@media(max-width:600px){.frontendLessons__heroStat{padding:24px 0}.frontendLessons__heroStat:first-child{padding-top:0}.frontendLessons__heroStat:not(:first-child){border-left:none;border-top:1px solid hsla(0,0%,100%,.14);padding-left:0}}.frontendLessons__heroStatNum{color:#10b981;display:block;font-size:3.6rem;font-weight:800;letter-spacing:-.01em;line-height:1;text-align:left}.frontendLessons__heroStatNum small{font-size:1.6rem;font-weight:600;margin-left:2px}.frontendLessons__heroStatLabel{color:#94a3b8;display:block;font-size:1.2rem;letter-spacing:.04em;line-height:1.6;margin-top:8px;text-align:left}.frontendLessons__sectionTitle{color:#0f172a;font-size:clamp(2.8rem,4vw,3.6rem);font-weight:700;letter-spacing:-.01em;line-height:1.3;margin:0 0 40px;text-align:center;text-indent:-.01em;text-wrap:balance}.frontendLessons__intro{background:#f8fafc;padding:80px 0}@media(max-width:600px){.frontendLessons__intro{padding:56px 0}}.frontendLessons__introContent{margin:0 auto;max-width:720px}.frontendLessons__introContent p{color:#334155;font-size:1.6rem;line-height:1.9;margin:0 0 24px}.frontendLessons__introContent p strong{color:#0f172a;font-weight:700}.frontendLessons__introContent .frontendLessons__signature{color:#64748b;font-size:1.4rem;line-height:1.7;margin:32px 0 0;text-align:right}.frontendLessons__features{background:#fff;padding:80px 0}@media(max-width:600px){.frontendLessons__features{padding:56px 0}}.frontendLessons__featureGrid{display:grid;gap:24px;grid-template-columns:repeat(3,1fr)}@media(max-width:900px){.frontendLessons__featureGrid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.frontendLessons__featureGrid{gap:16px;grid-template-columns:1fr}}.frontendLessons__feature{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:24px;text-align:left;transition:border-color .2s cubic-bezier(.22,1,.36,1),box-shadow .2s cubic-bezier(.22,1,.36,1),transform .2s cubic-bezier(.22,1,.36,1)}.frontendLessons__feature:hover{border-color:#047857;box-shadow:0 8px 24px rgba(4,120,87,.1);transform:translateY(-2px)}.frontendLessons__featureCode{background:#0f172a;border-radius:8px;margin-bottom:16px;overflow-x:auto;padding:14px 16px}.frontendLessons__featureCode pre{margin:0}.frontendLessons__featureCode code{color:#e2e8f0;font-family:Roboto Mono,ui-monospace,SFMono-Regular,monospace;font-size:1.2rem;line-height:1.7;white-space:pre}.frontendLessons__featureCodeComment{color:#94a3b8}.frontendLessons__featureCodeAccent{color:#34d399}.frontendLessons__featureCodeDel{color:#fca5a5}.frontendLessons__featureCodeIns{color:#6ee7b7}.frontendLessons__featureTitle{color:#0f172a;font-size:2rem;font-weight:700;line-height:1.4;margin:0 0 8px;text-wrap:balance}.frontendLessons__featureTitleUnit{display:inline-block}.frontendLessons__feature p{color:#475569;font-size:1.6rem;line-height:1.8;margin:0}.frontendLessons__routeKey{align-items:center;display:flex;gap:16px;justify-content:space-between;margin:0 0 24px}@media(min-width:601px){.frontendLessons__routeKey{padding-left:18px}}.frontendLessons__routeStart{align-items:center;color:#475569;display:flex;font-size:1.2rem;font-weight:700;gap:10px;letter-spacing:.08em;line-height:1.4;margin:0;text-transform:uppercase}.frontendLessons__routeStart:before{background:#2563eb;border-radius:999px;box-shadow:0 0 0 3px rgba(37,99,235,.16);content:"";flex-shrink:0;height:14px;width:14px}.frontendLessons__routeLegend{align-items:center;color:#475569;display:flex;font-size:1.2rem;gap:20px;line-height:1.4;margin:0}.frontendLessons__routeLegendItem{align-items:center;display:flex;gap:8px}.frontendLessons__routeLegendItem:before{content:"";flex-shrink:0;height:2px;width:24px}.frontendLessons__routeLegendItem_type_open:before{background:#2563eb}.frontendLessons__routeLegendItem_type_coming:before{background:repeating-linear-gradient(90deg,#cbd5e1 0,#cbd5e1 5px,transparent 0,transparent 9px)}.frontendLessons__roadmap{background:linear-gradient(180deg,#f8fafc,#f8fafc 30%,#fff);padding:80px 0}@media(max-width:600px){.frontendLessons__roadmap{padding:56px 0}}.frontendLessons__mapSpread{align-items:center;display:flex;margin-bottom:24px;min-height:88vh;position:relative}@media(max-width:600px){.frontendLessons__mapSpread{display:block;margin-bottom:8px;min-height:0;padding:40px 0}}.frontendLessons__mapSpreadRail{display:block;height:calc(100% + 46px);left:25px;overflow:visible;pointer-events:none;position:absolute;top:0;width:2px}@media(max-width:600px){.frontendLessons__mapSpreadRail{display:none}}.frontendLessons__mapSpreadRailLine{fill:none;stroke:#2563eb;stroke-width:2}.frontendLessons__mapSpreadMarker{align-items:center;color:#475569;display:flex;font-size:1.2rem;font-weight:700;gap:12px;left:19px;letter-spacing:.08em;line-height:1.4;position:absolute;top:0}.frontendLessons__mapSpreadMarker:before{background:#2563eb;border-radius:999px;box-shadow:0 0 0 3px rgba(37,99,235,.16);content:"";flex-shrink:0;height:14px;width:14px}@media(max-width:600px){.frontendLessons__mapSpreadMarker{display:none}}.frontendLessons__mapSpreadCopy{color:#475569;font-size:2.4rem;font-weight:600;letter-spacing:.08em;line-height:2;margin:0 0 0 112px;max-width:560px;text-align:left}@media(max-width:600px){.frontendLessons__mapSpreadCopy{font-size:1.8rem;margin-left:0}}.frontendLessons__phase{background:#fff;border:1px solid #e2e8f0;border-radius:20px;box-shadow:0 4px 24px rgba(15,23,42,.06);margin-bottom:48px;position:relative}@media(min-width:601px){.frontendLessons__phase{margin-left:56px}}@media(max-width:600px){.frontendLessons__phase{border-radius:16px;margin-bottom:32px}}.frontendLessons__phase_route_coming:after,.frontendLessons__phase_route_coming:before{background:repeating-linear-gradient(180deg,#cbd5e1 0,#cbd5e1 6px,transparent 0,transparent 11px);content:"";left:-32px;position:absolute;width:2px}@media(max-width:600px){.frontendLessons__phase_route_coming:after,.frontendLessons__phase_route_coming:before{content:none}}.frontendLessons__phase_route_coming:before{height:100%;top:0}.frontendLessons__phase_route_coming:after{height:50px;top:-50px}.frontendLessons__phase_route_coming:last-of-type:before{height:calc(100% + 130px)}.frontendLessons__phaseRail{display:block;height:calc(100% + 50px);left:-32px;overflow:visible;pointer-events:none;position:absolute;top:-48px;width:2px}@media(max-width:600px){.frontendLessons__phaseRail{display:none}}.frontendLessons__phaseRailLine{fill:none;stroke:#2563eb;stroke-width:2}.frontendLessons__phaseHeader{border-radius:19px 19px 0 0;color:#fff;padding:24px 32px;position:relative}@media(max-width:600px){.frontendLessons__phaseHeader{border-radius:15px 15px 0 0;padding:24px 16px}}.frontendLessons__phaseHeader:before{background:#2563eb;border-radius:999px;box-shadow:0 0 0 3px #f8fafc;content:"";height:14px;left:-39px;position:absolute;top:36px;width:14px}@media(max-width:600px){.frontendLessons__phaseHeader:before{content:none}}.frontendLessons__phaseHeader_color_html{background:linear-gradient(135deg,#b91c1c,#c2410c)}.frontendLessons__phaseHeader_color_css{background:linear-gradient(135deg,#0e7490,#0369a1)}.frontendLessons__phaseHeader_color_practice{background:linear-gradient(135deg,#047857,#0f766e)}.frontendLessons__phaseHeader_color_js{background:linear-gradient(135deg,#b45309,#a16207)}.frontendLessons__phaseHeader_color_jsadvanced{background:linear-gradient(135deg,#7c3aed,#7e22ce)}.frontendLessons__phaseHeader_color_career{background:linear-gradient(135deg,#be185d,#be123c)}.frontendLessons__phase_route_coming .frontendLessons__phaseHeader:before{background:#fff;border:2px solid #cbd5e1}.frontendLessons__phaseGhost{border-radius:inherit;inset:0;overflow:hidden;pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none}.frontendLessons__phaseGhostNum{bottom:-.22em;color:hsla(0,0%,100%,.1);font-size:clamp(9.6rem,9vw,12.8rem);font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.01em;line-height:1;position:absolute;right:20px}.frontendLessons__phaseLabel{background:rgba(15,23,42,.24);border-radius:999px;display:inline-block;font-size:1.2rem;font-weight:700;letter-spacing:.04em;line-height:1.6;margin-bottom:8px;padding:4px 12px}.frontendLessons__phaseTitle{font-size:2.4rem;font-weight:700;line-height:1.4;margin:0 0 8px;text-wrap:balance}@media(max-width:600px){.frontendLessons__phaseTitle{font-size:2rem}}.frontendLessons__phaseWeek{color:#fff;font-size:1.4rem;font-weight:600;line-height:1.6}.frontendLessons__phaseLeadBand{background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:24px 32px}@media(max-width:600px){.frontendLessons__phaseLeadBand{padding:24px 16px}}.frontendLessons__phaseLead{color:#475569;font-size:1.6rem;line-height:1.8;margin:0;max-width:640px}.frontendLessons__weekList{list-style:none;margin:0;padding:0}.frontendLessons__week{border-bottom:1px solid #f1f5f9;display:flex;gap:24px;padding:24px 32px;position:relative}.frontendLessons__week:last-child{border-bottom:none}@media(max-width:600px){.frontendLessons__week{flex-direction:column;gap:8px;padding:24px 16px}}.frontendLessons__weekNum{align-items:center;align-self:flex-start;color:#64748b;display:flex;flex-shrink:0;font-size:1.4rem;font-weight:700;gap:8px;letter-spacing:.04em;line-height:1.6;padding-top:3px;width:96px}.frontendLessons__weekNum:before{background:#2563eb;border-radius:999px;box-shadow:0 0 0 3px #f8fafc;content:"";flex-shrink:0;height:10px;left:-36px;position:absolute;top:33px;width:10px}@media(max-width:600px){.frontendLessons__weekNum:before{box-shadow:none;position:static}.frontendLessons__weekNum{font-size:1.2rem;width:auto}}.frontendLessons__week_route_coming .frontendLessons__weekNum:before{background:#fff;border:2px solid #cbd5e1}.frontendLessons__week_route_coming .frontendLessons__weekTitle{color:#475569}.frontendLessons__weekBody{flex:1;min-width:0}.frontendLessons__weekTitle{color:#0f172a;font-size:1.8rem;font-weight:700;line-height:1.5;margin:0 0 8px;text-wrap:balance}.frontendLessons__weekDesc{color:#475569;font-size:1.6rem;line-height:1.8;margin:0 0 8px}.frontendLessons__weekKeywords{color:#64748b;font-size:1.4rem;line-height:1.7;margin:0 0 16px}.frontendLessons__weekLink{align-items:center;background:#047857;border-radius:8px;color:#fff;display:inline-flex;font-size:1.4rem;font-weight:700;gap:8px;line-height:1.6;padding:8px 16px;text-decoration:none;transition:background .15s cubic-bezier(.22,1,.36,1)}.frontendLessons__weekLink:after{border-right:2px solid;border-top:2px solid;content:"";flex-shrink:0;height:6px;transform:rotate(45deg);transition:transform .15s cubic-bezier(.22,1,.36,1);width:6px}.frontendLessons__weekLink:hover{background:#065f46}.frontendLessons__weekLink:hover:after{transform:rotate(45deg) translate(1px,-1px)}.frontendLessons__weekStatus{background:#f3f4f6;border-radius:8px;color:#475569;display:inline-block;font-size:1.2rem;font-weight:600;line-height:1.6;padding:4px 12px}.frontendLessons__cta{background:linear-gradient(135deg,#0f172a,#1e293b);color:#fff;overflow:hidden;padding:160px 0 88px;position:relative}@media(max-width:600px){.frontendLessons__cta{padding:72px 0 56px}}.frontendLessons__cta .frontendLessons__sectionTitle{color:#fff;text-align:left;text-indent:0}@media(min-width:601px){.frontendLessons__ctaInner{margin-left:56px}}.frontendLessons__ctaLead{color:#cbd5e1;font-size:1.6rem;line-height:1.8;margin:0 0 64px;max-width:560px;text-align:left}@media(max-width:600px){.frontendLessons__ctaLead br{display:none}}.frontendLessons__ctaBtn{align-items:center;background:linear-gradient(135deg,#047857,#0e7490);border-radius:12px;box-shadow:0 4px 20px rgba(4,120,87,.45);color:#fff;display:inline-flex;font-size:1.8rem;font-weight:700;gap:12px;line-height:1.5;padding:16px 40px;position:relative;text-decoration:none;transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s cubic-bezier(.22,1,.36,1)}.frontendLessons__ctaBtn:before{background:linear-gradient(180deg,rgba(96,165,250,.45),#60a5fa);bottom:50%;content:"";height:150vh;left:-31px;position:absolute;width:2px}@media(max-width:600px){.frontendLessons__ctaBtn:before{content:none}}.frontendLessons__ctaBtn:after{border-right:2px solid;border-top:2px solid;content:"";flex-shrink:0;height:8px;transform:rotate(45deg);width:8px}.frontendLessons__ctaBtn:hover{box-shadow:0 8px 32px rgba(4,120,87,.55);transform:translateY(-2px)}.frontendLessons__ctaNote{color:#94a3b8;font-size:1.4rem;line-height:1.7;margin:32px 0 0;max-width:560px;text-align:left}.frontendLessons__faq{background:#f8fafc;padding:80px 0}@media(max-width:600px){.frontendLessons__faq{padding:56px 0}}.frontendLessons__faqItem{background:#fff;border:1px solid #e2e8f0;border-radius:12px;margin-bottom:16px;overflow:hidden}.frontendLessons__faqItem[open]{border-color:#047857}.frontendLessons__faqQ{color:#0f172a;cursor:pointer;font-size:1.6rem;font-weight:700;line-height:1.6;list-style:none;padding:16px 48px 16px 24px;position:relative}.frontendLessons__faqQ::-webkit-details-marker{display:none}.frontendLessons__faqQ:after{color:#047857;content:"+";font-size:2.4rem;font-weight:400;position:absolute;right:24px;top:50%;transform:translateY(-50%)}@media(max-width:600px){.frontendLessons__faqQ{padding:16px 48px 16px 16px}}.frontendLessons__faqItem[open] .frontendLessons__faqQ:after{content:"−"}.frontendLessons__authorSlot{margin:0 auto;max-width:680px;padding:0 24px}@media(max-width:600px){.frontendLessons__authorSlot{padding:0 16px}}.frontendLessons__faqA{padding:0 24px 24px}.frontendLessons__faqA p{color:#475569;font-size:1.6rem;line-height:1.8;margin:0;max-width:640px}@media(max-width:600px){.frontendLessons__faqA{padding:0 16px 16px}}@media(min-width:601px){.frontendLessons__roadmap.jsRouteReady .frontendLessons__phase_route_open .frontendLessons__phaseHeader:before,.frontendLessons__roadmap.jsRouteReady .frontendLessons__week_route_open .frontendLessons__weekNum:before{opacity:.25;transform:scale(.4);transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .35s cubic-bezier(.22,1,.36,1)}.frontendLessons__roadmap.jsRouteReady .frontendLessons__phase_route_open.jsLit .frontendLessons__phaseHeader:before,.frontendLessons__roadmap.jsRouteReady .frontendLessons__week_route_open.jsLit .frontendLessons__weekNum:before{opacity:1;transform:scale(1)}}.frontendLessons.jsEntranceReady .frontendLessons__mapSpreadCopy,.frontendLessons.jsEntranceReady .frontendLessons__sectionTitle{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}.frontendLessons.jsEntranceReady .frontendLessons__ctaLead,.frontendLessons.jsEntranceReady .frontendLessons__ctaNote,.frontendLessons.jsEntranceReady .frontendLessons__faqItem,.frontendLessons.jsEntranceReady .frontendLessons__introContent p,.frontendLessons.jsEntranceReady .frontendLessons__routeKey{opacity:0;transform:translateY(16px);transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1)}.frontendLessons.jsEntranceReady .frontendLessons__feature{opacity:0;transform:translateY(24px) scale(.97);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1),border-color .2s cubic-bezier(.22,1,.36,1),box-shadow .2s cubic-bezier(.22,1,.36,1)}.frontendLessons.jsEntranceReady .frontendLessons__week{opacity:0;transform:translateX(-16px);transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1)}.frontendLessons.jsEntranceReady .frontendLessons__ctaBtn{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}.frontendLessons.jsEntranceReady .frontendLessons__introContent p.jsIn,.frontendLessons.jsEntranceReady .jsIn{opacity:1;transform:none}.frontendLessons.jsEntranceReady .frontendLessons__feature.jsSettled{transition:border-color .2s cubic-bezier(.22,1,.36,1),box-shadow .2s cubic-bezier(.22,1,.36,1),transform .2s cubic-bezier(.22,1,.36,1)}.frontendLessons.jsEntranceReady .frontendLessons__ctaBtn.jsSettled{transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s cubic-bezier(.22,1,.36,1)}@media(prefers-reduced-motion:reduce){.frontendLessons__roadmap.jsRouteReady .frontendLessons__phase_route_open .frontendLessons__phaseHeader:before,.frontendLessons__roadmap.jsRouteReady .frontendLessons__week_route_open .frontendLessons__weekNum:before{opacity:1;transform:none;transition:none}.frontendLessons__mapSpreadRailLine,.frontendLessons__phaseRailLine{stroke-dasharray:none!important;stroke-dashoffset:0!important}.frontendLessons__heroGhost,.frontendLessons__mapSpreadMarker,.frontendLessons__phaseGhostNum{transform:none!important}.frontendLessons.jsEntranceReady .frontendLessons__ctaBtn,.frontendLessons.jsEntranceReady .frontendLessons__ctaLead,.frontendLessons.jsEntranceReady .frontendLessons__ctaNote,.frontendLessons.jsEntranceReady .frontendLessons__faqItem,.frontendLessons.jsEntranceReady .frontendLessons__feature,.frontendLessons.jsEntranceReady .frontendLessons__introContent p,.frontendLessons.jsEntranceReady .frontendLessons__mapSpreadCopy,.frontendLessons.jsEntranceReady .frontendLessons__routeKey,.frontendLessons.jsEntranceReady .frontendLessons__sectionTitle,.frontendLessons.jsEntranceReady .frontendLessons__week{opacity:1!important;transform:none!important;transition:none!important}}