/* Learn & Grow — 070 concept blueprint. Black canvas; real, responsive presentation skins. */
.np-learn { --lg-edge:#503715; --lg-gold:#e8b951; --lg-green:#68be6a; --lg-muted:#aaa89f; }
.np-learn .np-s-topbar { gap:13px; }
.np-learn .np-s-topnav { gap:2px; }
.np-learn .np-s-topnav > :is(a,button) { min-width:44px; padding-inline:4px; }
.np-learn .np-s-topnav > [data-np-route="courses"] { min-width:76px; }
.np-learn .np-s-search { flex-basis:208px; }
.np-lg-layout { display:grid; grid-template-columns:226px minmax(0,1fr) 336px; gap:12px; align-items:start; margin-top:12px; }
.np-lg-left,.np-lg-main,.np-lg-right { min-width:0; }
.np-lg-right { display:grid; gap:12px; }
.np-learn .np-s-card { border-color:var(--lg-edge); border-radius:6px; background:radial-gradient(ellipse at 95% 0,#40220712,transparent 60%),linear-gradient(130deg,#0c0b08,#050505 80%); box-shadow:inset 0 0 0 2px #8c651507; }
.np-learn h2 { font:400 12px/1.4 Arial,Helvetica,sans-serif; }
.np-lg-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:35px; padding:10px 13px; }
.np-lg-heading h2 { min-width:0; }
.np-learn .np-lg-heading>button { color:var(--lg-gold); font-size:10px; white-space:nowrap; }
.np-learn .np-lg-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:31px; padding:6px 13px; border:1px solid #9d611c; border-radius:4px; background:linear-gradient(#3c230bf0,#110d06 88%); box-shadow:inset 0 1px 5px #c4862d19; color:#f2c870; font-size:12px; line-height:1.35; text-align:center; }
.np-learn .np-lg-button:hover { border-color:#edbb4c; background:linear-gradient(#4b300e,#1b1308); }
.np-learn .np-lg-button.is-outline { border-color:#62411b; background:#0b0905; color:#ddd4bb; }
.np-learn .np-lg-button.is-outline:hover { border-color:#e6b954; }
.np-learn progress { appearance:none; display:block; width:100%; height:5px; overflow:hidden; border:1px solid #42351b; border-radius:4px; background:#13130f; accent-color:#c18e2c; }
.np-learn progress::-webkit-progress-bar { background:#12120f; }
.np-learn progress::-webkit-progress-value { background:linear-gradient(90deg,#b77519,#dbab38); border-radius:4px; }
.np-learn progress::-moz-progress-bar { background:linear-gradient(90deg,#b77519,#dbab38); }
.np-lg-navigation { padding-bottom:20px; }
.np-lg-navigation>h2 { display:flex; align-items:center; gap:12px; min-height:44px; padding:11px 21px; background:radial-gradient(ellipse at 8% 55%,#b94a1038,transparent 28%),linear-gradient(110deg,#280c0a,#160606); border-bottom:1px solid #4f2c12; }
.np-lg-navigation>h2 .np-s-icon { width:23px; height:23px; color:#ffd361; filter:drop-shadow(0 0 5px #c85a1b); }
.np-lg-nav-items { padding:4px 6px 0; }
.np-learn .np-lg-nav-items>button { display:flex; align-items:center; gap:13px; width:100%; min-height:35px; padding:8px 19px; border:1px solid transparent; border-radius:4px; text-align:left; color:#e3ceaa; font-size:13px; }
.np-lg-nav-items .np-s-icon { color:#dab05a; width:20px; height:20px; }
.np-learn .np-lg-nav-items>button:hover { background:#20170c; }
.np-learn .np-lg-nav-items>button.is-selected { color:#f0ce6e; border-color:#594017; background:linear-gradient(90deg,#37210c,#140f06); }
.np-lg-upgrade { margin:13px 10px 0; padding:13px 14px; border:1px solid #56336b; border-radius:6px; box-shadow:inset 0 0 0 3px #271d2438; background:radial-gradient(ellipse at 50% 100%,#28221450,transparent 75%),#0d0a0c; }
.np-lg-upgrade>div { display:flex; justify-content:space-between; align-items:start; gap:10px; }
.np-lg-upgrade h3 { font:400 11px/1.4 Arial,sans-serif; color:#eacb8b; }
.np-lg-upgrade .np-s-icon { color:#e8ba5a; width:21px; height:21px; }
.np-lg-upgrade p { font-size:11px; line-height:1.7; color:#c4c2b9; margin:8px 0 11px; }
.np-lg-upgrade .np-lg-button { width:100%; }
.np-lg-main { border-radius:6px; }
.np-lg-hero-row { display:grid; grid-template-columns:minmax(0,1fr) 267px; gap:0; border:1px solid var(--lg-edge); border-bottom:0; border-radius:6px 6px 0 0; overflow:hidden; padding:5px; background:#090805; }
.np-lg-hero { position:relative; min-height:197px; overflow:hidden; background:radial-gradient(ellipse at 25% 50%,#37281330,transparent 68%),#070805; border-radius:4px; }
.np-lg-hero-art { position:absolute; inset:0 0 0 auto; width:53%; height:100%; object-fit:cover; object-position:48% 38%; opacity:.93; }
.np-lg-hero:after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#05060444,transparent 28%,#06070533 42%,transparent 61%),linear-gradient(0deg,#0008,transparent 25%); }
.np-lg-hero-copy { position:relative; z-index:1; padding:24px 22px 23px 54px; max-width:100%; }
.np-lg-hero h1 { font:400 29px/1.13 Georgia,'Times New Roman',serif; letter-spacing:.1px; color:#efe0bc; text-shadow:0 2px 7px #000; }
.np-lg-hero p { margin-top:8px; font-size:13px; line-height:1.45; color:#deded6; text-shadow:0 1px 5px #000; }
.np-lg-hero-copy>div { display:flex; gap:10px; margin-top:14px; }
.np-lg-journey { align-self:start; padding:9px 10px 10px; border:1px solid #463012; border-radius:4px; margin-left:4px; min-height:177px; background:radial-gradient(ellipse at 5% 45%,#43471613,transparent 48%),#070807; }
.np-lg-journey>h2 { font-size:11px; }
.np-lg-journey>p { font-size:10px; color:#c2c1b5; margin-top:2px; }
.np-lg-journey-body { display:flex; align-items:center; gap:12px; margin:12px 0; }
.np-lg-ring { flex:0 0 78px; height:78px; position:relative; }
.np-lg-ring svg { display:block; width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.np-lg-ring circle { fill:none; stroke-width:6; }
.np-lg-ring-track { stroke:#22331b; }
.np-lg-ring-gold { stroke:#d1b63b; stroke-dasharray:84 264; stroke-dashoffset:-168; }
.np-lg-ring-fill { stroke:#48ba54; stroke-dasharray:179 264; filter:drop-shadow(0 0 3px #2dab4655); }
.np-lg-ring>span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.np-lg-ring strong { font-size:19px; font-weight:400; color:#f9e7b8; }
.np-lg-ring small { font-size:6px; color:#bdb9a8; }
.np-lg-journey dl { flex:1; min-width:0; padding-left:11px; border-left:1px solid #35230f; }
.np-lg-journey dl>div { display:flex; align-items:start; justify-content:space-between; gap:9px; padding:5px 0; }
.np-lg-journey dt { font-size:9px; color:#c1beb5; }
.np-lg-journey dd { flex:0 0 auto; font-size:10px; color:#eac261; }
.np-lg-journey>.np-lg-button { display:flex; width:100%; min-height:28px; font-size:11px; }
.np-lg-section { border:1px solid var(--lg-edge); padding-bottom:10px; background:#070705; }
.np-lg-continuing,.np-lg-recommended { border-top-color:#5a3b18; border-bottom:0; }
.np-lg-recommended { border-bottom:1px solid var(--lg-edge); border-radius:0 0 6px 6px; }
.np-lg-course-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; padding:0 13px; }
.np-lg-course { min-width:0; border:1px solid #574122; border-radius:6px; overflow:hidden; background:linear-gradient(130deg,#10100c,#080807); box-shadow:inset 0 0 0 2px #8b692109; }
.np-learn .np-lg-course-cover { display:block; position:relative; width:100%; text-align:left; aspect-ratio:1.78; overflow:hidden; border-radius:5px 5px 0 0; background:#161107; }
.np-lg-course-cover>img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; }
.np-lg-course-cover:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,#0001,transparent 55%,#0007); pointer-events:none; }
.np-lg-course-cover:hover>img { transform:scale(1.035); }
.np-lg-badge { display:block; position:absolute; z-index:1; top:7px; left:8px; padding:2px 4px; border:1px solid #6c4c18; border-radius:2px; background:#181306d9; color:#e5c97d; font-size:8px; line-height:1.2; }
.np-lg-badge.is-green { color:#abe697; border-color:#426b29; background:#0d200bcc; }
.np-lg-badge.is-violet { color:#e0c5ed; border-color:#614672; background:#170e1fdc; }
.np-lg-open-icon { display:grid; place-items:center; position:absolute; z-index:1; inset:50% auto auto 50%; transform:translate(-50%,-50%); border:1px solid #f2ca75aa; border-radius:50%; color:#f0d386; width:34px; height:34px; background:#090a07b0; opacity:0; transition:opacity .2s; }
.np-lg-course-cover:hover .np-lg-open-icon,.np-lg-course-cover:focus-visible .np-lg-open-icon { opacity:1; }
.np-lg-course-body { padding:8px 10px 10px; }
.np-lg-course h3 { font-size:12px; font-weight:400; line-height:1.4; margin:0; }
.np-learn .np-lg-course h3>button { text-align:left; color:#eeeee7; width:100%; }
.np-lg-course h3>button:hover { color:var(--lg-gold); }
.np-lg-course-body>p { color:var(--lg-muted); font-size:10px; margin-top:3px; }
.np-lg-course-body>progress { margin-top:15px; }
.np-lg-course-meta { display:flex; align-items:center; justify-content:space-between; gap:6px; color:var(--lg-muted); font-size:10px; margin-top:7px; }
.np-lg-course-meta .np-lg-rating { color:var(--lg-gold); font-size:12px; }
.np-lg-course-recommended .np-lg-course-cover { aspect-ratio:2.12; }
.np-lg-course-recommended .np-lg-course-body { padding-top:6px; padding-bottom:8px; }
.np-lg-course-recommended .np-lg-course-meta { margin-top:5px; }
.np-lg-paths { margin-top:11px; padding-bottom:6px; }
.np-lg-paths .np-lg-heading { padding-block:9px 7px; }
.np-lg-paths .np-lg-heading>button { color:var(--lg-green); }
.np-lg-path-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:0 5px; }
.np-learn .np-lg-path { display:flex; gap:6px; text-align:left; border:1px solid #4a3b1d; border-radius:4px; min-width:0; overflow:hidden; background:radial-gradient(ellipse at 80% 0,#37321b45,transparent 65%),#0b0c07; }
.np-learn .np-lg-path:hover { border-color:var(--lg-gold); }
.np-lg-path>img { width:57px; height:90px; object-fit:cover; flex:0 0 57px; }
.np-lg-path>span { min-width:0; flex:1; padding:5px 6px 4px 0; }
.np-lg-path strong { display:block; font-size:12px; font-weight:400; color:#ecebe2; margin-bottom:2px; }
.np-lg-path>span>span { display:block; font-size:10px; line-height:1.45; color:#c8c5b2; }
.np-lg-path small { display:block; color:#b2a979; font-size:9px; margin-top:4px; }
.np-lg-path progress { height:4px; margin-top:3px; }
.np-lg-path.is-green small { color:#72bb87; }
.np-lg-path.is-green progress::-webkit-progress-value { background:linear-gradient(90deg,#386a3d,#8db970); }
.np-lg-daily { padding:0 12px 10px; border-color:#814222!important; }
.np-lg-daily>header { margin:0 -12px 0; padding:12px 13px 6px; background:repeating-linear-gradient(28deg,transparent,transparent 15px,#8a22120b 16px,#8a22120b 17px),linear-gradient(100deg,#190808,#300909aa); }
.np-lg-daily>header p { color:#e2bd59; margin-top:4px; font-size:11px; }
.np-lg-daily-copy { display:flex; gap:10px; padding:10px 0 8px; }
.np-lg-daily-copy>img { display:block; width:52px; height:54px; object-fit:cover; border-radius:3px; }
.np-lg-daily-copy>div { min-width:0; flex:1; }
.np-lg-daily-copy h3 { font-size:11px; font-weight:400; line-height:1.5; }
.np-lg-daily-copy p { color:#aaa99f; font-size:11px; margin-top:3px; }
.np-lg-daily-copy small { display:block; color:#96978f; font-size:10px; margin-top:3px; }
.np-lg-daily-copy>span { color:#6aca6c; font-size:10px; white-space:nowrap; }
.np-lg-daily>.np-lg-button { display:flex; width:100%; }
.np-lg-live .np-lg-heading { border-bottom:1px solid #3c2a11; }
.np-lg-right .np-lg-heading>button { color:var(--lg-green); }
.np-lg-live li { display:flex; align-items:center; gap:11px; padding:8px 12px; border-bottom:1px solid #372914; }
.np-lg-live li:last-child { border-bottom:0; }
.np-lg-live li>img { width:42px; height:42px; border-radius:50%; border:1px solid #6b4b1c; object-fit:cover; }
.np-lg-live li>div { min-width:0; flex:1; }
.np-lg-live h3 { font-size:12px; font-weight:400; }
.np-lg-live p { font-size:10px; color:#c0beb7; margin-top:2px; }
.np-lg-live small { display:block; font-size:10px; color:#91918a; margin-top:2px; }
.np-lg-live .np-lg-button { min-width:67px; min-height:29px; font-size:11px; padding-inline:10px; }
.np-lg-skills { padding-bottom:12px; }
.np-lg-skills ul { padding:0 14px; }
.np-lg-skills li { --skill:#c39539; }
.np-lg-skills li.is-rose { --skill:#c18e6b; }
.np-lg-skills li.is-blue { --skill:#3282a1; }
.np-lg-skills li.is-cyan { --skill:#258f9a; }
.np-lg-skills li.is-indigo { --skill:#5d68b0; }
.np-lg-skills li.is-green { --skill:#4b9350; }
.np-learn .np-lg-skills li button { display:grid; grid-template-columns:20px 73px minmax(0,1fr) 41px; width:100%; gap:7px; align-items:center; min-height:26px; text-align:left; }
.np-lg-skills .np-s-icon { width:18px; height:18px; color:var(--skill); }
.np-lg-skills span { font-size:11px; color:#dedcd4; }
.np-lg-skills strong { font-weight:400; color:#ddbb6c; font-size:11px; text-align:right; }
.np-lg-skills progress { border-color:#29281e; }
.np-lg-skills progress::-webkit-progress-value { background:var(--skill); }
.np-lg-skills progress::-moz-progress-bar { background:var(--skill); }
.np-lg-skills li button:hover span { color:var(--lg-gold); }
.np-lg-points { padding:0 12px 11px; }
.np-lg-points>.np-lg-heading { padding-inline:0; }
.np-lg-points-body { display:flex; align-items:center; gap:10px; margin:-1px 0 8px; }
.np-lg-points-body>img { width:78px; height:78px; object-fit:contain; }
.np-lg-points-body dl { display:grid; grid-template-columns:1.35fr 1.25fr .8fr; min-width:0; flex:1; }
.np-lg-points-body dl>div { padding:3px 8px; border-right:1px solid #292318; }
.np-lg-points-body dl>div:first-child { padding-left:0; }
.np-lg-points-body dl>div:last-child { padding-right:0; border-right:0; }
.np-lg-points-body dt { color:#94948b; font-size:9px; white-space:nowrap; }
.np-lg-points-body dd { color:#e5b650; font-size:12px; margin-top:7px; white-space:nowrap; }
.np-lg-points>.np-lg-button { display:flex; width:100%; }
.np-lg-rewards { margin-top:12px; }
.np-lg-rewards .np-s-daily-reward>.np-lg-button { font-size:11px; min-width:140px; }
.np-lg-library { margin-top:10px; padding-bottom:15px; }
.np-lg-library>.np-lg-heading { padding-block:16px; }
.np-lg-library-controls { display:flex; flex-wrap:wrap; gap:8px; padding:0 13px; }
.np-lg-library-controls>label { display:flex; align-items:center; flex:1 1 200px; min-width:0; color:#c9a864; gap:6px; padding-left:10px; border:1px solid #59411e; border-radius:4px; background:#080a08; }
.np-lg-library-controls input { min-width:0; width:100%; padding:10px 7px; border:0; outline-offset:0; background:none; color:#eee7db; font-size:12px; }
.np-lg-library-controls .np-s-icon { width:17px; height:17px; }
.np-lg-library-controls select { font:12px Arial,sans-serif; padding:8px; border:1px solid #59411e; border-radius:4px; background:#090b08; color:#d3c4a0; }
.np-lg-library-status { display:flex; gap:10px; justify-content:space-between; align-items:center; padding:13px; color:#b8b5a6; font-size:12px; }
.np-lg-library-status button { color:#e4bb64; font-size:11px; }
.np-lg-library-grid { gap:15px 12px; }
.np-lg-empty { text-align:center; padding:70px 25px; color:#aaa89a; }
.np-lg-empty>.np-s-icon { width:54px; height:54px; color:#cfa754; }
.np-lg-empty h3 { font:24px Georgia,serif; color:#dec48e; margin:15px 0 8px; }
.np-lg-empty>.np-lg-button { margin-top:22px; }
.np-learn .np-lg-reader { width:min(660px,calc(100% - 30px)); max-height:90dvh; padding:28px; background:radial-gradient(ellipse at 90% 0,#4734182b,transparent 58%),#090a07; }
.np-lg-reader-header { display:flex; gap:16px; align-items:center; padding:10px 0 18px; border-bottom:1px solid #4b381b; }
.np-lg-reader-header>img { width:96px; height:84px; object-fit:cover; border-radius:5px; border:1px solid #60431d; }
.np-lg-reader-header>div { min-width:0; }
.np-lg-reader .np-lg-reader-header h2 { font:26px/1.18 Georgia,serif; color:#eed193; padding:0; margin:0; }
.np-lg-reader-header p { font-size:12px; color:#b6b29e; margin-top:6px; }
.np-lg-reader-content { padding:19px 0; color:#d6d4c9; line-height:1.7; font-size:14px; }
.np-lg-reader-content>p+p { margin-top:14px; }
.np-lg-reader-content h3 { font:23px/1.3 Georgia,serif; color:#e1cb9d; margin-bottom:14px; }
.np-lg-reader-content .np-lg-reader-prompt { padding:13px 16px; margin-top:18px; border-left:2px solid #c3a04b; background:#29231360; color:#e1c792; font-style:italic; }
.np-lg-reader-content ul { display:grid; gap:8px; margin-top:14px; }
.np-learn .np-lg-reader-list-button { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left; padding:12px; border:1px solid #47371d; border-radius:4px; color:#d8c493; background:#10110b; }
.np-learn .np-lg-reader-list-button:hover { border-color:#d2a449; }
.np-lg-reader-list-button small { color:#91b590; }
.np-lg-reader-actions { display:flex; flex-wrap:wrap; gap:9px; }
.np-lg-reader-actions>.np-lg-button { min-height:38px; }
.np-lg-reader #np-lg-reader-notice { font-size:11px; color:#a6a294; line-height:1.6; margin-top:21px; border-top:1px solid #382b17; padding-top:13px; }
.np-lg-local-status { color:#a7d893; font-size:12px; margin-top:14px; padding:12px; background:#172312; border:1px solid #42672b; border-radius:5px; }
.np-lg-reader-section-label { color:#c5a66b; font-size:11px; letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; }
@media(min-width:1381px) { .np-lg-course-continuing { min-height:211px; } }
@media(max-width:1380px) { .np-lg-layout { grid-template-columns:198px minmax(0,1fr) 288px; gap:10px; } .np-lg-hero-row { grid-template-columns:minmax(0,1fr) 232px; } .np-lg-hero-copy { padding-left:24px; padding-right:10px; } .np-lg-hero h1 { font-size:26px; } .np-lg-hero p { font-size:12px; } .np-lg-hero-copy>div { flex-wrap:wrap; gap:6px; } .np-lg-hero .np-lg-button { font-size:11px; padding-inline:10px; } .np-lg-journey-body { gap:5px; } .np-lg-ring { flex-basis:65px; height:65px; } .np-lg-journey dl { padding-left:7px; } .np-lg-course-grid { gap:8px; padding-inline:9px; } .np-lg-course h3 { font-size:11px; } .np-lg-course-body { padding-inline:8px; } .np-lg-course-body>p { font-size:9px; } .np-lg-course-meta { font-size:9px; } .np-lg-course-body>progress { margin-top:11px; } .np-lg-path-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .np-lg-path>span>span { font-size:11px; } .np-lg-path small { font-size:10px; } .np-lg-daily-copy { gap:7px; } .np-lg-daily-copy>img { width:44px; height:52px; } .np-lg-daily-copy h3 { font-size:10px; } .np-lg-daily-copy>span { font-size:9px; } .np-lg-live li { gap:8px; padding-inline:10px; } .np-lg-live li>img { width:35px; height:35px; } .np-lg-live h3 { font-size:11px; } .np-lg-live .np-lg-button { min-width:51px; } .np-lg-points-body { gap:7px; } .np-lg-points-body>img { width:62px; height:70px; } .np-lg-points-body dl>div { padding-inline:5px; } .np-lg-points-body dd { font-size:10px; } .np-lg-skills li button { grid-template-columns:19px 70px minmax(0,1fr) 30px!important; gap:5px!important; } .np-learn .np-s-topbar { gap:9px; } .np-learn .np-s-topnav>[data-np-route="courses"] { min-width:61px; font-size:10px; } }
@media(max-width:1190px) { .np-lg-layout { grid-template-columns:184px minmax(0,1fr); } .np-lg-right { grid-column:2; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:12px; } .np-lg-left { grid-row:1 / span 2; } .np-lg-hero-row { grid-template-columns:minmax(0,1fr) 242px; } .np-lg-hero h1 { font-size:27px; } .np-lg-course h3 { font-size:12px; } .np-lg-course-body>p { font-size:10px; } .np-lg-course-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .np-lg-course-cover { aspect-ratio:2!important; } .np-lg-course-meta { font-size:11px; } .np-lg-course-continuing .np-lg-course-body { padding-bottom:13px; } .np-lg-nav-items>button { padding-inline:12px!important; font-size:12px!important; gap:10px!important; } .np-lg-navigation>h2 { padding-inline:17px; } .np-lg-upgrade { padding:12px 10px; } .np-lg-points-body>img { width:73px; height:80px; } }
@media(max-width:1000px) { .np-lg-hero-row { grid-template-columns:1fr; } .np-lg-hero { min-height:214px; } .np-lg-hero h1 { font-size:31px; } .np-lg-hero p { font-size:14px; } .np-lg-hero-copy { padding:26px 26px 28px; } .np-lg-journey { margin:3px 0 0; display:grid; grid-template-columns:1fr auto; gap:2px 12px; min-height:0; padding:12px 15px; } .np-lg-journey-body { grid-column:1 / -1; grid-row:2; margin:8px 0; gap:20px; } .np-lg-journey>p { grid-column:1; } .np-lg-journey>.np-lg-button { grid-column:2; grid-row:1; width:auto; } .np-lg-journey dl { display:flex; justify-content:space-between; gap:12px; } .np-lg-journey dl>div { display:block; } .np-lg-journey dt { font-size:10px; } .np-lg-journey dd { font-size:14px; margin-top:5px; } .np-lg-journey-body { grid-row:3; } .np-lg-ring { flex-basis:69px; height:69px; } .np-lg-ring small { font-size:7px; } .np-lg-right { grid-template-columns:1fr; } .np-lg-points-body { max-width:370px; margin-inline:auto; } .np-lg-points-body dd { font-size:14px; } }
@media(max-width:800px) { .np-lg-layout { grid-template-columns:minmax(0,1fr); } .np-lg-left { grid-row:auto; } .np-lg-left .np-lg-navigation { display:none; } .np-learn.is-navigation-open .np-lg-left .np-lg-navigation { display:block; } .np-lg-main { grid-column:1; } .np-lg-right { grid-column:1; grid-template-columns:repeat(2,minmax(0,1fr)); } .np-lg-navigation { padding-bottom:12px; } .np-lg-nav-items { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:8px; gap:4px; } .np-lg-nav-items>button { min-height:40px!important; } .np-lg-upgrade { display:none; } .np-lg-left:has(.np-lg-navigation:not([hidden])) { min-height:0; } .np-lg-layout { gap:0; } .np-lg-main { margin-top:0; } .np-learn.is-navigation-open .np-lg-main { margin-top:12px; } .np-lg-right { margin-top:14px; gap:12px; } .np-lg-hero-row { grid-template-columns:minmax(0,1fr) 252px; } .np-lg-hero-copy { padding:28px 20px; } .np-lg-hero h1 { font-size:29px; } .np-lg-hero p { font-size:12px; } .np-lg-hero-art { width:57%; opacity:.85; } .np-lg-journey { display:block; min-height:181px; padding:9px; margin:0 0 0 4px; } .np-lg-journey-body { margin:13px 0; gap:9px; } .np-lg-journey dl { display:block; } .np-lg-journey dl>div { display:flex; padding-block:4px; } .np-lg-journey dt { font-size:9px; } .np-lg-journey dd { font-size:10px; margin-top:0; } .np-lg-journey>.np-lg-button { width:100%; } .np-lg-path-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .np-lg-course h3 { font-size:14px; } .np-lg-course-body>p { font-size:12px; } .np-lg-course-meta { font-size:12px; } .np-lg-course-body { padding:11px 12px!important; } .np-lg-course-body>progress { margin-top:13px; } .np-lg-course-cover { aspect-ratio:2!important; } .np-lg-heading h2 { font-size:12px; } .np-lg-heading>button { font-size:11px!important; } .np-lg-heading { padding-block:12px; } .np-lg-badge { font-size:9px; top:9px; left:9px; } .np-lg-path strong { font-size:14px; } .np-lg-path>span>span { font-size:11px; } .np-lg-path>img { width:65px; flex-basis:65px; height:102px; } .np-lg-path small { font-size:11px; margin-top:7px; } .np-lg-live h3 { font-size:12px; } .np-lg-live p,.np-lg-live small { font-size:11px; } .np-lg-live li { min-height:70px; } .np-lg-right h2 { font-size:12px; } .np-lg-daily-copy h3 { font-size:12px; } .np-lg-daily-copy>span { font-size:11px; } .np-lg-daily-copy small,.np-lg-daily-copy p { font-size:11px; } .np-lg-daily-copy>img { width:48px; height:59px; } .np-lg-skills li { min-height:30px; } .np-lg-skills span,.np-lg-skills strong { font-size:12px; } .np-lg-points-body dd { font-size:11px; } .np-lg-points-body>img { width:62px; } .np-lg-rewards .np-s-daily-reward>.np-lg-button { min-width:110px; } }
@media(max-width:640px) { .np-lg-hero-row { grid-template-columns:1fr; padding:4px; } .np-lg-hero { min-height:228px; } .np-lg-hero h1 { font-size:31px; } .np-lg-hero p { font-size:13px; } .np-lg-hero-copy { padding:30px 20px; } .np-lg-hero-copy>div { margin-top:18px; } .np-lg-hero .np-lg-button { min-height:36px; font-size:12px; padding-inline:12px; } .np-lg-hero-art { opacity:.77; object-position:40% 35%; width:60%; } .np-lg-hero:after { background:linear-gradient(90deg,#0005,transparent 75%),linear-gradient(0deg,#0006,transparent 50%); } .np-lg-journey { display:grid; grid-template-columns:1fr auto; margin:0; padding:14px 11px; min-height:0; gap:3px 6px; } .np-lg-journey>p { grid-column:1; grid-row:2; font-size:11px; } .np-lg-journey>.np-lg-button { grid-column:2; grid-row:1 / span 2; width:auto; font-size:11px; padding-inline:8px; } .np-lg-journey>h2 { font-size:11px; } .np-lg-journey-body { grid-column:1 / -1; grid-row:3; gap:20px; margin:10px 0 0; } .np-lg-ring { flex-basis:75px; height:75px; } .np-lg-journey dt,.np-lg-journey dd { font-size:12px; } .np-lg-journey dl>div { padding-block:5px; } .np-lg-right { grid-template-columns:1fr; } .np-lg-course-grid { grid-template-columns:1fr; gap:14px; padding-inline:12px; } .np-lg-course-cover { aspect-ratio:1.95!important; } .np-lg-course h3 { font-size:16px; } .np-lg-course-body>p { font-size:12px; margin-top:4px; } .np-lg-course-meta { font-size:12px; margin-top:10px; } .np-lg-course-meta .np-lg-rating { font-size:14px; } .np-lg-course-body { padding:11px 13px 14px!important; } .np-lg-course progress { height:6px; } .np-lg-course-recommended .np-lg-course-meta { margin-top:9px; } .np-lg-badge { font-size:10px; } .np-lg-section { padding-bottom:12px; } .np-lg-path-grid { grid-template-columns:1fr; gap:10px; padding-inline:10px; } .np-lg-path>img { width:74px; flex-basis:74px; height:105px; } .np-lg-path>span { padding:10px 10px 8px 3px; } .np-lg-path strong { font-size:16px; } .np-lg-path>span>span { font-size:12px; } .np-lg-path small { font-size:11px; } .np-lg-path progress { margin-top:6px; } .np-lg-paths { padding-bottom:10px; } .np-lg-daily-copy>img { width:55px; height:62px; } .np-lg-daily-copy h3 { font-size:13px; } .np-lg-daily-copy>span { font-size:12px; } .np-lg-daily>.np-lg-button { min-height:38px; } .np-lg-live li { gap:13px; padding:12px; } .np-lg-live li>img { width:45px; height:45px; } .np-lg-live h3 { font-size:13px; } .np-lg-live li .np-lg-button { min-height:33px; min-width:62px; } .np-lg-skills ul { padding-inline:15px; } .np-lg-skills li { min-height:32px; } .np-lg-skills li button { grid-template-columns:21px 81px minmax(0,1fr) 33px!important; gap:8px!important; } .np-lg-skills span,.np-lg-skills strong { font-size:12px; } .np-lg-points-body>img { width:80px; height:86px; } .np-lg-points-body dd { font-size:12px; } .np-lg-points-body dt { font-size:10px; } .np-lg-points>.np-lg-button { min-height:37px; } .np-lg-library-controls>label { flex-basis:100%; } .np-lg-library-controls select { min-width:0; flex:1; font-size:11px; width:calc(50% - 10px); } .np-lg-library-controls>.np-lg-button { width:100%; } .np-lg-library-status { font-size:11px; } .np-learn .np-lg-reader { padding:25px 19px; } .np-lg-reader-header>img { width:66px; height:73px; } .np-lg-reader .np-lg-reader-header h2 { font-size:24px; } .np-lg-reader-header { gap:12px; } .np-lg-reader-actions>.np-lg-button { flex:1 1 130px; } .np-lg-reader-content { font-size:14px; } }
@media(max-width:359px) { .np-lg-hero h1 { font-size:28px; } .np-lg-hero-copy { padding-left:15px; } .np-lg-journey { grid-template-columns:1fr; } .np-lg-journey>.np-lg-button { grid-column:1; grid-row:4; margin-top:7px; } .np-lg-journey-body { gap:10px; } .np-lg-ring { flex-basis:67px; height:67px; } .np-lg-journey dt,.np-lg-journey dd { font-size:11px; } .np-lg-heading h2 { font-size:11px; } .np-lg-heading>button { font-size:10px!important; } .np-lg-nav-items>button { gap:7px!important; font-size:11px!important; padding-inline:7px!important; } .np-lg-daily-copy h3 { font-size:12px; } .np-lg-points-body>img { width:62px; } .np-lg-points-body dd { font-size:11px; } .np-lg-points-body dt { font-size:9px; } .np-lg-skills li button { grid-template-columns:18px 72px minmax(0,1fr) 30px!important; gap:6px!important; } }
@media(prefers-reduced-motion:reduce) { .np-lg-course-cover>img,.np-lg-open-icon { transition:none; } }