.learning-shell{--lesson-view-height:calc(100vh - 160px);--lesson-view-height:calc(100dvh - 160px);--learn-panel:#101d20;--learn-muted:#a9bfbe;--learn-line:#2c4143;box-sizing:border-box;width:100%;max-width:1440px;margin:auto;padding:32px 12px 64px}.learning-progress{flex:1;min-width:0;margin-right:8px;color:var(--learn-muted);font-size:.85rem;line-height:1.35}.learning-progress progress{display:block;width:100%;height:5px;margin-top:8px;accent-color:#11c8c8;border:0;border-radius:6px;overflow:hidden}.learning-progress progress::-webkit-progress-bar{background:var(--learn-line)}.learning-progress progress::-webkit-progress-value{background:#11a99c}.classroom-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}.classroom-main{min-width:0}.activity-panel{box-sizing:border-box;max-height:var(--lesson-view-height);min-height:0;display:flex;align-items:center;justify-content:center;background:var(--learn-panel);border-radius:16px;overflow:auto;overscroll-behavior:auto}.video-stage{position:relative;max-height:var(--lesson-view-height);min-height:0;aspect-ratio:16/9;display:grid;place-items:center;text-align:center;background:var(--learn-panel);color:#f1f6f3;padding:24px}.stage-symbol{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 22px;border:1px solid #5ba9a2;border-radius:50%;font-size:2rem;color:#79d9ce}.video-stage h2{font-size:2rem;font-weight:300;margin:10px 0}.video-stage p:not(.eyebrow){color:#b3cac6}.file-choice{position:relative;overflow:hidden;cursor:pointer;margin:18px 0 10px}.file-choice input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.file-choice:focus-within{outline:2px solid #11c8c8;outline-offset:3px}.video-stage .button-outline{color:white;border-color:#62aaa4}.video-stage small{display:block;color:#92adaa;font-size:.8rem}.resource-status{color:var(--learn-muted);font-size:.9rem;line-height:1.6;padding:12px 20px}.resource-status:empty{display:none}.lesson-notes{padding:0}.lesson-notes label{display:flex;justify-content:space-between;gap:16px;margin-bottom:18px;font-size:1.1rem}.lesson-notes label span{color:var(--learn-muted);font-size:.8rem}.lesson-notes textarea{width:100%;background:transparent;color:inherit;border:1px solid var(--learn-line);border-radius:10px;padding:14px;font:inherit;line-height:1.6;resize:vertical}.lesson-notes textarea:focus{outline:2px solid #11c8c8}.lesson-notes p{font-size:.8rem;color:var(--learn-muted);margin-top:8px}.learning-shell button{cursor:pointer}.learning-shell button:disabled{opacity:.4;cursor:default;transform:none}.course-outline{background:var(--learn-panel);border:1px solid var(--learn-line);border-radius:16px;position:sticky;top:100px;overflow:hidden}#lesson-list{max-height:65vh;overflow:auto}.course-outline summary{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:10px;background:#899e9910;cursor:pointer;font-size:.95rem;list-style:none}.outline-lesson{width:100%;min-height:44px;display:flex;align-items:center;gap:10px;text-align:left;padding:11px 14px;border:0;background:none;color:inherit;font:inherit;font-size:.95rem;line-height:1.35;border-left:3px solid transparent}.outline-lesson:hover{background:#11c8c80c}.reading-panel,.quiz-panel,.practice-panel{padding:30px;min-height:min(460px,var(--lesson-view-height))}.activity-panel h2{font-size:1.8rem;margin:14px 0}.activity-panel h3{font-size:1.25rem}.resource-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.reading-empty{padding:60px 10px;text-align:center;color:var(--learn-muted)}.reading-empty>span{font-size:3rem;color:#11c8c8}.reading-empty h3{margin:16px 0}.reading-panel .resource-status{padding:12px 0}#pdf-reader{display:block;width:100%;height:min(650px,var(--lesson-view-height));background:white}.quiz-panel>p:not(.eyebrow),.practice-panel>p{color:var(--learn-muted);line-height:1.7}.quiz-panel fieldset{margin:28px 0;border:0}.quiz-panel legend{font-size:1.15rem;margin-bottom:16px}.quiz-panel label{display:block;padding:12px;border:1px solid var(--learn-line);border-radius:8px;margin-bottom:8px;cursor:pointer}.quiz-panel input{accent-color:#11c8c8;margin-right:8px}.quiz-actions{display:flex;gap:12px;flex-wrap:wrap}#quiz-result{line-height:1.7;color:var(--learn-muted);margin-top:20px}.practice-providers{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:28px 0}.practice-providers a{display:block;border:1px solid var(--learn-line);border-radius:14px;padding:24px}.practice-providers a:hover{border-color:#11c8c8}.provider-icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;background:#11c8c818;border-radius:12px;color:#50c2b6;margin-bottom:20px}.practice-providers p{font-size:.95rem;line-height:1.6;color:var(--learn-muted);margin-top:12px}
[data-theme=light] .learning-shell{--learn-panel:#fff;--learn-muted:#536b6a;--learn-line:#d5e3e0}[data-theme=light] .provider-icon{color:#13796f}[data-theme=light] .video-stage .eyebrow{color:#60cdc1}
@media(max-width:1050px){.classroom-layout{grid-template-columns:minmax(0,1fr) 280px;gap:20px}.learning-shell{padding:28px 24px}}
@media(max-width:760px){.classroom-layout{grid-template-columns:1fr}.course-outline{position:static}.learning-shell{padding:24px 18px}.video-stage{padding:28px 14px}.video-stage h2{font-size:1.6rem}.lesson-notes label{flex-direction:column;gap:8px}.reading-panel,.quiz-panel,.practice-panel{padding:24px 18px}.resource-heading{align-items:flex-start;flex-direction:column;gap:0}.practice-providers{grid-template-columns:1fr}.course-outline #lesson-list{max-height:500px}}
[data-theme="light"] .video-stage .button-outline{color:#f1f6f3;border-color:#62aaa4}

.classroom-layout.outline-hidden{grid-template-columns:minmax(0,1fr)}
.learning-shell [hidden]{display:none!important}

.outline-close{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:var(--learn-muted)}

.video-stage.has-video{padding:0;min-height:0}
#lesson-vimeo{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
/* Reposition the outline with CSS only, keeping the active player mounted. */
.classroom-main{display:contents}
.classroom-main>.activity-panel{grid-column:1;grid-row:1;width:100%;min-width:0;justify-self:stretch}
.classroom-main>.lesson-overview{grid-column:1;grid-row:2;min-width:0}
.classroom-layout>.course-outline{grid-column:2;grid-row:1 / span 2}
.classroom-layout.outline-below{grid-template-columns:minmax(0,1fr) 320px}
.classroom-layout.outline-below .activity-panel{grid-column:1 / -1}
.classroom-layout.outline-below>.course-outline{grid-column:2;grid-row:2;position:static;width:320px;max-width:100%;justify-self:end}
.classroom-layout.outline-below .lesson-overview{grid-column:1;grid-row:2}
.classroom-layout.outline-below.outline-hidden{grid-template-columns:minmax(0,1fr)}
.classroom-layout.outline-hidden .lesson-overview{grid-row:2}

.outline-move{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:var(--learn-muted)}
.outline-move svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5}
.outline-move:hover,.outline-close:hover{background:#11c8c812;color:#11a99c}
@media(min-width:761px) and (max-width:1050px){.classroom-layout.outline-below{grid-template-columns:minmax(0,1fr) 280px}.classroom-layout.outline-below>.course-outline{width:280px}}
@media(max-width:760px){
  .classroom-layout.outline-below{grid-template-columns:minmax(0,1fr)}
  .classroom-layout.outline-below>.course-outline{width:100%;grid-column:1;grid-row:3}
  .classroom-layout.outline-below .lesson-overview{grid-row:2}
  .classroom-layout.outline-below.outline-hidden .lesson-overview{grid-row:2}
  .classroom-layout>.course-outline{grid-column:1;grid-row:3;position:static}
  .classroom-main>.lesson-overview{grid-row:2}
  .outline-move{display:none}
  
}
.course-outline .outline-module-title{flex:1;min-width:0;line-height:1.35;overflow-wrap:anywhere}

/* Compact classroom header and viewport-sized contents panel. */
.lesson-header-inner{height:64px;max-width:1440px;margin:auto;padding:0 40px;display:flex;align-items:center;gap:32px}
.lesson-logo{display:block;width:172px;height:auto}
.classroom-header-link{font-size:1rem;color:inherit;padding:12px 0;white-space:nowrap}
.classroom-header-link:hover{color:#11a99c}
.lesson-header .header-actions{margin-left:auto}.lesson-header .header-actions .user-menu{margin-left:0;margin-right:0}
.classroom-layout>.course-outline{display:flex;flex-direction:column;height:calc(100vh - 88px);height:calc(100dvh - 88px);top:76px;min-height:0}

.course-outline #lesson-list{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;scrollbar-gutter:auto;overscroll-behavior:contain}
.outline-close svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){.lesson-header-inner{padding:0 18px;gap:16px}.lesson-logo{width:128px}.classroom-header-link{font-size:.9rem}.lesson-header .user-menu-trigger>svg:first-child{padding:6px}}
@media(max-width:380px){.lesson-header-inner{padding:0 12px;gap:10px}.lesson-logo{width:108px}}

.learning-shell{padding-top:12px}
.classroom-layout{position:relative;overflow-anchor:none}
.outline-reopen{position:absolute;right:12px;top:12px;z-index:10;display:flex;align-items:center;width:44px;max-width:calc(100% - 24px);height:44px;padding:10px;gap:0;overflow:hidden;border:1px solid #f2c671;border-radius:12px;background:#e6aa4b;color:#30230d;box-shadow:0 4px 16px #0003;cursor:pointer;font:inherit;font-size:.95rem;transition:width 240ms ease,gap 240ms ease,background 160ms ease}
.outline-reopen:is(:hover,:focus-visible){width:250px;gap:10px;background:#f2bf68}
.outline-reopen:focus-visible{outline:2px solid #f2c671;outline-offset:3px}
.outline-reopen-label{flex:1;min-width:0;white-space:nowrap;opacity:0;transition:opacity 120ms ease}
.outline-reopen:is(:hover,:focus-visible) .outline-reopen-label{opacity:1}
.outline-reopen svg{width:22px;height:22px;flex:0 0 22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.outline-lesson.current{background:rgba(230,170,75,.14);border-left-color:#e6aa4b;color:#f5d391}
.outline-lesson.current:hover{background:rgba(230,170,75,.2)}

[data-theme="light"] .outline-lesson.current{background:#fff1d3;border-left-color:#b57b1c;color:#754c0d}
[data-theme="light"] .outline-lesson.current:hover{background:#ffe7b5}

.course-outline summary::-webkit-details-marker{display:none}
.course-outline summary::marker{content:''}

.outline-expand-icon{width:22px;height:22px;flex:0 0 22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;color:var(--learn-muted);transition:color 180ms ease}
.outline-expand-icon circle{stroke-opacity:.45}
.outline-expand-icon .icon-vertical{transition:opacity 220ms ease,transform 220ms ease;transform-origin:12px 12px}
.course-outline details.is-expanded .icon-vertical{opacity:0;transform:rotate(90deg)}
.course-outline summary:hover .outline-expand-icon{color:#e6aa4b}
.course-outline summary:focus-visible{outline:2px solid #e6aa4b;outline-offset:-3px}
@media(prefers-reduced-motion:reduce){.outline-expand-icon,.outline-expand-icon .icon-vertical{transition:none}}

/* Compact rows: type, truncated title, and completion state. */

.outline-module-single{background:#899e9910}
.outline-lesson .outline-lesson-title{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal}
.outline-type-icon,.outline-completion{width:19px;height:19px;flex:0 0 19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--learn-muted)}
.outline-completion{margin-left:auto;opacity:.6}
.outline-completion.is-complete{opacity:1;color:#53bcb0}
.outline-lesson.current .outline-type-icon,.outline-lesson.current .outline-completion{color:#e6aa4b}
[data-theme="light"] .outline-completion.is-complete{color:#13796f}
[data-theme="light"] .outline-lesson.current .outline-type-icon,[data-theme="light"] .outline-lesson.current .outline-completion{color:#94620c}
.outline-lesson:focus-visible{outline:2px solid #e6aa4b;outline-offset:-3px}
.outline-static-heading{margin:0;padding:12px 16px;background:#899e9910;font-size:.95rem;font-weight:400}

/* Progress shares the heading row with the panel controls. */
.course-outline .outline-heading{display:flex;align-items:center;flex:0 0 auto;gap:4px;padding:16px}


.outline-series-title{display:block;flex:0 0 auto;padding:0 16px 16px;font-size:1.1rem;line-height:1.4;color:inherit;text-decoration:none}
.outline-series-title:hover{color:#e6aa4b}
[data-theme="light"] .outline-series-title:hover{color:#94620c}
.outline-series-title:focus-visible{outline:2px solid #e6aa4b;outline-offset:-3px}

@media(prefers-reduced-motion:reduce){.outline-reopen,.outline-reopen-label{transition:none}}

/* Shared controls and details below the active lesson material. */
.lesson-overview{padding:0}
.lesson-tools{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:18px;background:#0a1518;border:0;border-radius:14px}
.lesson-step{justify-self:start;background:none;border:0;padding:0;font:inherit;color:var(--link-accent)}
.lesson-step:last-child{justify-self:end}
.lesson-step:disabled{pointer-events:none}
.lesson-tool-actions{display:flex;align-items:center;gap:10px}
.lesson-complete{--complete-accent:#e6aa4b;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:10px 16px;border:1px solid currentColor;border-radius:10px;background:transparent;color:var(--complete-accent);font:inherit;font-size:.95rem;transition:color 180ms ease}
.lesson-complete:hover{--complete-accent:#f2bf68}
.lesson-complete[aria-pressed="true"]{--complete-accent:#11c8c8}
.lesson-complete[aria-pressed="true"]:hover{--complete-accent:#42d6d6}
.lesson-complete svg{width:19px;height:19px;flex:0 0 19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lesson-complete .completion-check{display:none}
.lesson-complete[aria-pressed="true"] .completion-check{display:block}
[data-theme="light"] .lesson-complete{--complete-accent:#94620c}
[data-theme="light"] .lesson-complete[aria-pressed="true"]{--complete-accent:#087b7d}
.lesson-comments-button{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--learn-line);border-radius:10px;background:none;color:var(--learn-muted)}
.lesson-comments-button:hover{color:#e6aa4b;border-color:#e6aa4b}
.lesson-comments-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lesson-details-box{margin-top:20px;background:var(--learn-panel);border:1px solid var(--learn-line);border-radius:16px;overflow:hidden}
.lesson-info{padding:24px}
.lesson-info .eyebrow{font-size:.75rem}
.lesson-info h2{font-size:1.8rem;line-height:1.3;font-weight:400;margin:10px 0 14px}
.lesson-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;color:var(--learn-muted);font-size:.9rem}
.lesson-description{margin:16px 0 0;color:var(--learn-muted);line-height:1.7}
.lesson-detail-tabs{display:flex;gap:24px;padding:0 24px;border-bottom:1px solid var(--learn-line)}
.lesson-detail-tabs button{background:none;border:0;padding:14px 0;color:var(--learn-muted);font:inherit;white-space:nowrap}
.lesson-detail-tabs .nav-link::after{bottom:0;background:currentColor}
.lesson-detail-tabs .nav-link:is(:hover,:focus-visible,[aria-selected="true"]){color:#e6aa4b}
.lesson-detail-tabs .nav-link[aria-selected="true"]::after{right:0}
.lesson-detail-tabs button span{font-size:.8rem;margin-left:5px}
.lesson-detail-panel{padding:24px}

/* Lesson discussion and threaded replies. */
.discussion-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px}
.discussion-heading h3{font-size:1.5rem;font-weight:300;letter-spacing:.015em}
.discussion-heading p{margin-top:7px;color:var(--learn-muted);font-size:.95rem;line-height:1.5}
.comment-sort-label{display:flex;align-items:center;gap:8px;color:var(--learn-muted);font-size:.8rem;white-space:nowrap}
#comment-sort{background:var(--learn-panel);color:inherit;border:1px solid var(--learn-line);border-radius:8px;padding:8px;font:inherit}
.comment-compose{display:flex;align-items:flex-start;gap:16px;padding:22px;border:0;border-radius:16px;background:linear-gradient(135deg,#11c8c80b,transparent 65%,#e6aa4b06)}
.comment-avatar{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:linear-gradient(140deg,#11c8c823,#11c8c80b);border:1px solid #11c8c830;color:#77d9d2;font-size:.85rem;letter-spacing:.04em}
#comment-form{flex:1;min-width:0}
#comment-form label{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:.95rem}
#comment-text,.comment-reply-form textarea{width:100%;padding:12px 14px;background:transparent;border:1px solid var(--learn-line);border-radius:10px;color:inherit;font:inherit;line-height:1.6;resize:vertical}
#comment-text::placeholder,.comment-reply-form textarea::placeholder{color:var(--learn-muted);opacity:.7}
.comment-form-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:12px}
.comment-form-actions>span,#comment-status,.reply-status,.comment-local-notice{font-size:.8rem;color:var(--learn-muted)}
.comment-submit{border:0;background:none;padding:0;margin:4px 8px 8px 0;font:inherit;color:var(--link-accent);font-size:.95rem}
.comment-submit:disabled{pointer-events:none}

.comment-local-notice{margin-top:12px}
#comment-status:empty,.reply-status:empty{display:none}
#comment-status,.reply-status{margin-top:12px}
.lesson-comment-list{margin-top:28px}
.comment-thread{margin-bottom:18px;padding:22px;border:0;border-radius:16px;background:linear-gradient(145deg,#11c8c808,transparent 65%,#e6aa4b05)}
.lesson-comment{display:flex;gap:14px;align-items:flex-start}
.comment-body{flex:1;min-width:0}
.comment-author{display:flex;align-items:center;gap:8px}
.comment-author strong{font-size:1rem;font-weight:400}
.comment-you{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;background:#e6aa4b12;color:#e6aa4b;font-size:.7rem}
.comment-date{display:block;color:var(--learn-muted);font-size:.75rem;white-space:nowrap}
.comment-body>p{margin:12px 0;color:inherit;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7}
.comment-reply-button{display:inline-flex;align-items:center;gap:7px;border:0;background:none;padding:4px 0;color:var(--learn-muted);font:inherit;font-size:.85rem}
.comment-reply-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.comment-reply-button:hover,.comment-cancel:hover{color:#e6aa4b}
.comment-replies{margin-left:19px;padding-left:32px;border-left:1px solid #11c8c82b}
.comment-reply{margin-top:20px}
.comment-reply .comment-avatar{flex-basis:30px;width:30px;height:30px;font-size:.7rem}
.comment-reply-form{margin-top:18px;padding:16px;background:#11c8c806;border:1px solid var(--learn-line);border-radius:12px}
.comment-reply-form label{display:block;margin-bottom:10px;font-size:.9rem;color:var(--learn-muted)}
.comment-cancel{background:none;border:0;color:var(--learn-muted);padding:8px 0;font:inherit;font-size:.85rem}
.comment-empty{text-align:center;padding:28px 12px;color:var(--learn-muted)}
.comment-empty>svg{width:36px;height:36px;margin:0 auto 14px;fill:none;stroke:#11c8c8;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.comment-empty h4{font-size:1.1rem;color:inherit;font-weight:400;margin-bottom:8px}
.comment-empty p{font-size:.95rem;line-height:1.6}
#lesson-comments :is(button,select,textarea):focus-visible{outline:2px solid #e6aa4b;outline-offset:3px}
[data-theme="light"] .comment-avatar{color:#087b7d}
[data-theme="light"] .comment-you{color:#94620c}
[data-theme="light"] :is(.comment-reply-button,.comment-cancel):hover{color:#94620c}
.lesson-tab-empty{color:var(--learn-muted);line-height:1.7}
.lesson-tools button:focus-visible,.lesson-detail-tabs button:focus-visible{outline:2px solid #e6aa4b;outline-offset:3px}
[data-theme="light"] .lesson-tools{background:#e7efed}
[data-theme="light"] .lesson-detail-tabs .nav-link:is(:hover,:focus-visible,[aria-selected="true"]),[data-theme="light"] .lesson-comments-button:hover{color:#94620c}
@media(max-width:600px){
  .lesson-tools{padding:10px;gap:6px}
  .lesson-tool-actions{gap:6px}
  .lesson-complete{padding:10px 8px;font-size:.8rem}
  .lesson-step{font-size:.85rem}
  .lesson-comments-button{width:36px;height:36px}
  .lesson-info,.lesson-detail-panel{padding:18px}
  .lesson-info h2{font-size:1.5rem}
  .lesson-detail-tabs{padding:0 18px;gap:20px;overflow-x:auto}
  .discussion-heading{flex-direction:column;gap:14px}
  .comment-compose{padding:12px;gap:10px}
  .comment-compose>.comment-avatar{flex-basis:30px;width:30px;height:30px;font-size:.7rem}
  .comment-form-actions{gap:8px;flex-wrap:wrap}
  .comment-replies{padding-left:16px;margin-left:15px}
}

/* Reserve room for the compact header, spacing, and the lesson toolbar. */
.reading-panel:has(#pdf-reader:not([hidden])){height:var(--lesson-view-height)}
.reading-panel:has(#pdf-reader:not([hidden])) .activity-content{display:flex;flex-direction:column;height:100%;min-height:0}
.reading-panel:has(#pdf-reader:not([hidden])) .resource-heading,.reading-panel:has(#pdf-reader:not([hidden])) .resource-status{flex:0 0 auto}
.reading-panel:has(#pdf-reader:not([hidden])) #pdf-reader{flex:1 1 0;min-height:120px;height:0}

.activity-content{width:100%;min-width:0;margin:auto}
.quiz-panel .activity-content,.practice-panel .activity-content{max-width:880px}

#panel-video{aspect-ratio:16/9}

.comment-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 16px}
.comment-actions{display:flex;align-items:center;gap:22px;margin-top:16px}
.comment-like{display:inline-flex;align-items:center;gap:7px;padding:4px 0;border:0;background:none;color:var(--learn-muted);font:inherit;font-size:.85rem}
.comment-like svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.comment-like-count{font-size:.75rem;min-width:17px;text-align:center}
.comment-like:hover,.comment-like[aria-pressed="true"]{color:#11c8c8}
.comment-like[aria-pressed="true"] svg{fill:#11c8c818}
[data-theme="light"] .comment-like:is(:hover,[aria-pressed="true"]){color:#087b7d}
@media(max-width:600px){.comment-thread{padding:16px}.comment-header{align-items:flex-start;flex-direction:column}}