.writing-index,.writing-post{max-width:680px;margin:0 auto;padding:32px 0 112px}.writing-header{margin-bottom:36px}.writing-eyebrow,.writing-date{font-family:var(--font-mono);color:var(--color-gray-600);font-size:11px;line-height:1.7}.writing-eyebrow{gap:10px;margin-bottom:10px;display:flex}.writing-header h1{letter-spacing:-.045em;text-wrap:balance;color:var(--color-gray-900);margin:0 0 8px;font-size:clamp(30px,3.3vw,42px);font-weight:500;line-height:1.16}.writing-header>p{color:var(--color-gray-600);text-wrap:pretty;max-width:52ch;margin:0;font-size:16px;line-height:1.55}.writing-list{gap:12px;margin:0;padding:0;list-style:none;display:grid}.writing-list a{background:var(--color-gray-100);box-shadow:inset 0 0 0 1px var(--hairline);color:var(--color-gray-900);border-radius:14px;grid-template-columns:110px minmax(0,1fr) 20px;gap:24px;padding:24px;text-decoration:none;transition:background .18s ease-out,box-shadow .18s ease-out;display:grid}.writing-list a:hover,.writing-list a:focus-visible{background:var(--color-gray-200);box-shadow:inset 0 0 0 1px var(--color-gray-300)}.writing-date{flex-direction:column;gap:7px;padding-top:3px;display:flex}.writing-date>span{font-family:var(--font-sans);font-size:11px}.writing-summary h2{letter-spacing:-.025em;margin:0 0 4px;font-size:18px;font-weight:500;line-height:1.35}.writing-summary p{color:var(--color-gray-600);text-wrap:pretty;margin:0;font-size:14px;line-height:1.55}.writing-arrow{color:var(--color-gray-500);transition:transform .18s ease-out,color .18s}.writing-list a:hover .writing-arrow,.writing-list a:focus-visible .writing-arrow{color:var(--color-gray-900);transform:translate(2px,-2px)}.writing-back{min-height:40px;color:var(--color-gray-600);align-items:center;margin-bottom:20px;font-size:13px;text-decoration:none;display:inline-flex}.writing-back:hover{color:var(--color-gray-900)}.writing-header .writing-draft{margin-top:22px;font-size:12px}.writing-prose .writing-section{margin:0 0 44px}.writing-prose .writing-paragraph{margin:0 0 24px}.writing-prose h2{letter-spacing:-.035em;color:var(--color-gray-900);margin-bottom:16px;font-size:22px;font-weight:500;line-height:1.3}.writing-prose p{color:var(--color-gray-700);text-wrap:pretty;font-size:16px;line-height:1.85}.writing-prose sup a{color:var(--color-azure-500);padding:6px;scroll-margin-top:60px;text-decoration:none}.writing-credits{border-top:1px solid var(--color-gray-200);margin-top:64px;padding-top:24px}.writing-credits h2{font:11px var(--font-mono);color:var(--color-gray-600);margin-bottom:24px}.writing-credits ol{padding-left:22px;list-style:decimal}.writing-credits li{color:var(--color-gray-600);margin-bottom:14px;padding-left:8px;scroll-margin-top:40px;font-size:13px;line-height:1.8}.writing-credits li::marker{font:11px var(--font-mono);color:var(--color-azure-500)}.writing-credits a{color:inherit;text-underline-offset:3px;-webkit-text-decoration-color:var(--color-gray-400);text-decoration-color:var(--color-gray-400)}.writing-credits a:hover{color:var(--color-gray-900)}.writing-credits .credit-return{justify-content:center;align-items:center;min-width:40px;min-height:40px;text-decoration:none;display:inline-flex}.writing-credits li:target{color:var(--color-gray-900)}@media (width<=600px){.writing-index,.writing-post{padding-top:24px}.writing-list a{grid-template-columns:1fr 20px;gap:10px}.writing-date{flex-direction:row;grid-column:1/-1;gap:12px}.writing-header{margin-bottom:36px}.portfolio-tabs>a{padding-inline:9px}}@media (prefers-reduced-motion:reduce){.writing-arrow{transition:none}}.origin-demo{margin:32px 0}.origin-toolbar{color:var(--color-gray-600);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;font-size:11px;display:flex}.origin-toolbar>div{align-items:center;gap:12px;display:flex}.origin-toolbar label{cursor:pointer;align-items:center;gap:6px;min-height:40px;display:flex}.origin-toolbar input{accent-color:var(--color-azure-500)}.origin-toolbar button,.origin-trigger{border:1px solid var(--color-gray-300);background:var(--color-gray-50);color:var(--color-gray-900);border-radius:8px;min-height:40px;padding:0 12px;font-size:12px}.origin-toolbar button:hover,.origin-trigger:hover{background:var(--color-gray-200)}.origin-panels{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.origin-panel{background:var(--color-gray-100);box-shadow:inset 0 0 0 1px var(--hairline);border-radius:12px;overflow:hidden}.origin-label{font:11px var(--font-mono);color:var(--color-gray-600);padding:16px 16px 0}.origin-stage{height:228px;position:relative}.origin-trigger{align-items:center;gap:8px;width:auto;min-height:32px;padding:0 10px;line-height:16px;display:flex;position:absolute;top:18px;right:20px}.origin-trigger .origin-chevron{flex:0 0 14px;width:14px;height:14px;display:block}.origin-menu{background:var(--color-gray-50);width:204px;box-shadow:0 6px 20px #0000000c, 0 0 0 1px var(--hairline);pointer-events:none;border-radius:10px;padding:8px;transition-property:transform,opacity;transition-timing-function:cubic-bezier(.22,1,.36,1);position:absolute;top:58px;right:20px}.origin-menu>span{height:34px;color:var(--color-gray-800);justify-content:space-between;align-items:center;padding:0 8px;font-size:12px;display:flex}.origin-menu>span>span{font:10px var(--font-mono);color:var(--color-gray-500)}.origin-dot{background:var(--color-azure-500);width:6px;height:6px;box-shadow:0 0 0 3px var(--color-gray-50);pointer-events:none;border-radius:50%;position:absolute}.origin-dot-center{top:114px;right:119px}.origin-dot-trigger{top:55px;right:57px}.origin-demo figcaption{color:var(--color-gray-600);margin-top:14px;font-size:13px;line-height:1.6}.origin-notes{gap:8px;margin:20px 0 0;font-size:12px;line-height:1.6;display:grid}.origin-notes>div{grid-template-columns:80px 1fr;gap:12px;display:grid}.origin-notes dt{color:var(--color-gray-900);font-weight:500}.origin-notes dd{color:var(--color-gray-600);margin:0}.writing-prose .origin-reduced{color:var(--color-gray-600);font-size:12px}@media (width<=600px){.origin-panels{grid-template-columns:1fr}}.origin-trigger:before{content:"";position:absolute;inset:-4px 0}.writing-prose .stability-example{border:1px solid var(--hairline);background:var(--color-gray-100);color:var(--color-gray-900);border-radius:16px;margin:28px 0 8px;padding:24px}.se-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;display:grid}.se-side{min-width:0;container-type:inline-size}.se-label{color:var(--color-gray-600);margin-bottom:20px;font-size:12px;line-height:1.5;display:block}.stability-example figcaption{border-top:1px solid var(--hairline);color:var(--color-gray-600);justify-content:space-between;align-items:center;gap:16px;margin-top:20px;padding-top:14px;font-size:12px;line-height:1.5;display:flex}.se-replay{font:inherit;color:var(--color-gray-900);cursor:pointer;background:0 0;border:0;flex-shrink:0;padding:10px 0 10px 10px}.se-replay:hover{text-underline-offset:4px;text-decoration:underline}.stability-example button:focus-visible,.stability-example input:focus-visible{outline:2px solid var(--color-azure-500);outline-offset:3px}.se-table-stage{min-height:234px}.se-table-stage table{border-collapse:collapse;table-layout:fixed;width:100%;font-size:12px;line-height:1.4}.se-table-stage th{text-align:left;color:var(--color-gray-600);font-weight:400}.se-table-stage th:last-child,.se-table-stage td:last-child{text-align:right;width:54px}.se-table-stage tr{border-bottom:1px solid var(--hairline);height:36px}.se-table-stage td,.se-table-stage th{padding:0 4px}.se-field{color:var(--color-gray-600);gap:6px;margin-top:16px;font-size:11px;display:grid}.se-field input{box-sizing:border-box;border:1px solid var(--hairline);background:var(--color-gray-50);width:100%;height:38px;color:var(--color-gray-900);font:16px var(--font-sans);border-radius:8px;padding:8px 10px}.se-skeleton{vertical-align:middle;background:var(--color-gray-200);border-radius:3px;width:80%;height:8px;display:inline-block}.se-short{width:30px}.se-button-stage{align-items:center;gap:12px;min-height:98px;display:flex}.se-action{border:1px solid var(--hairline);background:var(--color-gray-50);height:40px;color:var(--color-gray-900);font:13px var(--font-sans);cursor:pointer;white-space:nowrap;border-radius:9px;place-items:center;padding:0 14px;display:inline-grid}.se-action>span{grid-area:1/1;justify-content:center;align-items:center;display:flex}.se-neighbor{color:var(--color-gray-600)}.se-spinner{border:1.5px solid var(--color-gray-300);border-top-color:var(--color-gray-900);border-radius:50%;width:14px;height:14px;animation:.7s linear infinite se-spin;display:block}@keyframes se-spin{to{transform:rotate(360deg)}}.se-image-stage{height:calc(66.6667cqw + 86px)}.se-image-frame{background:var(--color-gray-200);border-radius:8px;overflow:hidden}.se-image-frame img{aspect-ratio:3/2;object-fit:cover;width:100%;display:block}.se-image-frame .se-image-waiting{display:none}.se-stable .se-image-frame{aspect-ratio:3/2}.se-stable .se-image-waiting{visibility:hidden;display:block}.writing-prose .se-image-copy{margin:12px 0 0;font-size:13px;line-height:1.6}.se-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=580px){.writing-prose .stability-example{padding:18px 16px}.se-pair{grid-template-columns:1fr;gap:20px}.se-side+.se-side{border-top:1px solid var(--hairline);padding-top:20px}.se-table-stage{min-height:226px}.stability-example figcaption{align-items:flex-start}.se-label{margin-bottom:12px}.se-button-stage{min-height:56px}}@media (prefers-reduced-motion:reduce){.se-spinner{animation:none}}.se-action{position:relative;overflow:hidden}.se-action .se-button-state{opacity:0;pointer-events:none;gap:6px;transition:opacity .18s ease-out}.se-action .se-button-state:not(.is-current){position:absolute}.se-stable .se-action .se-button-state{position:static}.se-action .se-button-state.is-current{opacity:1;transition-duration:.25s}.se-state-icon{filter:blur(3px);flex-shrink:0;transition:transform .3s cubic-bezier(.25,.1,0,1),filter .3s cubic-bezier(.25,.1,0,1);transform:scale(.3)}.is-current .se-state-icon{filter:blur();transform:scale(1)}@media (prefers-reduced-motion:reduce){.se-action .se-button-state,.se-state-icon{transition:none}.se-state-icon{filter:none;transform:none}}