.blog-main,.article-main{--blog-muted:#655c78;padding-block:48px 80px}.blog-eyebrow,.experiment-label{font-family:var(--font-geist-mono), monospace;text-transform:uppercase;letter-spacing:.1em;color:#655c78;font-size:11px;line-height:1.6}.blog-intro{padding-bottom:48px}.blog-intro h1{margin-top:24px;font-size:clamp(54px,9vw,112px)}.blog-intro-bottom{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:32px;display:flex}.blog-intro-bottom p{color:var(--blog-muted);font-size:18px;line-height:1.6}.blog-intro-bottom a,.blog-footer a,.back-link{text-underline-offset:5px;padding-block:12px;font-size:14px;text-decoration:underline;display:inline-block}.blog-list-heading{border-top:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:24px;display:flex}.blog-list-heading h2{font-size:16px;font-weight:500}.blog-list-heading>span,.blog-row time{color:var(--blog-muted);font-size:12px}.blog-row{border-top:1px solid var(--line);grid-template-columns:24px minmax(0,1fr);gap:16px;padding-block:32px;display:grid}.blog-index{color:var(--blog-muted);font-family:var(--font-geist-mono), monospace;padding-top:3px;font-size:12px}.blog-row h3{letter-spacing:-.045em;max-width:660px;margin-top:12px;font-size:clamp(26px,3.3vw,40px);font-weight:500;line-height:1.15}.blog-row h3 a:hover{text-underline-offset:6px;text-decoration:underline;text-decoration-thickness:1px}.blog-description{max-width:590px;color:var(--blog-muted);margin-block:16px;font-size:15px;line-height:1.7}.blog-motif{display:none}.blog-footer{border-top:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding-block:32px;display:flex}.blog-footer p{color:#655c78;font-size:13px}.article-main{max-width:900px}.article-header{border-bottom:1px solid var(--line);margin-block:36px 48px;padding-bottom:32px}.article-header h1{letter-spacing:-.055em;overflow-wrap:break-word;margin-top:20px;font-size:clamp(42px,6.5vw,76px);line-height:1.03}.article-deck{color:var(--blog-muted);max-width:740px;margin-top:24px;font-size:clamp(18px,2.5vw,23px);line-height:1.6}.article-byline{color:var(--blog-muted);flex-wrap:wrap;gap:12px 24px;margin-top:24px;font-size:13px;display:flex}.article-prose{overflow-wrap:break-word;max-width:700px;margin-inline:auto;font-size:17px;line-height:1.85}.article-prose p{margin-block:20px}.article-prose h2{letter-spacing:-.035em;margin-block:44px 16px;font-size:29px;font-weight:500;line-height:1.25}.article-prose h3{margin-top:28px;font-size:21px}.article-prose a{text-underline-offset:4px;color:#584079;text-decoration:underline}.article-prose ul,.article-prose ol{margin-block:20px;padding-left:24px}.article-prose ul{list-style:outside}.article-prose ol{list-style:decimal}.article-prose li{margin-block:8px}.article-prose .heading-permalink{color:inherit;text-decoration:none}.article-prose .heading-permalink:hover{text-decoration:underline}.heading-hash{color:#655c78;font-size:.7em;font-weight:400}.article-prose :is(h2,h3,h4,h5,h6)[id]{scroll-margin-top:32px}.mdx-table-scroll{max-width:100%;margin-block:24px;overflow-x:auto}.mdx-table-scroll:focus-visible{outline-offset:4px;outline:2px solid #7352ac}.article-prose table{border-collapse:collapse;width:100%;font-size:15px}.article-prose th,.article-prose td{border:1px solid #ded5e9;min-width:120px;padding:12px 16px}.article-prose th{text-align:left;background:#f2eef7;font-weight:600}.article-prose .contains-task-list{padding-left:0;list-style:none}.article-prose .task-list-item input{accent-color:#70529b;margin-right:8px}.article-prose [data-rehype-pretty-code-figure]{min-width:0;margin-block:24px}.article-prose [data-rehype-pretty-code-figure] code{width:max-content;min-width:100%;display:grid}.article-prose [data-line]{min-height:1.75em}.article-prose pre{color:#f1ebfb;background:#19171f;border-radius:8px;padding:24px;font-size:13px;line-height:1.75;overflow-x:auto}.article-prose code{font-family:var(--font-geist-mono), monospace;font-size:.85em}.article-prose :not(pre)>code{background:#f2eef7;border-radius:4px;padding:2px 5px}.article-prose details{border:1px solid #d8d0e3;border-radius:8px;margin-block:24px;padding:20px}.article-prose summary{cursor:pointer;min-height:44px;font-weight:500}.article-next{border-top:1px solid var(--line);margin-top:64px;padding-top:32px}.article-next a{letter-spacing:-.04em;margin-top:12px;font-size:clamp(24px,4vw,36px);display:block}.experiment{background:#f6f3f9;border:1px solid #ded5e9;border-radius:12px;margin-block:32px;padding:24px}.experiment .experiment-label{margin-top:0;margin-bottom:20px}.experiment label{font-size:14px;font-weight:500;display:block}.experiment input[type=range]{accent-color:#70529b;width:100%;min-height:44px;margin-block:8px 16px;display:block}.experiment input:focus-visible,.experiment select:focus-visible,.article-prose summary:focus-visible{outline-offset:4px;outline:2px solid #7352ac}.experiment p:last-child{color:#655c78;margin-bottom:0;font-size:13px;line-height:1.65}.experiment output{margin-top:20px;font-size:18px;font-weight:500;display:block}.layout-preview{border:1px dashed #9b88b5;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:12px;max-width:100%;padding:12px;display:grid}.layout-preview>div{text-align:center;overflow-wrap:anywhere;background:#e5dcf0;padding:24px 8px;font-size:12px}.color-controls{flex-wrap:wrap;gap:24px;display:flex}.color-controls label{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.color-controls input{cursor:pointer;width:48px;height:44px}.contrast-preview{border:1px solid #d8d0e3;border-radius:8px;margin-top:20px;padding:24px;font-size:20px}.experiment select{background:#fff;border:1px solid #9b88b5;border-radius:4px;min-height:44px;margin-top:8px;padding:8px;display:block}.experiment button{color:#fff;cursor:pointer;background:#241b30;border:0;border-radius:6px;min-height:44px;padding:10px 20px;font-size:14px}.motion-track{background:#e5dcf0;border-radius:8px;height:64px;margin-block:24px;position:relative}.motion-track span{background:#70529b;border-radius:50%;width:40px;height:40px;transition-property:left;display:block;position:absolute;top:12px}.pixel-meter{background:#e5dcf0;border-radius:8px;height:16px;margin-block:20px;overflow:hidden}.pixel-meter span{background:#70529b;height:100%;display:block}@media (min-width:701px){.blog-main,.article-main{padding-top:64px}.blog-intro{padding-bottom:64px}.blog-row{grid-template-columns:48px minmax(0,1fr) 190px;align-items:center;gap:32px;padding-block:40px}.blog-index{align-self:start}.blog-motif{background:#f4f0f8;border-radius:6px;justify-content:center;align-items:center;height:160px;display:flex;position:relative;overflow:hidden}.blog-motif i{background:#d7c7ea;border:1px solid #b9a1d2;width:48px;height:70px;margin-left:-12px;display:block;transform:skewY(-15deg)}.motif-1{gap:8px}.motif-1 i{border-radius:4px;width:36px;height:55px;margin:0;transform:none}.motif-2 i{background:#8e72b0;border-radius:50%;width:64px;height:64px;transform:none}.motif-2 i:nth-child(2){background:#b5a0cf}.motif-2 i:last-child{background:#e1d6ed}.motif-3 i{opacity:.3;border-radius:50%;width:48px;height:48px;transform:none}.motif-3 i:nth-child(2){opacity:.6}.motif-3 i:last-child{opacity:1}.motif-4 i{background:linear-gradient(140deg,#eadff6,#a38abc);width:65px;height:65px;transform:rotate(-30deg)skewY(15deg)}}@media (prefers-reduced-motion:reduce){.motion-track span{transition:none}}