.cl-render{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);margin-block:var(--space-md);overflow:hidden}.cl-render__title{display:flex;align-items:center;gap:var(--space-sm);padding:.5rem var(--space-sm);font-family:var(--font-mono);font-size:.8rem;font-weight:600;color:var(--color-accent);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--color-border)}.cl-render__body{display:grid;grid-template-columns:1fr 1fr}.cl-render__body:has(>:only-child){grid-template-columns:1fr}.cl-render__canvas-wrap{display:flex;align-items:center;justify-content:center;padding:var(--space-sm);background:#0a0a0f;border-right:1px solid var(--color-border)}.cl-render__title-text{flex:1;min-width:0}.cl-render__title-status{font-family:var(--font-mono);font-size:.8rem;font-weight:400;color:var(--color-text-muted, #888);white-space:nowrap}.cl-render--playing .cl-render__title-status{display:none}.cl-render__play{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid var(--color-border);border-radius:50%;background:transparent;color:var(--color-text);cursor:pointer;transition:background .15s,color .15s,border-color .15s;flex-shrink:0}.cl-render__play:hover{background:color-mix(in srgb,var(--color-accent) 15%,transparent);border-color:var(--color-accent);color:var(--color-accent)}.cl-render__play:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.cl-render__play-icon{width:14px;height:14px}.cl-render__play-icon--pause,.cl-render--playing .cl-render__play-icon--play{display:none}.cl-render--playing .cl-render__play-icon--pause{display:block}.cl-render__body:has(>:only-child) .cl-render__canvas-wrap{border-right:none}.cl-render__canvas-wrap canvas{display:block;border-radius:var(--radius-sm);max-width:100%;height:auto}.cl-render__editor{display:flex;flex-direction:column;min-height:0}.cl-render__code-wrap{position:relative;flex:1;min-height:250px;max-height:400px}.cl-render__highlight{position:absolute;inset:0;padding:var(--space-sm);font-family:var(--font-mono);font-size:.85rem;line-height:1.5;tab-size:2;margin:0;border:none;background:transparent;pointer-events:none;white-space:pre-wrap;word-wrap:break-word;overflow:auto;scrollbar-width:none;color:var(--color-text)}.cl-render__highlight::-webkit-scrollbar{display:none}.cl-render .cl-render__highlight code{font-family:inherit;font-size:inherit;line-height:inherit;tab-size:inherit;background:none;padding:0}.cl-render__textarea{display:block;position:absolute;inset:0;padding:var(--space-sm);font-family:var(--font-mono);font-size:.85rem;line-height:1.5;color:transparent;caret-color:var(--color-text);background:transparent;border:none;resize:none;outline:none;overflow:auto;tab-size:2;white-space:pre-wrap;word-wrap:break-word;z-index:1}.cl-hl-comment{color:#616e88;font-style:italic}.cl-hl-string{color:#a3be8c}.cl-hl-number{color:#b48ead}.cl-hl-keyword{color:#81a1c1}.cl-render__controls{display:flex;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);border-top:1px solid var(--color-border)}.cl-render__btn{font-family:var(--font-mono);font-size:.75rem;color:var(--color-muted);background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.25rem .75rem;cursor:pointer;transition:color .2s,border-color .2s}.cl-render__btn:hover,.cl-render__btn--run{color:var(--color-accent);border-color:var(--color-accent)}.cl-render__btn--run:hover{background:color-mix(in srgb,var(--color-accent) 15%,transparent)}.cl-render__btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.cl-render--stack .cl-render__body{grid-template-columns:1fr}.cl-render--stack .cl-render__canvas-wrap{border-right:none;border-bottom:1px solid var(--color-border);background:transparent;padding:var(--space-sm) 0}.cl-render--stack .cl-render__canvas-wrap canvas{background:#0a0a0f}.cl-render--readonly .cl-render__textarea{cursor:default}.cl-concept{background:color-mix(in srgb,var(--color-accent) 10%,transparent);border-left:3px solid var(--color-accent);padding:var(--space-sm) 1.25rem;border-radius:0 var(--radius-md) var(--radius-md) 0;margin-block:var(--space-md);overflow-x:auto}.cl-concept p{color:var(--color-text);margin-bottom:0}.cl-concept p+p{margin-top:var(--space-xs)}.cl-concept--tip strong{color:var(--color-accent)}.cl-concept--warn{background:color-mix(in srgb,#f59e0b 10%,transparent);border-left-color:#f59e0b}.cl-concept--warn strong{color:#f59e0b}.cl-concept--note{background:color-mix(in srgb,var(--color-muted) 10%,transparent);border-left-color:var(--color-muted)}.cl-concept--note strong{color:var(--color-text)}.cl-concept pre{color:var(--color-accent);font-size:clamp(.7rem,.65rem + .25vw,.8rem);line-height:1.4;background:transparent;border:none;padding:0;margin-block:var(--space-xs);overflow-x:auto}.cl-concept ul,.cl-concept ol{color:var(--color-text);margin:var(--space-xs) 0;padding-left:1.5rem}.cl-lesson-header{margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px solid var(--color-border)}.cl-lesson-number{font-family:var(--font-mono);font-size:.8rem;color:var(--color-accent);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-xs)}.cl-lesson-desc{color:var(--color-muted);font-size:1.05rem;margin-bottom:0}.cl-lesson-nav{display:flex;justify-content:space-between;margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px solid var(--color-border)}.cl-lesson-nav a{font-family:var(--font-mono);font-size:.85rem;padding:var(--space-xs) .75rem;border-radius:var(--radius-md)}.cl-lesson-nav a:hover{background:color-mix(in srgb,var(--color-accent) 15%,transparent)}.cl-lesson-list{list-style:none;display:flex;flex-direction:column;gap:var(--space-xs);padding:0}.content__body .cl-lesson-list{padding-left:0}.cl-lesson-list__item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:border-color .2s,box-shadow .2s}.cl-lesson-list__item:hover{border-color:var(--color-accent)}.cl-lesson-list__link{display:flex;align-items:baseline;gap:var(--space-sm);padding:.75rem var(--space-sm);color:inherit;text-decoration:none}.cl-lesson-list__link,.cl-lesson-list__link:hover{text-shadow:none}.cl-lesson-list__num{font-family:var(--font-mono);font-size:.8rem;color:var(--color-accent);flex-shrink:0}.cl-lesson-list__title{font-weight:600}.cl-lesson-list__desc{font-size:.85rem;color:var(--color-muted);margin-top:.15rem}.cl-lesson-list__apis{font-family:var(--font-mono);font-size:.75rem;color:var(--color-muted);margin-top:.25rem;opacity:.7}.cl-lesson-list__item:has(a:focus-visible){border-color:var(--color-accent)}.cl-lesson-list__link:focus-visible{outline:none}@media(max-width:640px){.cl-render__body{grid-template-columns:1fr}.cl-render__canvas-wrap{border-right:none;border-bottom:1px solid var(--color-border)}.cl-render__textarea,.cl-render__highlight{font-size:16px}.cl-lesson-nav{flex-wrap:wrap;gap:var(--space-xs);justify-content:center}}