/* Aspi 101 — synthwave chrome and lesson theme for the static guides.
   Loaded after /synth.css, which supplies the self-hosted fonts, palette
   tokens, the .sw-nav / .sw-footer shells and the scenery (sky, sun,
   mountains, grid). Everything here is scoped to .aspi-learning-page so the
   guides read like the rest of the site without the Nunjucks layout.
   Lesson-only widgets (terminal, bees, vault mockup…) live in each page. */

/* ---------- Tokens: the lessons' own variable names, on the synth palette ---------- */
.aspi-learning-page{
  --bg:var(--sw-night);
  --bg-card:#140b35;
  --bg-elevated:#1d1048;
  --border:rgba(185,103,255,.26);
  --text:#ece4ff;
  --text-muted:var(--sw-muted);
  --accent:var(--sw-magenta);
  --accent-2:var(--sw-purple);
  --accent-light:var(--sw-pink);
  --accent-glow:rgba(255,46,166,.4);
  --on-accent:#fff;
  --blue:var(--sw-cyan);
  --sky:var(--sw-cyan);
  --cyan:var(--sw-cyan);
  --teal:var(--sw-cyan);
  --teal-dim:#19b8d6;
  --orange:#ff9f4a;
  --wax:#ff9f4a;
  --gold:var(--sw-gold);
  --red:#ff5c8a;
  --rose:#ff5c8a;
  --pink:var(--sw-pink);
  --purple:var(--sw-violet);
  --green:#5cffc4;
  --moss:#5cffc4;
  --cream:#fff1fb;
  --ink:#12072e;
  --comb:var(--sw-violet);
  --radius:14px;
  --shadow:0 22px 50px rgba(0,0,0,.4);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --panel:linear-gradient(160deg,rgba(44,20,96,.55),rgba(16,8,42,.78));
  --panel-line:rgba(185,103,255,.28);
}

