micro-app[data-astro-cid-lzu7xiod]{--level:1;--move:0;--background-image:url(/assets/img/blog/html-web-components-microapp/img-default.webp);--text-color:#cfdddd;--bg-color:#042020;--box-color:#062d2d;--nest-color:#2e3838;--highlight-color:#568181;--btn-color:#2d4343;--hover-color:#375353;--border-color:black;--shadow-size:2px;--shadow-color:black;background-color:var(--bg-color);color:var(--text-color);font-family:var(--font-family-en);font-size:var(--font-size-p-s);display:block}.c-preview[data-astro-cid-lzu7xiod]{--base-size:calc(100% / var(--level));--mask-size:calc(var(--base-size) / 10);--mask-min-size:4px;background-color:#000;padding:20px}.c-preview-inner[data-astro-cid-lzu7xiod]{aspect-ratio:1;background-color:var(--bg-color);cursor:move;inline-size:100%;max-inline-size:400px;margin-inline:auto;display:grid;container-type:inline-size}[data-astro-cid-lzu7xiod]:is(.c-preview-frame,.c-preview-sheet){grid-area:1/1/-1/-1}.c-preview-frame[data-astro-cid-lzu7xiod]{--mask-pos:calc(var(--base-size) * var(--index));--bg-pos:calc(100cqi / var(--level) * var(--index));mask-image:linear-gradient(to right, black var(--base-size), transparent var(--base-size));mask-position:var(--mask-pos) 0%;mask-size:max(var(--mask-min-size), var(--mask-size)) 100%;background-image:var(--background-image);background-position:calc(50% + var(--bg-pos)) calc(50% + var(--bg-pos) * -1);background-size:calc(var(--background-size,100) * 1%) auto;background-repeat:repeat}.c-preview-sheet[data-astro-cid-lzu7xiod]{mask-image:linear-gradient(to right, transparent var(--base-size), black var(--base-size));mask-position:calc(var(--base-size) * var(--move)) 0%;mask-size:max(var(--mask-min-size), var(--mask-size)) 100%;background-color:#000;transition:opacity .2s}micro-app[data-astro-cid-lzu7xiod]:has([name=sheet]:not(:checked)) .c-preview-sheet[data-astro-cid-lzu7xiod]{opacity:0}.c-not-supported[data-astro-cid-lzu7xiod]{display:none}@supports not (mask-position:0 0){.c-not-supported[data-astro-cid-lzu7xiod]{background-color:#000;place-items:center;padding:20px;display:grid}.c-preview[data-astro-cid-lzu7xiod]{display:none}}.c-ui-container[data-astro-cid-lzu7xiod]{container:ui/inline-size}.c-ui[data-astro-cid-lzu7xiod]{gap:20px;padding:20px;display:grid}.c-ui-column[data-astro-cid-lzu7xiod]{border:solid 4px var(--border-color);background-color:var(--box-color);gap:20px;padding:20px;display:grid}@container ui (inline-size>=600px){.c-ui[data-astro-cid-lzu7xiod]{grid-template-columns:240px 1fr}}.c-ui-group[data-astro-cid-lzu7xiod]{gap:20px;display:grid}.c-ui-group[data-astro-cid-lzu7xiod].--nest{border:solid 2px var(--border-color);background-color:var(--nest-color);padding:20px}.c-label[data-astro-cid-lzu7xiod]{text-transform:uppercase;inline-size:fit-content;margin-block-end:8px;line-height:1.2;display:block}.c-image[data-astro-cid-lzu7xiod]{display:grid}.c-image-preview[data-astro-cid-lzu7xiod]{--placeholder:url(/assets/img/common/img-placeholder-01.svg);aspect-ratio:1;background-image:var(--background-image);background-color:#000;background-position:50%;background-repeat:no-repeat;background-size:contain;border:4px solid;border-radius:8px;inline-size:100%;max-inline-size:200px;margin-inline:auto;position:relative}.c-image-preview-border[data-astro-cid-lzu7xiod]{stroke:var(--highlight-color);stroke-dasharray:4 10;stroke-width:6px;pointer-events:none;border-radius:8px;animation:1s linear infinite paused drag;display:block;position:absolute;inset:0}micro-app[data-astro-cid-lzu7xiod]:not([drag]) .c-image-preview-border[data-astro-cid-lzu7xiod]{display:none}micro-app[data-astro-cid-lzu7xiod][drag] .c-image-preview[data-astro-cid-lzu7xiod]{background-image:var(--placeholder);background-color:#0000;border:none}micro-app[data-astro-cid-lzu7xiod][drag] .c-image-preview-border[data-astro-cid-lzu7xiod]{animation-play-state:running}@keyframes drag{0%{stroke-dashoffset:-6px}to{stroke-dashoffset:-20px}}.c-image-upload[data-astro-cid-lzu7xiod]{margin-block-start:20px}.c-image-upload-label[data-astro-cid-lzu7xiod]{cursor:pointer;margin-inline:auto}.c-image-upload-btn[data-astro-cid-lzu7xiod]{border:solid 1px var(--highlight-color);border-block-end-color:var(--shadow-color);block-size:22px;inline-size:100%;max-inline-size:85px;box-shadow:0 var(--shadow-size) 0 var(--shadow-color);background-color:var(--btn-color);appearance:none;cursor:pointer;translate:0 calc(-1 * var(--shadow-size));border-radius:4px;margin-inline:auto;transition-property:box-shadow,background-color,translate;transition-duration:.2s;transition-timing-function:ease;display:block;position:relative}.c-image-upload-btn[data-astro-cid-lzu7xiod]:hover{background-color:var(--hover-color)}.c-image-upload-btn[data-astro-cid-lzu7xiod]:active{box-shadow:none;translate:0}.c-image-upload-btn[data-astro-cid-lzu7xiod] input[type=file]{opacity:0;block-size:100%;inline-size:100%;position:absolute;inset:0}.c-image-upload-btn[data-astro-cid-lzu7xiod]:has(input[type=file]:focus-visible){outline:1px auto highlight;outline:auto 1px -webkit-focus-ring-color;outline-offset:3px}.c-checkbox[data-astro-cid-lzu7xiod]{gap:var(--space-xs);cursor:pointer;grid-template-columns:auto 1fr;align-items:center;inline-size:fit-content;display:grid}.c-checkbox-input[data-astro-cid-lzu7xiod]{aspect-ratio:1;appearance:none;background-color:#000;border:2px solid #475252;border-radius:0;inline-size:16px;position:relative}.c-checkbox-input[data-astro-cid-lzu7xiod]:checked:after{content:"";aspect-ratio:1;background-color:#ffc400;inline-size:8px;margin:auto;display:block;position:absolute;inset:0}.c-checkbox[data-astro-cid-lzu7xiod] .c-label[data-astro-cid-lzu7xiod]{margin-block-end:0}mask-demo[data-astro-cid-zqfd55or]{--mask-base-size:50%;display:block;container:demo/inline-size}.mask-image[data-astro-cid-zqfd55or]{align-items:center;display:grid}@container demo (inline-size>=600px){.mask-image[data-astro-cid-zqfd55or]{grid-template-columns:1fr auto}}.mask-image-preview[data-astro-cid-zqfd55or]{aspect-ratio:1;inline-size:100%;padding:var(--space-l);align-items:center;display:grid}.mask-image-stripe-container[data-astro-cid-zqfd55or]{aspect-ratio:2;inline-size:100%;max-inline-size:400px;margin:auto;container-type:inline-size}.mask-image-stripe[data-astro-cid-zqfd55or]{block-size:100%;inline-size:100%;transform-style:preserve-3d;perspective:200cqi;grid-template-rows:repeat(2,1fr);display:grid}.mask-image-stripe-item[data-astro-cid-zqfd55or]{mask-size:calc(var(--mask-base-size) / 10) 100%;background-color:#000;grid-area:1/1/-1/-1;transition:transform .4s}.mask-image-stripe-item[data-astro-cid-zqfd55or]:first-child{mask-image:linear-gradient(to right, black var(--mask-base-size), transparent var(--mask-base-size));background-image:url(/assets/img/blog/html-web-components-microapp/img-default.webp);background-position:50%;background-size:100%}.mask-image-stripe-item[data-astro-cid-zqfd55or]:nth-child(2){mask-image:linear-gradient(to right, transparent var(--mask-base-size), black var(--mask-base-size))}.mask-image[data-astro-cid-zqfd55or]:has([data-radio=split]:checked) .mask-image-stripe-item[data-astro-cid-zqfd55or]:nth-child(2){transform:translateY(-12.5cqi)}.mask-image[data-astro-cid-zqfd55or]:has([data-radio=split]:checked) .mask-image-stripe-item[data-astro-cid-zqfd55or]:first-child{transform:translateY(12.5cqi)}.mask-image[data-astro-cid-zqfd55or]:has([data-radio="3d"]:checked) .mask-image-stripe-item[data-astro-cid-zqfd55or]:nth-child(2){transform:translate3d(-1cqi,-12.5cqi,-1cqi)rotate3d(1,-1,1,60deg)}.mask-image[data-astro-cid-zqfd55or]:has([data-radio="3d"]:checked) .mask-image-stripe-item[data-astro-cid-zqfd55or]:first-child{transform:translate3d(1cqi,12.5cqi,-1cqi)rotate3d(1,-1,1,60deg)}.mask-image-radio-container[data-astro-cid-zqfd55or]{row-gap:var(--space-s);padding:var(--space-l);background-color:#062d2d;display:grid}.mask-image-radio[data-astro-cid-zqfd55or]{gap:var(--space-xs);inline-size:fit-content;font-family:var(--font-family-en);font-size:var(--font-size-p-s);text-transform:uppercase;cursor:pointer;grid-template-columns:auto 1fr;align-items:center;display:grid}.mask-image-radio-input[data-astro-cid-zqfd55or]{aspect-ratio:1;appearance:none;background-color:#000;border:2px solid #475252;border-radius:0;inline-size:16px;position:relative}.mask-image-radio-input[data-astro-cid-zqfd55or]:checked:after{content:"";aspect-ratio:1;background-color:#ffc400;inline-size:8px;margin:auto;display:block;position:absolute;inset:0}.mask-image-not-supported[data-astro-cid-zqfd55or]{display:none}@supports not (mask-position:0 0){.mask-image-not-supported[data-astro-cid-zqfd55or]{background-color:#062d2d;border-block-end:1px solid #cfdddd;place-items:center;padding:20px;display:grid}.mask-image-preview[data-astro-cid-zqfd55or]{display:none}}