:root {
color-scheme: light;
--background: #f8fbff;
--surface: #ffffff;
--ink: #151927;
--muted: #667085;
--light: #98a2b3;
--border: #e4e8f0;
--blue: #875bd4;
--blue-soft: #eef4ff;
--app-font-family: Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
html[lang^="ko"] {
--app-font-family: Inter, 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { font-size: 62.5%; }
body {
min-height: 100vh;
margin: 0;
background: var(--background);
color: var(--ink);
font-family: var(--app-font-family);
}
body.blogMobileNavOpen { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.isAuthenticated .authActionLink { display: none; }
.loggedInAccount { display: none; }
.isAuthenticated .guestAccount { display: none; }
.isAuthenticated .loggedInAccount { display: block; }
.siteHeader .mobileNav { display: none; }
@keyframes watercolor {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.siteHeader {
position: sticky;
top: 0;
z-index: 50;
border-bottom: 1px solid var(--border);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(3px);
}
.headerInner, .footerInner {
width: min(100%, 128rem);
margin: 0 auto;
}
.headerInner {
min-height: 6.4rem;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 2rem;
padding: 0 2.4rem;
}
.brand, .actions {
display: flex;
align-items: center;
}
.brand {
min-width: 0;
color: var(--ink);
font-size: 1.8rem;
font-weight: 500;
white-space: nowrap;
}
.brand img {
width: 23rem;
max-width: 100%;
height: auto;
display: block;
}
.brand .mobileLogo {
display: none;
}
.actions {
justify-content: flex-end;
gap: 1.4rem;
}
.mobileNavButton {
display: none;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 0.9rem;
background: var(--surface);
color: var(--ink);
padding: 0;
cursor: pointer;
}
.mobileNavButton svg {
width: 1.8rem;
height: 1.8rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
}
.languageMenu {
position: relative;
flex: 0 0 auto;
}
.languageButton {
min-height: 3.6rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 0;
background: transparent;
color: var(--ink);
padding: 0;
font-size: 1.6rem;
font-weight: 500;
line-height: 1;
cursor: pointer;
}
.languageIcon {
width: 1.8rem;
height: 1.8rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
flex: 0 0 auto;
}
.languageButton:hover,
.languageMenu.open .languageButton {
color: var(--blue);
}
.languageOptions {
width: 18rem;
position: absolute;
top: calc(100% + 0.8rem);
right: 0;
z-index: 30;
display: none;
gap: 0.2rem;
border: 1px solid var(--border);
border-radius: 1rem;
background: var(--surface);
box-shadow: 0 1.6rem 3.2rem rgba(21, 25, 39, 0.1);
padding: 0.6rem;
}
.languageMenu.open .languageOptions {
display: grid;
}
.languageOptions a {
min-height: 3.8rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
border-radius: 0.8rem;
color: var(--ink);
padding: 0 1rem;
font-size: 1.4rem;
font-weight: 500;
}
.languageOptions a:hover {
background: transparent;
color: var(--blue);
}
.languageOptions a.active {
background: var(--blue-soft);
color: var(--blue);
}
.languageOptions small {
color: var(--muted);
font-size: 1.1rem;
font-weight: 700;
}
.ghostButton, .solidButton, .primaryButton {
min-width: 8rem;
min-height: 3.6rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 1rem;
padding: 0 1.6rem;
font-size: 1.4rem;
font-weight: 500;
line-height: 1;
}
.ghostButton {
border: 1px solid var(--border);
background: var(--surface);
}
.solidButton, .primaryButton {
border: 1px solid var(--ink);
background: var(--ink);
color: var(--surface);
}
.mobileActionIcon {
width: 1.8rem;
height: 1.8rem;
display: none;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.articleContent .ql-align-center {
text-align: center;
}
.articleContent .ql-align-right {
text-align: right;
}
.articleContent .ql-align-justify {
text-align: justify;
}
.articleContent .ql-font-serif {
font-family: Georgia, "Times New Roman", serif;
}
.articleContent .ql-font-monospace {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
.articleContent .ql-font-arial {
font-family: Arial, Helvetica, sans-serif;
}
.articleContent .ql-indent-1 { padding-left: 3em; }
.articleContent .ql-indent-2 { padding-left: 6em; }
.articleContent .ql-indent-3 { padding-left: 9em; }
.articleContent .ql-indent-4 { padding-left: 12em; }
.articleContent .ql-indent-5 { padding-left: 15em; }
.articleContent .ql-indent-6 { padding-left: 18em; }
.articleContent .ql-indent-7 { padding-left: 21em; }
.articleContent .ql-indent-8 { padding-left: 24em; }
.articleContent img {
max-width: 100%;
height: auto;
border-radius: 1rem;
margin: 2.4rem 0;
}
.articleContent img.ql-align-center,
.articleContent .ql-align-center img {
display: block;
margin-left: auto;
margin-right: auto;
}
.articleContent img.ql-align-right,
.articleContent .ql-align-right img {
display: block;
margin-left: auto;
margin-right: 0;
}
.articleContent img[data-image-align='center'] {
display: block;
float: none;
margin-left: auto;
margin-right: auto;
}
.articleContent img[data-image-align='right'] {
display: block;
float: none;
margin-left: auto;
margin-right: 0;
}
.articleContent img[data-image-wrap='left'] {
display: block;
float: left;
max-width: min(50%, 36rem);
margin: 0.5rem 2rem 1.2rem 0;
}
.articleContent img[data-image-wrap='right'] {
display: block;
float: right;
max-width: min(50%, 36rem);
margin: 0.5rem 0 1.2rem 2rem;
}
.articleContent p:has(> img[data-image-wrap='left']) {
display: block;
width: min(50%, 36rem);
max-width: min(50%, 36rem);
float: left;
margin: 0.5rem 2rem 1.2rem 0;
}
.articleContent p:has(> img[data-image-wrap='right']) {
display: block;
width: min(50%, 36rem);
max-width: min(50%, 36rem);
float: right;
margin: 0.5rem 0 1.2rem 2rem;
}
.articleContent p:has(> img[data-image-wrap='left']) img[data-image-wrap='left'],
.articleContent p:has(> img[data-image-wrap='right']) img[data-image-wrap='right'] {
display: block;
float: none;
width: 100%;
max-width: 100%;
margin: 0;
}
.siteFooter {
margin-top: 5.2rem;
background: #1f1f1f;
color: #8f949c;
padding: 5.8rem 2.4rem 5.2rem;
}
.footerInner {
display: grid;
gap: 1.2rem;
}
.footerTop,
.footerBody {
min-width: 0;
display: grid;
grid-template-columns: minmax(24rem, 0.78fr) minmax(0, 1.22fr);
column-gap: 4.8rem;
}
.footerTop {
align-items: center;
}
.footerBody {
align-items: start;
}
.footerLead {
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.8rem;
}
.footerTagline {
max-width: 42rem;
margin: 0;
color: #8f949c;
font-size: 1.6rem;
line-height: 1.35;
}
.footerBrand {
display: inline-flex;
align-items: center;
}
.footerBrand img {
width: 22rem;
max-width: 100%;
height: auto;
display: block;
}
.footerActions {
display: flex;
align-items: center;
gap: 1.8rem;
margin-top: 0.2rem;
}
.footerPrimaryAction {
min-height: 3.6rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #ffffff;
border-radius: 999px;
background: #ffffff;
background-size: 240% 240%;
color: #050505;
padding: 0 1.8rem;
font-size: 1.35rem;
font-weight: 700;
line-height: 1;
transition:
color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease,
background-color 0.2s ease;
}
.footerPrimaryAction:hover {
border-color: transparent;
background: linear-gradient(115deg, #7b3ff2, #0b5fe8, #00c6d8, #1398e8, #f03bc8, #ff8741);
background-size: 240% 240%;
animation: watercolor 7s ease-in-out infinite;
color: #ffffff;
box-shadow: 0 1.8rem 3.4rem rgba(5, 5, 5, 0.22);
}
.footerTextAction {
color: #c4c8cf;
border-bottom: 1px solid #737780;
padding-bottom: 0.2rem;
font-size: 1.35rem;
line-height: 1.2;
}
.footerTextAction:hover {
color: #ffffff;
border-bottom-color: #ffffff;
}
.siteFooter .footerMenuGrid {
width: 100%;
min-width: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 2.4rem;
}
.siteFooter .footerMenuGrid section {
min-width: 0;
}
.siteFooter .footerMenuGrid h2 {
margin: 0 0 1.8rem;
color: #ffffff;
font-size: 1.5rem;
font-weight: 600;
line-height: 1.2;
}
.siteFooter .footerMenuGrid ul {
display: grid;
gap: 1.3rem;
margin: 0;
padding: 0;
list-style: none;
}
.siteFooter .footerMenuGrid a,
.siteFooter .footerMenuGrid span {
color: #a0a6af;
font-size: 1.4rem;
line-height: 1.35;
}
.siteFooter .footerMenuGrid a:hover {
color: #ffffff;
}
@media (max-width: 900px) {
.headerInner {
grid-template-columns: 1fr auto;
}
.siteHeader .headerNav { display: none; }
.footerTop,
.footerBody {
grid-template-columns: 1fr;
row-gap: 3.2rem;
}
}
@media (max-width: 720px) {
html { font-size: 58%; }
.headerInner {
min-height: 5.6rem;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 0.8rem;
padding: 0.9rem 1.6rem;
}
.headerInner > span[aria-hidden="true"] {
display: none;
}
.siteHeader .brand .desktopLogo {
display: none;
}
.siteHeader .brand .mobileLogo {
width: 12rem;
display: block;
}
.actions {
width: auto;
justify-content: flex-end;
gap: 0.6rem;
}
.mobileNavButton {
width: 3.8rem;
min-width: 3.8rem;
min-height: 3.8rem;
display: inline-flex;
flex: 0 0 auto;
}
.siteHeader .mobileNav {
width: 100%;
height: 100dvh;
position: fixed;
inset: 0;
z-index: 100;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2.4rem;
visibility: hidden;
transform: translateX(-100%);
transition:
transform 280ms ease,
visibility 280ms ease;
background:
radial-gradient(ellipse 20rem 26rem at 46% 70%, rgba(116, 61, 255, 0.34), transparent 66%),
radial-gradient(ellipse 18rem 20rem at 30% 74%, rgba(45, 91, 255, 0.28), transparent 68%),
linear-gradient(150deg, transparent 58%, rgba(118, 89, 255, 0.2) 62%, transparent 69%),
radial-gradient(circle at 58% 84%, rgba(197, 58, 221, 0.18), transparent 22rem),
linear-gradient(180deg, #14101f 0%, #0f0d1a 100%);
padding: 6.8rem 2rem 2rem;
overflow-y: auto;
overscroll-behavior: contain;
}
.siteHeader .mobileNav.open {
visibility: visible;
transform: translateX(0);
}
.mobileNavClose {
width: 3.8rem;
height: 3.8rem;
position: absolute;
top: 1.2rem;
right: 1.2rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 50%;
background: var(--surface);
color: var(--ink);
padding: 0;
cursor: pointer;
}
.mobileNavClose svg {
width: 2.2rem;
height: 2.2rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
}
.mobileNavBrand {
display: inline-flex;
align-items: center;
margin: 0 0 3.2rem;
}
.mobileNavBrand img {
width: 19rem;
height: auto;
}
.sidebarMain {
margin-bottom: 2.4rem;
}
.navigation {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.navSectionStart {
margin-top: 2.2rem;
padding-top: 1.8rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.navSectionLabel {
margin: 0 0 1.2rem 0.8rem;
color: rgba(255, 255, 255, 0.42);
font-size: 1.2rem;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.04rem;
}
.navLink {
min-height: 4.8rem;
display: flex;
align-items: center;
gap: 1rem;
border-radius: 0.8rem;
color: rgba(255, 255, 255, 0.7);
padding: 0 1rem;
font-size: 1.3rem;
}
.navLink svg {
width: 1.8rem;
height: 1.8rem;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
color: rgba(255, 255, 255, 0.72);
}
.navLink:hover,
.navLink.active {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
}
.navLink:hover svg,
.navLink.active svg {
color: #ffffff;
}
.sidebarAccount {
min-width: 0;
position: relative;
display: block;
border-top: 1px solid #5c5c5c;
padding: 1rem 0 0;
}
.accountMenu {
width: 100%;
position: absolute;
left: 0;
bottom: calc(100% + 0.8rem);
z-index: 20;
display: none;
gap: 0.8rem;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 1rem;
background: #111318;
box-shadow: 0 1.8rem 4rem rgba(0, 0, 0, 0.36);
padding: 1rem;
}
.accountMenu.open {
display: grid;
}
.accountMenuItem {
width: 100%;
min-height: 3.6rem;
display: flex;
align-items: center;
gap: 0.9rem;
border: 0;
border-radius: 0.7rem;
background: transparent;
color: rgba(255, 255, 255, 0.82);
padding: 0 0.3rem;
font-size: 1.3rem;
text-align: left;
}
.accountMenuItem svg {
width: 1.7rem;
height: 1.7rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.accountMenuItem:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.06);
}
.accountTriggerRow {
width: 100%;
min-width: 0;
min-height: 4.4rem;
display: grid;
grid-template-columns: minmax(0, 1fr) 3.2rem;
align-items: center;
gap: 0.4rem;
}
.accountTrigger {
min-width: 0;
min-height: 4.4rem;
display: grid;
grid-template-columns: 2.4rem minmax(0, 1fr);
align-items: center;
gap: 0.9rem;
border: 0;
border-radius: 0.8rem;
background: transparent;
color: var(--background);
padding: 0.8rem 0.6rem;
text-align: left;
}
.accountTrigger:hover,
.accountPlanLink:hover {
background: rgba(255, 255, 255, 0.06);
}
.accountAvatar {
width: 2.4rem;
height: 2.4rem;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 50%;
background: var(--blue);
color: #ffffff;
font-size: 1rem;
font-weight: 900;
}
.accountMeta {
min-width: 0;
}
.accountMeta strong,
.accountMeta span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.accountMeta strong {
color: var(--background);
font-size: 1.3rem;
font-weight: 600;
line-height: 1.25;
}
.accountMeta span {
margin-top: 0.2rem;
color: rgba(255, 255, 255, 0.58);
font-size: 1.1rem;
line-height: 1.25;
}
.accountPlanLink {
width: 3.2rem;
height: 3.2rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.7rem;
color: rgba(255, 255, 255, 0.72);
}
.accountPlanLink svg {
width: 1.7rem;
height: 1.7rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.accountPlanLink .planIconSmart,
.accountPlanLink .planIconScholar,
.planSmart .accountPlanLink .planIconFree,
.planScholar .accountPlanLink .planIconFree {
display: none;
}
.planSmart .accountPlanLink .planIconSmart,
.planScholar .accountPlanLink .planIconScholar {
display: block;
}
.authLinks {
display: flex;
gap: 0.8rem;
}
.authLink {
min-height: 3.2rem;
flex: 1 1 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 0.8rem;
background: #ffffff;
color: var(--ink);
padding: 0 1rem;
font-size: 1.2rem;
font-weight: 600;
}
.authLink.primary {
border-color: var(--blue);
background: var(--blue);
color: #ffffff;
}
.languageButton {
width: 3.8rem;
min-width: 3.8rem;
min-height: 3.8rem;
padding: 0;
}
.languageOptions {
right: -0.4rem;
}
.ghostButton,
.solidButton {
width: 3.8rem;
min-width: 3.8rem;
min-height: 3.8rem;
flex: 0 0 auto;
border-radius: 0.9rem;
padding: 0;
}
.actionText {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.mobileActionIcon {
display: block;
}
.siteFooter {
padding: 4.8rem 1.6rem;
}
.footerActions {
flex-wrap: wrap;
}
.footerMenuGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 3.2rem 2.4rem;
}
}
:root{--violet:#875bd4;--violet2:#6d4bc0;--peri:#6d8cff;--mint:#13a874;--coral:#f0606b;--amber:#e0a030;--ink2:#2a2f45;--card:#fff;--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1)}
.blogPage,.articlePage{width:min(100%,128rem);margin:0 auto;padding:4.8rem 2.4rem 2rem}
.blogPage.compact{min-height:46rem}
.eyebrow{width:fit-content;margin:0 0 1.6rem;border:1px solid var(--violet);border-radius:999px;color:var(--violet);padding:.75rem 1.4rem;font-size:1.35rem;line-height:1}
h1{margin:0;color:var(--ink);font-size:4.6rem;font-weight:600;line-height:1.14;letter-spacing:-.02em}
.lede,.articleHeader>p{margin:1.8rem 0 0;color:var(--muted);font-size:1.7rem;line-height:1.8}
time{color:var(--light);font-size:1.3rem}
.primaryButton{display:inline-flex;margin-top:2.4rem}
/* hero */
.bHero{position:relative;isolation:isolate;margin:0 0 3.2rem;padding:5.6rem 4.8rem 4.4rem;border-radius:2.8rem;overflow:hidden;background:linear-gradient(135deg,#fbf8ff 0%,#f1f4ff 55%,#fdf6fb 100%);border:1px solid #ebe6f7;word-break:auto-phrase}
.bHeroBg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.bHeroBg i{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55;animation:bFloat 14s var(--ease) infinite alternate;translate:calc(var(--px,0)*1px) calc(var(--py,0)*1px)}
.bHeroBg i:nth-child(1){width:38rem;height:38rem;right:-6rem;top:-12rem;background:radial-gradient(circle,#b89bff,transparent 70%)}
.bHeroBg i:nth-child(2){width:30rem;height:30rem;right:22%;bottom:-16rem;background:radial-gradient(circle,#8fb0ff,transparent 70%);animation-duration:18s;animation-delay:-4s}
.bHeroBg i:nth-child(3){width:22rem;height:22rem;left:-6rem;top:-6rem;background:radial-gradient(circle,#ffc4e8,transparent 70%);animation-duration:16s;animation-delay:-8s}
.bHeroBg b{position:absolute;inset:0;background-image:linear-gradient(rgba(135,91,212,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(135,91,212,.07) 1px,transparent 1px);background-size:3.2rem 3.2rem;mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 70%);animation:bGrid 30s linear infinite}
.bHeroBg em{position:absolute;width:.6rem;height:.6rem;border-radius:50%;background:var(--violet);opacity:0;animation:bSpark 6s ease-in-out infinite}
.bHeroBg em:nth-of-type(1){left:62%;top:30%}.bHeroBg em:nth-of-type(2){left:78%;top:62%;animation-delay:-1.5s;background:var(--peri)}.bHeroBg em:nth-of-type(3){left:88%;top:22%;animation-delay:-3s}.bHeroBg em:nth-of-type(4){left:70%;top:80%;animation-delay:-4.5s;background:#e48bd0}
@keyframes bFloat{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-4rem,3rem) scale(1.15)}}
@keyframes bGrid{to{background-position:3.2rem 3.2rem,3.2rem 3.2rem}}
@keyframes bSpark{0%,100%{opacity:0;transform:translateY(1rem) scale(.4)}40%{opacity:.9;transform:translateY(-1rem) scale(1)}70%{opacity:0;transform:translateY(-3rem) scale(.6)}}
.bHero h1{max-width:20ch;font-size:5.2rem;background:linear-gradient(100deg,var(--ink) 0%,var(--ink) 40%,var(--violet) 50%,var(--ink) 60%,var(--ink) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:bRise .9s .08s var(--ease) both,bShine 7s 1.2s ease-in-out infinite}
.bHero .lede{max-width:62rem;animation:bRise .9s .16s var(--ease) both}
@keyframes bRise{from{opacity:0;transform:translateY(1.6rem);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes bShine{0%,60%{background-position:100% 0}100%{background-position:-50% 0}}
.bChips{display:flex;flex-wrap:wrap;gap:.8rem;margin:0 0 2.8rem}
.bChips a{position:relative;padding:.9rem 1.6rem;border-radius:999px;border:1px solid var(--border);background:var(--card);color:#4b5165;font-size:1.4rem;font-weight:500;transition:transform .25s var(--spring),border-color .2s,color .2s,background .2s}
.bChips a:hover{transform:translateY(-2px);border-color:#cdbdf0;color:var(--violet2)}
.bChips a[aria-current="page"]{background:var(--ink2);border-color:var(--ink2);color:#fff}
/* cards */
.postGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4rem}
.postCard{position:relative;min-width:0;border-radius:2rem;background:var(--card);border:1px solid var(--border);box-shadow:0 1px 2px rgba(16,24,40,.04);transition:transform .45s var(--spring),box-shadow .35s var(--ease),border-color .3s;--mx:50%;--my:0%}
.postCard::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:radial-gradient(28rem circle at var(--mx) var(--my),rgba(135,91,212,.65),transparent 45%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s;pointer-events:none}
.postCard:hover{transform:translateY(-.6rem);box-shadow:0 2.4rem 5rem -1.6rem rgba(76,45,150,.28);border-color:transparent}
.postCard:hover::before{opacity:1}
.postCardLink{height:100%;display:flex;flex-direction:column;border-radius:inherit;overflow:hidden}
.thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#efeaf9}
.thumb img,.thumb video,.genCover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),opacity .6s var(--ease),filter .6s}
.thumb video{opacity:0}
.thumb.isPlaying video{opacity:1}
.postCard:hover .thumb img,.postCard:hover .thumb video,.postCard:hover .genCover{transform:scale(1.06)}
.isLoading::after,.aFig.isLoading::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.75) 50%,transparent 80%),linear-gradient(135deg,#eee8fa,#e6ecfb);background-size:200% 100%,100% 100%;animation:bShimmer 1.3s linear infinite;z-index:1}
.isLoading img,.isLoading video{opacity:0;filter:blur(12px);transform:scale(1.04)}
@keyframes bShimmer{from{background-position:150% 0,0 0}to{background-position:-50% 0,0 0}}
.thumbShine{position:absolute;inset:0;z-index:2;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);background-size:250% 100%;background-position:120% 0;pointer-events:none}
.postCard:hover .thumbShine{animation:bSweep 1.1s var(--ease)}
@keyframes bSweep{to{background-position:-60% 0}}
.chip{position:absolute;left:1.4rem;top:1.4rem;z-index:3;display:inline-flex;align-items:center;gap:.6rem;padding:.55rem 1.1rem;border-radius:999px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);color:var(--ink2);font-size:1.2rem;font-weight:600;box-shadow:0 .4rem 1.2rem rgba(30,20,60,.12)}
.chip::before{content:"";width:.7rem;height:.7rem;border-radius:50%;background:var(--accent,var(--violet))}
.chip[data-cat="update"]{--accent:#875bd4}.chip[data-cat="technology"]{--accent:#4f7cf0}.chip[data-cat="case-study"]{--accent:#13a874}.chip[data-cat="research"]{--accent:#d0569e}.chip[data-cat="insight"]{--accent:#e0912e}.chip[data-cat="guide"]{--accent:#3aa0c8}
.postBody{display:flex;flex-direction:column;gap:1rem;padding:2rem 2.2rem 2.4rem;flex:1}
.postMeta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;color:var(--light);font-size:1.3rem}
.postMeta i{width:.3rem;height:.3rem;border-radius:50%;background:currentColor}
.postMeta .cat{font-weight:650;color:var(--accent,var(--violet2))}
.postMeta .cat[data-cat="update"]{--accent:#875bd4}.postMeta .cat[data-cat="technology"]{--accent:#4f7cf0}.postMeta .cat[data-cat="case-study"]{--accent:#0f9466}.postMeta .cat[data-cat="research"]{--accent:#c0458e}.postMeta .cat[data-cat="insight"]{--accent:#c97818}.postMeta .cat[data-cat="guide"]{--accent:#2f8db5}
.postTitle{display:-webkit-box;margin:0;overflow:hidden;color:var(--ink);font-size:2rem;font-weight:600;line-height:1.35;letter-spacing:-.01em;-webkit-box-orient:vertical;-webkit-line-clamp:3;word-break:auto-phrase}
.postExcerpt{display:-webkit-box;margin:0;overflow:hidden;color:var(--muted);font-size:1.45rem;line-height:1.7;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.readMore{margin-top:auto;padding-top:.6rem;display:inline-flex;align-items:center;gap:.6rem;color:var(--violet2);font-size:1.35rem;font-weight:600}
.readMore svg{width:1.6rem;height:1.6rem;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .35s var(--spring)}
.postCard:hover .readMore svg{transform:translateX(.5rem)}
.postCard.isFeatured{grid-column:1/-1}
.postCard.isFeatured .postCardLink{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.postCard.isFeatured .postCardLink{align-items:center}
.postCard.isFeatured .thumb{aspect-ratio:16/9;width:100%;height:auto;min-width:0}
.postCard.isFeatured .postBody{justify-content:center;padding:4rem}
.postCard.isFeatured .postTitle{font-size:3rem;-webkit-line-clamp:4}
.postCard.isFeatured .postExcerpt{font-size:1.6rem}
.featuredTag{align-self:flex-start;padding:.45rem 1rem;border-radius:.8rem;background:linear-gradient(90deg,#efe7ff,#e7eeff);color:var(--violet2);font-size:1.2rem;font-weight:700;letter-spacing:.02em}
.genCover{display:block;background:radial-gradient(circle at 80% 20%,color-mix(in srgb,var(--accent) 35%,#fff),transparent 55%),linear-gradient(calc(135deg + var(--seed)),color-mix(in srgb,var(--accent) 16%,#fff),#f6f3ff 60%,color-mix(in srgb,var(--accent) 22%,#eef2ff));overflow:hidden}
.genCover svg{position:absolute;right:10%;bottom:14%;width:30%;height:auto;fill:none;stroke:var(--accent);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;opacity:.85;animation:bBob 5s ease-in-out infinite}
.genLines{position:absolute;left:9%;top:22%;width:46%;display:grid;gap:1.1rem}
.genLines i{display:block;height:.9rem;border-radius:999px;background:color-mix(in srgb,var(--accent) 30%,#fff);transform-origin:left;animation:bLine 3.6s var(--ease) infinite}
.genLines i:nth-child(2){width:86%;animation-delay:.15s}.genLines i:nth-child(3){width:94%;animation-delay:.3s;background:color-mix(in srgb,var(--accent) 60%,#fff)}.genLines i:nth-child(4){width:70%;animation-delay:.45s}.genLines i:nth-child(5){width:55%;animation-delay:.6s}
@keyframes bLine{0%{transform:scaleX(.2);opacity:.3}35%,80%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:.3}}
@keyframes bBob{50%{transform:translateY(-.8rem) rotate(-4deg)}}
.reveal{opacity:0;transform:translateY(2.4rem) scale(.985);transition:opacity .7s var(--ease) var(--d,0ms),transform .8s var(--ease) var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
.noJs .reveal{opacity:1;transform:none}
.emptyState{grid-column:1/-1;border:1px dashed #d8d0ee;border-radius:2rem;background:var(--card);padding:4rem;color:var(--muted);font-size:1.5rem;text-align:center}
.pagination{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1.2rem;margin-top:4rem;color:var(--muted);font-size:1.45rem}
.pagination a{min-height:4.4rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:999px;background:var(--card);padding:0 2rem;font-weight:500;transition:transform .3s var(--spring),border-color .2s,color .2s}
.pagination a:hover{transform:translateY(-2px);border-color:#cdbdf0;color:var(--violet2)}
/* article */
.readProgress{position:fixed;left:0;right:0;top:0;height:.3rem;z-index:60;pointer-events:none}
.readProgress span{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--violet),var(--peri),#e48bd0)}
.articleHeader{max-width:86rem;margin:0 auto;text-align:center;word-break:auto-phrase}
.aBack{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:2.4rem;color:var(--muted);font-size:1.4rem;font-weight:500;transition:color .2s,transform .3s var(--spring)}
.aBack:hover{color:var(--violet2);transform:translateX(-3px)}
.aChips{display:flex;justify-content:center;flex-wrap:wrap;align-items:center;gap:1rem;margin-bottom:2rem;color:var(--light);font-size:1.35rem;animation:bRise .7s var(--ease) both}
.aChips .chip{position:static;box-shadow:none;background:#f3effc}
.articleHeader h1{font-size:4.8rem;animation:bRise .8s .06s var(--ease) both}
.articleHeader>p{animation:bRise .8s .14s var(--ease) both}
.articleMeta{display:flex;justify-content:center;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:2rem;color:var(--light);font-size:1.4rem;animation:bRise .8s .2s var(--ease) both}
.articleMeta .by{display:inline-flex;align-items:center;gap:.8rem;color:var(--ink2);font-weight:500}
.articleMeta .by i{width:2.6rem;height:2.6rem;border-radius:50%;background:conic-gradient(from 90deg,var(--violet),var(--peri),#e48bd0,var(--violet));animation:bSpin 6s linear infinite}
@keyframes bSpin{to{transform:rotate(1turn)}}
.aHero{position:relative;max-width:112rem;margin:4rem auto 0;aspect-ratio:16/9;border-radius:2.4rem;overflow:hidden;background:#efeaf9;box-shadow:0 3rem 7rem -3rem rgba(76,45,150,.45);animation:bZoomIn 1s .2s var(--ease) both}
.aHero img,.aHero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s var(--ease),filter .7s,transform 1.2s var(--ease)}
.aHero .genCover{position:absolute;inset:0}
@keyframes bZoomIn{from{opacity:0;transform:translateY(2rem) scale(.96)}to{opacity:1;transform:none}}
.aLayout{display:grid;grid-template-columns:24rem minmax(0,74rem);justify-content:center;gap:5.6rem;margin-top:5.6rem}
.aLayout.noToc{grid-template-columns:minmax(0,76rem)}
.aToc{position:sticky;top:9rem;align-self:start;max-height:calc(100vh - 11rem);overflow:auto;padding:2rem;border-radius:1.6rem;background:rgba(255,255,255,.7);border:1px solid var(--border);backdrop-filter:blur(8px)}
.aToc p{margin:0 0 1.2rem;color:var(--light);font-size:1.2rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.aToc ol{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;counter-reset:t}
.aToc a{position:relative;display:block;padding:.6rem 0 .6rem 1.4rem;color:#6b7086;font-size:1.35rem;line-height:1.45;border-left:2px solid #ece8f6;transition:color .2s,border-color .2s,padding .3s var(--ease)}
.aToc a:hover{color:var(--ink)}
.aToc a.active{color:var(--violet2);border-color:var(--violet);padding-left:1.8rem;font-weight:600}
.aToc details summary{display:none}
.articleContent{min-width:0;color:var(--ink);font-size:1.75rem;line-height:1.85;word-break:auto-phrase;overflow-wrap:anywhere}
.articleContent::after{content:"";display:table;clear:both}
.articleContent>*:first-child{margin-top:0}
.articleContent h2,.articleContent h3{margin:4.8rem 0 1.6rem;line-height:1.3;letter-spacing:-.01em;scroll-margin-top:9rem}
.articleContent h2{position:relative;font-size:2.8rem;font-weight:650;padding-top:1.6rem}
.articleContent h2::before{content:"";position:absolute;left:0;top:0;width:4.4rem;height:.4rem;border-radius:999px;background:linear-gradient(90deg,var(--violet),var(--peri));transform-origin:left;transform:scaleX(0);transition:transform .8s var(--ease)}
.articleContent h2.in::before{transform:scaleX(1)}
.articleContent h3{font-size:2.15rem;font-weight:600}
.articleContent h4{margin:2.4rem 0 1rem;font-size:1.8rem}
.articleContent p,.articleContent ul,.articleContent ol,.articleContent blockquote{margin:0 0 2rem}
.articleContent li{margin:.6rem 0}
.articleContent li::marker{color:var(--violet)}
.articleContent strong{font-weight:650;color:#1d2133}
.articleContent a{color:var(--violet2);text-decoration:underline;text-decoration-thickness:.12em;text-decoration-color:rgba(135,91,212,.35);text-underline-offset:.25em;transition:text-decoration-color .2s}
.articleContent a:hover{text-decoration-color:var(--violet)}
.articleContent blockquote{position:relative;padding:2rem 2.4rem 2rem 3.2rem;border-radius:1.6rem;background:linear-gradient(135deg,#f7f3ff,#f2f6ff);color:#3a3f57;font-size:1.8rem}
.articleContent blockquote::before{content:"";position:absolute;left:1.4rem;top:1.8rem;bottom:1.8rem;width:.35rem;border-radius:999px;background:linear-gradient(var(--violet),var(--peri))}
.articleContent code{padding:.15em .45em;border-radius:.5rem;background:#f1edf9;color:#5a3aa8;font-size:.88em}
.articleContent pre{margin:0 0 2.4rem;padding:2rem;border-radius:1.4rem;background:#171427;color:#e8e3ff;overflow:auto;font-size:1.4rem;line-height:1.6}
.articleContent pre code{padding:0;background:none;color:inherit}
.articleContent img{max-width:100%;height:auto}
.articleContent iframe,.articleContent .ql-video{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:1.2rem}
.articleContent table{width:100%;border-collapse:collapse;font-size:1.5rem;line-height:1.55}
.articleContent th,.articleContent td{padding:1.2rem 1.4rem;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.articleContent th{background:#f6f3fd;color:#3b3360;font-weight:650}
.aFig{position:relative;margin:3.6rem 0;border-radius:2rem;overflow:hidden;background:#efeaf9;aspect-ratio:16/9}
.aFig img{margin:0;border-radius:0;width:100%;height:100%;object-fit:cover;transform:scale(1.1);transition:opacity .8s var(--ease),filter .8s,transform 2.4s var(--ease)}
.aFig.in img{transform:none}
.aFig video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#f4f1fb}
.aFig.aVid{aspect-ratio:16/10;box-shadow:0 3rem 6rem -3rem rgba(76,45,150,.45);border:1px solid #e6e0f4}
.aFig.free{aspect-ratio:auto;background:#fff;border:1px solid #e6e0f4;box-shadow:0 2.4rem 5rem -3rem rgba(76,45,150,.35)}
.aFig.free img{height:auto;transform:none}
.aFig::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);background-size:250% 100%;background-position:130% 0}
.aFig.in::before{animation:bSweep 1.6s .5s var(--ease) both}
.aFig figcaption{position:absolute;left:1.6rem;bottom:1.6rem;right:1.6rem;color:#fff;font-size:1.3rem;text-shadow:0 1px 6px rgba(0,0,0,.45)}
/* visual components */
.viz{position:relative;margin:3.6rem 0;padding:2.6rem 2.8rem;border-radius:2rem;background:#fff;border:1px solid #ebe7f5;box-shadow:0 1.6rem 4rem -2.4rem rgba(76,45,150,.25);font-size:1.55rem;line-height:1.6}
.viz figcaption,.viz>h4{margin:0 0 1.8rem;color:var(--ink2);font-size:1.6rem;font-weight:650}
.viz small{display:block;margin-top:1.6rem;color:var(--light);font-size:1.25rem;line-height:1.5}
.viz ul,.viz ol,ol.viz,ul.viz{list-style:none}
.viz ul,.viz ol{margin:0;padding:0}
.viz li::marker{content:none}
.siteHeader{background:rgba(248,251,255,.84);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px)}
.viz-bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem 1.2rem;margin:0 0 1.6rem}
.viz-bars li b{font-weight:550;color:#383d55}
.viz-bars li span{color:var(--ink2);font-weight:700;font-variant-numeric:tabular-nums}
.viz-bars li::after{content:"";grid-column:1/-1;height:1.2rem;border-radius:999px;background:linear-gradient(90deg,var(--bar,var(--violet)) var(--w,0%),#f0edf7 var(--w,0%));transition:--w 1.4s var(--ease)}
.viz-bars li[data-tone="ai"]{--bar:var(--coral)}.viz-bars li[data-tone="human"]{--bar:var(--mint)}.viz-bars li[data-tone="neutral"]{--bar:var(--peri)}
@property --w{syntax:"<percentage>";inherits:true;initial-value:0%}
.viz-bars.in li{--w:var(--target)}
.viz-bars li:nth-child(2)::after{transition-delay:.12s}.viz-bars li:nth-child(3)::after{transition-delay:.24s}.viz-bars li:nth-child(4)::after{transition-delay:.36s}.viz-bars li:nth-child(5)::after{transition-delay:.48s}.viz-bars li:nth-child(n+6)::after{transition-delay:.6s}
.viz-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.6rem;background:linear-gradient(135deg,#1c1733,#2b2252);border:0;color:#fff}
.viz-stats>div{padding:1rem .4rem}
.viz-stats strong{display:block;font-size:4rem;font-weight:750;letter-spacing:-.02em;line-height:1.1;background:linear-gradient(90deg,#fff,#cdb8ff);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.viz-stats span{display:block;margin-top:.8rem;color:rgba(255,255,255,.72);font-size:1.35rem;line-height:1.5}
.viz-scan p{margin:0;line-height:2}
.viz-scan span[data-flag]{padding:.2rem .1rem;border-radius:.4rem;background-image:linear-gradient(var(--hl),var(--hl));background-repeat:no-repeat;background-size:0% 100%;transition:background-size .9s var(--ease) calc(var(--i,0)*.35s);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.viz-scan span[data-flag="ai"]{--hl:rgba(240,96,107,.2)}.viz-scan span[data-flag="human"]{--hl:rgba(19,168,116,.16)}.viz-scan span[data-flag="mixed"]{--hl:rgba(224,160,48,.2)}
.viz-scan.in span[data-flag]{background-size:100% 100%}
.viz-scan::after{content:"";position:absolute;left:0;right:0;top:0;height:5rem;background:linear-gradient(rgba(135,91,212,0),rgba(135,91,212,.14),rgba(135,91,212,0));opacity:0;pointer-events:none}
.viz-scan.in::after{animation:bScan 2.4s var(--ease) .2s 1}
@keyframes bScan{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(var(--scanH,20rem))}}
.vizLegend{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1.4rem;color:var(--muted);font-size:1.25rem}
.vizLegend i{display:inline-block;width:1rem;height:1rem;margin-right:.5rem;border-radius:.3rem;vertical-align:-.1rem}
.viz-diff{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.viz-diff figcaption{grid-column:1/-1;margin:0}
.viz-diff>div{padding:1.8rem;border-radius:1.4rem;opacity:0;transform:translateY(1.2rem);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.viz-diff .before{background:#fff5f5;border:1px solid #f6d9db}
.viz-diff .after{background:#f1fbf6;border:1px solid #cdeedd;transition-delay:.35s}
.viz-diff.in>div{opacity:1;transform:none}
.viz-diff h4{margin:0 0 1rem;font-size:1.2rem;letter-spacing:.08em;text-transform:uppercase;color:#8a8fa5}
.viz-diff p{margin:0}
.viz-diff del{text-decoration-color:rgba(240,96,107,.8);text-decoration-thickness:2px;background:rgba(240,96,107,.12);border-radius:.3rem;color:#8b3a42}
.viz-diff ins{text-decoration:none;background-image:linear-gradient(rgba(19,168,116,.22),rgba(19,168,116,.22));background-repeat:no-repeat;background-size:0 100%;border-radius:.3rem;transition:background-size .8s var(--ease) 1s;color:#0d6b4a}
.viz-diff.in ins{background-size:100% 100%}
.viz-flow{counter-reset:f;display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.4rem;background:linear-gradient(135deg,#faf8ff,#f3f6ff)}
.viz-flow li{position:relative;counter-increment:f;padding:2rem 1.8rem 1.8rem;border-radius:1.4rem;background:#fff;border:1px solid #ebe7f5;opacity:0;transform:translateY(1.4rem);transition:opacity .6s var(--ease) calc(var(--i,0)*.18s),transform .6s var(--spring) calc(var(--i,0)*.18s)}
.viz-flow li::before{content:counter(f,decimal-leading-zero);display:inline-flex;align-items:center;justify-content:center;width:3.4rem;height:3.4rem;margin-bottom:1.2rem;border-radius:1rem;background:linear-gradient(135deg,var(--violet),var(--peri));color:#fff;font-size:1.3rem;font-weight:700}
.viz-flow li::after{content:"";position:absolute;left:1.8rem;right:1.8rem;bottom:0;height:.3rem;border-radius:999px;background:linear-gradient(90deg,var(--violet),var(--peri));transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease) calc(var(--i,0)*.18s + .3s)}
.viz-flow.in li{opacity:1;transform:none}.viz-flow.in li::after{transform:scaleX(1)}
.viz-flow b{display:block;margin-bottom:.4rem;color:var(--ink2);font-size:1.55rem}
.viz-flow span{display:block;color:var(--muted);font-size:1.4rem;line-height:1.55}
.viz-tokens p{display:flex;flex-wrap:wrap;gap:.6rem;margin:0}
.viz-tokens span[data-t]{padding:.35rem .9rem;border-radius:.8rem;background:#f2f0f7;color:#3a3f57;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.35rem;opacity:0;transform:translateY(.8rem) scale(.9);transition:opacity .4s var(--ease) calc(var(--i,0)*45ms),transform .5s var(--spring) calc(var(--i,0)*45ms),background .4s calc(var(--i,0)*45ms + .4s)}
.viz-tokens.in span[data-t]{opacity:1;transform:none}
.viz-tokens.in span[data-t="g"]{background:rgba(19,168,116,.16);color:#0d6b4a}
.viz-tokens.in span[data-t="r"]{background:rgba(240,96,107,.16);color:#8b3a42}
.viz-curve svg{display:block;width:100%;height:auto;overflow:visible}
.viz-curve ul{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1.2rem}
.viz-curve li{display:inline-flex;align-items:center;gap:.6rem;color:var(--muted);font-size:1.3rem}
.viz-curve li::before{content:"";width:1.8rem;height:.35rem;border-radius:999px;background:var(--c)}
.viz-curve li:nth-child(1){--c:var(--mint)}.viz-curve li:nth-child(2){--c:var(--coral)}.viz-curve li:nth-child(3){--c:var(--peri)}
.viz-curve path.line{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.8s var(--ease) calc(var(--i,0)*.3s)}
.viz-curve path.area{opacity:0;transition:opacity 1s var(--ease) calc(var(--i,0)*.3s + .9s)}
.viz-curve.in path.line{stroke-dashoffset:0}.viz-curve.in path.area{opacity:.16}
.viz-curve .axis{stroke:#e3dff0;stroke-width:1.5}
.viz-curve circle.dot{opacity:0;transition:opacity .5s 1.6s}.viz-curve.in circle.dot{opacity:1;animation:bPulseDot 2s 2s infinite}
@keyframes bPulseDot{50%{r:7}}
.viz-gauge{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:2rem;text-align:center}
.viz-gauge figcaption{grid-column:1/-1;margin:0;text-align:left}
.viz-gauge>div{display:grid;justify-items:center;gap:.6rem}
.viz-gauge svg{width:13rem;height:13rem;transform:rotate(-90deg)}
.viz-gauge circle{fill:none;stroke-width:10}
.viz-gauge .track{stroke:#f0edf7}
.viz-gauge .val{stroke:url(#ahGaugeGrad);stroke-linecap:round;transition:stroke-dashoffset 1.6s var(--ease)}
.viz-gauge b{color:#383d55;font-weight:550}
.viz-gauge span{margin-top:-9rem;margin-bottom:5rem;font-size:2.6rem;font-weight:750;color:var(--ink2);font-variant-numeric:tabular-nums}
.viz-paper{padding-left:3.2rem;background:linear-gradient(135deg,#fdfcff,#f5f1ff);overflow:hidden}
.viz-paper::before{content:"";position:absolute;left:0;top:0;bottom:0;width:.6rem;background:linear-gradient(var(--violet),var(--peri),#e48bd0);background-size:100% 200%;animation:bFlowY 4s linear infinite}
@keyframes bFlowY{to{background-position:0 200%}}
.viz-paper>span{display:inline-block;margin-bottom:1rem;padding:.35rem .9rem;border-radius:.6rem;background:#ece4ff;color:var(--violet2);font-size:1.15rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.viz-paper h4{margin:0 0 .6rem;font-size:1.9rem;line-height:1.35;color:var(--ink)}
.viz-paper .paper-meta{margin:0 0 1rem;color:var(--light);font-size:1.35rem}
.viz-paper p{margin:0 0 1.2rem}
.viz-paper a{display:inline-flex;align-items:center;gap:.6rem;font-weight:600;text-decoration:none}
.viz-paper a::after{content:"↗";transition:transform .3s var(--spring)}
.viz-paper a:hover::after{transform:translate(2px,-2px)}
.viz-takeaways{background:linear-gradient(135deg,#f6f2ff,#eef3ff);border-color:#e2d9f7}
.viz-takeaways h4{margin:0 0 1.2rem;font-size:1.7rem;display:flex;align-items:center;gap:.8rem}
.viz-takeaways h4::before{content:"";width:2.2rem;height:2.2rem;border-radius:.7rem;background:linear-gradient(135deg,var(--violet),var(--peri)) center/60% no-repeat;-webkit-mask:none}
.viz-takeaways li{position:relative;padding-left:2.8rem;margin:0 0 1rem;opacity:0;transform:translateX(-1rem);transition:opacity .6s var(--ease) calc(var(--i,0)*.12s),transform .6s var(--ease) calc(var(--i,0)*.12s)}
.viz-takeaways li::before{content:"";position:absolute;left:0;top:.55em;width:1.4rem;height:1.4rem;border-radius:50%;background:radial-gradient(circle,#fff 30%,var(--violet) 32%)}
.viz-takeaways.in li{opacity:1;transform:none}
.viz-table{padding:0;overflow:auto}
.viz-table table{min-width:56rem}
.viz-table tr{transition:background .2s}
.viz-table tbody tr:hover{background:#faf8ff}
.aCta{position:relative;isolation:isolate;max-width:112rem;margin:7.2rem auto 0;padding:4.8rem;border-radius:2.8rem;overflow:hidden;color:#fff;background:#1c1733;text-align:center}
.aCta::before{content:"";position:absolute;inset:-50%;z-index:-1;background:conic-gradient(from 0deg,#875bd4,#6d8cff,#e48bd0,#875bd4);animation:bSpin 12s linear infinite;opacity:.55;filter:blur(60px)}
.aCta::after{content:"";position:absolute;inset:1px;z-index:-1;border-radius:inherit;background:radial-gradient(circle at 50% 0%,rgba(28,23,51,.55),rgba(28,23,51,.92) 70%)}
.aCta h2{margin:0;font-size:3.2rem;line-height:1.25;letter-spacing:-.01em}
.aCta p{max-width:58rem;margin:1.4rem auto 0;color:rgba(255,255,255,.78);font-size:1.6rem;line-height:1.7}
.aCta a{position:relative;display:inline-flex;align-items:center;gap:.8rem;margin-top:2.6rem;padding:1.5rem 2.8rem;border-radius:999px;background:#fff;color:#1c1733;font-size:1.55rem;font-weight:700;overflow:hidden;transition:transform .35s var(--spring),box-shadow .3s}
.aCta a::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(135,91,212,.25) 50%,transparent 70%);background-size:250% 100%;animation:bSweepLoop 3s ease-in-out infinite}
@keyframes bSweepLoop{0%{background-position:130% 0}60%,100%{background-position:-60% 0}}
.aCta a:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 1.6rem 3.6rem -1rem rgba(135,91,212,.8)}
.aRelated{max-width:128rem;margin:7.2rem auto 0}
.aRelated>h2{margin:0 0 2.4rem;font-size:2.8rem;letter-spacing:-.01em}
.articleActions{max-width:112rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1.2rem;margin:4.8rem auto 0}
.articleActions a,.articleActions button{min-height:4.4rem;display:inline-flex;align-items:center;justify-content:center;gap:.8rem;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--ink);padding:0 2rem;font:inherit;font-size:1.45rem;font-weight:500;cursor:pointer;transition:transform .3s var(--spring),border-color .2s,color .2s}
.articleActions a:hover,.articleActions button:hover{transform:translateY(-2px);border-color:#cdbdf0;color:var(--violet2)}
.articleActions button.done{border-color:var(--mint);color:var(--mint)}
@media (max-width:1100px){.aLayout{grid-template-columns:minmax(0,76rem)}.aToc{position:relative;top:0;max-height:none;padding:0;background:none;border:0}.aToc details{border:1px solid var(--border);border-radius:1.4rem;background:#fff;padding:1.4rem 1.8rem}.aToc details summary{display:flex;justify-content:space-between;cursor:pointer;color:var(--ink2);font-size:1.45rem;font-weight:600;list-style:none}.aToc details summary::after{content:"+";color:var(--violet)}.aToc details[open] summary::after{content:"−"}.aToc details[open] summary{margin-bottom:1rem}.aToc details>p{display:none}}
@media (max-width:900px){.postGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.postCard.isFeatured .postCardLink{grid-template-columns:1fr}.postCard.isFeatured .thumb{min-height:0;aspect-ratio:16/9}.postCard.isFeatured .postBody{padding:2.4rem}.bHero{padding:4.4rem 3.2rem 3.6rem}}
@media (max-width:720px){.blogPage,.articlePage{padding:2.4rem 1.6rem 1rem}h1{font-size:3.4rem}.bHero{margin:0 -.4rem 2.4rem;padding:3.6rem 2.2rem 3rem;border-radius:2.2rem}.bHero h1{font-size:3.4rem}.bChips{flex-wrap:nowrap;overflow-x:auto;margin:0 -1.6rem 2rem;padding:0 1.6rem .4rem;scrollbar-width:none}.bChips::-webkit-scrollbar{display:none}.bChips a{flex:0 0 auto}.postGrid{grid-template-columns:1fr;gap:1.8rem}.postCard.isFeatured .postTitle{font-size:2.3rem}.postTitle{font-size:1.9rem}.articleHeader{text-align:left}.aChips,.articleMeta{justify-content:flex-start}.articleHeader h1{font-size:3.2rem}.aHero{margin-top:2.8rem;border-radius:1.6rem;margin-left:-.4rem;margin-right:-.4rem}.aLayout{margin-top:3.2rem;gap:2.4rem}.articleContent{font-size:1.7rem}.articleContent h2{font-size:2.4rem}.viz{margin:2.8rem -.4rem;padding:2rem 1.8rem;border-radius:1.6rem}.viz-diff{grid-template-columns:1fr}.viz-stats strong{font-size:3.2rem}.aCta{padding:3.6rem 2.2rem;border-radius:2.2rem}.aCta h2{font-size:2.5rem}.pagination a,.pagination span{flex:1 1 100%;text-align:center}.articleActions{flex-direction:column}}
@media (hover:none){.postCard:hover{transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}.reveal{opacity:1;transform:none}}