@layer theme,base;@layer components{.mp .v7-head{margin:0}.mps{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:1.5rem;padding-bottom:3.4rem;display:grid;position:relative}.mps__col{text-align:center;justify-items:center;gap:1.2rem;margin:0;display:grid}.mps__scene{perspective:1400px;place-items:end center;width:100%;height:17.5rem;display:grid}.mps__pile{width:7.2rem;height:7.2rem;transform-style:preserve-3d;margin-bottom:2.2rem;position:relative;transform:rotateX(58deg)rotate(-45deg)}.mps__layer{--lift:0px;transform:translateZ(calc(var(--i) * 6.5px + var(--lift)));border-radius:.8rem;position:absolute;inset:0}.mps__layer.is-dev{background:#94a3b83d;border:1px solid #e2e8f04d}.mps__layer.is-test{background:#94a3b80a;border:1.5px solid #94a3b880}.mps__pile--us .mps__layer{transform:translateZ(calc(var(--i) * 24px + var(--lift)));background:linear-gradient(135deg,#1fb7f6,#005cf9 60%,#140aeb);border:1px solid #ffffff59;box-shadow:0 0 34px #005cf973}.mps__col figcaption{color:var(--muted);gap:.25rem;font-size:.88rem;display:grid}.mps__col strong{letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;font-weight:600}.mps__col--us strong{color:#1fb7f6}.mps__count{color:var(--muted);font-size:1rem}.mps__count b{color:var(--ink);font-family:var(--font-title);font-size:calc(2.4rem * var(--title-k));font-weight:var(--title-w);font-variant-numeric:tabular-nums;margin-right:.15em;display:inline-block}.mps__count--us{background:var(--brand-gradient);color:#0000;background-clip:text}.mps__count--us b{color:#0000}.mps__legend{justify-content:center;align-items:center;gap:.4rem;display:inline-flex}.mps__legend i{border-radius:3px;width:.7rem;height:.7rem}.mps__legend i.is-dev{background:#94a3b880}.mps__legend i.is-test{border:1.5px solid #94a3b899}.mps__done{color:#86efac}.mps__done svg{vertical-align:-2px;margin-right:.3rem;display:inline}@media (width<40rem){.mps{gap:.75rem}.mps__pile{width:5.6rem;height:5.6rem}.mps__scene{height:14rem}}.mps-replay{border:1px solid var(--line-strong);width:2.4rem;height:2.4rem;color:var(--muted);cursor:pointer;background:0 0;border-radius:50%;place-items:center;transition:color .2s,border-color .2s;display:grid;position:absolute;bottom:0;right:0}.mps-replay:hover{color:var(--ink);border-color:#1fb7f6}.mps-replay:focus-visible{outline-offset:2px;outline:2px solid #1fb7f6}.mps-replay svg{width:1.05rem;height:1.05rem}.mk{width:100%;height:auto;display:block;overflow:visible}.mk__shape{fill:var(--paint)}.mk__piece.is-now .mk__shape{filter:var(--glow)}.mma{align-items:center;gap:2.5rem;display:grid}@media (width>=64rem){.mma{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(3rem,6vw,6rem)}}.mm__side{justify-items:start;gap:1.4rem;display:grid}.mm .v7-head{margin:0}.mma__stage{width:min(100%,30rem);margin-inline:auto;position:relative}@media (width<64rem){.mm__side{display:contents}.mm__side>.v7-head{order:1}.mma__stage{order:2;width:min(80%,19rem)}.mm-steps{order:3}.mm__side>.v7-btn{order:4;justify-self:start}}.mma__stage:before{content:"";filter:blur(20px);pointer-events:none;background:radial-gradient(closest-side,#005cf938,#0000);border-radius:50%;position:absolute;inset:10% 5%}.mm-steps{gap:.3rem;width:100%;margin:0;padding:0;list-style:none;display:grid}.mm-step{width:100%;color:var(--muted);font:inherit;text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:1rem;grid-template-columns:2.4rem minmax(0,1fr);gap:.8rem;margin:0;padding:.75rem 1rem;transition:background .4s,border-color .4s,color .4s;display:grid}.mm-step:hover{border-color:var(--line)}.mm-step__n{color:#ffffff59;font-family:var(--font-title);font-variant-numeric:tabular-nums;padding-top:.15rem;font-size:1.05rem;transition:color .4s}.mm-step__body strong{color:var(--ink);font-family:var(--font-title);font-size:calc(1.25rem * var(--title-k));font-weight:var(--title-w);margin-bottom:.15rem;display:block}.mm-step__body span{font-size:.92rem;line-height:1.5}.mm-step[data-done] .mm-step__n{color:#1fb7f699}.mm-step[aria-pressed=true]{color:var(--ink);background:linear-gradient(90deg,#005cf929,#1fb7f608);border-color:#1fb7f659}.mm-step[aria-pressed=true] .mm-step__n{color:#1fb7f6}.mm-step:focus-visible{outline-offset:2px;outline:2px solid #1fb7f6}.hbk{align-items:center;gap:2.5rem;display:grid}@media (width>=64rem){.hbk{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2.5rem,4vw,4.5rem)}}.hbk-left{gap:2rem;min-width:0;display:grid}.hbk-right{min-width:0}.hbk{position:relative}.hbk-right .ox{--ox-h:24rem}@media (width>=64rem) and (height<880px){.hbk-left{gap:1.4rem}.hbk-left .hbk-stage{width:min(100%,30rem)}}.hbk-stage{width:min(100%,34rem);position:relative;container-type:inline-size}.hbk-wall{--bd:2.6cqi;--g:1.5cqi;--gv:1.5cqi;--bw:calc((100cqi - var(--bd) - 3 * var(--g)) / 4);--bh:calc(var(--bw) * 1.6 / var(--rows,4));height:calc(var(--rows,4) * var(--bh) + (var(--rows,4) - 1) * var(--gv) + var(--bd));position:relative}.hbk-wall .brk{--bd:2.6cqi;z-index:calc(var(--row) * 10 + var(--x) * 2 + 1);left:calc(var(--x) * (var(--bw) + var(--g)));bottom:calc(var(--row) * (var(--bh) + var(--gv)));width:var(--bw);height:var(--bh);font-size:clamp(.68rem,2.6cqi,.98rem);transition:translate .35s cubic-bezier(.3,1.5,.5,1),background .3s,opacity .5s,filter .5s;position:absolute}@container (width<30rem){.hbk-wall{--bh:calc(var(--bw) * .56)}.hbk-wall .brk{font-size:.66rem}.hbk-wall .brk__label{hyphens:manual;padding-inline:.25rem}}:where(:root[data-motion=full]) .hbk-wall a.brk:is(:hover,:focus-visible){translate:0 calc(-.5 * var(--gv))}.hbk[data-tool] .hbk-wall .brk:not([data-on]){opacity:.28;filter:saturate(.35)}.hbk .bw-stage__ground{margin-top:.35rem}.hbk-caption{min-height:5.2em;color:var(--muted);align-content:start;gap:.3rem;margin:1.1rem 0 0;font-size:.95rem;line-height:1.6;display:grid}.hbk-caption small{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:.75rem;font-weight:600}.hbk-caption b{color:var(--ink);font-family:var(--font-title);font-size:1.08rem;font-weight:var(--title-w)}.hbk-caption span{color:color-mix(in oklab, var(--tc) 55%, #fff);font-weight:500}.hbk-caption em{color:var(--ink);font-style:normal}}@layer utilities;