/* Longer guides keep descriptions together and examples at the end. */
.learn-content .learn-section>p,.learn-content>.learn-intro,.learn-content>p{max-width:80ch;line-height:1.8}
.learn-workflow,.learn-worked-examples{max-width:80ch;padding-left:1.6rem;margin:16px 0 0}
.learn-workflow>li,.learn-worked-examples>li{padding-left:.45rem;margin:0 0 18px;line-height:1.8}
.learn-workflow>li::marker,.learn-worked-examples>li::marker{color:var(--accent);font-weight:600}
.learn-examples{margin-top:36px}
.learn-examples .help-example{margin-top:20px}
.learn-examples .help-example p{max-width:78ch;line-height:1.8}
.learn-cards .learn-card>p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;line-height:1.65}
/* Keep the interaction above the Aura glass surface without changing card size. */
:root body :is(#main,.window-body) #learnMount .learn-card{
 transition:border-color 200ms ease,box-shadow 200ms ease,transform 200ms cubic-bezier(.2,.8,.2,1);
}
#learnMount .learn-card>.learn-eyebrow,#learnMount .learn-card>h3{padding-right:42px}
#learnMount .learn-card-arrow{
 display:grid;place-items:center;width:32px;height:32px;top:16px;right:16px;
 font-size:24px;line-height:1;font-weight:500;border:1px solid transparent;border-radius:9px;
 background:transparent;transform-origin:center;pointer-events:none;
 transition:transform 220ms cubic-bezier(.2,.8,.2,1),background-color 200ms ease,border-color 200ms ease;
}
:root body :is(#main,.window-body) #learnMount .learn-card:focus-visible{
 border-color:var(--accent);outline:2px solid var(--accent);outline-offset:3px;
 box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 10%,transparent);
}
#learnMount .learn-card:focus-visible .learn-card-arrow{
 transform:translate(2px,-2px) scale(1.12);
 background:color-mix(in srgb,var(--accent) 10%,transparent);
 border-color:color-mix(in srgb,var(--accent) 28%,transparent);
}
@media(hover:hover) and (pointer:fine){
 :root body :is(#main,.window-body) #learnMount .learn-card:hover{
  border-color:color-mix(in srgb,var(--accent) 70%,var(--line));transform:translateY(-2px);
  box-shadow:0 8px 28px color-mix(in srgb,var(--accent) 10%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent);
 }
 #learnMount .learn-card:hover .learn-card-arrow{
  transform:translate(2px,-2px) scale(1.12);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border-color:color-mix(in srgb,var(--accent) 28%,transparent);
 }
}
@media(prefers-reduced-motion:reduce){
 :root body :is(#main,.window-body) #learnMount .learn-card,
 :root body :is(#main,.window-body) #learnMount .learn-card:is(:hover,:focus-visible),
 #learnMount .learn-card .learn-card-arrow,
 #learnMount .learn-card:is(:hover,:focus-visible) .learn-card-arrow{transition:none;transform:none}
}
@media(min-width:1200px){.learn-contents{max-height:calc(100dvh - var(--header) - 160px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}}
@media(max-width:600px){.learn-toolbar{flex-wrap:wrap}.learn-toolbar>label{flex:1 1 100%;min-width:0}.learn-toolbar input{width:100%}.learn-workflow,.learn-worked-examples{padding-left:1.35rem}.learn-workflow>li,.learn-worked-examples>li{padding-left:.25rem}}