.code{clip-path:polygon(0 0,calc(100% - 1.25rem) 0,100% 1.25rem,100% 100%,1.25rem 100%,0 calc(100% - 1.25rem));direction:ltr;background:#06067e;border:2px solid #2ce87e59;width:100%;margin:0;overflow:hidden;box-shadow:0 2rem 4rem -2rem #00000080;container-type:inline-size}.code__bar{color:#fff9;border-bottom:1px solid #2ce87e40;align-items:center;gap:.45rem;padding:.7rem 1rem;font-family:ui-monospace,Consolas,monospace;font-size:.8rem;display:flex}.code__bar i{background:#ffffff40;border-radius:50%;width:.65rem;height:.65rem}.code__bar i:first-child{background:var(--color-neon-green)}.code__bar span{margin-left:.6rem}.code__body{color:#e7e7ff;white-space:pre-wrap;word-break:break-word;min-height:17em;margin:0;padding:1rem 1.2rem 1.4rem;font-family:ui-monospace,Consolas,Courier New,monospace;font-size:clamp(9px,2.35cqi,17px);line-height:1.6}.code__line{display:block}.code__ln{color:#ffffff47;-webkit-user-select:none;user-select:none;width:2.2em;display:inline-block}.code__k{color:var(--color-neon-green)}.code__v{color:#fff}.code__f{color:var(--color-lime)}.code__s{color:#9be7ff}.code__p{color:#c7c7f0}.code__c{color:#ffffff73;font-style:italic}.code__caret{vertical-align:text-bottom;background:var(--color-neon-green);width:.55em;height:1.1em;margin-left:1px;animation:.9s step-end infinite code-blink;display:inline-block}@keyframes code-blink{50%{opacity:0}}.site{letter-spacing:0;color:#111827;background:#fff;flex-direction:column;height:100%;font-family:system-ui,Segoe UI,Roboto,sans-serif;font-size:clamp(7px,1.9cqi,15px);display:flex;overflow:hidden}.site__bar{background:#f3f4f6;border-bottom:1px solid #e5e7eb;align-items:center;gap:1em;padding:.7em 1em;display:flex}.site__dots{gap:.35em;display:flex}.site__dots i{background:#d1d5db;border-radius:50%;width:.7em;height:.7em}.site__url{color:#6b7280;background:#fff;border-radius:999px;flex:1;align-items:center;gap:.5em;padding:.35em .9em;font-size:.85em;display:flex}.site__lock{background:var(--live-up,#16a34a);border-radius:.15em;width:.6em;height:.7em}.site__score{color:#16a34a;background:#16a34a1f;border-radius:999px;align-items:baseline;gap:.3em;padding:.25em .7em;font-weight:800;display:inline-flex}.site__score small{text-transform:uppercase;font-size:.7em;font-weight:600}.site__view{flex:1;min-height:0;position:relative;overflow:hidden}.site__page{flex-direction:column;gap:1.6em;padding:1.2em 1.6em 2em;animation:14s ease-in-out infinite site-scroll;display:flex}@keyframes site-scroll{0%,18%{transform:translateY(0)}50%,68%{transform:translateY(-38%)}to{transform:translateY(0)}}.site__nav{align-items:center;gap:1.4em;display:flex}.site__nav b{color:#0909aa;margin-right:auto;font-weight:800}[dir=rtl] .site__nav b{margin-left:auto;margin-right:0}.site__nav span{background:#e5e7eb;border-radius:999px;width:3.5em;height:.5em}.site__nav i{color:#fff;background:#0909aa;padding:.35em .9em;font-size:.85em;font-style:normal}.site__hero{grid-template-columns:1.2fr 1fr;align-items:center;gap:1.5em;display:grid}.site__hero-text{flex-direction:column;gap:.7em;display:flex}.site__h1{transform-origin:0;background:#0909aa;border-radius:.2em;width:90%;height:1.5em;animation:1.2s cubic-bezier(.22,1,.36,1) both site-grow;display:block}[dir=rtl] .site__h1{transform-origin:100%}.site__h1--short{background:#2ce87e;width:60%;animation-delay:.15s}@keyframes site-grow{0%{transform:scaleX(0)}}.site__p{background:#e5e7eb;border-radius:999px;width:95%;height:.55em;display:block}.site__p--short{width:70%}.site__btn{color:#0909aa;clip-path:polygon(0 0,calc(100% - .5em) 0,100% .5em,100% 100%,.5em 100%,0 calc(100% - .5em));background:#2ce87e;align-self:flex-start;margin-top:.4em;padding:.55em 1.2em;font-weight:800;animation:14s ease-in-out infinite site-press}[dir=rtl] .site__btn{clip-path:polygon(100% 0,.5em 0,0 .5em,0 100%,calc(100% - .5em) 100%,100% calc(100% - .5em))}.site__btn--alt{background:#def44c;animation:none}@keyframes site-press{0%,9%,12%,to{filter:none;transform:none}10%{filter:brightness(.9);transform:scale(.94)}}.site__hero-img{aspect-ratio:4/3;background:linear-gradient(135deg,#0909aa,#2d2dd4);border-radius:.4em;position:relative;overflow:hidden}[dir=rtl] .site__hero-img{background:linear-gradient(-135deg,#0909aa,#2d2dd4)}.site__blob{background:#2ce87e;border-radius:50%;animation:6s ease-in-out infinite site-blob;position:absolute;inset:20%}@keyframes site-blob{50%{background:#def44c;border-radius:35% 65% 55% 45%;transform:translate(10%,-6%)scale(1.1)}}.site__cards{grid-template-columns:repeat(3,1fr);gap:1em;display:grid}.site__card{animation:.8s cubic-bezier(.22,1,.36,1) both site-card;animation-delay:calc(.3s + var(--i) * .12s);border:1px solid #e5e7eb;border-radius:.4em;flex-direction:column;gap:.5em;padding:.6em;display:flex}@keyframes site-card{0%{opacity:0;transform:translateY(1em)}}.site__card-img{aspect-ratio:16/10;background:#eef2ff;border-radius:.3em}.site__card:nth-child(2) .site__card-img{background:#dcfce7}.site__band{background:#0909aa;justify-content:space-between;align-items:center;gap:1em;padding:1.4em;display:flex}.site__band .site__h1{width:40%}.site__cursor{clip-path:polygon(0 0,100% 62%,58% 66%,80% 100%,62% 100%,42% 70%,12% 90%);background:#111827;width:1.4em;height:1.4em;animation:14s ease-in-out infinite site-cursor;position:absolute;top:0;left:0}[dir=rtl] .site__cursor{clip-path:polygon(100% 0,0 62%,42% 66%,20% 100%,38% 100%,58% 70%,88% 90%);left:auto;right:0}@keyframes site-cursor{0%{transform:translate(70cqi,40cqi)}8%,12%{transform:translate(12cqi,27cqi)}30%{transform:translate(45cqi,20cqi)}55%{transform:translate(60cqi,30cqi)}80%{transform:translate(30cqi,15cqi)}to{transform:translate(70cqi,40cqi)}}.dsn{letter-spacing:0;color:#374151;background:#f5f5f7;grid-template-columns:15% 1fr 16%;height:100%;font-family:system-ui,Segoe UI,Roboto,sans-serif;font-size:clamp(7px,1.7cqi,14px);display:grid;overflow:hidden}.dsn__layers,.dsn__props{background:#fff;flex-direction:column;gap:.55em;padding:1em .8em;font-size:.85em;display:flex}.dsn__layers{border-right:1px solid #e5e7eb}[dir=rtl] .dsn__layers{border-left:1px solid #e5e7eb;border-right:none}.dsn__props{border-left:1px solid #e5e7eb}[dir=rtl] .dsn__props{border-left:none;border-right:1px solid #e5e7eb}.dsn__layers b,.dsn__props b{text-transform:uppercase;letter-spacing:.06em;color:#9ca3af;font-size:.8em}.dsn__layers span{border-radius:.3em;padding:.3em .5em;transition:background-color .3s,color .3s}.dsn__layers span.is-active{color:#0909aa;background:#eef2ff}.dsn__canvas{background-image:radial-gradient(#0909aa1f 1px,#0000 1.5px);background-size:1.2em 1.2em;justify-content:center;align-items:center;gap:6%;padding:6%;display:flex;position:relative}.dsn__frame{aspect-ratio:9/16;box-sizing:border-box;background:#fff;flex-direction:column;flex:1;gap:5%;max-width:34%;padding:7% 8%;display:flex;position:relative;box-shadow:0 .6em 1.6em -.6em #00000040}.dsn__tag{color:#6b7280;font-size:.8em;position:absolute;top:-1.6em;left:0}[dir=rtl] .dsn__tag{left:auto;right:0}.dsn__frame i{border-radius:.2em;display:block}.dsn__frame--wire i{border:1.5px dashed #9ca3af}.w1,.u1{height:8%}.w2,.u2{height:30%}.w3,.u3{width:70%;height:6%}.w4,.u4{height:18%}.w5,.u5{align-self:flex-start;width:55%;height:9%}.dsn__frame--ui i{animation:8s cubic-bezier(.34,1.56,.64,1) infinite dsn-pop}.u1{background:#0909aa;animation-delay:0s!important}.u2{background:linear-gradient(135deg,#2ce87e,#def44c);animation-delay:.3s!important}[dir=rtl] .u2{background:linear-gradient(-135deg,#2ce87e,#def44c)}.u3{background:#0909aa;animation-delay:.6s!important}.u4{background:#eef2ff;animation-delay:.9s!important}.u5{background:#2ce87e;animation-delay:1.2s!important}@keyframes dsn-pop{0%{opacity:0;transform:scale(.6)}8%,88%{opacity:1;transform:none}to{opacity:0;transform:none}}.dsn__arrow{background:#0909aa;width:8%;height:2px;position:relative}.dsn__arrow:after{content:"";border:5px solid #0000;border-left-color:#0909aa;position:absolute;top:-4px;right:-2px}[dir=rtl] .dsn__arrow:after{border-left-color:currentColor;border-right-color:#0909aa;left:-2px;right:auto}.dsn__block{position:relative}.dsn__select{z-index:2;box-sizing:border-box;pointer-events:none;background:linear-gradient(#fff,#fff) 0 0/5px 5px no-repeat,linear-gradient(#fff,#fff) 100% 0/5px 5px no-repeat,linear-gradient(#fff,#fff) 0 100%/5px 5px no-repeat,linear-gradient(#fff,#fff) 100% 100%/5px 5px no-repeat;border:1.5px solid #0909aa;transition:top .7s cubic-bezier(.65,0,.35,1),left .7s cubic-bezier(.65,0,.35,1),width .7s cubic-bezier(.65,0,.35,1),height .7s cubic-bezier(.65,0,.35,1),opacity .3s;position:absolute}[dir=rtl] .dsn__select{background:linear-gradient(#fff,#fff) 100% 0/5px 5px no-repeat,linear-gradient(#fff,#fff) 0 0/5px 5px no-repeat,linear-gradient(#fff,#fff) 100% 100%/5px 5px no-repeat,linear-gradient(#fff,#fff) 0 100%/5px 5px no-repeat;transition:top .7s cubic-bezier(.65,0,.35,1),right .7s cubic-bezier(.65,0,.35,1),width .7s cubic-bezier(.65,0,.35,1),height .7s cubic-bezier(.65,0,.35,1),opacity .3s}.dsn__cursor{clip-path:polygon(0 0,100% 62%,58% 66%,80% 100%,62% 100%,42% 70%,12% 90%);background:#0909aa;width:1.2em;height:1.2em;position:absolute;bottom:-1.1em;right:-.8em}[dir=rtl] .dsn__cursor{clip-path:polygon(100% 0,0 62%,42% 66%,20% 100%,38% 100%,58% 70%,88% 90%);left:-.8em;right:auto}.dsn__swatches{grid-template-columns:repeat(2,1fr);gap:.4em;display:grid}.dsn__swatches i{aspect-ratio:1;border-radius:.3em;animation:4s ease-in-out infinite dsn-swatch}.dsn__swatches i:nth-child(2){animation-delay:1s}.dsn__swatches i:nth-child(3){animation-delay:2s}.dsn__swatches i:nth-child(4){animation-delay:3s}@keyframes dsn-swatch{0%,20%,to{box-shadow:none;transform:none}10%{transform:scale(1.12);box-shadow:0 0 0 2px #fff,0 0 0 3.5px #0909aa}}.dsn__type{font-family:var(--heading);color:#0909aa;font-size:2em;font-weight:900}.dsn__slider{background:#e5e7eb;border-radius:999px;height:.35em;position:relative}.dsn__slider i{background:#0909aa;border-radius:50%;width:.9em;height:.9em;animation:5s ease-in-out infinite dsn-slide;position:absolute;top:50%;transform:translate(-50%,-50%)}[dir=rtl] .dsn__slider i{transform:translate(50%,-50%)}@keyframes dsn-slide{0%,to{left:20%}50%{left:80%}}@container (width<=520px){.dsn{grid-template-columns:1fr}.dsn__layers,.dsn__props{display:none}.dsn__frame{max-width:40%}.site__cards{grid-template-columns:repeat(2,1fr)}.site__cards .site__card:nth-child(3){display:none}}@media (prefers-reduced-motion:reduce){.dsn__select{transition:none}.code__caret,.site__page,.site__btn,.site__blob,.site__card,.site__h1,.site__cursor,.dsn__frame--ui i,.dsn__swatches i,.dsn__slider i{animation:none}}