@layer components{.panel-frame{--cut:12px;border:1px solid color-mix(in srgb, var(--color-panel) 97%, var(--color-foreground));background-color:var(--color-panel);position:relative;overflow:clip}}.panel-caption{color:#fff;text-transform:none;text-shadow:none;font-size:1.75rem;line-height:1.2}@supports (corner-shape:bevel){.panel-frame{border-radius:0 var(--cut);corner-shape:bevel}}@supports not (corner-shape:bevel){.panel-frame{clip-path:polygon(-1px -1px, calc(100% - var(--cut) - 1px) -1px, calc(100% + 1px) calc(var(--cut) + 1px), calc(100% + 1px) calc(100% + 1px), calc(var(--cut) + 1px) calc(100% + 1px), -1px calc(100% - var(--cut) - 1px))}.panel-frame:before,.panel-frame:after{content:"";width:calc(var(--cut) * 1.41421);pointer-events:none;z-index:1;position:absolute}.panel-frame:before{border-top:inherit;transform-origin:100% 0;transform:translateY(var(--cut)) rotate(45deg);top:-1px;right:-1px}.panel-frame:after{border-bottom:inherit;transform-origin:0 100%;transform:translateY(calc(-1 * var(--cut))) rotate(45deg);bottom:-1px;left:-1px}}