/* ---------- Base ---------- */
:where(.aspi-learning-page) *,:where(.aspi-learning-page) *::before,:where(.aspi-learning-page) *::after{box-sizing:border-box;margin:0;padding:0}
html:has(body.aspi-learning-page){scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 20px);-webkit-text-size-adjust:100%}
body.aspi-learning-page{margin:0;min-height:100vh;background:radial-gradient(ellipse 80% 40% at 50% 0%,rgba(123,44,255,.16),transparent 70%),var(--sw-night);color:var(--text);font:400 16px/1.7 var(--font-read);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:where(.aspi-learning-page) :is(img,svg){max-width:100%}
:where(.aspi-learning-page) a{color:inherit;text-decoration:none}
:where(.aspi-learning-page) :is(button,input,textarea){font:inherit;color:inherit}
.aspi-learning-page :is(a,button,input,summary,textarea,[tabindex]):focus-visible{outline:2px solid var(--sw-cyan);outline-offset:4px}
.aspi-learning-page ::selection{background:var(--sw-magenta);color:#fff}
.aspi-101-skip{position:fixed;left:16px;top:-120px;z-index:1300;padding:12px 18px;border-radius:6px;background:var(--sw-magenta);color:#fff!important;font:700 11px/1.4 var(--font-tech);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 0 24px rgba(255,46,166,.6)}
.aspi-101-skip:focus{top:14px}

/* ---------- Buttons (the site's .btn-primary / ghost twins) ---------- */
.aspi-learning-page :is(.btn-primary,.btn-ghost,.sw-btn-ghost){
  display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:15px 26px;border-radius:6px;cursor:pointer;
  font:700 12px/1.35 var(--font-tech);letter-spacing:.16em;text-transform:uppercase;text-align:center;text-decoration:none;
  transition:box-shadow .25s,transform .25s,filter .25s,color .25s,border-color .25s;
}
.aspi-learning-page .btn-primary{
  color:#fff;border:1px solid rgba(255,255,255,.35);
  background:linear-gradient(100deg,var(--sw-magenta) 0%,#b43cff 58%,#6a3bff 100%);
  box-shadow:0 0 0 1px rgba(255,46,166,.3),0 0 26px rgba(255,46,166,.45),inset 0 1px 0 rgba(255,255,255,.45);
  text-shadow:0 0 10px rgba(255,255,255,.35);
}
.aspi-learning-page .btn-primary:hover{color:#fff;border-color:rgba(255,255,255,.6);transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 0 0 1px rgba(255,46,166,.5),0 0 42px rgba(255,46,166,.7),inset 0 1px 0 rgba(255,255,255,.55)}
.aspi-learning-page :is(.btn-ghost,.sw-btn-ghost){color:var(--sw-cyan);border:1px solid rgba(45,226,255,.6);background:rgba(45,226,255,.06);box-shadow:0 0 18px rgba(45,226,255,.18),inset 0 0 12px rgba(45,226,255,.08)}
.aspi-learning-page :is(.btn-ghost,.sw-btn-ghost):hover{color:#fff;border-color:var(--sw-cyan);box-shadow:0 0 30px rgba(45,226,255,.4),inset 0 0 14px rgba(45,226,255,.14)}
.aspi-learning-page .journey-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:600 11px/1.5 var(--font-tech);letter-spacing:.16em;text-transform:uppercase;color:var(--sw-cyan);text-shadow:0 0 12px rgba(45,226,255,.45);text-decoration:underline;text-decoration-color:rgba(45,226,255,.45);text-underline-offset:8px}
.aspi-learning-page .journey-link:hover{color:#fff;text-decoration-color:var(--sw-cyan)}
.aspi-learning-page :is(.btn-primary,.journey-link)>span[aria-hidden="true"]{display:inline-block;flex-shrink:0;width:14px;height:9px;font-size:0;line-height:0;background:currentColor;clip-path:polygon(0 40%,62% 40%,62% 0,100% 50%,62% 100%,62% 60%,0 60%)}
.aspi-learning-page :is(.btn,.btn-primary,.btn-ghost) svg{flex-shrink:0;width:16px!important;height:16px!important}

/* ---------- Site navigation (markup mirrors marketing/navigation.njk) ---------- */
.aspi-101-chrome .sw-links>a{display:inline-flex;align-items:center;min-height:44px}
.aspi-101-chrome .sw-resources{position:relative}
.aspi-101-chrome .sw-resources summary{display:flex;align-items:center;gap:8px;min-height:44px;list-style:none;cursor:pointer}
.aspi-101-chrome .sw-resources summary::-webkit-details-marker{display:none}
.aspi-101-chrome .sw-links summary span{display:inline-block}
.aspi-101-chrome .sw-resources.is-current>summary{color:#fff;text-shadow:0 0 12px var(--sw-magenta)}
.aspi-101-chrome .sw-dropdown a[aria-current="page"]{background:rgba(255,46,166,.14);box-shadow:inset 2px 0 0 var(--sw-magenta)}
.aspi-101-chrome .sw-logo img{display:block}
.aspi-101-chrome .sw-menu-toggle{color:#fff}
@media(max-width:900px){
  .aspi-101-chrome .sw-links>a.btn-primary{justify-content:center}
  .aspi-101-chrome .sw-links>a.journey-link{align-self:center}
}

/* ---------- Site footer (markup mirrors marketing/footer.njk) ---------- */
.aspi-learning-page .sw-footer ul{list-style:none}
.aspi-learning-page .sw-footer .sw-logo img{display:block}
.aspi-learning-page .sw-footer-mail:hover{color:#fff}
.aspi-learning-page .sw-field-row input{flex:1;min-width:0;padding:15px 16px;border:1px solid rgba(185,103,255,.45);border-radius:6px;background:rgba(255,255,255,.04);color:#fff;font:500 15px/1.2 var(--font-read)}
.aspi-learning-page .sw-field-row input::placeholder{color:var(--sw-dim)}
.aspi-learning-page .sw-field-row input:focus{outline:none;border-color:var(--sw-cyan);box-shadow:0 0 0 3px rgba(45,226,255,.18),0 0 18px rgba(45,226,255,.3)}

/* Reading progress rides the nav's neon underline. */
.aspi-learning-page .progress-bar{position:fixed;top:calc(var(--header-height) - 1px);left:0;z-index:1001;width:0;height:2px;pointer-events:none;background:linear-gradient(90deg,var(--sw-magenta),var(--sw-violet),var(--sw-cyan));box-shadow:0 0 10px var(--sw-magenta),0 0 2px #fff}

/* =====================================================================
   LESSONS (body.aspi-lesson)
   ===================================================================== */

/* ---------- Poster header ---------- */
.aspi-lesson .hero{
  position:relative;overflow:hidden;isolation:isolate;display:block;min-height:0;text-align:center;
  padding:calc(var(--header-height) + clamp(44px,6vw,84px)) var(--sw-gutter) max(clamp(190px,21vw,300px),17.4vw);
  background:linear-gradient(180deg,#05021a 0%,#0d0632 24%,#1e0c4f 44%,#4a1478 60%,#a4258f 73%,#ff3ea5 82%,#ff86d6 87%);
}
.aspi-lesson .hero .sw-sky{z-index:0}
.aspi-lesson .hero .sw-horizon-glow{z-index:0;bottom:clamp(60px,9vw,150px);height:clamp(170px,18vw,270px)}
.aspi-lesson .hero .sw-mountains{z-index:2;height:clamp(120px,15vw,230px)}
.aspi-lesson .hero-content{position:relative;z-index:3;max-width:1000px;margin:0 auto}
.aspi-lesson .hero .sw-crumb{margin-bottom:clamp(14px,2vw,22px);text-shadow:0 0 12px rgba(45,226,255,.5)}
.aspi-lesson .hero .sw-crumb::before{content:'';width:9px;height:9px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-right:2px}
.aspi-lesson-title{display:flex;flex-direction:column;align-items:center;margin:0;font-weight:400}
.aspi-lesson-title .sw-chrome{font-size:min(132px,calc((100vw - var(--sw-gutter)*2) / (var(--chars,8) * .78)))}
.aspi-lesson-title .sw-neon{margin:-.2em 0 0 1.4em;font-size:clamp(34px,5.4vw,76px);line-height:1.05;text-wrap:balance;max-width:100%}
html.motion-enabled .aspi-lesson-title .sw-neon{animation:swPowerOn 1.8s steps(1) .2s both}
.aspi-lesson .hero-badge{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;margin:clamp(30px,3.4vw,46px) 0 0;padding:0;
  font:500 clamp(9.5px,.95vw,12px)/1.7 var(--font-tech);letter-spacing:.4em;text-transform:uppercase;color:#fff;text-shadow:0 0 12px rgba(255,255,255,.5);
}
.aspi-lesson .hero-badge svg{width:15px!important;height:15px!important;color:var(--sw-pink);filter:drop-shadow(0 0 6px var(--sw-magenta))}
.aspi-lesson .hero-content>p{max-width:640px;margin:18px auto 0;font-size:clamp(16px,1.35vw,19px);line-height:1.7;color:#e9deff}
.aspi-lesson .hero-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 18px;margin-top:32px}
.aspi-lesson .floating-icons{position:absolute;inset:0;z-index:1;pointer-events:none}
.aspi-lesson .float-icon{position:absolute;opacity:.42;color:var(--sw-cyan);stroke-width:1.5;filter:drop-shadow(0 0 4px rgba(45,226,255,.9)) drop-shadow(0 0 16px rgba(45,226,255,.5))}
.aspi-lesson .float-icon:nth-child(even){color:var(--sw-pink);filter:drop-shadow(0 0 4px rgba(255,106,213,.9)) drop-shadow(0 0 16px rgba(255,46,166,.5))}
.aspi-lesson .float-icon:nth-child(1){top:22%;left:7%}
.aspi-lesson .float-icon:nth-child(2){top:28%;right:8%}
.aspi-lesson .float-icon:nth-child(3){top:52%;left:13%}
.aspi-lesson .float-icon:nth-child(4){top:56%;right:14%}
html.motion-enabled .aspi-lesson .float-icon{animation:aspiFloat 7s ease-in-out infinite}
html.motion-enabled .aspi-lesson .float-icon:nth-child(2){animation-delay:-1.8s}
html.motion-enabled .aspi-lesson .float-icon:nth-child(3){animation-delay:-3.6s}
html.motion-enabled .aspi-lesson .float-icon:nth-child(4){animation-delay:-5.2s}
@keyframes aspiFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(4deg)}}

/* ---------- Lesson layout ---------- */
.aspi-lesson .layout{display:flex;align-items:flex-start;gap:clamp(28px,3.4vw,60px);max-width:1320px;margin:0 auto;padding:clamp(52px,6vw,90px) var(--sw-gutter) clamp(56px,7vw,96px)}
.aspi-lesson .sidebar{position:sticky;top:calc(var(--header-height) + 26px);flex:0 0 268px;display:block;height:auto}
.aspi-lesson .sidebar nav{max-height:calc(100vh - var(--header-height) - 52px);overflow-y:auto;padding:20px 12px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--panel-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 22px 50px rgba(0,0,0,.35);scrollbar-width:thin;scrollbar-color:rgba(185,103,255,.5) transparent}
.aspi-lesson .sidebar h3{margin:0 0 12px 12px;font:600 10px/1.6 var(--font-tech);letter-spacing:.3em;text-transform:uppercase;color:var(--sw-pink);text-shadow:0 0 10px rgba(255,46,166,.45)}
.aspi-lesson .sidebar a{display:block;padding:7px 12px;border-radius:6px;border-left:2px solid transparent;font-size:14px;line-height:1.4;color:var(--sw-muted);transition:color .2s,background .2s}
.aspi-lesson .sidebar a:hover{color:#fff;background:rgba(255,46,166,.08)}
.aspi-lesson .sidebar a.active{color:#fff;border-left-color:var(--sw-magenta);background:linear-gradient(90deg,rgba(255,46,166,.2),rgba(255,46,166,0));box-shadow:inset 6px 0 14px -10px var(--sw-magenta)}
.aspi-lesson .main{flex:1 1 auto;min-width:0;max-width:860px;padding:0;font-size:17px;line-height:1.75;color:#e4dbff}

/* ---------- Lesson typography ---------- */
.aspi-lesson .main section{position:relative;padding-top:clamp(48px,6vw,76px)}
.aspi-lesson .main section:first-child{padding-top:0}
.aspi-lesson .main section+section::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(255,46,166,.6),rgba(45,226,255,.4) 45%,transparent 85%)}
html.motion-enabled .aspi-lesson .main section{transition:opacity .6s ease,transform .6s ease}
html.motion-enabled .aspi-lesson .main section:not(.visible){opacity:0;transform:translateY(22px)}
.aspi-lesson .main section>h2{display:flex;align-items:center;gap:16px;margin:0 0 12px;font:800 italic clamp(26px,3vw,36px)/1.12 var(--font-chrome);letter-spacing:0;color:#fff;text-shadow:0 0 26px rgba(255,46,166,.3)}
.aspi-lesson .section-icon{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;color:#fff;background:linear-gradient(140deg,var(--sw-magenta),#b43cff 58%,#6a3bff);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 0 1px rgba(255,255,255,.18),0 0 22px rgba(255,46,166,.45)}
.aspi-lesson .section-icon svg{width:22px!important;height:22px!important;color:#fff!important;filter:drop-shadow(0 0 3px rgba(255,255,255,.6))}
.aspi-lesson .main .section-desc{margin:0 0 28px;font-size:18px;line-height:1.65;color:var(--sw-muted)}
.aspi-lesson .main p{margin:0 0 1.1em}
.aspi-lesson .main h3{margin:2em 0 .75em;font:800 italic clamp(20px,2vw,24px)/1.22 var(--font-chrome);letter-spacing:0;color:#ffc9f0}
.aspi-lesson .main h4{margin:1.5em 0 .5em;font:700 18px/1.35 var(--font-read);color:#fff}
.aspi-lesson .main h5{font:700 15px/1.35 var(--font-read);color:#fff}
.aspi-lesson .main :is(ul,ol){margin:0 0 1.2em 1.4em}
.aspi-lesson .main li{margin-bottom:.5em}
.aspi-lesson .main section>ul:not([class]){list-style:none;margin-left:0;padding-left:1.5em}
.aspi-lesson .main section>ul:not([class])>li{position:relative}
.aspi-lesson .main section>ul:not([class])>li::before{content:'';position:absolute;left:-1.15em;top:.68em;width:7px;height:7px;background:var(--sw-magenta);transform:rotate(45deg);box-shadow:0 0 10px var(--sw-magenta)}
.aspi-lesson .main ol>li::marker{font:700 .82em var(--font-tech);color:var(--sw-pink)}
.aspi-lesson .main a{color:var(--sw-cyan);text-decoration:underline;text-decoration-color:rgba(45,226,255,.45);text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
.aspi-lesson .main a:hover{color:#fff;text-decoration-color:var(--sw-cyan)}
.aspi-lesson .main strong{color:#fff;font-weight:700}
.aspi-lesson .main em{color:var(--sw-pink)}
.aspi-lesson .main del{color:var(--sw-dim)}
.aspi-lesson :is(.main,.aspi-lesson-outro) code{padding:.12em .42em;border-radius:5px;border:1px solid rgba(185,103,255,.32);background:rgba(185,103,255,.15);font:500 .86em/1.4 var(--mono);color:#ffd9f4;overflow-wrap:anywhere}
.aspi-lesson .main kbd{display:inline-block;padding:.12em .5em;border-radius:6px;border:1px solid rgba(45,226,255,.45);border-bottom-width:2px;background:rgba(45,226,255,.08);font:600 .82em/1.4 var(--mono);color:var(--sw-cyan);white-space:nowrap}

/* ---------- Cards ---------- */
.aspi-lesson .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:18px;margin:26px 0}
.aspi-lesson .card{position:relative;overflow:hidden;padding:24px 22px;border-radius:14px;background:var(--panel);border:1px solid var(--panel-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 40px rgba(0,0,0,.28);transition:border-color .3s,box-shadow .3s}
.aspi-lesson .card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--sw-magenta),var(--sw-cyan));box-shadow:0 0 12px var(--sw-magenta);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.aspi-lesson .card:hover{border-color:rgba(255,46,166,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 18px 40px rgba(0,0,0,.28),0 0 30px rgba(255,46,166,.18)}
.aspi-lesson .card:hover::before{transform:scaleX(1)}
.aspi-lesson .card-icon{display:grid;place-items:center;width:46px;height:46px;margin-bottom:16px;border-radius:12px;color:var(--sw-cyan);background:rgba(45,226,255,.07);border:1px solid rgba(45,226,255,.38);box-shadow:inset 0 0 16px rgba(45,226,255,.12)}
.aspi-lesson .card-icon svg{width:22px;height:22px;filter:drop-shadow(0 0 5px rgba(45,226,255,.7))}
.aspi-lesson .main .card h4{margin:0 0 8px;font:800 italic 19px/1.25 var(--font-chrome);color:#fff}
.aspi-lesson .main .card p{margin:0;font-size:15px;line-height:1.62;color:var(--sw-muted)}

/* ---------- Analogy table ---------- */
.aspi-lesson .analogy-box{margin:30px 0;overflow:hidden;border-radius:14px;border:1px solid rgba(185,103,255,.32);background:rgba(16,8,42,.72);box-shadow:0 18px 40px rgba(0,0,0,.28)}
.aspi-lesson .analogy-header{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid rgba(255,46,166,.4);background:linear-gradient(100deg,rgba(255,46,166,.2),rgba(123,44,255,.14) 60%,rgba(45,226,255,.08))}
.aspi-lesson .analogy-header svg{flex-shrink:0;color:var(--sw-gold)!important;filter:drop-shadow(0 0 6px rgba(255,211,107,.7))}
.aspi-lesson .main .analogy-header h3{margin:0;font:800 italic 21px/1.2 var(--font-chrome);color:#fff}
.aspi-lesson .analogy-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:center;padding:14px 22px;border-top:1px solid rgba(185,103,255,.16);font-size:16px;line-height:1.5}
.aspi-lesson .analogy-header+.analogy-row{border-top:0}
.aspi-lesson .analogy-row:hover{background:rgba(185,103,255,.06)}
.aspi-lesson .analogy-real{color:#ffcf9e}
.aspi-lesson .analogy-arrow{color:var(--sw-magenta);font-size:20px;line-height:1;font-weight:700;text-shadow:0 0 10px var(--sw-magenta)}
.aspi-lesson :is(.analogy-md,.analogy-git,.analogy-obs){color:var(--sw-cyan);font-weight:600}
@media(max-width:600px){
  .aspi-lesson .analogy-row{grid-template-columns:1fr;gap:2px;padding:14px 18px}
  .aspi-lesson .analogy-arrow{width:max-content;transform:rotate(90deg)}
  .aspi-lesson .analogy-header{padding:16px 18px}
}

/* ---------- Code ---------- */
.aspi-lesson .code-block{margin:22px 0;overflow:hidden;border-radius:12px;background:#0a0520;border:1px solid rgba(185,103,255,.36);box-shadow:0 0 30px rgba(123,44,255,.16),inset 0 1px 0 rgba(255,255,255,.05)}
.aspi-lesson .code-header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 16px;border-bottom:1px solid rgba(185,103,255,.26);background:linear-gradient(90deg,rgba(255,46,166,.1),rgba(123,44,255,.08));font:600 9.5px/1.5 var(--font-tech);letter-spacing:.2em;text-transform:uppercase;color:var(--sw-muted)}
.aspi-lesson :is(.code-dots,.dots){display:flex;gap:6px;flex-shrink:0}
.aspi-lesson :is(.code-dots,.dots) span{width:10px;height:10px;border-radius:50%;background:var(--sw-magenta);box-shadow:0 0 6px var(--sw-magenta)}
.aspi-lesson :is(.code-dots,.dots) span:nth-child(2){background:var(--sw-gold);box-shadow:0 0 6px var(--sw-gold)}
.aspi-lesson :is(.code-dots,.dots) span:nth-child(3){background:var(--sw-cyan);box-shadow:0 0 6px var(--sw-cyan)}
.aspi-lesson .code-block pre{margin:0;padding:18px 20px;overflow-x:auto;font:13.5px/1.7 var(--mono);color:#e8e0ff;tab-size:2;scrollbar-width:thin;scrollbar-color:rgba(185,103,255,.55) transparent}
.aspi-lesson .comment{color:#9384c2;font-style:italic}
.aspi-lesson .cmd{color:var(--sw-cyan)}
.aspi-lesson .flag{color:#ffb86b}
.aspi-lesson :is(.code-block,.syntax-hl) .h{color:#ff7ad8}
.aspi-lesson :is(.code-block,.syntax-hl) .b{color:var(--sw-cyan);font-weight:600}
.aspi-lesson :is(.code-block,.syntax-hl) .i{color:#c9a2ff;font-style:italic}
.aspi-lesson :is(.code-block,.syntax-hl) .c{color:#9d8fc7}
.aspi-lesson :is(.code-block,.syntax-hl) .l{color:var(--sw-gold)}
.aspi-lesson :is(.code-block,.syntax-hl) .k{color:var(--sw-cyan)}
.aspi-lesson .tag-c{color:#ff7ad8}
.aspi-lesson .attr{color:var(--sw-cyan)}

/* ---------- Callouts ---------- */
.aspi-lesson .tip{--tip:var(--sw-cyan);--tip-bg:rgba(45,226,255,.09);--tip-line:rgba(45,226,255,.28);display:flex;align-items:flex-start;gap:14px;margin:22px 0;padding:16px 20px;border-radius:12px;border:1px solid var(--tip-line);border-left:3px solid var(--tip);background:linear-gradient(90deg,var(--tip-bg),rgba(16,8,42,.35));box-shadow:-10px 0 26px -18px var(--tip);font-size:16px;line-height:1.65;color:#ece4ff}
.aspi-lesson .tip-good{--tip:#5cffc4;--tip-bg:rgba(92,255,196,.08);--tip-line:rgba(92,255,196,.26)}
.aspi-lesson .tip-warn{--tip:var(--sw-gold);--tip-bg:rgba(255,211,107,.08);--tip-line:rgba(255,211,107,.3)}
.aspi-lesson .tip-bad{--tip:#ff5c8a;--tip-bg:rgba(255,92,138,.09);--tip-line:rgba(255,92,138,.3)}
.aspi-lesson .tip-purple{--tip:var(--sw-violet);--tip-bg:rgba(185,103,255,.1);--tip-line:rgba(185,103,255,.32)}
.aspi-lesson .tip-pink{--tip:var(--sw-pink);--tip-bg:rgba(255,106,213,.09);--tip-line:rgba(255,106,213,.3)}
.aspi-lesson .tip-icon{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:var(--tip);background:rgba(255,255,255,.05);border:1px solid var(--tip-line)}
.aspi-lesson .tip-icon svg{width:18px!important;height:18px!important;color:var(--tip)!important;filter:drop-shadow(0 0 5px var(--tip))}
.aspi-lesson .tip>div:not(.tip-icon){flex:1;min-width:0;padding-top:4px}
.aspi-lesson .tip:not(:has(.tip-icon))>div{padding-top:0}

.aspi-lesson .benefit-list{list-style:none;margin:24px 0}
.aspi-lesson .main .benefit-list li{display:flex;align-items:flex-start;gap:14px;margin:0;padding:13px 0;border-bottom:1px solid rgba(185,103,255,.18)}
.aspi-lesson .benefit-list li:last-child{border-bottom:0}
.aspi-lesson .benefit-list .check{flex:none;margin-top:3px;color:var(--sw-cyan);filter:drop-shadow(0 0 6px rgba(45,226,255,.7))}

.aspi-lesson .golden-rule{margin:34px 0;padding:36px 28px 30px;text-align:center;border-radius:16px;border:1px solid rgba(255,46,166,.55);background:radial-gradient(ellipse at 50% 0%,rgba(255,46,166,.24),transparent 70%),rgba(20,10,52,.72);box-shadow:0 0 44px rgba(255,46,166,.2),inset 0 1px 0 rgba(255,255,255,.08)}
.aspi-lesson .golden-rule>svg{display:block;margin:0 auto 10px!important;color:var(--sw-gold)!important;filter:drop-shadow(0 0 10px rgba(255,211,107,.8))}
.aspi-lesson .main .golden-rule h3{margin:0 0 10px;padding-right:.1em;font:900 italic clamp(26px,3vw,34px)/1.1 var(--font-chrome);text-transform:uppercase;background:var(--sw-sunset);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(255,46,166,.4))}

/* ---------- Tables ---------- */
.aspi-lesson .table-wrap{margin:26px 0;overflow-x:auto;border-radius:12px;border:1px solid var(--panel-line);background:rgba(16,8,42,.6);scrollbar-width:thin;scrollbar-color:rgba(185,103,255,.55) transparent}
.aspi-lesson .table-wrap table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55}
.aspi-lesson .table-wrap table:has(th:nth-child(3)){min-width:560px}
.aspi-lesson .table-wrap :is(th,td){padding:13px 16px;text-align:left;vertical-align:top;border-top:1px solid rgba(185,103,255,.16)}
.aspi-lesson .table-wrap th{border-top:0;border-bottom:1px solid rgba(255,46,166,.45);background:rgba(255,46,166,.08);font:600 10px/1.5 var(--font-tech);letter-spacing:.18em;text-transform:uppercase;color:var(--sw-pink);white-space:nowrap}
.aspi-lesson .table-wrap thead+tbody tr:first-child td{border-top:0}
.aspi-lesson .table-wrap tbody tr:hover td{background:rgba(185,103,255,.07)}

/* ---------- Steps ---------- */
.aspi-lesson .steps{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:26px 0;counter-reset:step}
.aspi-lesson .step{display:flex;align-items:flex-start;gap:18px;padding:20px 22px;border-radius:14px;background:rgba(20,10,52,.62);border:1px solid rgba(185,103,255,.24);transition:border-color .3s}
.aspi-lesson .step:hover{border-color:rgba(255,46,166,.5)}
.aspi-lesson .step-num{counter-increment:step;flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:#fff;font:700 14px/1 var(--font-tech);background:linear-gradient(140deg,var(--sw-magenta),#7b2cff);box-shadow:0 0 0 3px rgba(255,46,166,.16),0 0 18px rgba(255,46,166,.45)}
.aspi-lesson .step-num:empty::before{content:counter(step)}
.aspi-lesson .step>:not(.step-num){flex:1;min-width:0}
.aspi-lesson .main .step h4{margin:6px 0 6px}
.aspi-lesson .main .step p{margin:0 0 .5em;font-size:16px;color:var(--sw-muted)}
.aspi-lesson .main .step p:last-child{margin-bottom:0}
.aspi-lesson .step .code-block{margin:14px 0 0}

/* ---------- Two-up boxes, pills ---------- */
.aspi-lesson .split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:26px 0}
.aspi-lesson .split-box{padding:22px;border-radius:14px;background:var(--panel);border:1px solid var(--panel-line)}
.aspi-lesson .main .split-box h4{margin-top:0}
.aspi-lesson .main .split-box p:last-child{margin-bottom:0}
.aspi-lesson .pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid rgba(45,226,255,.38);background:rgba(45,226,255,.06);font-size:14px;font-weight:600;line-height:1.3;color:#e6fbff;transition:border-color .25s,box-shadow .25s}
.aspi-lesson .pill:hover{border-color:var(--sw-cyan);box-shadow:0 0 16px rgba(45,226,255,.3)}
.aspi-lesson .pill-icon{display:inline-flex;color:var(--sw-cyan)}

/* ---------- Live source / render demo ---------- */
.aspi-lesson .preview-demo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:30px 0;overflow:hidden;border-radius:14px;border:1px solid rgba(185,103,255,.38);box-shadow:0 0 34px rgba(123,44,255,.2)}
.aspi-lesson :is(.preview-source,.preview-render){min-width:0;min-height:220px;padding:20px 22px}
.aspi-lesson .preview-source{background:#0a0520;border-right:1px solid rgba(185,103,255,.32);font:13.5px/1.75 var(--mono);color:#e8e0ff;overflow-x:auto}
.aspi-lesson .preview-label{margin-bottom:12px;font:600 9.5px/1.5 var(--font-tech);letter-spacing:.22em;text-transform:uppercase;color:var(--sw-pink)}
.aspi-lesson .preview-render{background:linear-gradient(160deg,rgba(44,20,96,.62),rgba(16,8,42,.88))}
.aspi-lesson .main .preview-render h1{margin:0 0 10px;font:800 italic 26px/1.15 var(--font-chrome);color:#fff}
.aspi-lesson .main .preview-render h4{margin:0 0 8px}
.aspi-lesson .main .preview-render :is(p,li){font-size:15px;color:var(--sw-muted)}
.aspi-lesson .main .preview-render p{margin:0 0 10px}
.aspi-lesson .main .preview-render ul{margin:6px 0 0 20px}
.aspi-lesson .preview-line{opacity:0;animation:aspiTypeIn .4s ease forwards}
.aspi-lesson .preview-line:nth-child(3){animation-delay:.3s}
.aspi-lesson .preview-line:nth-child(4){animation-delay:.6s}
.aspi-lesson .preview-line:nth-child(5){animation-delay:.9s}
.aspi-lesson .preview-line:nth-child(6){animation-delay:1.2s}
.aspi-lesson .preview-line:nth-child(7){animation-delay:1.5s}
.aspi-lesson .preview-line:nth-child(8){animation-delay:1.8s}
.aspi-lesson .syntax-hl>.preview-line:nth-child(2){animation-delay:.3s}
.aspi-lesson .syntax-hl>.preview-line:nth-child(3){animation-delay:.6s}
.aspi-lesson .syntax-hl>.preview-line:nth-child(4){animation-delay:.9s}
.aspi-lesson .syntax-hl>.preview-line:nth-child(5){animation-delay:1.2s}
.aspi-lesson .syntax-hl>.preview-line:nth-child(6){animation-delay:1.5s}
.aspi-lesson .render-item{opacity:0;animation:aspiRenderIn .5s ease forwards}
.aspi-lesson .render-item:nth-child(3){animation-delay:.4s}
.aspi-lesson .render-item:nth-child(4){animation-delay:.8s}
@keyframes aspiTypeIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes aspiRenderIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Next guide + lesson wrap-up ---------- */
.aspi-lesson .main .aspi-learning-next{margin:clamp(56px,7vw,88px) 0 0;padding:28px 30px 18px;border-radius:16px;border:1px solid rgba(255,46,166,.5);background:linear-gradient(135deg,rgba(255,46,166,.15),rgba(123,44,255,.12) 55%,rgba(45,226,255,.08));box-shadow:0 0 44px rgba(255,46,166,.16),inset 0 1px 0 rgba(255,255,255,.08)}
.aspi-lesson .main .aspi-learning-next p{margin:0 0 12px;font:600 10.5px/1.6 var(--font-tech);letter-spacing:.3em;text-transform:uppercase;color:var(--sw-pink);text-shadow:0 0 10px rgba(255,46,166,.5)}
.aspi-lesson .main .aspi-learning-next a{display:inline-flex;align-items:center;min-height:40px;margin:0 26px 8px 0;font:600 10.5px/1.5 var(--font-tech);letter-spacing:.16em;text-transform:uppercase;color:var(--sw-cyan);text-decoration:underline;text-decoration-color:rgba(45,226,255,.4);text-underline-offset:7px}
.aspi-lesson .main .aspi-learning-next a:first-of-type{display:flex;width:fit-content;min-height:0;margin:0 0 20px;font:900 italic clamp(24px,3.2vw,36px)/1.1 var(--font-chrome);letter-spacing:0;color:#fff;text-decoration:none;text-shadow:0 0 22px rgba(255,46,166,.55)}
.aspi-lesson .main .aspi-learning-next a:first-of-type:hover{color:var(--sw-pink)}

.aspi-lesson-outro{--floor:clamp(140px,17vw,240px);position:relative;overflow:hidden;isolation:isolate;text-align:center;padding:clamp(76px,8vw,112px) var(--sw-gutter) calc(var(--floor) + max(clamp(210px,20vw,300px),16vw));background:linear-gradient(0deg,#ff8ad8 0,#ff4fb0 var(--floor),#9b2490 calc(var(--floor) + 110px),#3b1270 calc(var(--floor) + 250px),#150a3e calc(var(--floor) + 420px),var(--sw-night) calc(var(--floor) + 560px))}
.aspi-lesson-outro .sw-sky{z-index:0}
.aspi-lesson-outro-copy{position:relative;z-index:3;max-width:760px;margin:0 auto}
.aspi-lesson-outro-copy::before{content:'The end of the lesson';display:block;margin-bottom:16px;font:500 10px/1.6 var(--font-tech);letter-spacing:.42em;text-transform:uppercase;color:var(--sw-pink);text-shadow:0 0 12px rgba(255,46,166,.6)}
.aspi-lesson-outro-copy p:first-child{font:500 clamp(19px,2.1vw,24px)/1.55 var(--font-read);color:#fff;text-wrap:balance}
.aspi-lesson-outro-copy p:first-child strong{padding-right:.05em;font-weight:800;background:linear-gradient(90deg,#ffe28a,#ff9f4a 40%,#ff6ad5);-webkit-background-clip:text;background-clip:text;color:transparent}
.aspi-lesson-outro-copy p+p{font-size:14.5px;line-height:2;color:#dccff8}
.aspi-lesson-outro-copy a{color:var(--sw-cyan);font-weight:600;text-decoration:underline;text-decoration-color:rgba(45,226,255,.4);text-underline-offset:5px;white-space:nowrap}
.aspi-lesson-outro-copy a:hover{color:#fff}
.aspi-lesson-outro .sw-sun{position:absolute;left:50%;bottom:var(--floor);z-index:1;width:clamp(260px,30vw,430px);aspect-ratio:1;transform:translate(-50%,50%)}
.aspi-lesson-outro .sw-mountains{bottom:var(--floor);z-index:1;height:max(18.5vw,110px)}

/* ---------- Floating contents button ---------- */
.aspi-lesson .mobile-toc{position:fixed;right:18px;bottom:18px;z-index:900}
.aspi-lesson .mobile-toc-btn{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:linear-gradient(140deg,var(--sw-magenta),#7b2cff);color:#fff;cursor:pointer;box-shadow:0 0 24px rgba(255,46,166,.55),0 10px 24px rgba(0,0,0,.45)}
.aspi-lesson .mobile-toc-btn svg{width:22px!important;height:22px!important}

/* ---------- Responsive ---------- */
@media(min-width:1100px){.aspi-lesson .mobile-toc{display:none}}
@media(max-width:1099px){
  /* The contents list becomes a chip strip above the lesson; the floating button scrolls to it. */
  .aspi-lesson .layout{flex-direction:column;align-items:stretch;gap:40px}
  .aspi-lesson .sidebar,.aspi-lesson .main{width:100%;max-width:860px;margin:0 auto}
  .aspi-lesson .sidebar{position:static;flex:none}
  .aspi-lesson .sidebar nav{display:flex;flex-wrap:wrap;gap:8px;max-height:none;overflow:visible;padding:18px}
  .aspi-lesson .sidebar h3{flex-basis:100%;margin:0 0 4px 2px}
  .aspi-lesson .sidebar a{padding:6px 12px;border:1px solid rgba(185,103,255,.32);border-radius:999px;font-size:13px}
  .aspi-lesson .sidebar a.active{border-color:var(--sw-magenta);background:rgba(255,46,166,.16);box-shadow:0 0 14px rgba(255,46,166,.3)}
}
@media(max-width:700px){
  .aspi-lesson .hero{padding-bottom:clamp(150px,44vw,200px)}
  .aspi-lesson .hero .sw-mountains{height:clamp(100px,30vw,140px)}
  .aspi-lesson .hero-cta{flex-direction:column;align-items:stretch;gap:12px}
  .aspi-lesson .float-icon{opacity:.28;transform:scale(.7)}
  .aspi-lesson .float-icon:nth-child(1){top:calc(var(--header-height) + 64px);left:2%}
  .aspi-lesson .float-icon:nth-child(2){top:calc(var(--header-height) + 80px);right:2%}
  .aspi-lesson .float-icon:nth-child(n+3){display:none}
  .aspi-lesson-title .sw-neon{margin-left:.6em}
  .aspi-lesson .main{font-size:16.5px}
  .aspi-lesson .main .section-desc{font-size:17px}
  .aspi-lesson .main section>h2{gap:12px}
  .aspi-lesson .section-icon{width:40px;height:40px;border-radius:10px}
  .aspi-lesson .section-icon svg{width:19px!important;height:19px!important}
  .aspi-lesson .split,.aspi-lesson .preview-demo{grid-template-columns:1fr}
  .aspi-lesson .preview-source{border-right:0;border-bottom:1px solid rgba(185,103,255,.32)}
  .aspi-lesson .step{gap:14px;padding:18px 16px}
  .aspi-lesson .tip{padding:14px 16px;gap:12px}
  .aspi-lesson .code-block pre{padding:16px;font-size:13px}
  .aspi-lesson .main .aspi-learning-next{padding:24px 20px 14px}
  .aspi-lesson-outro-copy a{white-space:normal}
}
@media(max-width:380px){
  .aspi-lesson .card{padding:20px 18px}
  .aspi-lesson .main section>h2{font-size:24px}
}

/* ---------- Motion: continuous effects stop for reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html:has(body.aspi-learning-page){scroll-behavior:auto}
  .aspi-learning-page *,.aspi-learning-page *::before,.aspi-learning-page *::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}