html,body,#root{margin:0;padding:0;scroll-behavior:smooth}.ribbon{font-size:20px;font-weight:700;color:#fff}.ribbon{--f: .5em;position:absolute;top:0;right:0;line-height:1.8;padding-inline:1lh;padding-bottom:var(--f);border-image:conic-gradient(#0008 0,#0008 0) 51%/var(--f);clip-path:polygon(100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)),0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));transform:translate(calc((1 - cos(45deg))*100%),-100%) rotate(45deg);transform-origin:0% 100%}