.frame{--m:18px;--lip:.08;--lipc:#2b2c2d;--lipsh:1;--paper:#F2EFE7;--line:#191C1A;position:relative;width:var(--w,600px);aspect-ratio:var(--ar,3/2);box-shadow:0 1px 2px rgba(0,0,0,.22),-3px 6px 10px -4px rgba(0,0,0,.22),-10px 26px 46px -18px rgba(0,0,0,.45)}.frame[data-light=left]{box-shadow:0 1px 2px rgba(0,0,0,.22),3px 6px 10px -4px rgba(0,0,0,.22),10px 26px 46px -18px rgba(0,0,0,.45)}.frame:before{content:"";position:absolute;inset:0;background:var(--tex-h) center/cover no-repeat;pointer-events:none}.frame.unframed:before{display:none}.frame .side{position:absolute;background-size:100% 100%;background-repeat:no-repeat}.frame .side:after,.frame .side:before{content:"";position:absolute;inset:0}.frame .t{top:0;clip-path:polygon(0 0,100% 0,calc(100% - var(--m)) 100%,var(--m) 100%)}.frame .b,.frame .t{left:0;width:100%;height:var(--m);background-image:var(--tex-h)}.frame .b{bottom:0;clip-path:polygon(var(--m) 0,calc(100% - var(--m)) 0,100% 100%,0 100%)}.frame .l{left:0;clip-path:polygon(0 0,100% var(--m),100% calc(100% - var(--m)),0 100%)}.frame .l,.frame .r{top:0;width:var(--m);height:100%;background-image:var(--tex-v)}.frame .r{right:0;clip-path:polygon(0 var(--m),100% 0,100% 100%,0 calc(100% - var(--m)))}.frame .t:after{background:linear-gradient(180deg,rgba(255,255,255,.13) 0,rgba(255,255,255,.06) 18%,transparent 60%,rgba(0,0,0,.1)),rgba(255,255,255,.04)}.frame .r:after{background:linear-gradient(270deg,rgba(255,255,255,.15) 0,rgba(255,255,255,.07) 18%,transparent 60%,rgba(0,0,0,.08)),rgba(255,255,255,.07)}.frame .l:after{background:linear-gradient(90deg,rgba(0,0,0,.24) 0,rgba(0,0,0,.05) 12%,transparent 60%,rgba(0,0,0,.12)),rgba(0,0,0,.08)}.frame .b:after{background:linear-gradient(0deg,rgba(0,0,0,.3) 0,rgba(0,0,0,.07) 12%,transparent 60%,rgba(0,0,0,.12)),rgba(0,0,0,.13)}.frame[data-light=left] .l:after{background:linear-gradient(90deg,rgba(255,255,255,.15) 0,rgba(255,255,255,.07) 18%,transparent 60%,rgba(0,0,0,.08)),rgba(255,255,255,.07)}.frame[data-light=left] .r:after{background:linear-gradient(270deg,rgba(0,0,0,.24) 0,rgba(0,0,0,.05) 12%,transparent 60%,rgba(0,0,0,.12)),rgba(0,0,0,.08)}.frame.metal .b:before,.frame.metal .t:before{background:linear-gradient(100deg,transparent 8%,rgba(255,244,214,.2) 30%,transparent 50%,transparent 66%,rgba(255,244,214,.13) 84%,transparent 98%);mix-blend-mode:screen}.frame.metal .l:before,.frame.metal .r:before{background:linear-gradient(190deg,transparent 6%,rgba(255,244,214,.18) 26%,transparent 48%,transparent 70%,rgba(255,244,214,.1) 88%,transparent);mix-blend-mode:screen}.frame .lip{position:absolute;inset:calc(var(--m)*(1 - var(--lip)));box-sizing:border-box;pointer-events:none;border:calc(var(--m)*var(--lip)) solid var(--lipc);border-color:color-mix(in srgb,var(--lipc),#000 calc(34% * var(--lipsh))) color-mix(in srgb,var(--lipc),#000 calc(26% * var(--lipsh))) color-mix(in srgb,var(--lipc),#fff 12%) color-mix(in srgb,var(--lipc),#fff 7%);box-shadow:0 0 calc(var(--m)*.05) rgba(0,0,0,calc(.3 * var(--lipsh))),inset 0 0 0 .5px rgba(0,0,0,calc(.14 * var(--lipsh)))}.frame[data-light=left] .lip{border-right-color:color-mix(in srgb,var(--lipc),#fff 7%);border-left-color:color-mix(in srgb,var(--lipc),#000 calc(26% * var(--lipsh)))}.frame .opening{inset:var(--m);background:var(--paper);overflow:hidden}.frame .ink,.frame .opening{position:absolute;transition:background-color .25s}.frame .ink{inset:0;background:var(--line);-webkit-mask:var(--art) center/contain no-repeat;mask:var(--art) center/contain no-repeat}.frame .opening:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 calc(var(--m)*.16) calc(var(--m)*.3) rgba(0,0,0,.28),inset calc(var(--m)*-.1) 0 calc(var(--m)*.26) rgba(0,0,0,.15),inset 0 -1px 2px rgba(0,0,0,.1)}.frame[data-light=left] .opening:after{box-shadow:inset 0 calc(var(--m)*.16) calc(var(--m)*.3) rgba(0,0,0,.28),inset calc(var(--m)*.1) 0 calc(var(--m)*.26) rgba(0,0,0,.15),inset 0 -1px 2px rgba(0,0,0,.1)}.frame .glass{position:absolute;inset:var(--m);pointer-events:none;mix-blend-mode:screen;opacity:var(--glass,1);transition:opacity .25s;background:linear-gradient(242deg,rgba(255,255,255,.1),rgba(255,255,255,.03) 28%,transparent 42%,transparent 62%,rgba(255,255,255,.06) 70%,transparent 80%)}.frame[data-light=left] .glass{background:linear-gradient(118deg,rgba(255,255,255,.1),rgba(255,255,255,.03) 28%,transparent 42%,transparent 62%,rgba(255,255,255,.06) 70%,transparent 80%)}.frame-container{width:100%;container-type:inline-size}.frame .paper-underlap{position:absolute;inset:calc(var(--m) - 2px);background:var(--paper);transition:background-color .25s;pointer-events:none}.frame .paper-underlap .ink{-webkit-mask-size:100% 100%;mask-size:100% 100%}.frame .lip{inset:calc(var(--m)*(1 - var(--lip)) - .5px);border-width:calc(var(--m)*var(--lip) + 1px)}.frame.unframed{box-shadow:none}.frame.unframed .glass,.frame.unframed .lip,.frame.unframed .side{display:none}.frame.unframed .opening{box-shadow:0 1px 2px rgba(0,0,0,.2),-4px 14px 28px -14px rgba(0,0,0,.4)}.frame.unframed .opening:after{box-shadow:none}