/* ASR Tutorials v21 — white institutional learning library, 2026-10-11.
   Last-loaded visual authority. Tutorial data/access/player are unchanged. */
html body[data-asr-public-final-section="tutorials"][data-tutorial-final]{
  --tp-v21-bg:#f8f6fa;--tp-v21-ink:#241b2b;--tp-v21-copy:#584e61;
  --tp-v21-violet:#713098;--tp-v21-line:#e5dbe8;
  background:var(--tp-v21-bg)!important;background-image:none!important;
  color:var(--tp-v21-ink)!important;color-scheme:light!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] .public-site,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page{
  background:var(--tp-v21-bg)!important;background-image:none!important;
  color:var(--tp-v21-ink)!important;color-scheme:light!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page{
  width:min(1320px,calc(100% - 48px))!important;max-width:1320px!important;
  margin:0 auto!important;padding:40px 0 85px!important;overflow:visible!important;
}
/* Unify heading without a huge marketing hero or extra black strips. */
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tutorials-clean-head{
  padding:20px 0 18px!important;border-bottom:0!important;
  color:#241b2b!important;display:block!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tutorials-clean-head span{
  color:#76379b!important;-webkit-text-fill-color:#76379b!important;font-size:12px!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tutorials-clean-head h1{
  color:#22172a!important;-webkit-text-fill-color:#22172a!important;
  font-size:clamp(42px,5vw,65px)!important;line-height:1.07!important;
  letter-spacing:-.05em!important;font-weight:840!important;margin:10px 0 0!important;
}
/* Native hero/learning paths; no unverified tutorial counts, no fake featured records. */
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-intro{
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  margin:0 0 29px;padding-bottom:25px;border-bottom:1px solid #e5dbe8;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-intro p{
  color:#584e61!important;-webkit-text-fill-color:#584e61!important;
  font-size:clamp(16px,1.25vw,18px)!important;line-height:1.7!important;
  max-width:690px;margin:0!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-intro a,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-intro button{
  min-height:45px;white-space:nowrap;display:inline-flex;align-items:center;
  justify-content:center;padding:12px 19px;border:1px solid #6d2c91;
  border-radius:10px;background:#6d2c91;color:#fff!important;
  -webkit-text-fill-color:#fff!important;text-decoration:none;
  font-weight:780;font-size:13px;cursor:pointer;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-paths{padding:0 0 35px}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-section-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:18px;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-section-head>div>span{
  display:block;color:#723098!important;-webkit-text-fill-color:#723098!important;
  font-size:11px;font-weight:850;letter-spacing:.13em;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-section-head h2{
  color:#241a2d!important;-webkit-text-fill-color:#241a2d!important;
  font-size:clamp(25px,2.5vw,35px)!important;letter-spacing:-.04em!important;
  line-height:1.2!important;margin:8px 0 0!important;font-weight:830!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-section-head p{
  color:#60546a!important;-webkit-text-fill-color:#60546a!important;
  max-width:450px;font-size:14px;line-height:1.6;margin:0!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-grid>button{
  min-width:0;min-height:176px;border:1px solid #e2d7e9!important;
  border-radius:16px;background:#fff!important;background-image:none!important;
  color:#241b2d!important;-webkit-text-fill-color:#241b2d!important;
  padding:23px 20px;text-align:left;display:flex;flex-direction:column;gap:10px;
  cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-grid>button:hover{
  border-color:#a979c4!important;transform:translateY(-2px);
  box-shadow:0 12px 27px rgba(75,37,96,.09);
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-grid>button>span{
  font-size:11px;letter-spacing:.12em;color:#793aa0!important;
  -webkit-text-fill-color:#793aa0!important;font-weight:850;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-grid>button h3{
  color:#261b30!important;-webkit-text-fill-color:#261b30!important;
  font-size:clamp(17px,1.5vw,21px)!important;line-height:1.2!important;
  letter-spacing:-.02em!important;font-weight:820!important;margin:0!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-grid>button p{
  color:#615567!important;-webkit-text-fill-color:#615567!important;
  font-size:13px!important;line-height:1.55!important;margin:0!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-grid>button>strong{
  margin-top:auto;color:#652b8c!important;-webkit-text-fill-color:#652b8c!important;font-size:12px;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-status{
  min-height:18px;font-size:12px!important;color:#655572!important;-webkit-text-fill-color:#655572!important;
  margin:13px 0 0!important;
}
/* The existing seven tool marks remain informative, now as a compact white strip. */
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tutorials-tool-icons{
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  padding:4px 0 28px!important;gap:9px!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tutorials-tool-icons article{
  min-height:58px!important;padding:8px 11px!important;
  border:1px solid #e3d8e7!important;background:#fff!important;
  border-radius:11px!important;color:#37283e!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tutorials-tool-icons b{
  color:#3d3045!important;-webkit-text-fill-color:#3d3045!important;font-size:12px!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tutorials-tool-icon{
  width:36px!important;height:36px!important;flex-basis:36px!important;background:#fff!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tutorials-catalog-section{
  width:100%!important;max-width:none!important;
  margin:0!important;padding:23px 0 70px!important;
  background:transparent!important;background-image:none!important;
  color:#2a2030!important;color-scheme:light!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tutorials-section-head{
  margin:0 0 23px!important;padding:0 0 20px!important;
  border-bottom:1px solid #e4dbe8!important;display:flex!important;
  align-items:flex-end!important;justify-content:space-between!important;gap:30px!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tutorials-section-head .eyebrow{
  color:#74349a!important;-webkit-text-fill-color:#74349a!important;font-size:11px!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tutorials-section-head h2{
  font-size:clamp(30px,3.2vw,44px)!important;line-height:1.16!important;
  color:#261c2e!important;-webkit-text-fill-color:#261c2e!important;
  font-weight:840!important;letter-spacing:-.045em!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tutorials-section-head>p{
  color:#605567!important;-webkit-text-fill-color:#605567!important;
  font-size:15px!important;line-height:1.65!important;max-width:550px!important;
}
/* Catalog: preserve API-loaded folder hierarchy, member card, results and viewer. */
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tp-library,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tp-library-main{
  background:transparent!important;box-shadow:none!important;color-scheme:light!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tp-library-main>.tp-rail-access .tp-member-card{
  background:#fff!important;background-image:none!important;
  border:1px solid #e3d5e9!important;border-radius:13px!important;color-scheme:light!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tp-library-main>.tp-rail-access .tp-member-card>strong{
  color:#2c2036!important;-webkit-text-fill-color:#2c2036!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tp-library-main>.tp-rail-access .tp-member-card>span{
  color:#692c91!important;-webkit-text-fill-color:#692c91!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tp-library-main>.tp-rail-access .tp-member-card>small{
  color:#5d5363!important;-webkit-text-fill-color:#5d5363!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tp-library-main>.tp-rail-access .tp-member-card>button{
  background:#71319b!important;color:#fff!important;-webkit-text-fill-color:#fff!important;
  border-color:#71319b!important;min-height:43px!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tp-category-bar,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tp-library-tools{
  background:#fff!important;background-image:none!important;
  border:1px solid #e4d8e8!important;box-shadow:none!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tp-category-chip{
  background:#fff!important;color:#493950!important;-webkit-text-fill-color:#493950!important;
  border:1px solid #dfd2e7!important;font-size:13px!important;min-height:44px!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tp-category-chip.active{
  background:#f1e7f8!important;border-color:#a46bc2!important;
  color:#59297e!important;-webkit-text-fill-color:#59297e!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tp-category-chip svg{
  color:#6b338e!important;stroke:currentColor!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tp-search-wrap input{
  background:#faf8fc!important;color:#291d34!important;-webkit-text-fill-color:#291d34!important;
  border:1px solid #e3d9e8!important;border-radius:9px!important;
  font-size:15px!important;min-height:47px!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tp-search-wrap input::placeholder{
  color:#756c7c!important;-webkit-text-fill-color:#756c7c!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main :is(.tp-count,.tp-breadcrumb,.tp-breadcrumb button){
  color:#5e5267!important;-webkit-text-fill-color:#5e5267!important;font-size:13px!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tp-collection-head{
  background:#fff!important;background-image:none!important;
  border:1px solid #e5d8ea!important;border-radius:14px!important;color-scheme:light!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tp-collection-head>span{
  color:#6c328e!important;-webkit-text-fill-color:#6c328e!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tp-collection-head h2{
  color:#281d31!important;-webkit-text-fill-color:#281d31!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tp-collection-head p{
  color:#574d61!important;-webkit-text-fill-color:#574d61!important;
}
/* v19/20 had hard-coded dark gradients and white ink; override them specifically. */
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tp-folder-card,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tp-row-card{
  min-width:0!important;background:#fff!important;background-image:none!important;
  border:1px solid #e2d8e9!important;border-radius:16px!important;
  box-shadow:0 6px 22px rgba(51,28,67,.035)!important;
  color-scheme:light!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main :is(.tp-folder-card,.tp-row-card):hover{
  border-color:#b78cd0!important;box-shadow:0 14px 34px rgba(60,25,81,.095)!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tp-folder-card :is(h3,b,.tp-folder-copy>span),
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tp-row-card :is(h3,b,.tp-row-open){
  color:#281f32!important;-webkit-text-fill-color:#281f32!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main :is(.tp-folder-card,.tp-row-card) p{
  color:#5b5262!important;-webkit-text-fill-color:#5b5262!important;
  font-size:clamp(14px,1.07vw,16px)!important;line-height:1.65!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main :is(.tp-grid-label,.tp-row-meta,.tp-row-meta>span,.tp-row-kicker,.tp-folder-stats em,.tp-count){
  color:#63556c!important;-webkit-text-fill-color:#63556c!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main :is(.tp-resource-chip,.tp-pill){
  color:#58277e!important;-webkit-text-fill-color:#58277e!important;
  background:#f7f0fa!important;border:1px solid #e5d7ed!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tp-row-open{
  background:#f5eff9!important;border:1px solid #d9c3e4!important;
  color:#62288c!important;-webkit-text-fill-color:#62288c!important;
  min-height:44px!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tp-folder-icon{
  color:#68348b!important;-webkit-text-fill-color:#68348b!important;
  background:#f7f0fa!important;border-color:#e2d4e9!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main :is(.tp-empty,.tp-state,.tp-results){
  color:#544b5b!important;-webkit-text-fill-color:#544b5b!important;
  font-size:15px!important;line-height:1.6!important;
}
/* Native software guide sends readers to *real* platforms, not fake courses. */
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-platforms{
  margin:30px 0 52px!important;border-top:1px solid #e4dbe7!important;padding-top:30px!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-platform-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-platform-grid>a{
  padding:19px;border-radius:13px;border:1px solid #e1d3e6!important;
  background:#fff!important;min-height:105px;display:flex;flex-direction:column;
  justify-content:space-between;gap:9px;text-decoration:none!important;
  color:#2c2036!important;-webkit-text-fill-color:#2c2036!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-platform-grid>a>strong{
  font-size:18px;color:#261a2e!important;-webkit-text-fill-color:#261a2e!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-platform-grid>a>span{
  font-size:12px;color:#64318a!important;-webkit-text-fill-color:#64318a!important;
  font-weight:750;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-support{
  display:flex;justify-content:space-between;align-items:center;gap:25px;
  background:#fff!important;border:1px solid #e2d5e8;border-radius:18px;
  padding:28px 30px;margin:0 0 65px!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-support h2{
  font-size:clamp(25px,2.7vw,35px)!important;line-height:1.16!important;
  color:#291e33!important;-webkit-text-fill-color:#291e33!important;margin:0 0 8px!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-support p{
  font-size:15px!important;color:#5d5265!important;-webkit-text-fill-color:#5d5265!important;
  line-height:1.6!important;margin:0!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-support-actions{
  display:flex;flex-wrap:wrap;gap:10px;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-support-actions>a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;border:1px solid #71349c;border-radius:9px;padding:11px 16px;
  text-decoration:none;color:#5e2386!important;-webkit-text-fill-color:#5e2386!important;
  background:#fff;font-size:13px;font-weight:800;white-space:nowrap;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-support-actions>a:first-child{
  background:#72319d!important;color:#fff!important;-webkit-text-fill-color:#fff!important;
}
/* Only public library controls, never admin/portal/dialog authentication. */
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main :is(a,button,input,select):focus-visible{
  outline:3px solid #8d41b3!important;outline-offset:3px!important;
}
@media(max-width:1120px){
 html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-grid,
 html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-platform-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
 }
 html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tutorials-tool-icons{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
 }
}
@media(max-width:760px){
 html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page{
  width:calc(100% - 32px)!important;padding:25px 0 55px!important;
 }
 html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-intro,
 html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-section-head,
 html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tutorials-section-head,
 html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-support{
  flex-direction:column!important;align-items:flex-start!important;gap:13px!important;
 }
 html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tp-row-card,
 html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tp-folder-card{
  min-width:0!important;
 }
}
@media(max-width:510px){
 html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-grid,
 html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-platform-grid{
  grid-template-columns:1fr;
 }
 html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .tutorials-tool-icons{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
 }
 html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-support{
  padding:21px!important;
 }
}
@media(prefers-reduced-motion:reduce){
 html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main .asr-tutorial-v21-grid>button{
  transform:none!important;transition:none!important;
 }
}


/* -----------------------------------------------------------------------
   2026-10-11 — Final v22 visual correction for the legacy v19/v20 library.
   Earlier dark styles use :nth-child, resource type and :hover selectors
   which outranked the v21 light generic card selectors. Override those
   explicitly, without touching the underlying access/player logic.
   ----------------------------------------------------------------------- */
html body[data-asr-public-final-section="tutorials"][data-tutorial-final][data-tutorial-premium-library-v19][data-tutorial-premium-readable-v20] {
  color-scheme:light!important;
  background:#f8f6fa!important;
  background-image:none!important;
  color:#241b2b!important;
  --t19-bg:#f8f6fa!important;
  --t19-card:#fff!important;
  --t19-line:#e4d9e8!important;
  --t20-bg:#f8f6fa!important;
}
/* Category, search, results, collection heading and library containers. */
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page .tutorials-clean-head,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page .tutorials-catalog-section,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform],
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page .tp-library,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page .tp-library-main,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page .tp-results,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page .tp-folder-grid,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page .tp-grid-group {
  background:#f8f6fa!important;
  background-image:none!important;
  color-scheme:light!important;
}
/* White card surfaces: cover first / Nth folder gradients, all semantic
   resource type gradients, hovered gradients, custom inline theme vars. */
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-folder-card:nth-child(n),
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-folder-card:nth-child(n):hover,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-row-card[data-semantic-resource-type],
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-row-card[data-semantic-resource-type]:hover {
  --tile-bg:#fff!important;
  --tile-border:#e3d6e9!important;
  background:#fff!important;
  background-image:none!important;
  border:1px solid #e3d6e9!important;
  color:#2a1f33!important;
  -webkit-text-fill-color:#2a1f33!important;
  box-shadow:0 6px 23px rgba(43,20,61,.05)!important;
  color-scheme:light!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] :is(.tp-folder-card,.tp-row-card):hover {
  border-color:#b88ecf!important;
  box-shadow:0 12px 31px rgba(64,30,82,.085)!important;
}
/* Text colors on white, against legacy forced near-white headings. */
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-folder-copy h3,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-folder-card:nth-child(n) .tp-folder-copy h3,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-row-card h3,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-collection-head h2 {
  color:#281d33!important;
  -webkit-text-fill-color:#281d33!important;
  opacity:1!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-folder-copy p,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-row-main>p,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-row-card p,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-collection-head p {
  color:#584e60!important;
  -webkit-text-fill-color:#584e60!important;
  font-size:clamp(14px,1.08vw,16px)!important;
  line-height:1.62!important;
  opacity:1!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-folder-copy>span,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-row-kicker,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-folder-card>b {
  color:#663286!important;
  -webkit-text-fill-color:#663286!important;
  opacity:1!important;
}
/* Badges, counters, resource glyphs and metadata — no dark rectangles. */
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-grid-label {
  border-bottom-color:#e7dbea!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-grid-label span {
  color:#65566d!important;
  -webkit-text-fill-color:#65566d!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-grid-label b,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-folder-stats em,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-folder-icon,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-row-card>.tp-resource-type-icon,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-pill,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-row-meta>span:not(.tp-pill),
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-resource-chip {
  background:#f7f1fa!important;
  background-image:none!important;
  color:#602e83!important;
  -webkit-text-fill-color:#602e83!important;
  border:1px solid #e6d8ed!important;
  opacity:1!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-folder-stats em {
  min-height:27px!important;
  font-size:11px!important;
  font-style:normal!important;
}
/* Buttons should remain readable when clicked/hovered, unlike the old
   dark scheme's hover styling which flipped to almost-black ink. */
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-row-open,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-row-open:hover {
  color:#632a8a!important;
  -webkit-text-fill-color:#632a8a!important;
  background:#f5ecfa!important;
  background-image:none!important;
  border:1px solid #d3bade!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-category-chip,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-category-chip:hover,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-category-chip.active,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-category-chip.active:hover {
  color:#502861!important;
  -webkit-text-fill-color:#502861!important;
  border-color:#d8c8e3!important;
  background:#fff!important;
  background-image:none!important;
  box-shadow:none!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-category-chip.active,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-category-chip.active:hover {
  background:#efe3f7!important;
  border-color:#a66fc7!important;
}
/* Legacy member access rail — an ordinary white card, with a readable
   purple primary CTA. Authentication is not altered. */
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-library-main>.tp-rail-access .tp-member-card,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-collection-head {
  color-scheme:light!important;
  background:#fff!important;
  background-image:none!important;
  border-color:#e5d8eb!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-library-main>.tp-rail-access .tp-member-card:before{
  background:#f1e9f7!important;
  border:1px solid #d6c3e4!important;
  color:#5a277b!important;
  -webkit-text-fill-color:#5a277b!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-library-main>.tp-rail-access .tp-member-card>strong{
  color:#2e2037!important;-webkit-text-fill-color:#2e2037!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-library-main>.tp-rail-access .tp-member-card>small{
  color:#5b5064!important;-webkit-text-fill-color:#5b5064!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-library-main>.tp-rail-access .tp-member-card>button{
  background:#703296!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border:1px solid #703296!important;
}
/* The existing tutorial reader dialog formerly had a black chrome, even on
   a light page. Keep the media element/player itself untouched. */
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] .tp-dialog,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] .tp-dialog-head,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] .tp-dialog-body {
  color-scheme:light!important;
  background:#fff!important;
  background-image:none!important;
  border-color:#e5d9ec!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] .tp-dialog :is(h2,h3,strong,b),
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] .tp-dialog-head h2{
  color:#291e32!important;-webkit-text-fill-color:#291e32!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] .tp-dialog :is(p,small,span,.tp-notes){
  color:#51465d!important;-webkit-text-fill-color:#51465d!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] .tp-resource {
  background:#faf7fc!important;
  background-image:none!important;
  color:#302438!important;
  border:1px solid #e7d9ed!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] .tp-resource :is(b,strong){
  color:#2a1d33!important;-webkit-text-fill-color:#2a1d33!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] .tp-dialog :is(button,a):focus-visible{
  outline:3px solid #8b45ae!important;outline-offset:3px!important;
}
/* The dark overlay backdrop can remain semi-transparent when a reader is open,
   but actual page sections, cards and reader backgrounds stay light. */
@media(max-width:760px){
  html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] :is(.tp-row-card,.tp-folder-card){
    max-width:100%!important;min-width:0!important;
  }
}


/* v24: screenshot-verified areas — no black ribbons between light sections.
   Explicit top-level surfaces avoid inheritance from older body/section skins. */
html body[data-asr-public-final-section="tutorials"][data-tutorial-final]{
 background-color:#f8f6fa!important;
 background-image:none!important;
 color:#241b2b!important;
 color-scheme:light!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] .public-site{
 background-color:#f8f6fa!important;
 background-image:none!important;
 color-scheme:light!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page > .tutorials-clean-head,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page > .asr-tutorial-v21-intro,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page > .asr-tutorial-v21-paths,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page > .tutorials-tool-icons,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page > .tutorials-catalog-section,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page > .asr-tutorial-v21-platforms{
 background-color:#f8f6fa!important;
 background-image:none!important;
 color:#241b2b!important;
 color-scheme:light!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page > .asr-tutorial-v21-intro{
 border:1px solid #e8dfe9!important;
 border-radius:14px!important;
 padding:20px 23px!important;
 margin:0 0 30px!important;
 box-shadow:none!important;
 display:flex!important;
 align-items:center!important;
 justify-content:space-between!important;
 gap:22px!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page > .asr-tutorial-v21-intro p{
 color:#53485b!important;
 -webkit-text-fill-color:#53485b!important;
 opacity:1!important;
 font-size:clamp(15px,1.15vw,17px)!important;
 line-height:1.7!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page > .asr-tutorial-v21-intro [data-asr-tutorial-v21-search]{
 background:#732d9d!important;
 background-image:none!important;
 color:#fff!important;
 -webkit-text-fill-color:#fff!important;
 flex-shrink:0!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page > .asr-tutorial-v21-paths{
 padding:0 0 27px!important;
 border:0!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page > .tutorials-tool-icons{
 border:1px solid #e5daea!important;
 border-radius:13px!important;
 padding:12px!important;
 margin:14px 0 28px!important;
 box-shadow:none!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page > .tutorials-tool-icons > article{
 background:#fff!important;
 background-image:none!important;
 border:1px solid #e3d7e7!important;
 border-radius:10px!important;
 box-shadow:none!important;
 color:#32243a!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page > .tutorials-tool-icons b{
 color:#32243a!important;
 -webkit-text-fill-color:#32243a!important;
 opacity:1!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page > .asr-tutorial-v21-paths .asr-tutorial-v21-grid > button{
 background:#fff!important;
 background-image:none!important;
 color:#241b2b!important;
 border:1px solid #e5d9ea!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page > .tutorials-catalog-section{
 padding-top:18px!important;
 border-top:1px solid #e3d7e7!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page > .tutorials-clean-head h1,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page > .asr-tutorial-v21-paths h2{
 color:#23192c!important;
 -webkit-text-fill-color:#23192c!important;
}
@media(max-width:800px){
 html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page > .asr-tutorial-v21-intro{
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;
 }
 html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page > .asr-tutorial-v21-intro [data-asr-tutorial-v21-search]{
  white-space:normal!important;
 }
}


/* v25: source-level regression fix.
   The v5 base header had a missing CSS brace; its parse error combined with
   inherited near-black surfaces to hide introductory copy between light cards.
   Keep document gutters, all direct child sections and tool strip light even
   if an unrelated global public skin supplies a dark backdrop. */
html:has(body[data-tutorial-final="v5"]),
html:has(body[data-tutorial-final="v5"]) body,
html:has(body[data-tutorial-final="v5"]) body .public-site {
  background-color:#f8f6fa!important;
  background-image:none!important;
  color-scheme:light!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final="v5"] main.tutorials-page {
  background:#f8f6fa!important;
  background-image:none!important;
  color:#241b2b!important;
  -webkit-text-fill-color:initial;
  color-scheme:light!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final="v5"] main.tutorials-page > :is(
  .tutorials-clean-head,
  .asr-tutorial-v21-intro,
  .asr-tutorial-v21-paths,
  .tutorials-tool-icons,
  .tutorials-catalog-section,
  .asr-tutorial-v21-platforms,
  .asr-tutorial-v21-support
) {
  background-color:#f8f6fa!important;
  background-image:none!important;
  color:#241b2b!important;
  color-scheme:light!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final="v5"] main.tutorials-page > .asr-tutorial-v21-intro {
  border:1px solid #e6dbea!important;
  background:#fff!important;
  padding:23px 25px!important;
  border-radius:14px!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final="v5"] main.tutorials-page > .asr-tutorial-v21-intro p {
  color:#504559!important;
  -webkit-text-fill-color:#504559!important;
  opacity:1!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final="v5"] main.tutorials-page > .tutorials-tool-icons {
  background:#f8f6fa!important;
  border:0!important;
  padding:13px 0 26px!important;
  box-shadow:none!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final="v5"] main.tutorials-page > .tutorials-tool-icons > article {
  background:#fff!important;
  background-image:none!important;
  border:1px solid #e4d8e9!important;
  box-shadow:none!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final="v5"] main.tutorials-page > .tutorials-tool-icons :is(b,strong) {
  color:#33283d!important;
  -webkit-text-fill-color:#33283d!important;
  opacity:1!important;
}


/* v26 / REAL COURSE CARDS: restore standalone light top line and category.
   The template renders:
   .tp-row-main > .tp-card-topline >
      .tp-resource-type-icon + .tp-row-kicker
   Old dark layouts styled the row's children but never the actual wrapper.
   Make ALL three elements independently light, so a legacy background rule
   cannot leave a black 100%-wide bar behind the "GENERAL · INTERMEDIATE"
   caption shown in the member tutorials screenshot. */
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-results .tp-row-card .tp-row-main>.tp-card-topline {
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:12px!important;
  width:100%!important;
  height:auto!important;
  min-height:44px!important;
  max-height:none!important;
  margin:0 0 11px!important;
  padding:0!important;
  background:#fff!important;
  background-color:#fff!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  color-scheme:light!important;
  box-shadow:none!important;
  isolation:isolate!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-results .tp-row-card .tp-card-topline>.tp-resource-type-icon {
  display:grid!important;
  place-items:center!important;
  align-self:center!important;
  position:static!important;
  flex:0 0 46px!important;
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  min-height:46px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid #e7d8ed!important;
  border-radius:11px!important;
  background:#f8f2fb!important;
  background-color:#f8f2fb!important;
  background-image:none!important;
  color:#642c88!important;
  -webkit-text-fill-color:#642c88!important;
  box-shadow:none!important;
  font-size:23px!important;
  font-weight:760!important;
  line-height:1!important;
  opacity:1!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-results .tp-row-card .tp-card-topline>.tp-row-kicker {
  display:inline-flex!important;
  align-items:center!important;
  align-self:center!important;
  justify-content:flex-start!important;
  position:static!important;
  flex:0 1 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  height:auto!important;
  min-height:30px!important;
  margin:0!important;
  padding:6px 11px!important;
  border:1px solid #e3d4eb!important;
  border-radius:999px!important;
  background:#f7f0fa!important;
  background-color:#f7f0fa!important;
  background-image:none!important;
  color:#60317f!important;
  -webkit-text-fill-color:#60317f!important;
  font-size:11px!important;
  font-weight:830!important;
  letter-spacing:.065em!important;
  line-height:1.35!important;
  text-transform:uppercase!important;
  text-shadow:none!important;
  opacity:1!important;
  box-shadow:none!important;
  overflow-wrap:anywhere!important;
}
/* Decorative triangles/old label ribbons must not regenerate the black bar. */
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-results .tp-row-card .tp-card-topline::before,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-results .tp-row-card .tp-card-topline::after,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-results .tp-row-card .tp-row-kicker::before,
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-results .tp-row-card .tp-row-kicker::after {
  display:none!important;
  content:none!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-results .tp-row-card .tp-row-main>h3 {
  margin-top:4px!important;
  color:#241a2c!important;
  -webkit-text-fill-color:#241a2c!important;
  opacity:1!important;
}
@media(max-width:530px) {
  html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page [data-tutorial-platform] .tp-results .tp-row-card .tp-card-topline>.tp-row-kicker {
    font-size:10px!important;
    letter-spacing:.025em!important;
  }
}


/* Tutorials catalog keeps only QForge and ASRQuant; maintain a balanced two-column layout. */
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page .asr-tutorial-v21-platform-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page #tutorial-library{
  scroll-margin-top:104px!important;
}
@media(max-width:1020px){
 html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page .asr-tutorial-v21-platform-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
 }
}
@media(max-width:560px){
 html body[data-asr-public-final-section="tutorials"][data-tutorial-final] main.tutorials-page .asr-tutorial-v21-platform-grid{
  grid-template-columns:1fr!important;
 }
}