@property --notch-press{syntax:"<number>";inherits:true;initial-value:0}.notch{--notch-fade:calc(var(--notch-press) * 100%);--notch-line:color-mix(in srgb, transparent var(--notch-fade), var(--color-outline));border-color:var(--notch-line);transition:--notch-press var(--motion-duration-press) var(--motion-easing-standard);box-shadow:-2px 0 0 0 var(--color-canvas), 2px 0 0 0 var(--color-canvas), 0 -2px 0 0 var(--color-canvas), 0 2px 0 0 var(--color-canvas), -2px -2px 0 0 var(--color-canvas), 2px -2px 0 0 var(--color-canvas), -2px 2px 0 0 var(--color-canvas), 2px 2px 0 0 var(--color-canvas)}.notch:before,.notch:after{content:"";width:calc(var(--radius-lg) + 1px);height:calc(var(--radius-lg) + 1px);pointer-events:none;background:radial-gradient(circle at 0 100%, transparent calc(var(--radius-lg) - 1px), var(--notch-line) calc(var(--radius-lg) - 1px), var(--notch-line) var(--radius-lg), var(--color-canvas) var(--radius-lg));position:absolute}.notch:before{top:-1px;right:calc(100% - 1px)}.notch:after{top:calc(100% - 1px);right:-1px}@media (prefers-reduced-motion:reduce){.notch{transition:none}}