:root{--bg:#f3f6fa;--paper:#fff;--ink:#243c55;--muted:#536779;--blue:#315d7c;--line:#dce5ec;--accent:#8d4558;--serif:'Amiri',Georgia,serif;--sans:'IBM Plex Sans Arabic',Tahoma,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased}
button,input,a{-webkit-tap-highlight-color:transparent}
button,input{font:inherit}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
svg{display:block}
[hidden]{display:none!important}
::selection{background:#d9e8f1;color:#243c55}
:focus-visible{outline:3px solid #9d3858;outline-offset:5px;border-radius:5px}
.page-shell{max-width:1120px;margin:auto;padding:0 40px}
.skip-link{position:absolute;top:-100px;right:20px;z-index:10;padding:12px 20px;background:white;border:2px solid var(--blue)}
.skip-link:focus{top:10px}
.masthead{height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;font:700 25px var(--serif)}
.brand svg{width:42px;height:40px;fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.brand .book-sprout{stroke:var(--accent)}
.browse-link{display:flex;align-items:center;gap:22px;min-height:44px;font-size:14px;color:var(--muted)}
.masthead-actions{display:flex;align-items:center;gap:18px}
.install-app{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:6px 14px;border-radius:22px;border:1px solid #ecd5dc;background:#f8eef1;color:var(--accent);font-size:13px}
.install-app svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.install-app:hover{background:#f3e2e7}
@media(max-width:650px){.install-app{font-size:12px;padding:6px 11px;gap:5px}.install-app svg{width:16px;height:16px}.masthead-actions:has(.install-app:not([hidden])) .browse-link{display:none}}
.browse-link span{color:var(--accent);font-size:24px}
.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:50px;align-items:center;padding:37px 0 45px;min-height:407px}
.hero-copy{padding-top:9px}
.eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 14px;color:var(--accent);font-size:13px;font-weight:500}
.eyebrow span{height:5px;width:5px;background:var(--accent);border-radius:50%}
h1{font-family:var(--serif);font-weight:400;margin:0;line-height:1.45}
.honorific{display:block;font-size:24px}
.sheikh-name{display:block;font-size:60px;white-space:nowrap;line-height:1.4}
.title-flourish{width:290px;height:16px;stroke:#b28091;stroke-width:1.8;fill:none;stroke-linecap:round;margin:0 6px 17px 0}
.intro{max-width:490px;font-size:16px;line-height:2.05;margin:0;color:var(--muted)}
.hero-stats{display:flex;align-items:center;gap:15px;font-size:13px;color:var(--muted);margin:19px 0 0}
.hero-stats b{font-weight:600;color:var(--blue);font-size:16px}
.hero-stats i{height:3px;width:3px;border-radius:50%;background:#7c91a2}
.portrait{position:relative;width:100%;height:330px;margin:0;display:flex;align-items:center;justify-content:center;padding-bottom:23px}
.portrait-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.photo-frame{position:relative;width:234px;height:250px;transform:rotate(-4deg);border-radius:48% 48% 44% 46%;padding:7px;background:#fff;box-shadow:0 6px 18px #28445b0c}
.photo-frame:after{position:absolute;content:'';inset:-7px -7px -6px -7px;border:1px solid #88a1b4;border-radius:47% 50% 46% 49%;transform:rotate(8deg);pointer-events:none}
.photo-frame picture{display:block;width:100%;height:100%}
.sheikh-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:51% 50%;border-radius:48% 47% 44% 46%;filter:saturate(.78)}
.portrait figcaption{position:absolute;bottom:0;font-family:var(--serif);font-size:18px;color:var(--muted);transform:rotate(-3deg)}
main{scroll-margin-top:20px}
.search-area{padding:25px 0 29px;border-top:1px solid var(--line)}
.search-label{display:block;font-family:var(--serif);font-size:27px;margin-bottom:12px}
.search-field{display:flex;align-items:center;gap:14px;background:var(--paper);min-height:65px;border:1px solid #c2d1dd;border-radius:14px;padding:0 20px;box-shadow:0 4px 14px #304e6803;transition:border-color .2s,box-shadow .2s}
.search-field:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px #315d7c15}
.search-field>svg{flex-shrink:0;width:23px;height:23px;stroke:var(--blue);stroke-width:1.7;stroke-linecap:round}
.search-field input{width:100%;min-width:0;border:0;outline:none;background:transparent;color:var(--ink);height:63px;font-size:16px;line-height:normal}
.search-field input::placeholder{color:#617587;opacity:1}
.search-field input:focus-visible{outline:0}
input::-webkit-search-cancel-button{display:none}
.search-hint{border-right:1px solid var(--line);padding-right:18px;white-space:nowrap;color:var(--muted);font-size:12px}
.clear-search{flex-shrink:0;border:0;background:transparent;font-size:28px;color:var(--blue);width:44px;height:44px;padding:0;line-height:1}
#search-help{color:var(--muted);font-size:12px;margin:9px 2px 0}
.catalogue-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:44px;align-items:start;padding:9px 0 35px}
.index-inner{position:sticky;top:25px}
.index{align-self:stretch}
.small-label{font-size:12px;color:var(--muted);margin:8px 10px 14px}
#section-nav{display:flex;flex-direction:column;gap:2px}
.index-link{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:9px;padding:7px 12px;font-size:14px;transition:background .15s,color .15s}
.index-link:hover,.index-link[aria-current="true"]{background:#e5edf4;color:#254f70}
.index-link b{font-size:12px;font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
.index-art{width:174px;height:auto;margin:29px auto 0;opacity:.85}
.index-note{text-align:center;font-family:var(--serif);font-size:17px;line-height:1.65;color:var(--muted);margin:7px 0}
.list-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 16px}
.list-heading h2{font-family:var(--serif);font-size:29px;font-weight:400;margin:0}
#section-count{font-size:12px;color:var(--muted)}
.search-status:empty{display:none}
.search-status{font-size:13px;color:var(--blue);margin:0 0 16px}
#sections{background:var(--paper);border:1px solid var(--line);border-radius:19px;padding:0 27px}
.subject{border-bottom:1px solid var(--line);scroll-margin-top:24px}
.subject:last-child{border-bottom:0}
.subject summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:20px;min-height:98px;padding:17px 0;position:relative}
.subject summary::-webkit-details-marker{display:none}
.subject summary::marker{content:''}
.subject-number{font:400 16px var(--serif);color:#6a8092;min-width:24px;align-self:center;font-variant-numeric:tabular-nums}
.subject-heading{min-width:0;flex:1}
.subject-heading h3{font-family:var(--serif);font-weight:700;font-size:25px;line-height:1.65;margin:0}
.subject-count{font-size:12px;color:var(--muted);display:block;line-height:1.5}
.toggle-icon{width:30px;height:30px;flex-shrink:0;border-radius:50%;background:#edf3f7;position:relative;color:var(--blue)}
.toggle-icon:before,.toggle-icon:after{content:'';position:absolute;inset:14px 9px auto;height:1.5px;background:currentColor;border-radius:2px}
.toggle-icon:after{transform:rotate(90deg);transition:transform .2s}
.subject[open] .toggle-icon:after{transform:rotate(0)}
.subject[open] summary{margin-bottom:4px}
.subject summary:hover h3{color:var(--blue)}
.subject[open] .subject-heading h3{color:var(--blue)}
.subject-body{padding-bottom:15px}
.level-group{--level-ink:#3c5a70;--level-bg:#eef2f5}
.level-beginner{--level-ink:#276049;--level-bg:#eaf4ee}
.level-intensive{--level-ink:#245b86;--level-bg:#eaf2fc}
.level-intermediate{--level-ink:#845518;--level-bg:#fcf2df}
.level-advanced{--level-ink:#82416c;--level-bg:#f6edf5}
.level-heading{font-weight:500;font-size:12px;color:var(--level-ink);background:var(--level-bg);border-radius:7px;padding:8px 13px;margin:14px 0 0;display:flex;align-items:center;gap:8px}
.level-heading:before,.level-badge:before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.level-heading span{margin-inline-start:auto}
.course{padding:23px 0 22px;border-bottom:1px solid #e8edf1}
.course:last-child{border-bottom:0}
.course-title-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.course h5{font-size:16px;line-height:1.9;font-weight:500;margin:0;overflow-wrap:anywhere}
.level-badge{display:inline-flex;align-items:center;gap:5px;color:var(--level-ink);background:var(--level-bg);border-radius:20px;padding:1px 9px;font-size:12px;white-space:nowrap}
.course-book{font-size:13px;color:var(--muted);margin:5px 0 0;line-height:1.9;overflow-wrap:anywhere;unicode-bidi:plaintext}
.course-note{font-size:12px;color:var(--accent);margin:5px 0 0;unicode-bidi:plaintext}
.platform-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.platform-link{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:7px 12px;border:1px solid var(--platform-border);border-radius:8px;font-size:12px;font-weight:500;background:var(--platform-bg);color:var(--platform-ink);transition:box-shadow .15s,transform .15s}
.platform-link:hover{box-shadow:0 2px 6px #24405a14;transform:translateY(-1px)}
.platform-link svg{width:20px;height:20px;flex-shrink:0}
.platform-link bdi{font-weight:500}
.platform-link.soundcloud{--platform-ink:#963d11;--platform-bg:#fff5ee;--platform-border:#f0d8c9}
.platform-link.youtube{--platform-ink:#a42d37;--platform-bg:#fff1f2;--platform-border:#efd1d6}
.platform-link.drive{--platform-ink:#285975;--platform-bg:#edf5fa;--platform-border:#cddfe9}
.empty-state{text-align:center;padding:50px 20px;background:white;border:1px solid var(--line);border-radius:16px}
.empty-state svg{width:72px;height:64px;margin:auto;stroke:#7894a9;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.empty-state h3{font:700 26px var(--serif);margin:20px 0 8px}
.empty-state p{font-size:14px;color:var(--muted)}
.empty-state button{min-height:44px;background:#e7eff5;border:1px solid #c7d7e3;color:var(--blue);border-radius:8px;padding:8px 18px;margin-top:10px;font-size:13px}
.noscript{padding:20px}
footer{text-align:center;padding:20px 0 32px;color:var(--muted)}
footer>svg{width:130px;height:30px;margin:0 auto 16px;stroke:#91a6b5;stroke-width:1.3;fill:none;stroke-linecap:round}
footer p{font:400 22px var(--serif);color:var(--ink);margin:0 0 4px}
footer>span{display:block;font-size:12px}
footer>a{display:inline-flex;align-items:center;min-height:44px;margin-top:11px;font-size:12px;color:var(--blue)}
@media(min-width:1500px){.page-shell{max-width:1200px}.hero{gap:85px;min-height:435px}.catalogue-layout{gap:60px}}
@media(max-width:850px){.page-shell{padding:0 26px}.hero{gap:8px;grid-template-columns:1.25fr 1fr}.sheikh-name{font-size:46px}.portrait{height:295px}.photo-frame{width:195px;height:218px}.catalogue-layout{grid-template-columns:170px minmax(0,1fr);gap:23px}#sections{padding:0 19px}.index-link{font-size:13px}.index-art{width:150px}.subject summary{gap:13px}.subject-heading h3{font-size:23px}.search-hint{display:none}}
@media(max-width:650px){.page-shell{padding:0 20px}.masthead{height:76px}.brand{font-size:23px;gap:9px}.brand svg{width:34px;height:34px}.browse-link{font-size:12px;gap:9px}.browse-link span{font-size:22px}.hero{display:flex;flex-direction:column-reverse;gap:0;min-height:0;padding:17px 0 26px;text-align:center}.portrait{height:190px;width:255px;padding-bottom:19px}.photo-frame{width:142px;height:153px;padding:4px}.photo-frame:after{inset:-5px}.portrait figcaption{font-size:14px;bottom:0}.hero-copy{padding-top:12px}.eyebrow{justify-content:center;font-size:12px;margin:0 0 8px}.honorific{font-size:20px}.sheikh-name{font-size:40px;line-height:1.55}.title-flourish{width:220px;height:13px;margin:-3px auto 12px}.intro{font-size:13px;line-height:2;max-width:370px;margin:auto}.hero-stats{justify-content:center;gap:12px;font-size:12px;margin-top:15px}.hero-stats b{font-size:14px}.search-area{padding:20px 0 15px}.search-label{font-size:25px;margin-bottom:10px}.search-field{min-height:58px;padding:0 14px;gap:10px;border-radius:12px}.search-field input{height:56px;font-size:13px}.search-field>svg{width:20px;height:20px}.clear-search{width:35px}#search-help{font-size:12px;margin-top:8px}.catalogue-layout{display:block;padding-top:4px}.index{margin:0 0 23px}.index-inner{position:static}.small-label{margin:0 0 8px;font-size:12px}#section-nav{flex-direction:row;flex-wrap:wrap;gap:6px}.index-link{font-size:12px;min-height:44px;padding:7px 11px;background:#e9eff5;border:1px solid #dce5ed;border-radius:24px;gap:7px}.index-link b{display:none}.index-art,.index-note{display:none}.list-heading{margin-bottom:12px}.list-heading h2{font-size:27px}#section-count{font-size:12px}#sections{padding:0 17px;border-radius:16px}.subject summary{min-height:87px;gap:11px;padding:15px 0}.subject-number{font-size:14px;min-width:19px}.subject-heading h3{font-size:23px}.subject-count{font-size:12px}.toggle-icon{width:27px;height:27px}.toggle-icon:before,.toggle-icon:after{inset:13px 8px auto}.subject-body{padding-bottom:10px}.level-heading{font-size:12px;padding:8px 10px}.course{padding:20px 0}.course h5{font-size:14px}.course-book{font-size:12px}.course-note{font-size:12px}.course-title-line{gap:6px}.platform-links{gap:6px;margin-top:12px}.platform-link{font-size:12px;padding:7px 9px;gap:6px}.platform-link svg{width:18px;height:18px}.level-badge{font-size:12px}footer{padding-top:7px}footer p{font-size:21px}}
.mobile-jump{display:none}
.subject-number{color:#5b7184}
.course h4{font-size:16px;line-height:1.9;font-weight:500;margin:0;overflow-wrap:anywhere}
@media(max-width:650px){.intro{font-size:14px}.search-field input{font-size:14px}#section-nav{display:none}.index .small-label{display:none}.mobile-jump{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted)}.mobile-jump select{font:inherit;color:var(--ink);background:white;border:1px solid #c2d1dd;border-radius:10px;min-height:44px;padding:6px 10px;max-width:70%;flex:1}.course h4,.course h5{font-size:15px}.course-book{font-size:13px}.platform-link{font-size:12px}}
.platform-label{display:flex;flex-direction:column;align-items:flex-start;line-height:1.35}
.platform-meta{font-size:12px;font-weight:400;opacity:.8;font-variant-numeric:tabular-nums;white-space:nowrap}
.platform-link.is-playing .platform-meta{opacity:.9}
.share-course{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:7px 12px;border:1px dashed #c9d6e1;border-radius:8px;background:transparent;color:var(--muted);font-size:12px;margin-inline-start:auto}
.share-course svg{width:17px;height:17px}
.share-course:hover{color:var(--blue);border-color:var(--blue);background:#f4f8fb}
.course.is-target{animation:target-glow 3s ease-out}
@keyframes target-glow{0%,40%{background:#f6e9ed;box-shadow:0 0 0 8px #f6e9ed}100%{background:transparent;box-shadow:0 0 0 8px transparent}}
.toast{position:fixed;z-index:40;left:50%;top:18px;transform:translate(-50%,-30px);opacity:0;pointer-events:none;background:var(--ink);color:#fff;font-size:13px;padding:10px 18px;border-radius:10px;box-shadow:0 10px 30px #1d385230;transition:opacity .2s,transform .2s;max-width:calc(100% - 32px);overflow-wrap:anywhere}
.toast.is-shown{opacity:1;transform:translate(-50%,0)}
.player-speed{display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;border-radius:9px;font-size:12px;color:var(--accent);background:#f8eef1;border:1px solid #ecd5dc;font-variant-numeric:tabular-nums}
.player-speed:hover{background:#f3e2e7}
.lesson-list button .lesson-name{flex:1;min-width:0}
.lesson-list button .lesson-time{flex-shrink:0;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.lesson-list button[aria-current="true"] .lesson-time{color:var(--accent)}
.platform-link.playable:after{content:'';width:7px;height:8px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);opacity:.75;margin-inline-start:2px}
.platform-link.is-playing{background:var(--platform-ink);border-color:var(--platform-ink);color:#fff}
.platform-link.is-playing svg rect,.platform-link.is-playing svg path[fill]:not([fill="white"]){fill:#fff}
.platform-link.youtube.is-playing svg path[fill="white"]{fill:var(--platform-ink)}
.player{position:fixed;inset:auto 0 0;z-index:20;width:min(760px,calc(100% - 24px));margin:0 auto 12px;background:var(--paper);border:1px solid #c9d6e1;border-radius:18px;box-shadow:0 18px 50px #1d38521f,0 2px 8px #1d385214;overflow:hidden}
.player:before{content:'';position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(to left,var(--accent),#b28091 60%,transparent)}
.player-bar{position:relative;display:flex;align-items:center;gap:14px;padding:16px 16px 10px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.player-bar:before{content:'';position:absolute;top:6px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:4px;background:#cbd8e3}
.player-bar:hover:before{background:#9fb4c5}
.player.is-dragging .player-bar{cursor:grabbing}
.player.is-dragging iframe{pointer-events:none}
.player.is-compact,.player.is-compact.youtube{width:min(440px,calc(100% - 24px))}
.player.is-compact .player-meta .player-title{font-size:16px}
.player.is-compact .lesson-steps .lesson-toggle{display:none}
.player.is-moved{inset:auto;margin:0;box-shadow:0 24px 60px #1d385230,0 2px 10px #1d38521a}
.player-meta{flex:1;min-width:0}
.player-kicker{display:block;font-size:12px;color:var(--accent);line-height:1.5}
.player-title{display:block;font:700 18px/1.5 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.player-open,.player-size{display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;border-radius:9px;font-size:12px;color:var(--blue);background:#edf3f7;border:1px solid #d7e3ec}
.player-open:hover,.player-size:hover{background:#e3ecf3}
.player-close{width:44px;height:44px;border:0;border-radius:50%;background:transparent;font-size:26px;line-height:1;color:var(--muted)}
.player-close:hover{background:#edf3f7;color:var(--ink)}
.player-frame{padding:0 12px 12px}
.player-frame iframe{display:block;width:100%;border:0;border-radius:10px;background:#eef3f7}
.player.soundcloud iframe{height:var(--sc-h,min(300px,42vh));min-height:116px}
/* YouTube keeps 16:9: the width follows the height left after the bar and lesson controls */
.player.youtube{--chrome:150px;width:min(900px,calc(100% - 24px))}
.player.youtube.has-lessons{--chrome:215px}
.player.youtube:has(.lesson-list:not([hidden])){--chrome:450px}
.player.youtube .player-frame iframe{aspect-ratio:16/9;height:auto;width:min(100%,calc((100vh - var(--chrome)) * 16 / 9),calc((100dvh - var(--chrome)) * 16 / 9));min-width:min(100%,256px);margin:0 auto}
.player.is-compact.soundcloud iframe{height:116px;min-height:0}
.player.is-compact.youtube .player-frame iframe{width:224px;min-width:0;margin:0 0 0 auto}
.player.has-lessons.soundcloud iframe{height:var(--sc-h,166px);min-height:0}
.player-resize{position:absolute;bottom:2px;left:2px;width:18px;height:18px;cursor:nesw-resize;touch-action:none;border-radius:0 0 0 14px;
  background:linear-gradient(45deg,transparent 0 30%,#9fb4c5 30% 36%,transparent 36% 50%,#9fb4c5 50% 56%,transparent 56% 70%,#9fb4c5 70% 76%,transparent 76%) no-repeat;
  background-size:12px 12px;background-position:3px 3px;opacity:.85}
.player-resize:hover{opacity:1;filter:brightness(.8)}
.player.is-resizing{user-select:none}
.player.is-resizing iframe{pointer-events:none}
.player.is-compact.has-lessons.soundcloud iframe{height:116px}
.lesson-nav{padding:0 12px 18px}
.lesson-steps{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lesson-steps button{min-height:44px;padding:6px 14px;border-radius:9px;border:1px solid #d7e3ec;background:#edf3f7;color:var(--blue);font-size:13px}
.lesson-steps button:hover:not(:disabled){background:#e3ecf3}
.lesson-steps button:disabled{opacity:.45;cursor:default}
.lesson-position{font-size:13px;color:var(--muted);padding:0 4px;font-variant-numeric:tabular-nums}
.lesson-steps .lesson-toggle{margin-inline-start:auto;color:var(--accent);background:#f8eef1;border-color:#ecd5dc}
.lesson-steps .lesson-toggle[aria-expanded="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.lesson-list{list-style:none;margin:10px 0 0;padding:4px;max-height:min(230px,30vh);overflow-y:auto;border:1px solid var(--line);border-radius:10px;background:#f7f9fb;counter-reset:lesson}
.lesson-list li{counter-increment:lesson}
.lesson-list button{display:flex;align-items:baseline;gap:10px;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--ink);font-size:13px;line-height:1.7;text-align:right}
.lesson-list button:before{content:counter(lesson,arabic-indic);min-width:22px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.lesson-list button:hover{background:#e9eff5}
.lesson-list button[aria-current="true"]{background:#f6e9ed;color:var(--accent);font-weight:600}
.player.is-compact .lesson-list{display:none}
@media(max-width:650px){.player{width:calc(100% - 16px);margin-bottom:8px;border-radius:16px}.player-bar{flex-wrap:wrap;gap:6px 10px;padding:10px 12px 8px}.player-meta{flex-basis:calc(100% - 54px)}.player-title{font-size:16px}.player-actions{width:100%;order:3}.player-open{flex:1;justify-content:center}.player-close{position:absolute;top:6px;left:6px}.player-frame{padding:0 8px 8px}.player.soundcloud iframe{height:min(260px,40vh)}.player.youtube{width:calc(100% - 16px);--chrome:210px}.player.youtube.has-lessons{--chrome:280px}.player.is-compact.youtube .player-frame iframe{width:176px}.player-resize{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
.course.has-cover{display:grid;grid-template-columns:132px minmax(0,1fr);column-gap:24px;align-items:start}
.course.has-cover>*:not(.course-cover){grid-column:2}
.course-cover{grid-column:1;grid-row:1/span 5;width:132px;height:132px;border-radius:10px;object-fit:cover;background:#2b3a35;box-shadow:0 1px 2px #1d385218,0 6px 16px -6px #1d385240}
@media(max-width:650px){.course.has-cover{grid-template-columns:92px minmax(0,1fr);column-gap:14px}.course-cover{width:92px;height:92px;border-radius:8px;grid-row:1/span 3}.course.has-cover .platform-links{grid-column:1/-1}}