.writing-post{max-width:540px;margin:0 auto;padding:32px 0 112px}.writing-header,.writing-prose :is(h2,p),.writing-credits{font-size:var(--simple-text);line-height:var(--simple-leading);letter-spacing:var(--simple-tracking)}.writing-header{margin-bottom:32px}.writing-eyebrow{color:var(--simple-secondary);gap:4px;margin-bottom:8px;display:flex}.writing-header h1{color:var(--simple-ink);font-weight:500}.writing-header>p{color:var(--simple-secondary);text-wrap:pretty}.writing-header .writing-draft{color:var(--simple-muted);margin-top:8px}.writing-prose .writing-section,.writing-prose .writing-paragraph{margin:0 0 16px}.writing-prose .writing-section{margin-top:40px}.page-content:has(.writing-post){container-type:inline-size}.writing-prose .origin-demo{margin-inline:calc(50% - min(680px,100cqw)/2)}.writing-prose h2{color:var(--simple-ink);margin-bottom:8px;font-weight:500}.writing-prose p{color:var(--simple-ink);text-wrap:pretty}.writing-prose sup a{padding:6px;scroll-margin-top:60px}.writing-prose sup a,.writing-credits a:not(.credit-return){color:var(--simple-ink);text-decoration:underline;-webkit-text-decoration-color:var(--simple-underline);text-decoration-color:var(--simple-underline);text-underline-offset:3px;transition:text-decoration-color .2s}.writing-credits{color:var(--simple-secondary);margin-top:40px}.writing-credits h2{color:var(--simple-muted);margin-bottom:8px;font-weight:400}.writing-credits ol{padding-left:22px;list-style:decimal}.writing-credits li{padding-left:8px;scroll-margin-top:40px}.writing-credits li+li{margin-top:8px}.writing-credits li::marker{color:var(--simple-muted);font-variant-numeric:tabular-nums}.writing-credits .credit-return{color:var(--simple-muted);text-decoration:none;transition:color .2s;position:relative}.writing-credits .credit-return:before{content:"";position:absolute;inset:-8px -12px}.writing-credits li:target{color:var(--simple-ink)}@media (hover:hover) and (pointer:fine){.writing-prose sup a:hover,.writing-credits a:not(.credit-return):hover{text-decoration-color:currentColor}.writing-credits .credit-return:hover{color:var(--simple-ink)}}@media (width<=600px){.writing-post{padding-top:24px}.portfolio-tabs>a{padding-inline:9px}}@media (prefers-reduced-motion:reduce){.portfolio :is(.writing-prose sup a,.writing-credits a:not(.credit-return)){transition:text-decoration-color .2s!important}.portfolio .writing-credits .credit-return{transition:color .2s!important}}.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}}.se-skeleton{position:relative;overflow:hidden}.se-skeleton:after{content:"";background:linear-gradient(90deg,#0000,#fff,#0000);width:42%;animation:.7s linear infinite se-shimmer;position:absolute;top:0;bottom:0;left:0}[data-theme=dark] .se-skeleton:after{background:linear-gradient(90deg,transparent,var(--color-gray-300),transparent)}@keyframes se-shimmer{0%{transform:translate(-120%)}to{transform:translate(260%)}}@media (prefers-reduced-motion:reduce){.se-skeleton:after{content:none}}.writing-prose .systems-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}.systems-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}.systems-example button:focus-visible,.systems-example input:focus-visible{outline:2px solid var(--color-azure-500);outline-offset:3px}.sx-toggle{background:var(--color-gray-200);border-radius:999px;flex-shrink:0;padding:2px;display:inline-flex}.sx-toggle button{font:500 12px/16px var(--font-sans);color:var(--color-gray-600);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:5px 11px;transition:background-color .16s,color .16s,box-shadow .16s}.sx-toggle button[aria-pressed=true]{background:var(--color-gray-50);color:var(--color-gray-900);box-shadow:0 1px 2px #00000014, 0 0 0 1px var(--hairline)}.sx-slider{color:var(--color-gray-600);grid-template-columns:auto 1fr 2.5ch;align-items:center;gap:12px;font-size:12px;display:grid}.sx-slider input{width:100%;accent-color:var(--color-gray-900)}.sx-slider output{text-align:right;font-variant-numeric:tabular-nums;color:var(--color-gray-900)}.sx-tiles{grid-template-columns:repeat(4,minmax(0,1fr));align-content:start;gap:10px;min-height:252px;margin-top:18px;display:grid}.sx-tile{--tile-font:var(--font-sans);--tile-radius:6px;--tile-fill:var(--color-gray-900);--tile-align:start;border-radius:var(--tile-radius);background:var(--color-gray-50);box-shadow:0 0 0 1px var(--hairline);font-family:var(--tile-font);gap:6px;padding:8px;transition:border-radius .3s;animation:.32s cubic-bezier(.2,0,0,1) both sx-in;display:grid}.sx-tile-bar{background:var(--tile-fill);opacity:.9;border-radius:3px;height:5px}.sx-tile-card{justify-items:var(--tile-align);text-align:var(--tile-align);gap:3px;display:grid}.sx-nested{border-radius:calc(var(--tile-radius) * .8);background:var(--color-gray-100);padding:6px;box-shadow:0 2px 6px #00000014}.sx-tile-label{color:var(--color-gray-600);font-size:9px;line-height:12px}.sx-tile-figure{letter-spacing:-.01em;color:var(--color-gray-900);font-size:15px;font-weight:600;line-height:18px}.sx-tile-line{background:var(--color-gray-200);border-radius:2px;width:80%;height:4px}.sx-tile-line.sx-short{width:50%}.sx-tiles[data-system=true] .sx-tile-bar{background:var(--color-gray-900);opacity:1}@keyframes sx-in{0%{opacity:0;transform:translateY(4px)scale(.98)}}.sx-app{background:var(--color-gray-50);box-shadow:0 0 0 1px var(--hairline);border-radius:10px;grid-template-rows:34px 196px;grid-template-columns:132px 1fr;font-size:11px;display:grid;position:relative;overflow:hidden}.sx-app-side{border-right:1px solid var(--hairline);flex-direction:column;grid-row:1/3;gap:2px;padding:10px 8px;display:flex}.sx-app-brand{background:var(--color-gray-900);border-radius:5px;width:18px;height:18px;margin:0 0 10px 4px}.sx-app-side button{font:11px/14px var(--font-sans);color:var(--color-gray-600);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:6px;padding:6px 8px}.sx-app-side button[aria-pressed=true]{background:var(--color-gray-200);color:var(--color-gray-900)}.sx-app-top{border-bottom:1px solid var(--hairline);justify-content:space-between;align-items:center;padding:0 12px;display:flex}.sx-app-crumb{color:var(--color-gray-900);font-weight:500}.sx-app-dots{gap:6px;display:flex}.sx-app-dots i{background:var(--color-gray-200);border-radius:4px;width:14px;height:14px}.sx-app-main{padding:12px;animation:.26s both sx-fade}.sx-app-row{border-bottom:1px solid var(--hairline);align-items:center;gap:8px;height:30px;display:flex}.sx-app-row span{background:var(--color-gray-300);border-radius:3px;height:5px}.sx-app-row em{background:var(--color-gray-200);border-radius:3px;width:26px;height:5px;margin-left:auto}.sx-dot{background:var(--color-gray-300);border-radius:50%;width:8px;height:8px}.sx-app-board{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.sx-app-col{background:var(--color-gray-100);border-radius:7px;align-content:start;gap:6px;padding:6px;display:grid}.sx-app-col span{background:var(--color-gray-50);height:34px;box-shadow:0 0 0 1px var(--hairline);border-radius:5px}.sx-app-doc{gap:9px;max-width:78%;display:grid}.sx-app-doc b{background:var(--color-gray-400);border-radius:4px;width:46%;height:9px;margin-bottom:4px}.sx-app-doc span{background:var(--color-gray-200);border-radius:3px;height:5px}.sx-app-doc .sx-short{width:64%}.sx-app:after{content:"";pointer-events:none;opacity:0;background:linear-gradient(#2563eb1a,#2563eb1a) 0 0/132px 100% no-repeat,linear-gradient(#2563eb1a,#2563eb1a) 0 0/100% 34px no-repeat;transition:opacity .22s;position:absolute;inset:0}.sx-app[data-outline=true]:after{opacity:1}@keyframes sx-fade{0%{opacity:0}}.sx-rule{min-height:196px;display:grid}.sx-rule>*{grid-area:1/1;transition:opacity .24s,transform .24s cubic-bezier(.2,0,0,1)}.sx-rule-opinion{letter-spacing:-.01em;color:var(--color-gray-900);place-self:center;margin:0;font-size:22px;line-height:30px}.sx-rule-rows{background:var(--hairline);box-shadow:0 0 0 1px var(--hairline);border-radius:10px;gap:1px;margin:0;display:grid;overflow:hidden}.sx-rule-rows>div{background:var(--color-gray-50);grid-template-columns:92px 1fr;gap:12px;padding:11px 14px;font-size:13px;line-height:1.45;display:grid}.sx-rule-rows dt{color:var(--color-gray-600)}.sx-rule-rows dd{color:var(--color-gray-900);margin:0}.sx-rule[data-mode=opinion] .sx-rule-rows,.sx-rule[data-mode=constraint] .sx-rule-opinion{opacity:0;pointer-events:none;transform:translateY(6px)}.sx-corners{grid-template-columns:minmax(0,1fr) 248px;align-items:center;gap:28px;display:grid}.sx-corners-controls{gap:14px;display:grid}.sx-corners-math{font:13px/1.5 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--color-gray-600);margin:6px 0 0}.sx-corners-math b{color:var(--color-gray-900);font-weight:600}.sx-corners-card{background:var(--color-gray-50);height:196px;box-shadow:0 0 0 1px var(--hairline), 0 8px 24px -12px #0000002e;transition:border-radius .12s,padding .12s;position:relative}.sx-corners-inner{background:linear-gradient(135deg, var(--color-gray-300), var(--color-gray-200));height:100%;transition:border-radius .12s}.sx-corners-guide{border:1.5px dashed var(--color-azure-500);pointer-events:none;transition:inset .12s,border-radius .12s;position:absolute}.sx-states{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 12px;display:grid}.sx-state-name{color:var(--color-gray-600);margin-bottom:6px;font-size:11px;display:block}.sx-panel{background:var(--color-gray-50);min-width:0;box-shadow:0 0 0 1px var(--hairline);border-radius:10px;align-content:start;gap:4px;padding:10px;font-size:11px;line-height:14px;display:grid}.sx-states[data-checked=true] .sx-panel{min-height:118px}.sx-panel-title{color:var(--color-gray-900);margin-bottom:4px;font-weight:500}.sx-member{min-width:0;height:22px;color:var(--color-gray-900);align-items:center;gap:7px;display:flex}.sx-member i{background:var(--color-gray-200);width:18px;height:18px;color:var(--color-gray-600);border-radius:50%;flex:none;place-items:center;font-size:9px;font-style:normal;display:grid}.sx-member span{white-space:nowrap}.sx-states[data-checked=true] .sx-member span{text-overflow:ellipsis;overflow:hidden}.sx-member .sx-skeleton{background:var(--color-gray-200);border-radius:3px;width:60%;height:6px}.sx-member i.sx-skeleton{border-radius:50%;width:18px;height:18px}.sx-note{color:var(--color-gray-600);justify-items:start;gap:8px;padding-top:4px;display:grid}.sx-note button{background:var(--color-gray-200);font:500 11px/14px var(--font-sans);color:var(--color-gray-900);border:0;border-radius:6px;padding:4px 10px}.sx-raw{color:#dc2626;word-break:break-all;font:10px/14px ui-monospace,monospace}.sx-directions{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;display:grid}.sx-direction{background:var(--color-gray-50);box-shadow:0 0 0 1px var(--hairline);font:11px/14px var(--font-sans);color:var(--color-gray-900);text-align:left;cursor:pointer;border:0;border-radius:10px;gap:8px;padding:8px;transition:box-shadow .16s,transform .16s;display:grid}.sx-direction[aria-pressed=true]{box-shadow:0 0 0 2px var(--color-gray-900)}.sx-direction:active{transform:scale(.98)}.sx-direction-name{font-weight:500}.sx-checks{color:var(--color-gray-600);font-variant-numeric:tabular-nums;gap:2px;font-size:10px;display:grid}.sx-checks [data-fail]{color:#dc2626}.sx-thumb{background:var(--color-gray-100);border-radius:6px;gap:3px;height:64px;padding:5px;display:grid}.sx-thumb i{background:var(--color-gray-300);border-radius:2px}.sx-thumb-0{grid-template-rows:repeat(4,1fr)}.sx-thumb-1{grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr}.sx-thumb-2{grid-template-rows:repeat(3,1fr);grid-template-columns:1fr 1.6fr}.sx-thumb-2 i:first-child{grid-row:1/4}.sx-thumb-3{grid-template-rows:6px repeat(3,1fr)}.sx-thumb-3 i{background:var(--color-gray-200)}.sx-thumb-4{grid-template-rows:2fr 1fr;grid-template-columns:1fr 1fr 1fr}.sx-thumb-4 i:first-child{background:var(--color-gray-400);grid-column:1/4}@media (hover:hover) and (pointer:fine){.sx-toggle button:hover:not([aria-pressed=true]){color:var(--color-gray-900)}.sx-app-side button:hover:not([aria-pressed=true]){background:var(--color-gray-100)}.sx-direction:hover:not([aria-pressed=true]){box-shadow:0 0 0 1px var(--color-gray-400)}}@media (width<=580px){.writing-prose .systems-example{padding:18px 16px}.systems-example figcaption{flex-direction:column;align-items:flex-start}.sx-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.sx-app{grid-template-columns:96px 1fr}.sx-app:after{background-size:96px 100%,100% 34px}.sx-corners{grid-template-columns:1fr}.sx-states,.sx-directions{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (prefers-reduced-motion:reduce){.systems-example *,.systems-example :after{transition:none!important;animation:none!important}}