:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#f6f7f4;color:#17201d;line-height:1.5;font-weight:400}*{box-sizing:border-box}html,#root{min-width:0;overflow-x:hidden}body{margin:0;overflow-x:hidden}a{color:inherit}button{font:inherit}.app-shell{display:grid;grid-template-columns:320px minmax(0,1fr);min-height:100vh;background:linear-gradient(90deg,#111816 0 320px,#f6f7f4 320px 100%)}.sidebar{position:sticky;top:0;min-height:100dvh;max-height:100dvh;overflow:auto;background:#111816;color:#eef7f1;padding:22px}.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;text-decoration:none;font-size:1.08rem}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:#f2c14e;color:#111816}.progress-box{margin:24px 0;color:#cddbd2;font-size:.9rem}.progress-track{margin-top:10px;height:8px;background:#2b3733;border-radius:999px;overflow:hidden}.progress-track span{display:block;height:100%;background:#52b788;transition:width .2s ease}.lesson-nav{display:grid;gap:8px}.lesson-nav a{display:grid;grid-template-columns:30px 1fr 18px;align-items:center;gap:10px;min-height:64px;padding:10px;border-radius:8px;color:#d7e1dc;text-decoration:none;background:transparent}.lesson-nav a.active{background:#23312c;color:#fff}.lesson-nav a:hover{background:#1c2724}.lesson-number{display:grid;place-items:center;width:28px;height:28px;border:1px solid #53645d;border-radius:50%;font-size:.82rem}.lesson-nav strong,.lesson-nav small{display:block}.lesson-nav small{margin-top:2px;color:#9fb1a8}.lesson-page{min-width:0}article{width:100%;max-width:1120px;margin:0 auto;padding:44px clamp(18px,5vw,64px)}.lesson-hero{min-height:50vh;display:flex;flex-direction:column;justify-content:center;padding-bottom:36px}.lesson-kicker{display:inline-flex;align-items:center;gap:8px;width:fit-content;color:#315c4a;font-weight:800;text-transform:uppercase;letter-spacing:0;font-size:.82rem}h1{max-width:850px;margin:18px 0 16px;font-size:clamp(2.4rem,7vw,5.4rem);line-height:.96;letter-spacing:0}.lesson-hero p{max-width:760px;font-size:1.22rem;color:#49534f}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}.primary,.secondary,.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:8px;min-height:42px;padding:0 16px;cursor:pointer;text-decoration:none}.primary{background:#17201d;color:#fff}.secondary{background:#dde5df;color:#17201d}.icon-button{width:42px;padding:0;background:#17201d;color:#fff;flex:0 0 auto}.diagram,.demo-panel,.snippet{max-width:100%;min-width:0;margin:28px 0;border:1px solid #d8dfda;border-radius:8px;background:#fff;box-shadow:0 18px 50px #11181614}.diagram{min-height:240px;padding:clamp(18px,4vw,32px)}.packet-flow{display:grid;grid-template-columns:minmax(120px,180px) 1fr 40px minmax(140px,190px);align-items:center;gap:18px}.node{min-height:88px;display:grid;place-items:center;gap:8px;border-radius:8px;font-weight:800}.server{background:#d9f0ff;color:#14334a}.segment{background:#fff1c7;color:#4a3510}.packet-lane{position:relative;height:80px;border-top:2px dashed #97aaa0;border-bottom:2px dashed #97aaa0;overflow:hidden}.packet-lane span{position:absolute;top:24px;left:-40px;width:34px;height:28px;border-radius:6px;background:#52b788;animation:packetMove 2.1s linear infinite}.diagram-arrow{color:#315c4a}.decode-stack{display:grid;gap:8px}.decode-stack span{padding:10px;border-radius:6px;background:#edf2ef;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}@keyframes packetMove{to{transform:translate(520px)}}.buffer-diagram{display:grid;gap:20px}.buffer-header,.timeline-label{display:flex;align-items:center;justify-content:space-between;gap:14px;font-weight:800}.buffer-track{position:relative;display:grid;grid-template-columns:repeat(5,minmax(84px,1fr));min-height:92px;border:2px solid #17201d;border-radius:8px;overflow:hidden}.buffer-track span{display:grid;place-items:center;border-right:1px solid #c5cec8;background:#dff5e9;font-weight:800;animation:bufferRise .7s ease both}.buffer-track span.played{background:#d9f0ff}.buffer-track i{position:absolute;top:0;bottom:0;left:32%;width:3px;background:#e4572e;box-shadow:0 0 0 5px #e4572e24}@keyframes bufferRise{0%{transform:translateY(18px);opacity:0}}.timeline-diagram{display:grid;gap:18px}.timeline-row{display:grid;grid-template-columns:repeat(8,minmax(82px,1fr));overflow:auto}.timeline-row span{min-height:78px;display:grid;align-content:center;gap:4px;padding:10px;border-right:1px solid #c5cec8;background:#fff1c7}.timeline-row span:nth-child(2n){background:#d9f0ff}.timeline-row small{color:#56615d}.quality-rows{display:grid;gap:8px}.quality-rows div{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:10px}.quality-rows span{height:12px;border-radius:999px;background:linear-gradient(90deg,#52b788,#f2c14e,#e4572e)}.video-fundamentals{display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,1fr);gap:20px;align-items:center}.audio-fundamentals{display:grid;grid-template-columns:minmax(260px,1.2fr) minmax(220px,.8fr);gap:20px;align-items:stretch}.wave-panel{display:grid;gap:16px;align-content:center;min-height:220px;padding:18px;border-radius:8px;background:#edf2ef}.wave-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:800}.wave-head strong{display:inline-flex;align-items:center;gap:8px}.wave-head span{color:#315c4a}.waveform{display:grid;grid-template-columns:repeat(16,1fr);align-items:center;gap:5px;min-height:128px}.waveform span{display:block;border-radius:999px;background:linear-gradient(180deg,#52b788,#d9f0ff);animation:wavePulse 1.2s ease-in-out infinite alternate}@keyframes wavePulse{0%{transform:scaleY(.72);opacity:.72}}.audio-metrics{display:grid;gap:10px}.audio-metrics div{display:grid;grid-template-columns:28px 1fr;gap:4px 10px;align-items:center;padding:12px;border-radius:8px;background:#fff1c7}.audio-metrics span{grid-column:2;color:#56615d}.screen-model{display:grid;place-items:center}.screen-frame{position:relative;width:min(100%,420px);aspect-ratio:16 / 9;display:grid;place-items:center;align-content:center;gap:4px;overflow:hidden;border:10px solid #17201d;border-radius:8px;background:#d9f0ff}.pixel-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(17,24,22,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(17,24,22,.16) 1px,transparent 1px);background-size:22px 22px;animation:gridPan 4s linear infinite}.screen-frame strong,.screen-frame small{position:relative;z-index:1;padding:3px 8px;border-radius:6px;background:#ffffffd1}.video-metrics{display:grid;gap:10px}.video-metrics div{display:grid;grid-template-columns:28px 1fr;gap:4px 10px;align-items:center;padding:12px;border-radius:8px;background:#edf2ef}.video-metrics span{grid-column:2;color:#56615d}.colour-strip{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;border-radius:8px;border:1px solid #c5cec8}.colour-strip span{min-height:46px;display:grid;place-items:center;color:#111816;font-weight:800}.colour-strip span:nth-child(1){background:linear-gradient(90deg,#e4572e,#52b788)}.colour-strip span:nth-child(2){background:linear-gradient(90deg,#52b788,#d9f0ff,#f2c14e)}.colour-strip span:nth-child(3){background:linear-gradient(90deg,#f2c14e,#e4572e,#d9f0ff)}@keyframes gridPan{to{background-position:44px 22px}}.media-file-diagram,.codec-diagram{display:grid;gap:18px}.fmp4-diagram{display:grid;grid-template-columns:1fr 120px 1fr;gap:16px;align-items:stretch}.fmp4-box{display:grid;gap:10px;align-content:center;min-height:170px;padding:18px;border-radius:8px;border:2px solid #17201d}.fmp4-box.init{background:#d9f0ff}.fmp4-box.media{background:#dff5e9}.fmp4-box span{display:inline-grid;place-items:center;min-height:34px;border-radius:6px;background:#ffffffb8;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:800}.fmp4-box small{color:#4c5752}.fmp4-arrow{display:grid;place-items:center;color:#315c4a;font-weight:900;text-align:center}.cmaf-lane{grid-column:1 / -1;display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:8px;align-items:center;padding-top:10px}.cmaf-lane b,.cmaf-lane i{min-height:44px;display:grid;place-items:center;padding:8px;border-radius:8px;background:#fff1c7;font-style:normal}.av-sync-diagram{display:grid;gap:18px}.sync-head{display:flex;justify-content:space-between;align-items:center;gap:14px;font-weight:800}.sync-head strong{display:inline-flex;align-items:center;gap:8px}.sync-head span{color:#e4572e}.sync-rows{display:grid;grid-template-columns:180px minmax(0,1fr);gap:10px;align-items:center}.sync-label{display:inline-flex;align-items:center;gap:8px;font-weight:800}.sync-track{position:relative;display:grid;grid-template-columns:repeat(4,minmax(72px,1fr));overflow:hidden;border:2px solid #17201d;border-radius:8px}.sync-track span{min-height:58px;display:grid;place-items:center;border-right:1px solid #c5cec8;font-weight:800}.sync-track span:last-of-type{border-right:0}.video-sync span{background:#d9f0ff}.audio-sync span{background:#dff5e9}.sync-track i{position:absolute;top:0;bottom:0;left:40%;width:3px;background:#e4572e;box-shadow:0 0 0 5px #e4572e24}.sync-note{padding:12px;border-radius:8px;background:#fff1c7;color:#4a3510;font-weight:700}.file-box{display:grid;grid-template-columns:1fr 1fr 2fr;overflow:hidden;border:2px solid #17201d;border-radius:8px}.file-box div{min-height:82px;display:grid;place-items:center;gap:6px;padding:12px;border-right:1px solid #c5cec8;font-weight:800}.file-box div:nth-child(1){background:#d9f0ff}.file-box div:nth-child(2){background:#fff1c7}.file-box div:nth-child(3){background:#dff5e9;border-right:0}.track-stack{display:grid;gap:8px}.track-stack span{padding:10px 12px;border-radius:6px;background:#edf2ef;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.sample-maths{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.sample-maths div{display:grid;gap:4px;min-height:86px;align-content:center;padding:14px;border-radius:8px;background:#edf2ef}.sample-maths strong{font-size:1.2rem}.sample-maths span{color:#56615d}.sample-maths .math-total{grid-column:1 / -1;background:#fff1c7}.gop-row{display:grid;grid-template-columns:repeat(10,minmax(42px,1fr));gap:6px}.gop-row span{display:grid;place-items:center;min-height:48px;border-radius:8px;color:#111816;font-weight:900;animation:bufferRise .7s ease both}.frame-i{background:#e4572e}.frame-p{background:#f2c14e}.frame-b{background:#52b788}.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start;min-width:0}.lesson-body{min-width:0}.text-section{margin:0 0 28px}.lesson-link{display:inline-flex;align-items:center;gap:8px}.text-section h2,.snippet h2,.demo-panel h2{margin:0 0 12px;font-size:1.6rem}.text-section p,.text-section li,.aside-panel p,.snippet p,.demo-panel p{color:#4c5752;overflow-wrap:anywhere}.text-section ul{padding-left:20px}.text-section li{margin:8px 0}.lesson-aside{position:sticky;top:20px;display:grid;gap:14px}.aside-panel{background:#eaf0ec;border:1px solid #d8dfda;border-radius:8px;padding:18px}.aside-panel h3{margin:0 0 8px}.demo-panel{display:grid;grid-template-columns:1fr minmax(220px,360px);gap:18px;align-items:center;padding:24px}.mini-sim{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.mini-sim span{display:grid;place-items:center;aspect-ratio:1;border-radius:8px;border:1px solid #bcc8c1;background:#f6f7f4;font-weight:800;transition:.18s ease}.mini-sim span.active{background:#52b788;color:#07110d;transform:translateY(-4px)}.snippet{overflow:hidden}.player-showcase{margin:28px 0;overflow:hidden;border:1px solid #d8dfda;border-radius:8px;background:#fff;box-shadow:0 18px 50px #11181614}.showcase-toolbar{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:20px;border-bottom:1px solid #d8dfda}.showcase-toolbar h2{margin:0 0 6px}.showcase-toolbar p{margin:0;color:#4c5752}.showcase-actions{display:flex;flex-wrap:wrap;gap:10px}.showcase-actions button:disabled{opacity:.7;cursor:wait}.spin{animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.showcase-stage{position:relative;background:#050807}.showcase-stage video{display:block;width:100%;aspect-ratio:16 / 9;background:#050807}.showcase-subtitle{position:absolute;inset:0;display:grid;align-items:end;justify-items:center;padding:5%;pointer-events:none}.showcase-subtitle span{display:inline-flex;align-items:center;gap:8px;max-width:min(82%,760px);padding:8px 12px;border-radius:8px;background:#000000c7;color:#fff;font-weight:800;text-align:center}.manifest-readout{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#d8dfda}.manifest-readout span{display:grid;gap:2px;padding:14px;background:#edf2ef;color:#4c5752}.manifest-readout strong{color:#17201d}.player-error{display:flex;align-items:center;gap:8px;margin:16px 20px 20px;padding:12px;border-radius:8px;background:#fff1c7;color:#4a3510;font-weight:700}.snippet-head{display:flex;justify-content:space-between;gap:20px;padding:20px;border-bottom:1px solid #d8dfda;min-width:0}.snippet-head>div{min-width:0}pre{max-width:100%;margin:0;padding:20px;overflow:auto;background:#111816;color:#eef7f1;font-size:.92rem;line-height:1.55}code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.pager{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin-top:34px;padding-top:22px;border-top:1px solid #d8dfda}.pager a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:800}.pager a:last-child{justify-self:end}.pager span{color:#68736e}.pager .done{color:#2d7b58;font-weight:800}@media(max-width:880px){.app-shell{grid-template-columns:1fr;background:#f6f7f4}.sidebar{position:relative;min-height:0;max-height:none;height:auto}.lesson-nav{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}article{padding:28px 18px}.lesson-hero{min-height:auto}.diagram{overflow-x:auto}.snippet-head{align-items:flex-start;gap:14px;padding:16px}pre{padding:16px;font-size:.84rem}.content-grid,.demo-panel,.packet-flow,.video-fundamentals,.audio-fundamentals,.colour-strip,.file-box,.fmp4-diagram,.cmaf-lane,.sync-rows,.sync-track,.sample-maths,.gop-row{grid-template-columns:1fr}.sync-track i{left:50%}.lesson-aside{position:static}.buffer-track{grid-template-columns:repeat(5,minmax(74px,1fr));overflow:auto}.pager{grid-template-columns:1fr}.showcase-toolbar{align-items:stretch;flex-direction:column}.manifest-readout{grid-template-columns:1fr}.pager a:last-child{justify-self:start}}