.learn-page{--roadmap-wave-amplitude:52px;--learn-sidebar-width:240px}@media (max-width:600px){.learn-page{--roadmap-wave-amplitude:36px}}.quiz-page.sidebar-collapsed.learn-page{--learn-sidebar-width:80px}.learn-page>main{--learn-main-padding:48px;padding:var(--learn-main-padding)!important}.learn-content{grid-template-columns:1fr 1fr;align-self:center;align-items:flex-start;gap:48px;width:100%;max-width:1080px;min-height:100%;display:grid;position:relative}.section-detail{background-color:var(--bg-card);border:2px solid var(--border-main);border-radius:24px;height:fit-content;padding:24px}.section-detail p{color:var(--text-muted);font-size:1rem;line-height:1.5}.section-detail #section-description{margin-bottom:24px}.section-detail h1{margin-bottom:12px}.section-detail .section-stats{flex-wrap:wrap;gap:12px;display:flex}.section-detail .section-stats .icon-label{align-items:center;gap:8px;display:flex}.section-detail .section-stats .icon-label p,.section-detail .section-stats .icon-label svg{color:var(--text-main)}.section-detail .section-stats .icon-label p{font-size:.875rem}.section-detail-content--animated{animation:.32s ease-out both learn-section-slide-in}@keyframes learn-section-slide-in{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:translate(0)}}.section-detail-rail{z-index:3;top:var(--learn-main-padding);left:calc(var(--learn-sidebar-width) + var(--learn-main-padding));right:var(--learn-main-padding);width:min(1080px, calc(100vw - var(--learn-sidebar-width) - var(--learn-main-padding) - var(--learn-main-padding)));pointer-events:none;grid-template-columns:1fr 1fr;gap:24px 48px;width:auto;max-width:1080px;margin-inline:auto;transition:left .2s;display:grid;position:fixed}.section-detail-rail .section-detail{pointer-events:auto}.section-progress-card{border:2px solid var(--border-main);background-color:var(--bg-card);pointer-events:auto;border-radius:20px;flex-direction:column;grid-column:1;gap:8px;padding:20px 24px;display:flex}.section-progress-card .section-progress-summary{color:var(--text-muted);font-size:.875rem}.section-progress-track{background-color:var(--border-main);border-radius:999px;height:10px}.section-progress-fill{border-radius:inherit;background-color:var(--primary-color);height:100%;transition:width .25s}.section-progress-up-next{flex-direction:column;gap:12px;display:flex}.section-progress-up-next p{color:var(--text-main);margin:4px 0 0;font-size:.875rem;font-weight:600}.section-progress-eyebrow{font-size:.75rem;font-weight:500}.section-progress-continue{background-color:var(--primary-color);width:100%;min-height:56px;color:var(--text-inverse);box-shadow:0 6px 0 #0003, 0 6px 0 var(--primary-color);border-radius:16px;justify-content:center;align-items:center;gap:8px;padding:16px 0;text-decoration:none;display:flex}.section-progress-continue p{color:var(--text-inverse);margin:0;font-size:1rem;font-weight:700}.section-progress-continue:active{box-shadow:0 4px 0 #0003, 0 4px 0 var(--primary-color);transform:translateY(4px)}.section-progress-continue:focus-visible{outline:2px solid var(--primary-color);outline-offset:3px}.roadmap{flex-direction:column;grid-column:2;row-gap:36px;padding-bottom:48px;display:flex;position:relative}.curriculum-section,.curriculum-unit-group{flex-direction:column;align-items:center;row-gap:24px;width:100%;display:flex}.section-header{isolation:isolate;z-index:2;background-color:var(--primary-color);width:100%;box-shadow:0 8px 0 #0003, 0 8px 0 var(--primary-color);border-radius:24px;flex-direction:column;justify-content:center;gap:4px;margin-bottom:24px;padding:24px 24px 16px;display:flex;position:sticky;top:0}.section-header:before{content:"";z-index:-1;top:calc(-1 * var(--learn-main-padding));height:var(--learn-main-padding);background:var(--bg-main);position:absolute;left:0;right:0}.section-header h2,.section-header p{color:var(--text-inverse)}.section-header h2{font-size:clamp(1rem,2.25vw,1.5rem)}.section-header p{text-transform:uppercase;letter-spacing:-1px;opacity:.75;font-weight:700}.section-header.disabled{background-color:var(--border-main);box-shadow:0 8px 0 #0003, 0 8px 0 var(--border-main)}.section-header.disabled p,.section-header.disabled h2{color:var(--text-muted)}.level-row{justify-content:center;width:100%;display:flex;position:relative}.level-path{flex-direction:column;gap:36px;width:100%;padding:24px 0 48px;display:flex}.roadline{z-index:0;width:168px;height:113px;color:var(--roadline-color,var(--border-main));pointer-events:none;position:absolute;top:0;left:calc(50% - 112px);overflow:visible}.roadline path{fill:none;stroke:currentColor;stroke-width:8px;stroke-linecap:round}.roadline-to-left{height:189px}.level-row:has(.level-btn.complete){--roadline-color:var(--primary-color)}.level-row.path-left .level{transform:translate(-56px)}.level-row.path-right .level{transform:translate(56px)}.level-content{flex-direction:column;align-items:center;gap:24px;display:flex}.level-content p{text-align:center;max-width:172px;line-height:1.5}.level-content:has(.level-btn.disabled) .level-btn svg,.level-content:has(.level-btn.disabled) p{opacity:.5}.level{z-index:1;--level-color:var(--primary-color);width:90px;height:77px;position:relative}.level:has(.level-btn.disabled){--level-color:var(--border-main)}.level:before{content:"";box-shadow:0 8px 0 #0003, 0 8px 0 var(--level-color);z-index:0;border-radius:3px;width:100%;height:6px;position:absolute;top:calc(50% - 8px)}.level .level-btn{background-color:var(--level-color);width:90px;height:77px;box-shadow:0 8px 0 #0003, 0 8px 0 var(--level-color);cursor:pointer;font:inherit;border:none;border-radius:50%;outline:none;justify-content:center;align-items:center;padding:0;display:flex;position:absolute}.level .level-btn svg{z-index:2;color:var(--text-inverse);position:relative}.level .level-btn{z-index:1}.level .level-btn:hover:not(.disabled){cursor:pointer}.level .level-btn:active{box-shadow:0 4px 0 #0003, 0 4px 0 var(--level-color);bottom:-4px}.level .level-btn.disabled{cursor:pointer}.level .level-btn.disabled svg{color:var(--text-muted)}.level-row-divider{justify-content:center;align-items:center;width:100%;display:flex}.level-row-divider p{white-space:nowrap;color:var(--border-main);margin:0 24px;font-weight:700}.level-row-divider hr{border:2px solid var(--border-main);width:100%;height:2px}.lesson-detail-container{bottom:24px;right:max(24px, calc((100vw - var(--learn-sidebar-width) - 1080px) / 2 + 7px));z-index:10;border:2px solid var(--border-main);background-color:var(--bg-card);border-radius:24px;flex-direction:column;gap:12px;width:min(516px,100vw - 48px);height:fit-content;padding:24px;animation:.3s ease-out both quiz-elevate-in;display:flex;position:fixed;box-shadow:0 12px 32px #00000040,0 4px 8px #0000001a}.lesson-detail-container h2{color:var(--text-main);font-size:clamp(1rem,2.25vw,1.5rem)}.lesson-detail-container p{color:var(--text-main)}.lesson-detail-container .lesson-detail{flex-direction:column;gap:4px;padding-right:28px;display:flex}.lesson-detail-container .lesson-detail-icon-label{align-items:center;gap:8px;display:flex}.lesson-detail-container .lesson-detail-icon-label p{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:.875rem;font-weight:700}.lesson-detail-container .lesson-detail-icon-label svg{color:var(--primary-color)}.lesson-detail-container .lesson-detail-icon-label.hidden{display:none}.lesson-detail-container .lesson-detail-close{cursor:pointer;color:var(--text-muted);background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;padding:6px;transition:color .15s,background .15s;display:flex;position:absolute;top:16px;right:16px}.lesson-detail-container .lesson-detail-close:hover{color:var(--text-main);background:#7d3fff14}.lesson-detail-container .lesson-link{background-color:var(--primary-color);width:100%;min-height:56px;box-shadow:0 6px 0 #0003, 0 6px 0 var(--primary-color);border-radius:16px;justify-content:center;padding:16px 0;text-decoration:none;display:flex}.lesson-detail-container .lesson-link p{color:var(--text-inverse);font-size:1rem;font-weight:700}.lesson-detail-container .lesson-link:active{box-shadow:0 4px 0 #0003, 0 4px 0 var(--primary-color);transform:translateY(4px)}.lesson-detail-container .lesson-link.disabled{background-color:var(--border-main);box-shadow:0 8px 0 #0003, 0 8px 0 var(--border-main)}.lesson-detail-container .lesson-link.disabled p{color:var(--text-muted)}.lesson-detail-container.is-closing{pointer-events:none;animation:.18s ease-in forwards lesson-detail-fade-out}@keyframes lesson-detail-fade-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(24px)}}.curriculum-section,.section-header{scroll-margin-top:calc(var(--learn-main-padding) + 16px)}@media (max-width:900px){.learn-page>main{--learn-main-padding:16px;padding:16px!important}.learn-content{flex-direction:column;gap:24px;display:flex}.section-detail-rail{display:none}.roadmap{grid-column:1;row-gap:24px;width:100%;padding-bottom:96px}.level-path{padding:48px 0}.lesson-detail-container{left:16px;right:16px;bottom:calc(72px + env(safe-area-inset-bottom,0px));width:auto;max-width:100%}}@media (prefers-reduced-motion:reduce){.section-detail-rail,.section-detail-content--animated,.lesson-detail-container,.lesson-detail-container.is-closing,.section-progress-fill,.section-progress-continue{transition:none!important;animation:none!important}.level-row{transition:none!important}}html[data-motion=reduce] .section-detail-rail,html[data-motion=reduce] .section-detail-content--animated,html[data-motion=reduce] .lesson-detail-container,html[data-motion=reduce] .lesson-detail-container.is-closing,html[data-motion=reduce] .section-progress-fill,html[data-motion=reduce] .section-progress-continue,html[data-motion=reduce] .level-row{transition:none!important;animation:none!important}.level:has(.level-btn.checkpoint){--level-color:#d97706}.level .level-btn.checkpoint{cursor:pointer;background-color:#d97706;box-shadow:0 8px #0003,0 8px #b45309}.level .level-btn.checkpoint svg{color:#fff;opacity:1}.section-skip-badges{flex-wrap:wrap;gap:8px;display:flex}.section-skip-chip{color:var(--text-secondary);border:1px solid var(--border-main);background:#ffffff0f;border-radius:6px;padding:3px 8px;font-size:.75rem;font-weight:600}.skip-modal-content{flex-direction:column;gap:10px;width:100%;display:flex}.skip-modal-desc{color:var(--text-muted);margin:0;font-size:.875rem;line-height:1.45}.locked-node-modal-content{flex-direction:column;gap:10px;width:100%;display:flex}.skip-secondary-link{color:var(--primary-color);border:1px dashed var(--primary-color);background:0 0;border-radius:8px;justify-content:center;align-items:center;padding:8px 12px;font-size:.8125rem;font-weight:600;text-decoration:none;transition:background .15s;display:flex}.skip-secondary-link:hover{background:#7c3aed14}.guest-rail-notice-box{background:var(--bg-surface-secondary,#ffffff0a);border:1px solid var(--border-main);border-radius:12px;flex-direction:column;gap:10px;margin-top:20px;padding:16px;display:flex}.guest-rail-notice-header{color:var(--primary-color);align-items:center;gap:8px;font-size:.9375rem;font-weight:700;display:flex}.guest-rail-notice-desc{color:var(--text-muted);margin:0;font-size:.8125rem;line-height:1.45}.guest-rail-login-btn{background-color:var(--primary-color);width:100%;color:var(--text-inverse);box-shadow:0 4px 0 #0003, 0 4px 0 var(--primary-color);border-radius:8px;justify-content:center;align-items:center;padding:10px 14px;font-size:.875rem;font-weight:700;text-decoration:none;transition:transform .1s,box-shadow .1s,filter .15s;display:flex}.guest-rail-login-btn:hover{filter:brightness(1.08)}.guest-rail-login-btn:active{box-shadow:0 2px 0 #0003, 0 2px 0 var(--primary-color);transform:translateY(2px)}.guest-unit-lock-modal{flex-direction:column;gap:12px;width:100%;display:flex}.guest-unit-lock-desc{color:var(--text-muted);margin:0;font-size:.875rem;line-height:1.45}
