.clg{--p: .5;position:relative;min-width:0;padding:clamp(16px,2vw,26px);border:1px solid var(--line);background:var(--s1);overflow:hidden;isolation:isolate}.clg:before{content:"";position:absolute;inset:8px;z-index:100;pointer-events:none;background:linear-gradient(var(--dim),var(--dim)) left top / 13px 1px no-repeat,linear-gradient(var(--dim),var(--dim)) left top / 1px 13px no-repeat,linear-gradient(var(--dim),var(--dim)) right top / 13px 1px no-repeat,linear-gradient(var(--dim),var(--dim)) right top / 1px 13px no-repeat,linear-gradient(var(--dim),var(--dim)) left bottom / 13px 1px no-repeat,linear-gradient(var(--dim),var(--dim)) left bottom / 1px 13px no-repeat,linear-gradient(var(--dim),var(--dim)) right bottom / 13px 1px no-repeat,linear-gradient(var(--dim),var(--dim)) right bottom / 1px 13px no-repeat;opacity:.72}.clg-stage{position:relative;width:100%;aspect-ratio:4 / 3;overflow:hidden;background:radial-gradient(circle at 50% 48%,color-mix(in oklab,var(--brand) 18%,transparent),transparent 56%),repeating-linear-gradient(0deg,transparent 0 3px,rgb(255 255 255 / .018) 3px 4px),radial-gradient(circle,color-mix(in oklab,var(--dim) 30%,transparent) .65px,transparent .8px) 0 0 / 16px 16px,var(--void)}:root[data-theme=light] .clg-stage{background:radial-gradient(circle at 50% 48%,color-mix(in oklab,var(--brand) 10%,transparent),transparent 58%),repeating-linear-gradient(0deg,transparent 0 3px,rgb(20 18 28 / .025) 3px 4px),radial-gradient(circle,color-mix(in oklab,var(--dim) 22%,transparent) .65px,transparent .8px) 0 0 / 16px 16px,color-mix(in oklab,var(--s1) 90%,white)}.clg-piece{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);z-index:var(--z);width:calc(var(--w) * 1%);max-width:min(calc(var(--w0) * 1.25px),calc(100% - 4px));translate:-50% calc(-50% + (var(--p, .5) - .5) * var(--d) * -90px);rotate:calc(var(--r) * 1deg + (var(--p, .5) - .5) * var(--d) * 2deg);border:1px solid color-mix(in oklab,var(--brand) 40%,transparent);border-radius:10px;overflow:hidden;background:#101017;box-shadow:0 24px 60px -20px #000000b3;transform-origin:center}:root[data-theme=light] .clg-piece{box-shadow:0 22px 55px -24px #231c1257}.clg-piece.is-pixel{border-radius:0}.clg-piece.is-round{border-radius:50%}.clg-piece img{display:block;width:100%;height:auto}.clg-piece.is-pixel img{image-rendering:pixelated}.clg-bar{height:22px;display:flex;align-items:center;gap:5px;padding:0 8px;border-bottom:1px solid #292934;background:#15151d}.clg-bar i{width:5px;height:5px;border-radius:50%;background:#4d4d5b}.clg-browser-bar span{width:38%;height:6px;margin-left:auto;margin-right:auto;border-radius:4px;background:#292934}.clg-f-tablet{padding:10px;border-radius:18px;background:#0c0c12}.clg-f-tablet img{border-radius:9px}.clg-f-phone{padding:8px;border-radius:22px;background:#09090e}.clg-f-phone img{border-radius:15px}.clg-notch{position:absolute;left:50%;top:8px;z-index:2;width:34%;height:9px;translate:-50% 0;border-radius:0 0 7px 7px;background:#09090e}.clg-card{padding:10px;border:0;background:transparent;height:100%}.clg-card:before{inset:5px;opacity:.45}.clg-card .clg-stage{height:100%;min-height:100%}.clg-card .clg-piece{translate:-50% -50%;rotate:calc(var(--r) * 1deg);box-shadow:0 14px 34px -16px #000000b8}@media(max-width:760px){.clg{padding:13px}.clg-stage{width:min(100%,43.5svh);margin-inline:auto;aspect-ratio:3 / 4}.clg-piece{left:calc(var(--mx) * 1%);top:calc(var(--my) * 1%);width:calc(var(--mw) * 1%);translate:-50% calc(-50% + (var(--p, .5) - .5) * var(--d) * -45px);rotate:calc(var(--mr) * 1deg + (var(--p, .5) - .5) * var(--d) * 2deg)}.clg-piece.hide-mobile{display:none}.clg-card .clg-stage{width:100%;aspect-ratio:4 / 3}.clg-card .clg-piece{translate:-50% -50%;rotate:calc(var(--mr) * 1deg)}}@media(prefers-reduced-motion:reduce){.clg-piece{translate:-50% -50%;rotate:calc(var(--r) * 1deg)}@media(max-width:760px){.clg-piece{rotate:calc(var(--mr) * 1deg)}}}