.recipeCoverMedia{border-radius:var(--radius-2xl);background:var(--muted);width:100%;height:clamp(240px,30vw,390px);min-height:0;position:relative;overflow:hidden}.recipeCoverMedia.heroPreview,.recipeCoverMedia.recipeHero{border-radius:var(--radius-2xl);height:clamp(240px,30vw,390px)}.recipeCoverMedia>img{object-fit:cover;width:100%;height:100%;display:block}.recipeMediaFallback{width:100%;height:100%;padding:var(--mise-space-5);background:color-mix(in oklch, var(--muted) 72%, var(--background));color:color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));flex-direction:column;justify-content:space-between;display:flex}.recipeMediaFallback span{border-radius:var(--radius-lg);background:color-mix(in oklch, var(--background) 82%, transparent);width:32px;height:32px;font-size:var(--mise-text-lead);place-items:center;font-weight:700;display:grid}.recipeMediaFallback b{letter-spacing:-.035em;max-width:16ch;font-size:clamp(24px,4vw,36px);font-weight:700;line-height:1.05}.recipeCoverActions{top:var(--mise-space-3);right:var(--mise-space-3);align-items:center;gap:var(--mise-space-2);display:flex;position:absolute}.recipeCoverActions [data-slot=button]{box-shadow:0 1px 3px color-mix(in oklch, var(--foreground) 10%, transparent);position:static!important}.recipeCoverMedia .recipeCoverActions .heroPreviewRemove{width:var(--mise-control-md);height:var(--mise-control-md);border-radius:var(--radius-lg);position:static;inset:auto}.recipeCoverActions .recipeCoverReplace{background:color-mix(in oklch, var(--background) 92%, transparent)}.recipeFocusBody{overflow:hidden}.recipeFocusCanvas{aspect-ratio:16/10;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--muted);cursor:crosshair;width:100%;padding:0;display:block;position:relative;overflow:hidden}.recipeFocusCanvas>img{object-fit:cover;width:100%;height:100%}.recipeFocusMarker{border:2px solid var(--background);background:var(--foreground);width:36px;height:36px;color:var(--background);pointer-events:none;border-radius:999px;place-items:center;display:grid;position:absolute;translate:-50% -50%}.recipeFocusMarker svg{width:18px;height:18px}@media (hover:hover) and (pointer:fine){.recipeCoverActions .recipeCoverReplace:hover{background:var(--background)}.recipeCoverActions .heroPreviewRemove:hover{background:color-mix(in oklch, var(--destructive) 22%, var(--background))}}@media (width<=760px){.recipeCoverMedia,.recipeCoverMedia.heroPreview,.recipeCoverMedia.recipeHero{border-radius:var(--radius-xl);height:clamp(210px,58vw,280px)}.recipeCoverActions{top:var(--mise-space-2);right:var(--mise-space-2)}}
