.post-header,.post-content{--post-max-width:900px;--post-accent:#8b5cf6;--post-accent-dark:#6d28d9;--post-text:#b6bfb8;--post-strong:#f1f5f2;--post-muted:#78837b;--post-rule:#ffffff10;width:100%;max-width:var(--post-max-width,1024px);margin-inline:auto}.post-header{border-bottom:1px solid var(--post-rule);flex-direction:column;gap:1.25rem;margin-bottom:clamp(3rem,7vw,5rem);padding-bottom:clamp(2rem,5vw,3rem);display:flex;position:relative;&:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(50% 50% at 50% 40%,#8b5cf612,#0000 70%);width:min(760px,100%);height:460px;position:absolute;inset:-6rem auto auto 50%;translate:-50%}&:after{content:"";background:linear-gradient(90deg, var(--post-accent), transparent);width:min(180px,40%);height:1px;position:absolute;bottom:-1px;left:0}& .post-meta{font-family:var(--coding-font);letter-spacing:.1em;text-transform:uppercase;color:var(--post-muted);flex-wrap:wrap;align-items:center;gap:.6rem;font-size:.72rem;display:flex;& time{color:#c4b5fd}& .post-meta__sep{background:var(--post-accent-dark);border-radius:50%;width:4px;height:4px}}& hgroup{& h1{max-width:20ch;font-family:var(--header-font);letter-spacing:-5px;text-transform:uppercase;text-wrap:balance;color:#f5f2ff;text-shadow:3px 3px #557,0 0 32px #8b5cf640,0 2px #100a1f,0 12px 40px #000000a6;margin:0;font-size:clamp(2.5rem,7.5vw,4.25rem);font-weight:600;line-height:.95;animation:.85s cubic-bezier(.16,1,.3,1) both post-title-in}& p{color:#98a39a;text-wrap:pretty;max-width:60ch;margin:1rem .5rem;font-size:clamp(1.05rem,1.4vw,1.25rem);font-weight:300;line-height:1.25lh}}& .post-tags{flex-wrap:wrap;gap:.5rem;margin:.25rem 0 0;padding:0;list-style:none;display:flex;& li{--color:#8b5cf6;border:1px solid color-mix(in srgb, var(--color), transparent 80%);background:color-mix(in srgb, var(--color), transparent 90%);color:var(--color);font-family:var(--coding-font);letter-spacing:.06em;text-transform:uppercase;padding:.28rem .65rem;font-size:.8rem}}}small{color:#99d;font-size:16px}@keyframes post-title-in{0%{opacity:0;filter:blur(8px);translate:0 .45em}to{opacity:1;filter:blur();translate:0}}@media (prefers-reduced-motion:reduce){.post-header h1{animation:none}}.post-content{color:var(--post-text);font-size:clamp(1.2rem,.5vw + 1rem,1.4rem);font-weight:300;line-height:1.7;&>:first-child{margin-top:0}& p{text-wrap:pretty;margin:0 0 1.65rem}& :is(strong,b){color:var(--post-strong);font-weight:500}& em{color:#c4b5fd}& a{color:#a78bfa;border-bottom:1px solid #8b5cf640;text-decoration:none;transition:color .2s ease-in-out,border-color .2s ease-in-out;&:hover,&:focus-visible{color:#ddd6fe;border-color:#ddd6fe}}& a:has(>:is(h2,h3,h4)){color:inherit;border:0;text-decoration:none;display:block}& a:has(>h2){margin:4.5rem 0 1.5rem}& a:has(>h3){margin:3rem 0 1rem}&>a:first-child:has(>h2){margin-top:0}& :is(h1,h2,h3,h4){font-family:var(--header-font);color:var(--post-strong);text-wrap:balance;scroll-margin-top:5rem}& h2{letter-spacing:-.025em;margin:0 0 3rem;padding-top:1.4rem;font-family:Gidole,Science Gothic,fantasy;font-size:clamp(1.85rem,3.5vw,2.5rem);font-weight:600;line-height:1.14;display:block;position:relative}& h3{letter-spacing:-.01em;margin:0;padding-left:1rem;font-size:clamp(1.3rem,2vw,1.55rem);font-weight:400;line-height:1.3;position:relative;&:before{content:"";background:var(--post-accent);border-radius:50%;width:6px;height:6px;position:absolute;top:.52em;left:0;box-shadow:0 0 12px #8b5cf680}}& h4{letter-spacing:.06em;text-transform:uppercase;color:#dce5de;margin:2rem 0 .75rem;font-size:1.1rem;font-weight:500}& blockquote{background:0 0;border:0;margin:3rem 0;padding:.5rem 0 .5rem 3.5rem;position:relative;&:before{content:"“";font-family:var(--header-font);color:var(--post-accent);opacity:.55;font-size:4.5rem;line-height:1;position:absolute;top:-.35rem;left:0}&:after{content:"";background:linear-gradient(#8b5cf640,#0000);width:1px;position:absolute;inset:0 auto 0 2.4rem}& p{color:#e6ece7;text-shadow:none;text-wrap:pretty;margin:0;padding:0;font-size:1.25em;line-height:1.55}}& :is(ul,ol){margin:0 0 1.75rem;padding-left:1.5rem}& ul{list-style-type:"▸  "}& li{margin-block:.5rem;padding-left:.25rem;line-height:.9lh;&::marker{color:var(--post-accent);font-size:.9em}}& :not(pre)>code{color:#c4b5fd;font-family:var(--coding-font);overflow-wrap:anywhere;background:#8b5cf612;border:1px solid #8b5cf626;border-radius:5px;padding:.12em .4em;font-size:.86em}& pre{background:linear-gradient(#0f0d17,#09090e);border:1px solid #ffffff0d;border-radius:12px;margin:2.5rem 0;padding:1.5rem 1.6rem;position:relative;overflow-x:auto;box-shadow:0 24px 60px -44px #000,inset 0 1px #ffffff08;&:before{content:"";background:linear-gradient(90deg,#0000,#8b5cf666,#0000);height:1px;position:absolute;inset:0 0 auto}& code{color:#c9d1d9;font-family:var(--coding-font);background:0 0;border:0;padding:0;font-size:.92em;line-height:1.65;display:block}&::-webkit-scrollbar{height:8px}&::-webkit-scrollbar-track{background:0 0}&::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:8px}}& table{border-collapse:collapse;width:100%;margin:2.5rem 0;font-size:.92em;line-height:1.5}& thead th{color:#c4b5fd;font-family:var(--coding-font);letter-spacing:.08em;text-align:left;text-transform:uppercase;background:#8b5cf608;border-bottom:1px solid #8b5cf633;padding:.75rem .9rem;font-size:.66em;font-weight:500}& tbody{& td{border-bottom:1px solid var(--post-rule);color:#aeb7b0;vertical-align:top;padding:.8rem .9rem;&:first-child{color:#e6ece7}}& tr{transition:background-color .2s ease-in-out;&:hover{background:#ffffff04}}}& img{max-width:100%;height:auto;&.image{border-image-source:linear-gradient(#fff 0%,#0000 10% 90%,#ff1493 100%);border-image-slice:1;border-image-width:1px;padding:10px;transition:scale .2s;&:hover{border-image:;scale:1.025}@media (width<=640px){max-width:95%}}}& a:has(.image){border-bottom:none}& figure{margin:3rem 0;& img{border:1px solid var(--post-rule);width:100%;display:block;box-shadow:0 30px 70px -50px #000}}& figcaption{color:var(--post-muted);font-family:var(--coding-font);letter-spacing:.02em;text-align:center;margin-top:.9rem;font-size:.72rem}& hr{border:0;border-top:1px solid #8b5cf644;width:100px;margin:4rem auto}@media (width<640px){& table{font-size:.88em}& thead th,& tbody td{padding-inline:.6rem}& blockquote{padding-left:2.5rem;&:after{left:1.75rem}}}}.post-header ::selection,.post-content ::selection{color:#fff;background:#8b5cf633}level-profile:not(:defined){visibility:hidden;display:block}@keyframes post-header-in{0%{opacity:0;translate:0 18px}to{opacity:1;translate:0}}@keyframes post-heading-in{0%{opacity:0;translate:0 16px}to{opacity:1;translate:0}}@keyframes post-block-in{0%{opacity:0;translate:0 14px}to{opacity:1;translate:0}}@keyframes post-rule-grow{0%{scale:0 1}to{scale:1}}@media (prefers-reduced-motion:no-preference){.post-header>*{animation:.7s cubic-bezier(.2,.7,.2,1) both post-header-in}.post-header>:nth-child(2){animation-delay:80ms}.post-header>:nth-child(3){animation-delay:.16s}.post-header>:nth-child(4){animation-delay:.24s}}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.post-content h2{animation:linear both post-heading-in view();animation-range:entry}.post-content h2:after{animation:linear both post-rule-grow view();animation-range:entry 25%;scale:0 1}.post-content>:is(blockquote,pre,figure,table){animation:linear both post-block-in view();animation-range:entry}}}html:has(body.post-page){background-color:#08090b}body.post-page{--post-bg:#08090b;--post-line:#ffffff10;--post-max-width:1024px;--post-bar-height:54px;--color:#6d28d9;box-sizing:border-box;background-color:var(--post-bg);background-image:radial-gradient(1100px 520px at 50% -12%,#8b5cf61f,#0000 70%),radial-gradient(900px 600px at 110% 100%,#1b10301f,#0000 70%);background-repeat:no-repeat;background-size:auto;background-attachment:fixed;flex-direction:column;min-height:100svh;display:flex;position:relative;&:before{content:"";z-index:0;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px;position:fixed;inset:0}&>.post,&>footer{z-index:1;position:relative}}.postbar{z-index:50;height:var(--post-bar-height);box-sizing:border-box;background:color-mix(in srgb, var(--post-bg) 72%, transparent);border-bottom:1px solid var(--post-line);backdrop-filter:blur(14px)saturate(140%);position:sticky;top:0;box-shadow:0 4px 8px #0006;@supports not (backdrop-filter:blur(1px)){background:color-mix(in srgb, var(--post-bg) 94%, transparent)}& .postbar-inner{height:100%;max-width:var(--post-max-width);box-sizing:border-box;justify-content:space-between;align-items:center;gap:1rem;margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem);display:flex}& .logo{align-items:center;gap:.25rem;display:flex;& img{opacity:.75;transition:opacity .25s ease-in-out;display:block}&:hover img,&:focus-visible img{opacity:1}& .avatar{background:#6606ab;width:auto;height:34px}& img:not(.avatar){width:auto;height:28px}}& .back{color:#fff;font-family:var(--normal-font);background:0 0;border:0;align-items:center;gap:.3rem;margin:.5rem 0;padding:.35rem 1rem;font-size:1rem;text-decoration:none;transition:background-color .2s ease-in-out;display:inline-flex;& svg{width:20px;height:20px}&:hover,&:focus-visible{background-color:#0c8c0c}@media (width<460px){padding:.5rem;& span{display:none}}}}.post{width:100%;max-width:var(--post-max-width);box-sizing:border-box;flex:1;margin-inline:auto;padding:clamp(2.5rem,6vw,5rem) clamp(1rem,4vw,2rem) clamp(4rem,8vw,7rem)}.post-progress{display:none}@supports (animation-timeline:scroll()){.post-progress{z-index:100;transform-origin:0;background:linear-gradient(90deg,#6d28d9,#ff1493);height:2px;animation:linear both post-progress scroll(root);display:block;position:fixed;inset:0 0 auto;scale:0 1;box-shadow:0 0 12px #6d28d980}}@keyframes post-progress{to{scale:1}}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.story-reveal{animation:linear both story-reveal view();animation-range:entry 5% cover 35%}.story-parallax{animation:linear both story-parallax view();animation-range:cover}}}@keyframes story-reveal{0%{opacity:0;filter:blur(6px);translate:0 2.5rem}to{opacity:1;filter:blur();translate:0}}@keyframes story-parallax{0%{translate:0 5rem}to{translate:0 -5rem}}