.page{background:var(--white);flex-direction:column;align-items:center;min-height:100vh;display:flex;position:relative;overflow:clip}.xp{width:100%;font-family:var(--font-sans);color:var(--ink);flex-direction:column;align-items:center;gap:50px;padding:50px 0 100px;display:flex}.xp__back{justify-content:center;width:100%;display:flex}.xp__inner{flex-direction:column;gap:24px;width:min(100%,1000px);padding-inline:28px;display:flex}.xp__intro{padding-top:72px}.xp__title{color:var(--ink);margin:0 0 24px;font-size:15px;font-weight:400;line-height:25px}.xp__desc{max-width:560px;color:var(--ink);white-space:pre-line;font-size:15px;line-height:25px}.xp__stage{--stage-h:640px;width:100%;height:var(--stage-h);border:1px solid #00000014;border-radius:16px;margin-top:28px;position:relative;overflow:hidden}.xp__demo{position:absolute;inset:0}.xp__panel,.xp__code{border-top:2px solid var(--divider);flex-direction:column;gap:16px;margin-top:24px;padding-top:24px;display:flex}.xp__bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.xp__h2{font-size:20px;font-weight:400;line-height:32px}.xp__actions{flex-wrap:wrap;gap:8px;display:flex}.xp__btn{background:var(--pill);color:#000;height:36px;font-family:var(--font-sans);cursor:pointer;white-space:nowrap;border:none;border-radius:8px;align-items:center;padding:0 14px;font-size:14px;line-height:1;display:inline-flex}.xp__btn--dark{background:var(--ink);color:#fff}.xp__btn--outline{background:#fff;box-shadow:inset 0 0 0 1px #0000001f}.xp__note{color:var(--muted);font-size:14px;line-height:22px}.xp__file{border:1px solid #00000014;border-radius:12px;overflow:hidden}.xp__file pre.astro-code{height:520px;font-family:var(--font-mono);margin:0;padding:16px 18px;font-size:13px;line-height:20px;overflow:auto}.xp__file pre.astro-code[data-language=md]{white-space:pre-wrap;overflow-wrap:anywhere}.xp-controls{columns:3 260px;column-gap:32px}.xp-group{break-inside:avoid;margin-bottom:24px}.xp-group__head{width:100%;height:36px;color:var(--ink);font-family:var(--font-sans);cursor:pointer;background:0 0;border:none;justify-content:space-between;align-items:center;padding:0 4px 0 0;font-size:13px;font-weight:500;line-height:20px;display:flex}.xp-group__head svg{color:var(--muted);transition:transform .2s var(--ease-standard)}.xp-group__head[aria-expanded=false] svg{transform:rotate(-90deg)}.xp-group__body{flex-direction:column;gap:8px;display:flex}.xp-group__body[hidden]{display:none}.xp-controls__row{color:var(--muted);font-size:14px;line-height:20px}.xp-field{height:40px;color:var(--muted);cursor:default;background:#0000000a;border-radius:8px;justify-content:space-between;align-items:center;gap:12px;padding:0 12px;font-size:14px;line-height:20px;display:flex}label.xp-field{cursor:pointer}.xp-field>label,.xp-field>span:first-child{white-space:nowrap;flex:none}.xp-field__end{justify-content:flex-end;align-items:center;gap:8px;max-width:50%;display:flex}.xp-field__value{min-width:0;max-width:50%;color:var(--ink);font:14px/20px var(--font-sans);text-align:right;transition:border-color .15s var(--ease-standard);background:0 0;border:none;border-bottom:1px solid #0000;border-radius:0;outline:none;padding:2px 0}.xp-field__end .xp-field__value{width:9ch;max-width:none}.xp-field__hex{font-family:var(--font-mono);text-transform:uppercase;font-size:13px}.xp-field:hover .xp-field__value,.xp-field__value:focus{border-bottom-color:#00000040}.xp-field__swatch{-webkit-appearance:none;appearance:none;cursor:pointer;background:0 0;border:none;flex:none;width:22px;height:22px;padding:0}.xp-field__swatch::-webkit-color-swatch-wrapper{padding:0}.xp-field__swatch::-webkit-color-swatch{border:1px solid #00000026;border-radius:6px}.xp-field__swatch::-moz-color-swatch{border:1px solid #00000026;border-radius:6px}.xp-controls__switch{-webkit-appearance:none;appearance:none;cursor:pointer;background:#00000024;border-radius:10px;flex:none;width:30px;height:18px;margin:0;transition:background .2s;position:relative}.xp-controls__switch:after{content:"";background:#fff;border-radius:50%;width:14px;height:14px;transition:transform .2s;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #0003}.xp-controls__switch:checked{background:var(--ink)}.xp-controls__switch:checked:after{transform:translate(12px)}.xp-controls__seg{background:#0000000d;border-radius:7px;gap:2px;padding:2px;display:flex}.xp-controls__seg button{height:28px;color:var(--muted);font-family:var(--font-sans);cursor:pointer;background:0 0;border:none;border-radius:5px;padding:0 12px;font-size:13px}.xp-controls__seg button.is-on{color:var(--ink);background:#fff;box-shadow:0 1px 2px #0000001a}.scrubber{--p:0;--zo:0px;--spring-fast:80ms cubic-bezier(.25, 1, .5, 1);touch-action:none;width:100%;position:relative}.scrubber__gutter{cursor:ew-resize;position:absolute;inset:0 -8px}.scrubber__row{cursor:ew-resize;user-select:none;outline-offset:2px;height:40px;transition:outline-color var(--spring-fast);background:#0000000a;border-radius:8px;outline:1px solid #0000;align-items:center;gap:12px;padding:0 12px;display:flex;position:relative;overflow:hidden}.scrubber.is-focus .scrubber__row{outline-color:#6b97ff}.scrubber__fill{width:calc(var(--p) * 100%);pointer-events:none;transition:width var(--spring-fast);background:#00000012;position:absolute;inset:0 auto 0 0}.scrubber__line{top:8px;bottom:8px;left:calc(var(--p) * 100% - 9px + var(--zo));z-index:1;pointer-events:none;width:2px;transition:left var(--spring-fast), top var(--spring-fast), bottom var(--spring-fast), background-color var(--spring-fast);background:#28282840;border-radius:2px;position:absolute}.scrubber.is-hover .scrubber__line,.scrubber.is-focus .scrubber__line{top:7px;bottom:7px}.scrubber.is-hover .scrubber__line{background:#28282880}.scrubber.is-focus .scrubber__line{background:var(--ink)}.scrubber.is-dragging .scrubber__fill,.scrubber.is-dragging .scrubber__line{transition:none}.scrubber__label,.scrubber__value{z-index:1;color:var(--muted);pointer-events:none;transition:color var(--spring-fast);flex:none;font-size:14px;line-height:20px;position:relative}.scrubber__value{text-align:right;font-variant-numeric:tabular-nums;margin-left:auto}.scrubber.is-hover .scrubber__label,.scrubber.is-hover .scrubber__value,.scrubber.is-focus .scrubber__label,.scrubber.is-focus .scrubber__value{color:var(--ink)}.tabs-subtle{--spring-moderate:.16s cubic-bezier(.25, 1, .5, 1);scrollbar-width:none;align-items:center;max-width:100%;display:flex;position:relative;overflow-x:auto}.tabs-subtle__pill{pointer-events:none;background:#00000012;border-radius:8px;position:absolute;left:0}.tabs-subtle.is-ready .tabs-subtle__pill{transition:transform var(--spring-moderate), width var(--spring-moderate), opacity 80ms}.tabs-subtle__pill.is-dimmed{opacity:.8}.tabs-subtle__pill--hover{opacity:0}.tabs-subtle__pill--hover.is-visible{opacity:.4}.tabs-subtle__tab{z-index:1;cursor:pointer;height:36px;font-family:var(--font-mono);background:0 0;border:none;border-radius:8px;align-items:center;padding:0 12px;font-size:13px;line-height:20px;display:flex;position:relative}.tabs-subtle__tab:focus-visible{outline-offset:2px;outline:1px solid #6b97ff}.tabs-subtle__label{white-space:nowrap;display:inline-grid}.tabs-subtle__sizer,.tabs-subtle__text{grid-area:1/1}.tabs-subtle__sizer{visibility:hidden;font-weight:600}.tabs-subtle__text{color:var(--muted);transition:color 80ms}.tabs-subtle__tab.is-active .tabs-subtle__text{color:var(--ink)}.tabs-subtle__tab[aria-selected=true] .tabs-subtle__text{font-weight:600}@media (width>=810px) and (width<=1199.98px){.xp{gap:30px;padding:30px 0 80px}.xp__inner{padding-inline:32px}.xp__intro{padding-top:60px}.xp__stage{--stage-h:400px}}@media (width<=809.98px){.xp{gap:20px;padding:20px 0 60px}.xp__inner{padding-inline:20px}.xp__intro{padding-top:44px}.xp__stage{--stage-h:320px}}@media (prefers-reduced-motion:reduce){.xp-controls__switch,.xp-controls__switch:after{transition:none}}