.blog-page,main:has(>.post),main:has(>.blog-hero){--neon: #22d3ee;--neon-2: #8b98ff;--neon-3: #c084fc;--glass: rgb(14 20 52 / 62%);--edge: rgb(125 140 255 / 22%);--mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;position:relative;background-image:linear-gradient(rgb(125 140 255 / 5%) 1px,transparent 1px),linear-gradient(90deg,rgb(125 140 255 / 5%) 1px,transparent 1px);background-size:48px 48px;background-position:center top}.blog-hero{padding-block:clamp(36px,6vw,72px) var(--space-8, 32px)}.blog-hero:before{content:"// LIVE VIDEO ENGINEERING";display:block;margin-bottom:12px;font-family:var(--mono);font-size:13px;letter-spacing:.18em;color:var(--neon)}.blog-hero h1,.post h1{margin:0 0 14px;font-size:clamp(32px,4.6vw,54px);line-height:1.06;letter-spacing:-.025em;background:linear-gradient(100deg,#f4f6ff 20%,var(--neon-2) 55%,var(--neon) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 28px rgb(111 128 255 / 28%))}.blog-hero p{max-width:62ch;margin:0;font-size:18px;color:var(--paper-secondary)}.post-cards{list-style:none;margin:0;padding:0 0 var(--space-12, 48px);display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;counter-reset:card}.post-cards li{counter-increment:card}.post-cards a{position:relative;display:flex;flex-direction:column;gap:10px;height:100%;box-sizing:border-box;padding:22px 22px 18px;border-radius:16px;border:1px solid transparent;background:linear-gradient(var(--glass),var(--glass)) padding-box,linear-gradient(135deg,#22d3ee73,#8b98ff24 40%,#c084fc66) border-box;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--paper-secondary);font-size:15px;line-height:1.55;text-decoration:none;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}.post-cards a:after{content:counter(card,decimal-leading-zero);position:absolute;top:14px;right:18px;font-family:var(--mono);font-size:13px;color:#8b98ff8c}.post-cards a:hover,.post-cards a:focus-visible{transform:translateY(-4px);box-shadow:0 0 0 1px #22d3ee59,0 18px 50px -12px #22d3ee59}.post-cards strong{font-size:19px;line-height:1.25;color:var(--paper)}.post-cards small{margin-top:auto;padding-top:6px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--paper-tertiary)}.post-tag{align-self:flex-start;padding:3px 10px;border:1px solid rgb(34 211 238 / 40%);border-radius:6px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--neon);background:#22d3ee14}.post-progress{position:fixed;inset:0 0 auto;z-index:60;height:3px;pointer-events:none}.post-progress span{display:block;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--neon, #22d3ee),#8b98ff,#c084fc);box-shadow:0 0 12px #22d3eeb3}.post-meta{display:flex;flex-wrap:wrap;gap:8px;max-width:1180px;margin:28px auto 0;padding-inline:var(--space-6, 24px);box-sizing:border-box}.chip{padding:4px 11px;border:1px solid rgb(125 140 255 / 26%);border-radius:999px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.04em;color:var(--paper-secondary);background:#0e1434b3;text-decoration:none}.chip-tag{color:#22d3ee;border-color:#22d3ee73}.chip-link:hover{color:var(--paper);border-color:#22d3ee}.post{max-width:1180px;margin:0 auto;padding:14px var(--space-6, 24px) 40px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 230px;column-gap:56px;font-size:17px;line-height:1.68;color:var(--paper-secondary);counter-reset:section figure}.post>*{grid-column:1;min-width:0}.post p,.post ul,.post ol{margin:0 0 14px}.post li+li{margin-top:6px}.post li::marker{color:var(--neon)}.post .lead{font-size:19px;line-height:1.6;color:var(--paper)}.post h2{counter-increment:section;display:flex;align-items:baseline;gap:14px;margin:40px 0 12px;font-size:clamp(23px,2.4vw,28px);line-height:1.2;letter-spacing:-.01em;color:var(--paper);scroll-margin-top:90px}.post h2:before{content:counter(section,decimal-leading-zero);flex:none;padding:2px 8px;border:1px solid rgb(34 211 238 / 50%);border-radius:6px;font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--neon);background:#22d3ee14;box-shadow:0 0 16px #22d3ee40;transform:translateY(-3px)}.post h3{margin:24px 0 8px;font-size:19px;color:var(--paper)}.post h3:before{content:"▸ ";color:var(--neon-2)}.post strong{color:var(--paper)}.post a{color:var(--neon);text-decoration-color:#22d3ee66;text-underline-offset:3px}.post a:hover{text-decoration-color:var(--neon)}.post code{font-family:var(--mono);font-size:.86em;padding:1px 6px;border:1px solid rgb(125 140 255 / 22%);border-radius:5px;background:#7d8cff1a;color:#dbe1ff}.post pre{position:relative;margin:18px 0;padding:40px 20px 16px;overflow-x:auto;border:1px solid var(--edge);border-radius:12px;background:#050816;font-size:14px;line-height:1.6;box-shadow:inset 0 1px #ffffff0a}.post pre:before{content:"";position:absolute;top:14px;left:16px;width:10px;height:10px;border-radius:50%;background:#f472b6;box-shadow:16px 0 #fbbf24,32px 0 #34d399}.post pre code{padding:0;border:0;background:none;color:#c7f9ff}.post figure{counter-increment:figure;position:relative;margin:22px 0;padding:20px 20px 14px;border-radius:16px;border:1px solid transparent;background:radial-gradient(circle at 15% 0%,rgb(43 63 214 / 28%),transparent 55%) padding-box,linear-gradient(#060a1d,#060a1d) padding-box,linear-gradient(140deg,#22d3ee8c,#8b98ff1f 45%,#c084fc73) border-box;box-shadow:0 24px 60px -30px #22d3ee59}.post figure:before,.post figure:after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--neon);pointer-events:none}.post figure:before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-top-left-radius:16px}.post figure:after{right:-1px;bottom:-1px;border-left:0;border-top:0;border-bottom-right-radius:16px}.post figure svg{display:block;width:100%;height:auto}.post figcaption{margin-top:10px;padding-top:10px;border-top:1px dashed rgb(125 140 255 / 22%);font-size:14px;line-height:1.5;color:var(--paper-tertiary)}.post figcaption:before{content:"FIG. " counter(figure,decimal-leading-zero) " — ";font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--neon)}.post .table-scroll{margin:18px 0;overflow-x:auto;border:1px solid var(--edge);border-radius:12px;background:var(--glass)}.post table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}.post th,.post td{padding:10px 14px;border-bottom:1px solid rgb(125 140 255 / 12%);text-align:left;vertical-align:top}.post thead th{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--neon);background:#22d3ee0f}.post tbody th{color:var(--paper)}.post tbody tr:last-child>*{border-bottom:0}.post tbody tr:hover{background:#8b98ff12}.post .tldr{position:relative;margin:8px 0 22px;padding:18px 20px 14px;border-radius:14px;border:1px solid transparent;background:linear-gradient(135deg,#141e50eb,#080e28eb) padding-box,linear-gradient(120deg,#22d3ee,#8b98ff 50%,#c084fc) border-box;box-shadow:0 0 40px -10px #22d3ee59}.post .tldr-title{margin:0 0 8px;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--neon)}.post .tldr-title:before{content:"◆ "}.post .tldr ul{margin:0;padding-left:1.1em;font-size:16px;line-height:1.6;color:var(--paper)}.post .callout{margin:26px 0;padding:16px 20px;border-radius:14px;border:1px solid rgb(34 211 238 / 35%);background:linear-gradient(120deg,#22d3ee1a,#c084fc14)}.post .callout p{margin:0}.post .faq{margin-top:8px}.post .faq h3{margin:12px 0 0;padding:14px 18px 6px;border:1px solid var(--edge);border-bottom:0;border-radius:12px 12px 0 0;background:var(--glass);font-size:17px}.post .faq h3:before{content:"Q ";font-family:var(--mono);color:var(--neon)}.post .faq h3+p{margin:0;padding:0 18px 14px;border:1px solid var(--edge);border-top:0;border-radius:0 0 12px 12px;background:var(--glass);font-size:16px}.post-toc{grid-column:2;grid-row:1 / span 400;align-self:start;position:sticky;top:96px;max-height:calc(100vh - 120px);overflow-y:auto;padding:16px 14px;border:1px solid var(--edge);border-radius:14px;background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:14px;line-height:1.4}.post-toc-title{margin:0 0 10px!important;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--neon)}.post-toc ol{list-style:none;margin:0!important;padding:0;counter-reset:toc}.post-toc li{counter-increment:toc;margin:0!important}.post-toc a{display:flex;gap:8px;padding:6px 8px;border-radius:8px;color:var(--paper-tertiary);text-decoration:none}.post-toc a:before{content:counter(toc,decimal-leading-zero);font-family:var(--mono);font-size:11px;padding-top:2px;color:#8b98ff99}.post-toc a:hover{color:var(--paper);background:#8b98ff14}.post-toc a[aria-current]{color:var(--paper);background:#22d3ee1a;box-shadow:inset 2px 0 0 var(--neon)}.post-more{padding-bottom:var(--space-8, 32px)}.post-more h2{margin:32px 0 16px;font-size:22px;color:var(--paper)}.post-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;border-radius:18px;border:1px solid transparent;background:linear-gradient(120deg,#1e2a78f2,#0a2846f2) padding-box,linear-gradient(120deg,#22d3ee,#8b98ff,#c084fc) border-box;box-shadow:0 0 60px -20px #8b98ff8c}.post-cta p{margin:0;max-width:60ch;color:var(--paper-secondary)}@media(max-width:980px){.post{grid-template-columns:minmax(0,1fr)}.post-toc{display:none}}@media(max-width:600px){.post,.post-meta{padding-inline:16px}.post{font-size:16px}.post figure{padding:12px 10px 10px}.post h2{margin-top:32px}}@media(prefers-reduced-motion:reduce){.post-cards a{transition:none}.post-cards a:hover{transform:none}}
