.sx{margin:0}@keyframes sx-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes sx-fade{0%{opacity:0}to{opacity:1}}@keyframes sx-open{to{transform:scaleY(0)}}@keyframes sx-lit{to{background:var(--night);border-color:var(--night);color:var(--on-night)}}.sx-doors{border:1px solid var(--line);border-radius:var(--r-l);background:var(--paper);padding:clamp(16px,2.4vw,28px);box-shadow:0 18px 36px -30px rgba(10,20,40,.35)}.sx-heads,.sx-row{display:grid;grid-template-columns:minmax(0,.85fr) 56px minmax(0,1.4fr);align-items:center;gap:10px}.sx-heads{margin-bottom:10px;font-size:.74rem;font-weight:650;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.sx-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}.sx-cfg{display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--mist);font-size:var(--t-sm);font-weight:600;color:var(--ink)}.sx-cfg svg:first-child{flex:none;color:var(--go)}.sx-cfg svg:nth-child(2){flex:none;color:var(--blue)}.sx-door{position:relative;align-self:stretch;display:grid;place-items:center;border-radius:4px;background:repeating-linear-gradient(0deg,#d9dfe8 0 9px,#c7cfdb 9px 10px);color:var(--blue);overflow:hidden}.sx-door svg{position:relative;z-index:0;padding:4px;border-radius:999px;background:var(--paper);box-sizing:content-box}.sx-door i{position:absolute;inset:6px 10px;z-index:1;border-radius:3px;background:#9aa6b8;transform-origin:top;transform:scaleY(0)}.sx-code{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;padding:11px 12px;border-radius:var(--r-m);border:1px solid var(--night);background:var(--night);color:var(--on-night);font-size:var(--t-sm)}.sx-code>svg{color:#8fd6ff}.sx-code-t{font-weight:600;line-height:1.3}.sx-langs{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}.sx-langs code{padding:3px 8px;border-radius:999px;background:#0f3326;color:#7ee2b0;font:600 .72rem/1.2 var(--mono)}.sx-foot{margin:16px 0 0;padding-top:14px;border-top:1px dashed var(--line);text-align:center;font-weight:650;color:var(--ink)}@media (prefers-reduced-motion:no-preference){html:not(.no-js) .sx:not(.is-in) .sx-foot,html:not(.no-js) .sx:not(.is-in) .sx-row{opacity:0}.sx.is-in .sx-row{animation:sx-in .45s ease-out both;animation-delay:calc(var(--i) * .15s)}.sx.is-in .sx-door i,html:not(.no-js) .sx:not(.is-in) .sx-door i{transform:none}.sx.is-in .sx-door i{animation:sx-open .35s ease-in forwards;animation-delay:calc(1.1s + var(--i) * .45s)}.sx.is-in .sx-code,html:not(.no-js) .sx:not(.is-in) .sx-code{background:var(--mist);border-color:var(--line);color:var(--muted)}.sx.is-in .sx-code{animation:sx-lit .35s ease forwards;animation-delay:calc(1.3s + var(--i) * .45s)}.sx.is-in .sx-langs,html:not(.no-js) .sx:not(.is-in) .sx-langs{opacity:0}.sx.is-in .sx-langs{animation:sx-fade .3s ease forwards;animation-delay:calc(1.4s + var(--i) * .45s)}.sx.is-in .sx-foot{animation:sx-in .45s ease-out both;animation-delay:3.8s}}@media (max-width:720px){.sx-heads{display:none}.sx-row{grid-template-columns:minmax(0,1fr);gap:0}.sx-door{height:26px;width:56px;justify-self:center}.sx-door svg{transform:rotate(90deg)}.sx-rows{gap:14px}.sx-code{grid-template-columns:auto minmax(0,1fr)}.sx-langs{grid-column:2;justify-content:flex-start}}