.demo-laptop{position:relative}.demo-mcp{z-index:20;width:600px;height:540px;box-shadow:var(--shadow-popover);position:absolute;top:110px;right:56px}.demo-kabuk{height:100%}.demo-kabuk>div{height:100%;min-height:0}.demo-kabuk>div>aside,.demo-kabuk header{position:relative}.demo-kabuk>div>aside.hidden{height:100%;display:flex}.demo-kabuk header .lg\:hidden{display:none}.demo-kabuk main{min-height:0;overflow:hidden}.demo-cekmece{z-index:10;width:min(100%,40rem);transition:transform .36s cubic-bezier(.2,.8,.2,1);position:absolute;top:0;bottom:0;right:0;transform:translate(100%)}.demo-cekmece[data-open]{transform:none}.demo-klasor{width:96px;height:72px;display:block;position:relative}.demo-klasor i{border-radius:11px;position:absolute}.demo-klasor i:first-child{background:#a77d2f;border-radius:8px 8px 0 0;width:42px;height:21px;top:3px;left:3px}.demo-klasor i:nth-child(2){background:#bd8d36;inset:15px 0 0;box-shadow:0 14px 24px -16px #5a3a08bf}.demo-klasor i:nth-child(3){background:#cb9a41;inset:27px 0 0}.demo-sandbox-kap{z-index:12;display:flex;position:absolute;inset:12px}.demo-sandbox{flex:1}@media (max-width:1023px){.demo-stage--laptop{height:auto;padding:16px}.demo-stage--laptop .demo-stage__window{width:100%;position:relative;top:0;left:0}}@media (prefers-reduced-motion:reduce){.demo-cekmece{transition:none}}
.demo-band{gap:var(--space-32);padding:var(--space-32) var(--space-24);border:1px solid var(--border);border-radius:var(--r-panel);background:var(--surface);grid-template-columns:minmax(0,1fr);scroll-margin-top:96px;display:grid}@media (min-width:1024px){.demo-band{align-items:center;gap:var(--space-48);padding:var(--space-24);padding-left:var(--space-48);grid-template-columns:minmax(0,383fr) minmax(0,840fr)}.demo-band[data-side=left]{padding-left:var(--space-24);padding-right:var(--space-48);grid-template-columns:minmax(0,840fr) minmax(0,383fr)}.demo-band[data-side=left] .demo-band__text{order:2}}.demo-band__text{gap:var(--space-20);flex-direction:column;min-width:0;display:flex}.demo-band__thesis{color:var(--text-2);text-wrap:pretty;margin:0;font-size:24px;font-weight:400;line-height:1.3}.demo-band__thesis strong{color:var(--text);font-weight:400}.demo-band__link{color:var(--brand);align-self:flex-start;font-size:24px;line-height:1.3;text-decoration:none;transition:opacity .15s}.demo-band__link:hover{opacity:.8}.demo-band__link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px;border-radius:var(--r-control)}@media (max-width:1023px){.demo-band__thesis,.demo-band__link{font-size:20px}}.demo-band__caps{border-top:1px solid var(--border);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.demo-band__caps .demo-cap{border-bottom:1px solid var(--border);padding-left:var(--space-16);position:relative}.demo-band__caps .demo-cap:before{content:"";background:0 0;width:2px;height:14px;margin-top:-7px;transition:background-color .2s;position:absolute;top:50%;left:0}.demo-band__caps .demo-cap[aria-current=true]{color:var(--text)}.demo-band__caps .demo-cap[aria-current=true]:before{background:var(--text)}.demo-band__caps .demo-cap:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}.demo-stage{border-radius:var(--r-control);background:radial-gradient(120% 90% at 0% 0%, var(--surface-3), transparent 60%), var(--surface-2);height:600px;position:relative;overflow:hidden}.demo-stage__window{width:calc(100% - 80px);position:absolute;top:40px;left:40px}.demo-band[data-side=left] .demo-stage__window{left:40px}@media (max-width:1023px){.demo-stage{height:520px}.demo-stage__window,.demo-band[data-side=left] .demo-stage__window{width:760px;top:24px;left:16px;right:auto}}.demo-cursor{z-index:30;pointer-events:none;filter:drop-shadow(0 1px 2px #0000008c);transition:transform .62s cubic-bezier(.3,.7,.2,1);position:absolute;top:0;left:0}.demo-cursor__pulse{border:1px solid var(--text);border-radius:50%;width:20px;height:20px;animation:.42s ease-out forwards demo-pulse;position:absolute;top:-9px;left:-9px}@keyframes demo-pulse{0%{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(1.4)}}.demo-drawer{border-left:1px solid var(--border);background:var(--bg);z-index:10;flex-direction:column;width:max(340px,55%);transition:transform .36s cubic-bezier(.2,.8,.2,1);display:flex;position:absolute;top:0;bottom:0;right:0;transform:translate(100%)}.demo-drawer[data-open=true]{transform:translate(0)}.demo-scrim{opacity:0;pointer-events:none;z-index:9;background:#00000073;transition:opacity .3s;position:absolute;inset:0}.demo-scrim[data-open=true]{opacity:1}.demo-in{animation:.26s ease-out both demo-in}@keyframes demo-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.demo-caret:after{content:"";vertical-align:-.15em;background:var(--text);width:1px;height:1.05em;margin-left:1px;animation:1s step-end infinite demo-blink;display:inline-block}@keyframes demo-blink{50%{opacity:0}}@media (prefers-reduced-motion:reduce){.demo-cursor,.demo-drawer,.demo-scrim,.demo-band__caps .demo-cap:before{transition:none}.demo-in,.demo-cursor__pulse,.demo-caret:after{animation:none}}