@layer mdl,base,demo;@layer base{:root{--surface-2: #e9ecef}@media(prefers-color-scheme:dark){:root{--surface-2: #343a40}}*,*:after,*:before{box-sizing:border-box;transform-style:preserve-3d;touch-action:none}body{display:grid;place-items:center;align-content:start;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif,system-ui;position:relative;overflow:hidden}}@layer demo{[popovertarget]{inset:unset;left:100%;top:100%;translate:calc(-100% - 2rem) calc(-100% - 6rem);margin:0}[popover=auto]{padding:1.25rem}:where([popover]){border:0}[popover=auto]::backdrop{background:#1a1a1a80;opacity:calc(1 - var(--hide, 1));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:opacity .5s,display .5s allow-discrete,overlay .5s allow-discrete}.popup{--depth: 10vmin;--color: #f783ac;width:20vmin;aspect-ratio:4 / 3;background:transparent;position:fixed;inset:unset;top:50%;padding:0;margin:0;overflow:visible;left:50%;border:0;transition:display .25s allow-discrete,overlay .25s allow-discrete,transform .25s cubic-bezier(.5,1.5,.75,1.25);transform:translate3d(-50%,-50%,100vmin) rotateX(-24deg) rotateY(24deg) translateY(calc(var(--hide, 1) * 100vh)) rotateY(calc(var(--x, 0) * 1deg)) rotateX(calc(var(--y, 0) * -1deg))}[popover]:popover-open{--hide: 0}[popover]:popover-open::backdrop{--hide: 0}@starting-style{[popover]:popover-open{--hide: 1}[popover]:popover-open::backdrop{--hide: 1}}.blinker{transform-box:fill-box;transform-origin:50% 50%;animation:blink 6s var(--delay, -2s) infinite}@keyframes blink{0%,46%,48%,50%,to{scale:1 1}47%,49%{scale:1 .01}}.popup__text{opacity:0;padding:1.25rem;font-size:max(1.5rem,min(6vw,2.5rem));font-weight:600;color:#f8f9fa}.sushi-face{width:75%}.popup__tail{height:50%;aspect-ratio:1;position:absolute;top:50%;left:35%;transform:translate3d(-50%,-50%,-2.5vmin);--depth: 5vmin}.popup__tail :is(.cuboid__side:nth-of-type(2),.cuboid__side:nth-of-type(4)){background:transparent;filter:none}.popup__tail .cuboid__side:nth-of-type(2):after{content:"";background:#f783ac;position:absolute;top:0;left:0;height:100%;width:142%;transform-origin:0 50%;transform:rotateY(45deg)}.popup__tail :is(.cuboid__side:nth-of-type(1),.cuboid__side:nth-of-type(3)){--b: .7;clip-path:polygon(0 0,100% 100%,0 100%)}[popover=auto]>.cuboid>.cuboid__side:nth-of-type(3){filter:none}[popover=auto]>.cuboid{transform-origin:35% 100%}[popover=auto] .cuboid{position:absolute;inset:0;font-size:max(1.5rem,min(6vw,2.5rem));font-weight:600;color:#f8f9fa}[popover=auto] .cuboid__side{display:grid;place-items:center}.cuboid{width:100%;height:100%;position:relative}.cuboid__side{background:var(--color);position:absolute;filter:brightness(var(--b))}.cuboid__side:nth-of-type(1){--b: 1.1;height:var(--depth, 20vmin);width:100%;top:0;transform:translateY(-50%) rotateX(90deg)}.cuboid__side:nth-of-type(2){--b: .9;height:100%;width:var(--depth, 20vmin);top:50%;right:0;transform:translate(50%,-50%) rotateY(90deg)}.cuboid__side:nth-of-type(3){--b: .5;width:100%;height:var(--depth, 20vmin);bottom:0;transform:translateY(50%) rotateX(90deg)}.cuboid__side:nth-of-type(6){--b: 1;height:100%;width:var(--depth, 20vmin);left:0;top:50%;transform:translate(-50%,-50%) rotateY(90deg)}.cuboid__side:nth-of-type(5){--b: .8;height:100%;width:100%;transform:translateZ(calc(var(--depth, 20vmin) * .5));top:0;left:0}.cuboid__side:nth-of-type(4){--b: 1.2;height:100%;width:100%;transform:translateZ(calc(var(--depth, 20vmin) * -.5)) rotateY(180deg);top:0;left:0}}@layer base{:where([popover]){margin:auto;border-width:initial;border-style:solid}body{margin:0;display:grid;place-items:center;min-height:100vh;overflow-x:hidden;overflow-y:auto}article{padding-bottom:1.25rem}h1{margin:0}article{margin:0 1.25rem;padding-bottom:1.25rem}article>p+p{margin-top:1.25rem}main>header{margin-bottom:1.25rem;max-width:100vw}main{max-width:60ch}header{min-height:20ch;background:var(--surface-2);display:grid;padding:1.25rem;place-items:center;width:100vw;position:relative;top:0;left:50%;margin-left:-50vw;min-height:50vmin;max-height:500px}h1{position:sticky;top:0}}@layer button{.fab svg{fill:#495057}}